05 ноя 2014

Выполнение рекомендаций Google PageSpeed на WordPress

В поисковом ранжировании сайта не редко учитывается такой показатель как скорость загрузки сайта. Для проверки показателей и получения рекомендаций по их улучшению Google создал собственный инструмент и назвал его Page Speed. Этот сервис оценивает производительность сайта в баллах, где идеальный результат равен 100 баллам. Оценка производится как desktop-версии так и мобильной, где так же учитываются моменты связанные с юзабилити.

Глобально причины медленной загрузки страницы можно разделить на объективные: такие как скорость интернета и задержки внутри сети, скорость компьютера и браузера. На эти факторы, как владельцы сайта мы не способны повлиять. Но есть и причины, которые мы можем устранить, о них и пойдет речь далее.

Время ответа сервера

Ключевой параметр – время, за которое генерируется и отдается html-код страницы. Для улучшения этого показателя можно использовать полностраничное кэширование с помощью одного из следующих плагинов:

Далее в статье, чтобы не раздувать ее размер, мы будем давать рекомендации по работе с W3 Total Cache, но в целом принципы настройки обоих плагинов схожи.

Важно понимать, что когда страницы еще нет в кэше, на ее построение уходит больше времени (для создания кэшированной копии) и собственно первая загрузка страницы будет осуществляться дольше, чем без кэширования. Выходом из ситуации может послужить так называемая пред загрузка кэша (планировщик настраивается, например, для того чтобы проходится с заданным интервалом по карте сайта и таким образом генерировать страницы вместо того чтоб на них ходили пользователи).

Настройка полностраничного кэша W3 Total Cache

  1. Заходим в «General Settings»
    Настройка полностраничного кэша W3 Total Cache
  2. Вкладка «Page Cache» - включаем чек бокс Enabled
  3. «Page cache method» - выбираем метод кэширования. По умолчанию лучший вариант – Disk: Enhanced. Но если у вас выделенный сервер или VPS, можно попробовать другие варианты (но тут уже понадобится произвести дополнительные установки и настройки на сервере).
  4. Нажимаем кнопку «Save all settings»
  5. Переходим в левом меню в расширенные настройки «Page Cache», отмечаем «Cache front page», если хотим кэшировать главную страницу. Настраиваем автоматическую пред генерацию кэша (указываем путь к XML-карте сайта, если она у вас есть):
    Настройка полностраничного кэша W3 Total Cache
  6. Во вкладке General, указываем время жизни кэша (сколько страница будет актуальна перед ее перестроением, в секундах). Чем реже сайт меняется – тем больше значение нужно ставить (например, сутки: 86400):
    Настройка полностраничного кэша W3 Total Cache
  7. Так же на этой странице можно настроить многие другие параметры: какие страницы не кэшировать, время очистки кэша, настройки кэша для залогинненых пользователей и многие другие.
  8. Все готово – жмем «Save all settings».
  9. Для проверки правильности настройки – открываем в другом браузере (где не залогинены) или выходим из админ панели, обновляем страницу и смотрим в код страницы Ctrl+U, если все правильно настроено, получим следующий результат:

Наслаждаемся результатом, до:
Результат оптимизации
И после:
Результат оптимизации

Если полностраничное кэширование неприемлемо (если есть динамичные сквозные блоки, такие как корзина) или не дало ощутимого прироста (хостинг слишком слаб, либо подвержен большой нагрузке) – нужно задуматься над переездом на более производительный хостинг.

Кэш браузера и сжатие контента

Для того чтобы не грузить те или иные картинки, скрипты, при навигации по сайту, сервер может отдавать соответствующие заголовки для статического контента. Настроив время жизни кэша для разных типов файлов, мы позволим браузеру корректно хранить и отдавать такой контент.

Включив сжатие контента с помощью gzip, можно сэкономить до 70% от размеров передаваемых текстовых файлов (принцип работы в том, что веб-сервер сжимает файлы перед отправкой, а браузер уже распаковывает на стороне клиента).

Настройка кэша браузера W3 Total Cache

  1. Заходим в «General Settings» и включаем «Browser Cache»:
    Настройка кэша браузера W3 Total Cache
  2. Переходим в левом меню в продвинутые настройки и включаем отдачу заголовков Last-Modified и Expires, а также включаем GZip-сжатие:
    Настройка кэша браузера W3 Total Cache
  3. Настраиваем, если нужно, время кэша для разных типов статического контента
  4. Жмем «Save all settings» и готово.

Оптимизация изображений

Page Speed оценивает картинки на возможность без потери качества уменьшить размер. Так можно загрузить все приведенные в рекомендациях картинки на свой ПК и сохранить их с помощью утилит на подобии FastStone Image Viewer. Для изображений в формате JPEG обязательно используйте режим progressive.

Код JavaScript и CSS, блокирующий отображение

По умолчанию страница не отображается пользователю до тех пор, пока все блокирующие скрипты не загрузятся. В некоторых случаях блокирование оправданно, например, если мы не хотим чтобы посетитель видел сайт без стилей оформления, прежде чем они загрузятся. Но часто мы можем отсрочить загрузку тех или иных скриптов и грузить их уже в фоне, не потеряв при этом ничего.

Для передачи каждого файла с веб-сервера браузеру требуется время на установку/закрытие соединения. Для минимизации таких затрат часто практикуется объединение всех скриптов и стилей в консолидированные файлы. Важно – для корректной минификации всех скриптов и стилей они должны быть прописаны с помощью функций wp_enqueue_script и wp_enqueue_style, а не подключаться напрямую в файле header.

  1. Для активации минификации нужно зайти в «General Settings» и включить соответствующую функцию:
    Минификация
  2. Переходим в левом меню на вкладку «Minify» и включаем объедение файлов js и css. Для js-файлов так же можно выбрать не блокирующие аттрибуты "defer" и "async":
    Минификация
  3. Если какие то из скриптов нужно исключить из создаваемого общего файла, это так же не создаст проблем.
    Минификация
  4. В итоге если все сделано правильно в коде нашего сайта вместо множества подключений внешних файлов будут такие лаконичные записи:
    Результат минификации

Резюме

Процесс оптимизации сайта – как отдельная наука, где нужно проводить исследования и эксперименты. Иногда даже мелкая деталь способна в разы ускорить время загрузки страниц сайта, за что вам будут благодарны посетители и поисковые системы. Удачных опытов!

Руководитель отдела разработки

Подписаться на блог

Оставить свой комментарий

Задать вопрос Вверх