{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":42,"style":"BOLD"}],"text":"Когда ко мне пришла идея создания канала «YouGo в Яндекс.Дзен» – я решил, что буду выкладывать в Дзене полезную, но сжатую информацию, а на сайте развернутую и оптимизированную под поисковые системы.","type":"unstyled","key":"2qrqp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И к тому времени, как я его полностью сверстал – у меня появилась необходимость оптимизировать верстку для того, чтобы она стала максимально легкая и соответственно, – супер суперскоростная.","type":"blockquote","key":"f4pra"},{"data":{"image":{"id":"5c3f429def136b00a923def8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Удаление, оптимизация и gzip-сжатие лишнего CSS и JS-кода на сайте.","type":"atomic:image","key":"a5sud"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":236,"style":"UNDERLINE"}],"text":"К сожалению ни в Google, ни в Yandex я не нашел информацию о том, как удалить лишний CSS и JavaScript. Тогда я спросил у разработчиков на одном форуме и они мне подсказали о том, что подобного рода задачу можно решить с помощью консоли Google Chrome.","type":"unstyled","key":"drljg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":76,"style":"BOLD"}],"text":"Поэтому в этой статье, я хочу рассказать вам о том, как мне удалось удалить лишний CSS и JavaScript-код, а также о том, как его, сжать, потом еще раз сжать на сервере, оптимизировать и закэшировать.","type":"blockquote","key":"51slv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Ищем и удаляем лишний CSS и JS-код","type":"header-two","key":"e9fad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":35,"style":"BOLD"},{"length":3,"offset":59,"style":"BOLD"},{"length":4,"offset":70,"style":"UNDERLINE"},{"length":10,"offset":78,"style":"UNDERLINE"},{"length":8,"offset":92,"style":"UNDERLINE"}],"text":"Зайдите на свой сайт через браузер Google Chrome и нажмите F12, затем меню -> More tools -> Coverage.","type":"unstyled","key":"ecs8"},{"data":{"image":{"id":"5c3f45170a475a00ab214b89"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это консоль браузера Google Chrome.","type":"atomic:image","key":"emlo4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":63,"style":"BOLD"}],"text":"Затем, перед вами будет вот такая картина, где вам нужно будет выбрать 2-ой вариант для того, чтобы оптимизировать нужный файл на сайте:","type":"unstyled","key":"i5lc"},{"data":{"image":{"id":"5c3f46ed4c6e0800aa29c68f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Второй вариант обновит страницу для того, чтобы сбросить кэш.","type":"atomic:image","key":"ital"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":62,"offset":10,"style":"BOLD"}],"text":"Нажимаем: Click the reload button to reload and start capturing coverage и вы выбираем файл, из которого собираемся удалить все лишние.","type":"unstyled","key":"8pns0"},{"data":{"image":{"id":"5c3f4834f2b20900a9599127"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Консоль покажет все CSS и JavaScript-файлы ","type":"atomic:image","key":"71bad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":88,"style":"ITALIC"}],"text":"Выберите на абсолютно любой файл, который собираетесь оптимизировать и нажмите крестик (Close drawer).","type":"unstyled","key":"eec5c"},{"data":{"image":{"id":"5c3f4bb940e8e300aa0a7903"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь нужно нажать крестик для того, чтобы увидеть лишний CSS-код.","type":"atomic:image","key":"btvbg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обратите внимание, строчки кода, которые слева подсвечены красным – означают то, что данные классы не используется на странице, а те, что зеленым – означают, что используются.","type":"unstyled","key":"80u69"},{"data":{"image":{"id":"5c3f4d8232639b00ad03aaea"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Слева можно увидеть ненужные классы в консоле.","type":"atomic:image","key":"4oohb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Важно! Не удаляйте лишний CSS и JS-код прямо в самих файлах – это займет огромное количество времени.","type":"blockquote","key":"c8ka0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вместо этого – просто откройте блокнот и вставьте в него все, что подсвечено зеленым. Ну, а далее скопируйте все его содержимое и вставьте в нужный CSS или JS-файл.","type":"unstyled","key":"c5do3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Оптимизируем CSS и JavaScript-файлы","type":"header-two","key":"apkk9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В интернете имеется огромное количество веб-сервисов, с помощью которых можно решить данную задачу. Также есть куча инструментов на GitHub, но не все ими смогут воспользоваться т. к. нужно знать Node.js.","type":"unstyled","key":"2mt9k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но мы не будем на этом заморачиваться в то время, когда существуют следующие превосходные сервисы, решающие подобного рода задачи:","type":"unstyled","key":"83v08"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":13,"offset":0}],"inlineStyleRanges":[{"length":4,"offset":59,"style":"BOLD"},{"length":3,"offset":65,"style":"BOLD"},{"length":10,"offset":70,"style":"BOLD"},{"length":3,"offset":82,"style":"BOLD"},{"length":3,"offset":87,"style":"BOLD"}],"text":"FreeFormatter – выравнивает, оптимизирует, преобразовывает HTML, CSS, JavaScript, XML, SQL и многое другое.","type":"unordered-list-item","key":"bovsp"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":4,"offset":0}],"inlineStyleRanges":[{"length":7,"offset":29,"style":"BOLD"}],"text":"CSSO – сжимает и выравнивает CSS-код без потери валидации.","type":"unordered-list-item","key":"2lb29"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":20,"offset":0}],"inlineStyleRanges":[],"text":"JavaScriptCompressor – сжимает скрипты без потери валидации.","type":"unordered-list-item","key":"jqvm"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":13,"offset":0}],"inlineStyleRanges":[{"length":8,"offset":31,"style":"BOLD"}],"text":"HTML Minifier – просто сжимает HTML-код.","type":"unordered-list-item","key":"5bb65"},{"data":{"image":{"id":"5c3f5d87bf238900a9aaa45d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"21bjo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":31,"style":"UNDERLINE"},{"length":11,"offset":45,"style":"UNDERLINE"},{"length":9,"offset":139,"style":"BOLD"}],"text":"Ну, а далее можно еще включить кэширование и gzip-сжатие для наших CSS и JavaScript-файлов. Для этого просто вставьте следующий код в файл .htaccess, который обычно находиться в корневой директории сайта:","type":"unstyled","key":"51ic9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"8oinp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"4gehv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Header set Cache-Control \"max-age=43200\"","type":"blockquote","key":"ef597"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"7pv8p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"a7ru6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Header set Cache-Control \"max-age=604800\"","type":"blockquote","key":"1druu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"1u7a5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"biggg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Header set Cache-Control \"max-age=2592000\"","type":"blockquote","key":"2s63i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"dvlji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"f3d7m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Header unset Cache-Control","type":"blockquote","key":"3e5q9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"f6r1q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"7iuqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"4f373"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ExpiresActive On","type":"blockquote","key":"81u3u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ExpiresDefault \"access plus 5 seconds\"","type":"blockquote","key":"ak1cq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ExpiresByType image/x-icon \"access plus 1 month\"","type":"blockquote","key":"1b1of"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ExpiresByType image/jpeg \"access plus 4 weeks\"","type":"blockquote","key":"el9d5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ExpiresByType image/png \"access plus 30 days\"","type":"blockquote","key":"2gob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ExpiresByType image/gif \"access plus 43829 minutes\"","type":"blockquote","key":"4nctb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ExpiresByType application/x-shockwave-flash \"access plus 2592000 seconds\"","type":"blockquote","key":"9uo1b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ExpiresByType text/css \"access plus 604800 seconds\"","type":"blockquote","key":"33sqq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ExpiresByType text/javascript \"access plus 604800 seconds\"","type":"blockquote","key":"au9eg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ExpiresByType application/javascript \"access plus 604800 seconds\"","type":"blockquote","key":"7u58r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ExpiresByType application/x-javascript \"access plus 604800 seconds\"","type":"blockquote","key":"che9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ExpiresByType text/html \"access plus 43200 seconds\"","type":"blockquote","key":"bf1u6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ExpiresByType application/xhtml+xml \"access plus 600 seconds\"","type":"blockquote","key":"cri6s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"d31gf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":79,"style":"UNDERLINE"},{"length":10,"offset":164,"style":"BOLD"}],"text":"Вышеприведенным кодом мы закэшировали наш сайт, теперь давайте еще сожмем наши CSS и JavaScript-файлы с помощью следующего кода, который также нужно вставить в файл .htaccess:","type":"unstyled","key":"9o50s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"1qhuj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" AddOutputFilterByType DEFLATE text/html","type":"blockquote","key":"8gtfl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" AddOutputFilterByType DEFLATE application/javascript","type":"blockquote","key":"7g2f3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" AddOutputFilterByType DEFLATE text/javascript","type":"blockquote","key":"5h68p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" AddOutputFilterByType DEFLATE text/css","type":"blockquote","key":"4lgt2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"eg7in"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" BrowserMatch ^Mozilla/4 gzip-only-text/html","type":"blockquote","key":"fro8u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" BrowserMatch ^Mozilla/4\\.0[678] no-gzip","type":"blockquote","key":"bor0t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" BrowserMatch \\bMSIE !no-gzip !gzip-only-text/html","type":"blockquote","key":"8bei5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"675fg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"9rt36"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подведем итоги в заключение","type":"header-two","key":"5200b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ради эксперимента – проверьте сейчас свой сайт в PageSpeed и потом повторно после проведения всех вышеописанных процедур.","type":"unstyled","key":"7mlud"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":119,"style":"BOLD"}],"text":"Скорость сайта должна взлететь, но это еще не все – в следующей статье я расскажу вам про оптимизацию картинок, формат WebP и многое другое.","type":"unstyled","key":"ad90g"},{"data":{"image":{"id":"5c3f5cbca6047e00ac32fe17"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"b4fln"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"UNDERLINE"}],"text":"Обязательно подпишитесь на мой канал, чтобы не пропустить новые публикации. Также я советую вам посмотреть остальные мои статьи. Возможно, что в них вы найдете для себя уйму полезной информации.","type":"blockquote","key":"fu0q3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"4Fb7FfqeH2cs45CnJPWm"}],"entityMap":{"0":{"data":{"url":"https://www.freeformatter.com/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://css.github.io/csso/csso.html"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"http://javascriptcompressor.com/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"url":"https://www.willpeavy.com/minifier/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}