Ускоряем скорость загрузки сайта

Без всяких экспериментов ясно, что пользователь уйдет с сайта который тупит и загружается не достаточно быстро. Так что скорость загрузки сайта влияет на его ранжирование в поисковых системах. И об этом прямо говорит Гугл. Яндекс молчит, но я подозреваю что у него такая же позиция.

У Гугла есть замечательный инструмент проверки скорости закгрузки — PageSpeed Insights. С помощью которого можно проверить страницу, а так же получить рекомендации по оптимизации сайта.

Поделюсь опытом ускорения загрузку станиц на примере этого сайта.

Рекомендации которые я получил от PageSpeed Insights сводились к следующему:

1. Сократите HTML, CSS, JavaScript
2. Оптимизируйте изображения
3. Включите сжатие
4. Используйте кеш браузера
5. Удалите из верхней части страницы код 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 плагинов и компонентов в низ сайта, без правки кода не получиться.

Отсюда вывод: использовать специальные плагины для оптимизации, обзор которых в следующих постах.

Добавить комментарий