Лучший плагин кеширования WordPress — W3 Total Cache

Привет, друзья. Вчера совершенно случайно узнал, что Google выпустили плагин для WordPress, который реализует lazy-load загрузку изображений (но разговор не об этом, хотя про lazy-load я еще расскажу дальше). Я сразу установил этот плагин и решил посмотреть, как это влияет на оценку скорости в PageSpeed Insights, и обратил внимание на целую пачку замечаний и рекомендаций, из-за которых оценка скорости оставалась низкой (около 70).

С момента появления моего блога я использовал плагин кеширования WP Super Cache, который меня полностью устраивал…до вчерашнего дня. Не смотря на свою изначальную неповоротливость, WordPress начинает быстро работать после включения кеширования (это и решал плагин WP Super Cache), но со временем поисковики выдвигают все новые требования, и вот у меня появились следующие проблемы:

• Устраните ресурсы, блокирующие отображение,
• Используйте современные форматы изображений,
• Удалите неиспользуемый код CSS,
• Настройте показ всего текста во время загрузки веб-шрифтов,
• Минимизируйте работу в основном потоке,
• Сократите время выполнения кода JavaScript,
• Отложите загрузку скрытых изображений,
• Задайте правила эффективного использования кеша для статических объектов,
• Уменьшите размер кода CSS,
• Уменьшите размер кода JavaScript,
• Включите сжатие текста.

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

В процессе поиска я наткнулся на классную статью на Хабре, где ребята подробно разобрали вопрос оптимизации скорости загрузки сайта на WordPress, а главное, представили большую итоговую таблицу с оценками:

В поле Role указано, какой спектр задач покрывает плагин или связка для обеспечения качественного кеширования (Full – значит плагин умеет все, что касается кеширования):

• Server cache (кеш на стороне сервера):
  • Page load time (время загрузки страницы) – один из самых важных параметров. Чем меньше время, тем быстрее клиент получает ответ.
  • Caching method (способ хранения) – максимальное сохранение всех подготовленных объектов HTML, JS, CSS, желательно еще и в сжатом состоянии для экономии времени обработки на сервере и увеличения скорости выдачи результата.
• Client cache (кеш на стороне клиента):
  • Возможность управлять кешем браузера клиента. При его активации повторный запрос на сервер даже не придет, что благоприятно влияет на его производительность.
• Optimize (оптимизация):
  • Combine (слияние) – загрузка одного общего JS (или CSS) вместо нескольких.
  • Inline (включение) – содержимое CSS вставляется в HTML, что уменьшает число обращений к серверу.
  • Postpone (отложенная загрузка) – отложенная загрузка JS скриптов, не влияющих на начальное отображение страницы. Важнейшая метрика, влияющая на скорость загрузки страницы пользователю. JS лучше отложить, чем включать напрямую в HTML, т.к. это приведет к существенному увеличению объема HTML.
  • Minify (минификация) – в содержимом HTML, JS и CSS зачастую есть лишние части, такие как пробелы, переносы строк, комментарии. Их лучше убирать, чтобы еще больше снизить размер объектов.
  • Compress (сжатие) – сжатие данных алгоритмом GZip (Deflate) для уменьшения объема передаваемых данных. Т.к. HTML, JS и CSS, по сути, текстовые форматы, то они хорошо сжимаются.
• Manage (управление):
  • Refresh (обновление) – когда запрашиваемый объект изменился (например, добавилась новая статья), объект в кеше нужно пересоздать, иначе пользователям будет отправляться неактуальная информация. Хорошие плагины настроены на авто обновление кеша при наиболее очевидных событиях. И всегда должна быть возможность сбросить кеш целиком вручную.
  • Exclude (добавление исключений) – иногда нужно исключать некоторые объекты и страницы из кеширования для устранения проблем, необходимо управление этим.

По каждому из этих параметров плагины получали оценки.

В лидерах оказались не отдельные плагины, а связки из 2, 3 и даже 4 дополнений. Хоть я в этом и неплохо разбираюсь, но даже для меня это слишком – взять и с первого подхода все настроить корректно, чтобы получить нужный результат в виде повышения скорости, а не кучи проблем. Я выбрал для себя решение, чтоб «все в одном» и находящееся в топе рейтинга.

Этим решением оказался плагин W3 Total Cache. Я про него слышал ранее, и то, что плагин существует давно и до сих пор активно развивается – весомый аргумент. Очевидное преимущество W3 Total Cache против моего любимого WP Super Cache – он не только обеспечивает кэширование на стороне сервера, но оптимизирует ресурсы и кеширует на стороне клиента (браузера) – короче, это целый фреймворк.

Я решил попробовать: отключил старый плагин и активировал W3 Total Cache.

Настройка W3 Total Cache

Бывают простые и понятные плагины, которые позволяют в несколько кликов все настроить и забыть. Среди просмотренных мною в процессе поиска были и такие, но W3 Total Cache другой. Он не имеет привлекательного интерфейса и выглядит аскетично в духе старых версий WordPress, в нем хренова гора настроек, галочек, селектов – просто глаза разбегаются. Вот уж точно не разобраться с первого подхода, особенно, если вы не искушенный администратор. Но я уже принял вызов и был обязан его победить.

Именно по этой причине я решил подробно рассказать, как правильно настроить плагин W3 Total Cache для WordPress.

У W3 Total Cache существует PRO версия и премиум-поддержка, но сразу скажу, что нам это не пригодится – необходимый нам функционал доступен бесплатно. Настроить я вам его помогу, а красивые графики скорости загрузки вам вряд ли пригодятся в повседневной жизни.

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

Сразу рекомендую проверить совместимость плагина и настроек сервера «Compatibility Check» (слева вверху). Допустимо, если какие-то пункты там будут в статусе «Not installed», по этому поводу всегда можно написать хостеру и попросить установить/активировать расширения. Главное, чтобы зелеными были следующие пункты: zlib extension, Opcode cache, Memcached extension, Memcache extension, а также все пункты (кроме последнего) под заголовком WordPress Resources.

Теперь можно переходить непосредственно к настройкам.

General Settings (Основные настройки)

Ниже я буду упоминать только те настройки, которые надо изменить относительно стандартных.

• Page Cache: Enable
• Page Cache Method: Memcached
• Minify: Enable
• Minify mode: Auto
• Minify Cache Method: Memcached
• HTML minifier: Minify (default)
• JS minifier: JSMin (default)
• CSS minifier: Minify (default)
• Opcode Cache: Opcode: Zend Opcache
• Validate timestamps: Enable (активируется сами, при выборе предыдущего пункта)
• Database Cache: Enable
• Database Cache Method: Memcached
• Object Cache: Enable
• Object Cache Method: Memcached
• Browser Cache: Enable
• CDN: я не использую CDN, потому данные настройки не активировал. Но если вы будете использовать, ставьте галку «CDN: Enable» и «CDN Type: StackPath (recommended)»
• Fragment Cache Method: Memcached (хотя это не будет работать без PRO подписки).
• Здесь все, нажимайте «Save all settings».

Page Cache (Кеш страниц)

Ставим галки для следующих пунктов:

• Cache posts page
• Cache feeds: site, categories, tags, comments
• Cache SSL (HTTPS) requests
• Cache URIs with query string variables
• Cache 404 (not found) pages
• Don't cache pages for logged in users
• Memcached hostname:port / IP:port: будет заполнено по умолчанию «127.0.0.1:11211», ваша задача нажать на «Test» и на зеленом фоне увидеть «Test passed»
• Use persistent connection

Отдельно выделю пункт «Rejected user agents». Если вы используете какой-либо плагин, создающий мобильную версию сайта, надо заполнить это поле следующими юзерагентами, иначе у вас закешируется десктопная версия сайта и всем мобильным пользователям будет показываться именно она вместо мобильной:

iPhone
iPod
Android
BB10
BlackBerry
webOS
IEMobile/7.0
IEMobile/9.0
IEMobile/10.0
MSIE 10.0
iPad
PlayBook
Xoom
P160U
SCH-I800
Nexus 7
Touch

Но если у вас шаблон с адаптивной версткой, не заполняйте это поле.

Тут все, нажимайте «Save all settings».

Minify (Минификация HTML, CSS и JS)

Ставим галки для следующих пунктов:

• Rewrite URL structure
• HTML minify settings: Enable
  
• JS minify settings: Enable
  
  Обратите внимание! После минификации JS-скриптов может что-то сломаться (перестанет работать какая-то функция сайта, например, раскрываться меню, работать всплывающие лайтбоксы или еще что), поэтому после завершения всех настроек, обязательно пробегитесь по разным страницам сайта, нажмите все кнопки, отправьте формы, раскройте меню и т.д. Если что-то не работает, вместо Minify выберите Combine only и уберите галку Preserved comment removal.
• CSS minify settings: Enable
  
• Memcached hostname:port / IP:port: проверьте, появляется сообщение «Test passed» в зеленом поле.
• Use persistent connection – ставим галку
• Rejected user agents: данное после надо оставить пустым, даже если вы используете мобильную тему для сайта.
• Жмем «Save all settings» и переходим к следующему пункту.

Database Cache (Кеширование запросов к базе данных)

• Don't cache queries for logged in users – ставим галку
• Memcached hostname:port / IP:port: нажмите Test, чтобы получить « Test passed.» в зеленом поле.
• Use persistent connection – ставим галку
• Жмем «Save all settings»

Object Cache (Объектный кеш)

• Memcached hostname:port / IP:port: нажмите Test, чтобы получить « Test passed.» в зеленом поле.
• Use persistent connection – ставим галку
• Enable caching for wp-admin requests – ставим галку
• Store transients in database – ставим галку
• Жмем «Save all settings»

Browser Cache (Кеш браузера)

Ставим галки для следующих пунктов:

• Set Last-Modified header
• Set expires header ИЛИ Set cache control header – эти пункты нельзя включать одновременно, надо выбрать или первый, или второй. Особой разницы я не заметил в производительности, но все же при выборе Set cache control header сервисы проверки скорости дают чуть больше баллов :)
• Set entity tag (ETag)
• Set W3 Total Cache header
• Enable HTTP (gzip) compression
• Don't set cookies for static files
• Rewrite URL structure of objects

Ниже есть еще 3 блока настроек: CSS & JS, HTML & XML, Media & Other Files и Security Headers – первые три дублируют настройки из главного блока, а настройки безопасности и так в порядке. Так что нажимайте «Save all settings».

Разделы User Agent Groups, Referrer Groups, Cookie Groups можно пропустить, они не пригодятся.

Раздел CDN я не настраивал, потому что не пользуюсь, а если вы пользуетесь, скорее всего настройки по умолчанию будут оптимальными.

Раздел Fragment Cache тоже можно игнорировать, потому что он доступен только по подписке в PRO версии.

Последний раздел, который может нас заинтересовать – Extensions. Например, если вы используете плагин Yoast SEO, можно активировать расширение для совместимости с ним.

Очистить кеш WordPress

Теперь осталось последнее действие, чтобы настройки вступили в силу – удалить весь кеш WordPress вручную и создать новый с актуальными настройками. В верхней менюшке найдите пункт «Purge All Caches» (Очистить весь кеш).

После очистки кеша все статичные файлы, минификации, объединенные CSS и JS файлы будут удалены и вместо них созданы новые, согласно новым настройкам.

Плагин Native Lazyload от Google

С чего все началось-то – как раз с плагина для lazy-load технологии. Так как W3 Total Cache не имеет такой возможности, чтобы получить еще более высокую оценку, стоит установить плагин Native Lazyload от Google. Зайдите в админке в раздел плагинов, ищете по точному названию и жмите «Установить»:

У плагина даже нет меню настройки, его надо просто активировать, все начнет работать автоматически. Ко всем изображениям на сайте на лету будет добавляться атрибут loading="lazy". Как ни странно, но в Хроме проверить работу этого плагина не получится, там почему-то не работает эта функция, но можете запустить Firefox или даже EDGE, открыть страницу с большим числом картинок и быстро прокручивать, вы увидите, как изображения подгружаются по мере прокрутки.

Измерение скорости работы сайта

Теперь наша задача состоит в том, чтобы оценить результат наших стараний.

Проверка ответа сервера в Яндекс Вебмастере

Ссылка на инструмент: https://webmaster.yandex.ru/site/tools/server-response/.

У меня главная страница не такая большая, потому отвечает очень быстро – 52мс.

Для больших постов с картинками это время чуть больше, например, для страницы размером 170,54 КБ время ответа сервера составило 90 мс. Если у вас время около 100 мс +\-20%, считайте, что все отлично!

Google PageSpeed Insights

Ссылка на инструмент: https://developers.google.com/speed/pagespeed/insights/.

Собственно, инструмент, которым все измеряют свои писюны. Не дал мне 100 баллов, потому что у меня изображения большего размера, чем они вставлены на сайте (например, исходная картинка размером 500×500 пикселей, а на сайте она вставлена с параметрами width=”250” и height=”250”. Но я делаю это намеренно, чтобы на телефонах и ноутбуках с дисплеями HDPI 4k изображения выглядели качественными и четкими, а не размазанными, для меня это важнее, чем +1 балл в оценках от гугла!)

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

GTmetrix

Ссылка на инструмент: https://gtmetrix.com/.

Еще один популярный инструмент оценки скорости работы сайта.

Обратите внимание, что в пункте Serve scaled images мне занизили оценку до 11 (вместо 100) по аналогичной причине, что у меня размер изображения в оригинале больше, чем вставленное на сайте (в PageSpeed за это отняли 1 балл). Leverage browser caching понижен за отсутствие кеширования для внешних объектов – это тоже не исправить, потому что в эту категорию попадают все внешние скрипты, например, js-код Метрики и Google Analytics, скрипты соцсетей и прочее.

Так что сильно расстраиваться не стоит, если у вас не 100 баллов, но при этом при просмотре детального описания каждого пункта там только ресурсы, на которые мы повлиять не можем (внешние файлы).

DevTools – Audits – Chrome

Хотел завершить описание инструментов проверки скорости сайта на прошлом пункте, но вспомнил, что в Хроме есть встроенный инструмент оценки, основанный на Google PageSpeed Insights. Чтобы найти его, надо нажать на F12, откроется консоль DevTools, выбираем там последнюю вкладку Audits:

Перед началом аудита можно выбрать различные настройки, в том числе эмуляцию загрузки сайта через мобильные сети (типа он должен медленнее загружаться). Если выбрать эту эмуляцию, оценка Performance у меня 77, если не выбирать, то 100.

Думаю, на этом стоит завершить обзор инструментов и весь пост. Надеюсь, у вас получится все настроить и добиться отличного быстродействия своего сайта на WordPress благодаря плагину W3 Total Cache. А если что-то у вас не получится, пишите в комментариях, задавайте вопросы, я постараюсь вам помочь.

До связи, друзья.