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

W3 Total Cache - плагин кеширования WordPress

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

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

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

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

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

Плагин или связка плагинов	Role	ИТОГ	Server Cache	Client Cache	Optimize	Manage
LiteSpeed Cache + Hyper Cache Extended + Autoptimize + Speed Up – Browser Caching (Bundle)	Full	96%	98%	71%	100%	100%
Breeze	Full	93%	95%	71%	97%	75%
WordPress Cache and CDN Plugin + Autoptimize (Bundle)	Full	90%	98%	100%	83%	75%
Autoptimize + Cache Enabler + Speed Up – Browser Caching (Bundle)	Full	88%	98%	71%	83%	100%
W3 Total Cache	Full	84%	55%	100%	100%	100%
WordPress Cache and CDN Plugin	Full	82%	98%	100%	67%	75%
LiteSpeed Cache + WP Fastest Cache (Bundle)	Full	79%	50%	71%	100%	100%
WP Rocket	Full	76%	50%	71%	95%	100%
WP Speed of Light	Full	70%	50%	71%	83%	100%
Yasakani Cache	Full	64%	98%	0%	53%	75%
Hummingbird Page Speed Optimization	Optimize	53%	48%	71%	50%	100%
WP Fastest Cache	Full	52%	50%	71%	47%	100%
Cache Enabler	Server Cache	48%	95%	0%	20%	100%
LiteSpeed Cache	Optimize	47%	2%	71%	70%	100%
Autoptimize	Optimize	44%	2%	36%	73%	100%
Powered Cache	Full	44%	50%	71%	30%	100%
Hyper Cache	Server Cache	43%	95%	0%	10%	100%
Hyper Cache Extended	Server Cache	43%	95%	0%	10%	100%
Simple Cache	Server Cache	43%	95%	0%	10%	100%
Super Static Cache	Server Cache	43%	95%	0%	10%	100%
WP Super Cache	Server Cache	43%	95%	0%	10%	100%
Fast Velocity Minify	Optimize	36%	2%	0%	65%	100%
WP Performance Score Booster	Client cache	31%	23%	71%	30%	0%
Speed Booster Pack	Optimize	27%	0%	0%	52%	50%
Comet Cache	Full	27%	25%	0%	30%	100%
Speed Up – Browser Caching	Client cache	23%	0%	71%	30%	0%
Gator Cache	Server Cache	20%	48%	0%	0%	100%
Cachify	Full	16%	25%	0%	10%	50%
Cache-Control	Client cache	3%	0%	29%	0%	0%

В поле 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 (Основные настройки)

Небольшое отступление, которое повлияет на ваши дальнейшие настройки. Я буду рекомендовать выбрать метод кеширования Memcached, вместо Disk. Но есть несколько условий, когда это уместно и выгодно. Разница заключается в том, что при выборе Memcached кеш будет храниться в оперативной памяти сервера, а при Disk – на винчестере. Если у вас выделенный сервер, а на них обычно всегда много оперативки, Memcached оправдан, но, если у вас обычный шаред хостинг (образно говоря, недорогой тарифный план, где выделяется пара гигов оперативки), лучше выбирать Disk, иначе кеш забьет всю память. Если у вас SSD дисковая подсистема, то разницы между хранением на диске или в памяти вы не увидите (я экспериментировал). Итого: если у вас выделенный дорогой сервер – Memcached, если недорогой обычный хостинг – Disk.

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

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. А если что-то у вас не получится, пишите в комментариях, задавайте вопросы, я постараюсь вам помочь.

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

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