Ускоряем скорость загрузки сайта
Без всяких экспериментов ясно, что пользователь уйдет с сайта который тупит и загружается не достаточно быстро. Так что скорость загрузки сайта влияет на его ранжирование в поисковых системах. И об этом прямо говорит Гугл. Яндекс молчит, но я подозреваю что у него такая же позиция.
У Гугла есть замечательный инструмент проверки скорости закгрузки — PageSpeed Insights. С помощью которого можно проверить страницу, а так же получить рекомендации по оптимизации сайта.
Поделюсь опытом ускорения загрузку станиц на примере этого сайта.
Рекомендации которые я получил от PageSpeed Insights сводились к следующему:
- Сократите HTML, CSS, JavaScript
- Оптимизируйте изображения
- Включите сжатие
- Используйте кеш браузера
- Удалите из верхней части страницы код JavaScript и CSS
1. Сначала я оптимизировал все изображения. Начал с шаблона, а затем перешел к другим картинкам сайта.
2. Сжал код и оптимизировал HTML шаблона и пользовательские CSS и JavaScript.
3. Сжатие изначально было включено на сервере. На всякий случай я включил его в настройках Джумлы.
4. Перенес из head свои скрипты, и разместил их перед тегом </body>. Переносить в низ сайта, Файл со стилями (как было рекомендовано) не стал.
Так сайт не пройдет валидацию!
5. Включить кеш в файле .htaccess сразу не получилось. Дело в том что сервер nginx, (но может использовать связку apache+nginx). После обращения в тех.поддержку, мне предложили включить модуль и прописать .htaccess соответствующий код:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 7 days"
ExpiresByType application/x-shockwave-flash "access 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType text/x-javascript "access 1 year"
ExpiresByType text/html "access plus 7 day"
ExpiresByType text/css "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/x-icon "access 1 year"
</IfModule>
По итогам PageSpeed Insights, получил : 73 - для мобильных, и 89 - для компьютеров.
Некоторые замечания:
ХТМЛ код шаблона, Джумла самостоятельно восстанавливает. Поэтому в ручную сжимать его нет смысла.
Коды скриптов и CSS плагинов и компонентов, ручками теоретически сжать можно. Но при обновлении придется сжатие повторить.
Перенести JavaScrip плагинов и компонентов в низ сайта, без правки кода не получиться.
Отсюда вывод: использовать специальные плагины для оптимизации, обзор которых в следующих постах.
- Категория: Оптимизация
Сказать спасибо лучше кнопками:
