Когда ко мне пришла идея создания канала «YouGo в Яндекс.Дзен» – я решил, что буду выкладывать в Дзене полезную, но сжатую информацию, а на сайте развернутую и оптимизированную под поисковые системы.
И к тому времени, как я его полностью сверстал – у меня появилась необходимость оптимизировать верстку для того, чтобы она стала максимально легкая и соответственно, – супер суперскоростная.
К сожалению ни в Google, ни в Yandex я не нашел информацию о том, как удалить лишний CSS и JavaScript. Тогда я спросил у разработчиков на одном форуме и они мне подсказали о том, что подобного рода задачу можно решить с помощью консоли Google Chrome.
Поэтому в этой статье, я хочу рассказать вам о том, как мне удалось удалить лишний CSS и JavaScript-код, а также о том, как его, сжать, потом еще раз сжать на сервере, оптимизировать и закэшировать.
1. Ищем и удаляем лишний CSS и JS-код
Зайдите на свой сайт через браузер Google Chrome и нажмите F12, затем меню -> More tools -> Coverage.
Затем, перед вами будет вот такая картина, где вам нужно будет выбрать 2-ой вариант для того, чтобы оптимизировать нужный файл на сайте:
Нажимаем: Click the reload button to reload and start capturing coverage и вы выбираем файл, из которого собираемся удалить все лишние.
Выберите на абсолютно любой файл, который собираетесь оптимизировать и нажмите крестик (Close drawer).
Обратите внимание, строчки кода, которые слева подсвечены красным – означают то, что данные классы не используется на странице, а те, что зеленым – означают, что используются.
Важно! Не удаляйте лишний CSS и JS-код прямо в самих файлах – это займет огромное количество времени.
Вместо этого – просто откройте блокнот и вставьте в него все, что подсвечено зеленым. Ну, а далее скопируйте все его содержимое и вставьте в нужный CSS или JS-файл.
2. Оптимизируем CSS и JavaScript-файлы
В интернете имеется огромное количество веб-сервисов, с помощью которых можно решить данную задачу. Также есть куча инструментов на GitHub, но не все ими смогут воспользоваться т. к. нужно знать Node.js.
Но мы не будем на этом заморачиваться в то время, когда существуют следующие превосходные сервисы, решающие подобного рода задачи:
- FreeFormatter – выравнивает, оптимизирует, преобразовывает HTML, CSS, JavaScript, XML, SQL и многое другое.
- JavaScriptCompressor – сжимает скрипты без потери валидации.
Ну, а далее можно еще включить кэширование и gzip-сжатие для наших CSS и JavaScript-файлов. Для этого просто вставьте следующий код в файл .htaccess, который обычно находиться в корневой директории сайта:
<ifModule mod_headers.c>
<FilesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=43200"
</FilesMatch>
<FilesMatch "\.(js|css|txt)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
<FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>
</IfModule>
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 5 seconds"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType image/jpeg "access plus 4 weeks"
ExpiresByType image/png "access plus 30 days"
ExpiresByType image/gif "access plus 43829 minutes"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 43200 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
Вышеприведенным кодом мы закэшировали наш сайт, теперь давайте еще сожмем наши CSS и JavaScript-файлы с помощью следующего кода, который также нужно вставить в файл .htaccess:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/css
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>
</IfModule>
Подведем итоги в заключение
Ради эксперимента – проверьте сейчас свой сайт в PageSpeed и потом повторно после проведения всех вышеописанных процедур.
Скорость сайта должна взлететь, но это еще не все – в следующей статье я расскажу вам про оптимизацию картинок, формат WebP и многое другое.
Обязательно подпишитесь на мой канал, чтобы не пропустить новые публикации. Также я советую вам посмотреть остальные мои статьи. Возможно, что в них вы найдете для себя уйму полезной информации.
