Оптимизация сайта на WordPress - многофакторный процесс, требующий различных подходов к структуре сайта, контенту и построения html страницы. Все перечисленное влияет на оценку PageSpeed и скорость отклика. Рассмотрим эти подходы по порядку.
Оптимизация структуры сайта
Уменьшайте количество плагинов до абсолютно необходимого минимума. Многие плагины можно заменить своим кодом в конкретных случаях. Приходилось видеть сайты, на которых ради добавления одного кастомного типа постов использовался плагин, который тащил за собой стили и скрипты. Добавление пары функций в functions.php решало вопрос.
Подключайте плагины только там, где они нужны. Если у вас слайдер нужен только на главной, то зачем он утяжеляет другие страницы? Есть такой плагин под названием Plugin Organizer, с его помощью можно указать, какие плагины на каких группах страниц подключать. Спорное решение (+1 плагин), но если с его помощью можно выключить несколько плагинов, то почему нет?
Оптимизация контента
По практике улучшения оценок PageSpeed могу сказать, что наибольший эффект "по очкам" даёт оптимизация изображений. Как показало небольшое исследование, PageSpeed сейчас считает приемлемым сжатие в Photoshop для web с качеством 50%. Раньше было 60%.
Небольшое отступление. Чтобы избежать набега эстетов от дизайна, скажу сразу - меня не интересует, способны вы увидеть разницу между сжатым и несжатым изображением или нет. Меня в рамках данного вопроса интересует лишь оценка сайта от PageSpeed. Если вам не нравятся требования Google, пишите петиции туда, или не обращайте внимания на их оценки PageSpeed. Тут уж одно из двух.
Лучше, конечно, пережать все изображения из исходников. Но если это невозможно, то можно попытаться воспользоваться одним из плагином для WordPress. Если сайт расположен на своем виртуальном сервере, к котором есть доступ, то можно воспользоваться оптимизатором ImageMagick.
Наибольший эффект дает интеграция модуля PageSpeed от Google с веб-сервером Apache или nginx. Модуль обладает рядом неоспоримых преимуществ:
Разработан Google специально для соответствия требованиям PageSpeed Insights
Работает на сервере, как дополнительный модуль веб-сервера Apache или nginx
Не является плагином WordPress или отдельной подсистемой, а встроен в веб-сервер, что обеспечивает максимальную скорость отдачи страниц
Производит анализ, сжатие и собственное кеширование страниц, стилей, скриптов и изображений на лету
Модуль PageSpeed может быть динамически подключен к Apache, но не входит в состав собранных версий nginx. Для подключения модуля PageSpeed к nginx приходится проводить перекомпиляцию nginx из исходников.
Установка и настройка модуля PageSpeed на виртуальном сервере - это отдельная тема, требующая своего детального изложения.
Оптимизация построения и выдачи страницы
Многие проблемы, указываемые в оценке PageSpeed, могут быть решены с помощью модуля PageSpeed в автоматическом режиме. Это сжатие картинок, сжатие и объединение скриптов и стилей.
Если модуль установить не удается, то для сжатия и объединения скриптов и стилей очень хорош плагин AutOptimize. Настоятельно рекомендую его к применению. Он позволит заметно поднять оценку PageSpeed.
Общее сжатие html нужно включить либо плагином кэширования WordPress, например, WP Super Cache, либо в настройках веб-сервера.
Также в настройках веб-сервера надо указать время жизни статики (css, js, изображений).
Но дальше начинаются проблемы совсем иного порядка.
Особую сложность представляет реализация требований pagespeed убрать блокирующие скрипты и стили из заголовка страницы в подвал. Просто так этого не сделать – все это не случайно выводится в заголовке, при банальном перемещении в подвал функционал перестаёт работать. Здесь нет общих решений, и каждый скрипт или файл стилей нужно настраивать отдельно.
Например, перенос запуска скрипта карт Google в подвал сразу привёл к тому, что в консоли браузера появилась ошибка, а карты перестали отображаться. Приходится модифицировать javascript в шаблонах страниц, использующих карты, чтобы «подождать» полной загрузки страницы и только после этого запускать скрипт карт.
Кстати, поскольку операция вывода карт весьма затратна по времени, то такая «асинхронность» резко увеличивает скорость отклика, что видно по тестам Pingdom.
Следующий вызов – Google Analytics. PageSpeed требует использовать кэш браузера для своего же ресурса http://maps.googleapis.com/maps/api/js. Время кэширования этого скрипта – всего 2 часа. Забавно, да, потому что наш сервер никакими усилиями этого сделать не может. Время жизни ресурса устанавливает его «хозяин» (сервер, который отдаёт этот ресурс). Приходится делать следующее в коде на сайте:
сохранить локальную копию скрипта Google Analytics
для подключения аналитики вызывать локальную копию с временем кэширования 1 год
настроить wp-cron, который раз в день обновляет локальную копию скрипта
Аналогичные действия придется проделать с
- Яндекс-метрикой
- скриптом карт гугл
С невидимой рекапчей Google такой трюк не прошел, причина неизвестна. В коде скрипта рекапчи прямо написано: не копируйте этот код никуда. Видимо, что-то за этим стоит.
Та же проблема со скриптом пикселя facebook. Не работает с нашего сервера.
Каждый такой шаг требует дополнительных трудозатрат – нет стандартного подхода.
Как перевести вывод стилей и скриптов плагинов в подвал
В общем случае надо искать подключение такого стиля/скрипта в коде плагина.
Для скрипта, выполнять в своем хуке wp_enqueue_script
вызов wp_dequeue_script()
с тем же handle, что указан в плагине, и подключать его снова через wp_enqueue_script
, указывая true как последний, пятый параметр (in_footer
).
Для стиля - несколько иначе. Надо выполнять в своем хуке wp_enqueue_script
вызов wp_dequeue_style()
с тем же handle, что указан в плагине. Но в вызове wp_enqueue_style()
невозможно указать, чтобы стиль был запущен в подвале. Надо запустить этот стиль снова через wp_enqueue_style()
в хуке wp_footer
, и тогда он будет помещен в подвал.
Так выглядит в самом кратком изложении работа по оптимизации оценки PageSpeed.
UPDATE
Результат оптимизации реального сайта на WordPress, с массой плагинов и тяжелой темой. Сделано с помощью nginx+PageSpeed, плюс некоторые из перечисленных выше мер кодом на сайте WordPress.