Techbear
Сайт для тех, кто хочет использовать Вордпресс по максимуму, но не хочет разбираться в коде.
Чтобы поисковики выдавали сайт на первой странице поисковой выдачи, то, кроме хорошего контента, нужно, чтобы страницы сайта открывались за 2 секунды или быстрее.
Для этого нужен хороший хостинг, хороший софт, технический порядок на сайте и оптимизированные картинки. Все остальное сделает плагин кеширования.
Если вы выполните эти условия и установите бесплатный плагин кеширования, то получите 60-80 баллов по тесту Гугл для мобильной версии, и 80-90 баллов для десктопной версии.
Проблема с бесплатными плагинами в том, что они не кешируют мобильную версию, и не откладывают загрузку скриптов.
Поэтому вам понадобится либо платный плагин, либо один или несколько бесплатных плагинов, от которых может быть больше проблем, чем пользы.
WP Rocket — платный плагин, у него 3 больших плюса:
Если вы выполните эти несколько требований и установите плагин WP Rocket, вы можете получить 98-100 баллов по тесту Гугл для мобильной и десктопной версий сайта.
Содержание:
Быстрый старт
Настройка WP Rocket
Поисковики требуют, чтобы страницы открывались за 2 секунды и быстрее, и получали высокие оценки в тестах скорости:
Google PageSpeed Insights — https://pagespeed.web.dev/
Pingdom Website Speed Test — https://tools.pingdom.com/
GTmetrix — https://gtmetrix.com/
WebPageTest — https://www.webpagetest.org/
IsItWP — https://www.isitwp.com/free-website-speed-test-tool-for-wordpress/
Протестируйте ваш сайт, чтобы сравнить изменения до и после использования WP Rocket.
Любой плагин кеширования не является решением всех проблем.
До установки плагина кеширования ваш сайт должен получать около 60 баллов для мобильной версии, и около 80 баллов для десктопной версии.
Чтобы получить 60-80 баллов без плагина кеширования, у вас должны быть:
Рекомендации Google PageSpeed Insights должны быть о файлах CSS, неиспользуемых стилях, тормозящих загрузку скриптах (render-blocking resources), шрифтах и картинках.
После установки WP Rocket автоматически применит несколько безопасных настроек, которые должны работать на большинстве сайтов.
К ним можно добавить еще несколько, чтобы сайт загружался еще быстрее.
Пройдите по этим быстрым настройкам, у вас должно получиться 85+ баллов по тесту Google.
С хорошим хостингом, хорошей темой, оптимизированными изображениями и этими настройками вы легко получите 98-100 баллов:
Настройка WP Rocket по этому чек-листу занимает 10 минут. Расставьте галочки, нажмите Сохранить, и вы получите высокую оценку в любом тесте скорости.
Это самый простой и самый эффективный плагин кеширования.
Лучший плагин кеширования для любого сайта
В этом разделе подробное описание всех настроек WP Rocket:
В Панели управления WP Rocket находится информация о типе лицензии и сроке ее действия.
Я пробовал несколько плагинов кеширования, ни один из них не давал такого хорошего результата с таким минимальным количеством усилий, как WP Rocket.
Плагин WP Rocket стал обязательным плагином при создании каждого сайта, как, например, плагины для SEO, безопасности и оптимизации.
Здесь вы можете подключить RocketCDN — собственный CDN-сервис WP Rocket за отдельную плату.
Кроме RocketCDN вы можете подключить другие сервисы CDN, в том числе платный или бесплатный CloudFlare.
Все обязательные типы кеширования, такие как кеширование в браузере, GZIP, базы данных и так далее, включены и настроены (сравните с настройкой кеширования в W3 Total Cache).
Вам остается сделать 4 настройки:
Включить кэширование для мобильных устройств — Включить. Эта настройка включает кеширование для посетителей с мобильных устройств. «Мобильными устройствами» WP Rocket считает только телефоны / смартфоны.
Разделять файлы для мобильных устройств — Включить или Выключить, в зависимости от вашей темы. В документации плагина сказано, что эту настройку нужно включать только если у вас специальная тема или плагин для мобильной версии (скорее всего, у вас нет такой темы или плагина).
Если у вас активирована такая тема или плагин, WP Rocket автоматически включит эту функцию, и сделает ее серой, то есть недоступной для изменения.
Когда эта настройка включена, WP Rocket обслуживает посетителей на мобильных устройствах отдельным кэшем, не тем, которым обслуживает посетителей с планшетов и компьютеров.
Хотя в документации сказано, что для обычных Вордпресс тем эту настройку нужно держать выключенной, у меня на темах Blocksy и Kadence с этой настройкой мобильные страницы получают на 10-15 баллов больше, чем без нее.
Попробуйте протестировать страницы с включенной и выключенной опцией, оставьте лучший вариант.
Кэшировать авторизированных посетителей — Выключить. Эта настройка создает отдельный кэш для авторизованных посетителей. Хотя эта настройка нужна для того, чтобы создавать отдельный кэш для авторизованных посетителей, с ней могут быть проблемы.
Если у вас мембершип, интернет-магазин или другой тип сайта с Личным Кабинетом, то посетители могут видеть кешированный контент друг друга при авторизации на сайте, в закрытых частях сайта, в Корзине, на странице Оформления заказа или в админке.
Если ваши посетители жалуются на эти страницы, отключите кэширование авторизованных пользователей.
Время жизни кэша — 10 часов. Здесь указывается время жизни кэша, через которое он становится устаревшим и сбрасывается. Если у вас включена «Предзагрузка» (включена по умолчанию), то после очистки устаревшего кэша будет создаваться новый, ничего делать не надо.
В этом разделе находятся настройки для файлов CSS и JS. Если после применения настроек вы видите проблемы на сайте, то отключайте настройки по одной, чтобы найти причину.
Сжимать стили CSS и Сжатие JavaScript файлов — Включить. Эти настройки убирают комментарии, пробелы, пустые строки и другую ненужную информацию из кода в CSS и JS файлах.
Это безопасная настройка и не должна сломать сайт.
Перед включением этой опции вы увидите такое предупреждение:
Нажмите Включить сжатие CSS. Сохраните изменения и проверьте, что сайт выглядит без ошибок.
После того, как вы включите минификацию CSS и JS, появятся следующие настройки:
Объединять CSS файлы и Объединять JavaScript файлы — Выключить.
Смысл этих настроек в том, чтобы объединить несколько CSS и несколько JS файлов в один CSS файл и один JS файл, которые скачаются 2-мя запросами вместо 20-ти. Это сэкономит время на генерацию большого количества запросов и ускорит загрузку страницы.
Это хорошая идея, но на практике объединение файлов чаще ломает сайт, чем работает как нужно, потому что скрипты не всегда загружаются в правильном порядке.
Кроме этого, с появлением HTTP/2 этот подход потерял смысл, потому что в этой версии протокола все запросы и скачивания происходят параллельно, в отличие от версии 1.1, где запросы происходили последовательно.
Проверьте, что ваш хостинг поддерживает HTTP/2 (скорее всего, поддерживает), и оставьте эти настройки выключенными.
Это самая проблемная настройка, к тому же она не имеет смысла с HTTP/2.
Исключить CSS файлы и Исключаемые JavaScript файлы — если минификация или объединение файлов вызывает проблемы, в этих полях вы можете указать, какие файлы нужно исключить из минификации или объединения.
Оптимизация доставки CSS — Включить. Эта настройка находит минимально необходимые стили CSS для отображения страниц сайта, и помогает решить предупреждение Google PageSpeed “Eliminate render-blocking resources”.
После того, как вы включите эту настройку, вам нужно выбрать одну из двух опций: «Убрать неиспользуемые CSS» или «Загружать CSS асинхронно«.
Рекомендуется включить «Убрать неиспользуемые CSS«, это решит предупреждение Google PageSpeed “Remove unused CSS”.
Эта опция уберет неиспользуемый CSS со страниц сайта, поэтому пройдите по страницам, проверьте, что все отображается правильно.
Если вы увидели, что какие-то элементы на страницах отображаются неправильно, добавьте эти правила в исключения в поле «Безопасный список CSS«.
Если добавление стилей в список исключений не помогает, то используйте вариант «Загружать CSS асинхронно«. Это более безопасный вариант.
Эта настройка определит минимально необходимые стили для корректного отображения страниц, а все остальные стили отложит на момент после загрузки основного контента.
Асинхронная загрузка JavaScript — Включить. Эта настройка аналогична предыдущей, но с JS. Она переносит загрузку скриптов в футер, и помогает решить рекомендацию Google PageSpeed “Eliminate render-blocking resources”.
Обычно *.js — тяжелые файлы, требующие ресурсов сервера на свою обработку, поэтому их откладывание заметно уменьшает параметры First Input Delay и Total Blocking Time в Core Web Vitals.
Примеры таких скриптов — Google и Яндекс аналитика, Google и Яндекс реклама, онлайн чат, Facebook и VK Pixel, Граватар, YouTube и VK видео, кнопки соцсетей, и так далее.
Если после переноса в футер какой-то скрипт вызывает проблемы, его можно добавить в исключения в поле Исключаемые JavaScript файлы.
Отложить загрузку JavaScript — Включить. Эта настройка откладывает загрузку JS файлов и скриптов на странице до тех пор, пока пользователь не произведет одно из этих действий: движение мышкой, касание пальцем экрана, скролл, прокрутка колесиком или нажатие кнопки.
С помощью этой настройки вы улучшите параметры First Input Delay и Largest Contentful Paint в тесте Core Web Vitals. Кроме них вы решите эти рекомендации Гугл:
Если вы включите эту настройку вместе с Объединять JavaScript файлы, то объединение js файлов автоматически отключится, чтобы скрипты загружались в правильном порядке и не сломали сайт.
На этой странице вы включите LazyLoad для картинок, iframes и YouTube видео. Эти настройки сильно уменьшают время загрузки страниц и снижают нагрузку на сервер.
LazyLoad (Ленивая загрузка) — это технология, которая откладывает загрузку картинок, айФреймов и видео до тех пор, пока посетитель не проскроллит до них вниз по странице, и они не окажутся на экране пользователя.
Отметьте все 3 чекбокса:
В Вордпресс версии 5.5 появилась собственная поддержка LazyLoad. Эта поддержка в Вордпресс будет автоматически отключена, когда активен LazyLoad в этих настройках WP Rocket, поэтому ничего делать не нужно.
Использование LazyLoad сокращает время загрузки страниц, уменьшает количество запросов при первоначальной загрузке страницы и экономит ресурсы сервера, потому что изображения запрашиваются и загружаются только когда пользователь прокручивает до них.
В тесте скорости Google эти настройки снимают замечание Отложите загрузку скрытых изображений.
Настройка Заменять видео YouTube превью картинкой значительно уменьшает время загрузки страницы, если вы вставляете видео с YouTube на сайт.
Настройка Добавить отсутствующие параметры добавляет отсутствующие параметры ширины и высоты изображений (если их нет), и решает замечание Для изображений не заданы явным образом атрибуты width
и height
в тесте скорости Google.
В свою очередь, это уменьшает параметр Cumulative Layout Shift (CLS), то есть Общий сдвиг разметки.
Когда страница загружается, если для изображения явно не указаны ширина и высота, то для этого изображения не будет зарезервировано места, из-за чего остальной контент под изображением сместится. Когда изображение загрузится, контент на странице перестроится и встанет на свое место.
Такие скачки не нравятся посетителям и увеличивают оценку Cumulative Layout Shift (CLS).
Когда вы включаете настройку Добавить отсутствующие параметры, WP Rocket проходит по странице и оставляет нужное место для последующей загрузки картинок.
Предзагрузка — это технология, которая сообщает браузеру посетителя, что какой-то контент еще понадобится при загрузке следующих страниц.
Этот контент будет храниться в браузере пользователя и будет использован локально вместе того, чтобы скачивать его еще раз.
Это уменьшит время загрузки страниц и решит некоторые предложения Google PageSpeed Insights по предзагрузке.
Это может быть фавикон, логотип, шапка сайта, некоторые шрифты, и так далее.
Отметьте все чекбоксы в разделе Предзагрузка кэша:
Добавьте адрес карты сайта в разделе Карта сайта для предзагрузки.
Настройка Включить предзагрузку ссылок начинает скачивать страницу, когда посетитель наводит мышку (или нажимает пальцем) на ссылку более, чем на 100 мс.
Это увеличит кажущуюся скорость сайта для посетителя, но никак не отразится на показателях Google PageSpeed Insights.
Оптимизация DNS запросов. Если вы используете сторонний контент, который загружается с других сайтов (например, Google Fonts, Google Analytics, Яндекс.Метрика, AdSense, Google Tag Manager, YouTube, Граватары и так далее), то вы можете добавить их адреса в поле URL для кэширования.
Эта настройка говорит браузеру посетителя создать DNS подключение к нужным файлам до того, как эти файлы понадобятся. Это немного увеличивает скорость загрузки страницы.
Чтобы добавить нужный ресурс в поле URL для кэширования оставьте только домен верхнего уровня после 2х слешей. То есть, если вы хотите добавить такой запрос к шрифтам Гугл:
https://fonts.googleapis.com/css?family=Roboto:900%2C400%2C500%2C300%7CRaleway:700%2C300%7COpen+Sans:300%2C800
То оставьте только это:
//fonts.googleapis.com
Предзагрузка шрифтов. Обычно шрифты указываются в файлах css, поэтому загружаются позже при загрузке страниц.
Эта функция говорит браузеру посетителя начинать скачивать шрифты, не дожидаясь загрузки css.
Чтобы улучшить показатель Largest Contentful Paint в Core Web Vitals, функционал предзагрузки шрифтов автоматически отключается на тех страницах, где включена функция Оптимизация доставки CSS.
В тесте скорости Google PageSpeed Insights вы можете увидеть замечание Настройте предварительную загрузку ключевых запросов.
Если вы откроете это замечание, вы должны увидеть какой-нибудь шрифт, который нужно загружать сразу при загрузке страницы. Это выглядит примерно так: “…fonts/custom-font.woff2“.
Добавляйте сюда шрифты только если они хранятся на вашем сервере, или на вашем CDN.
Не добавляйте шрифты, которые загружаются со внешних источников, например Google Fonts. Начиная с версии WP Rocket 3.7 шрифты Гугл оптимизируются автоматически, ничего не нужно делать.
То есть, если вы пользуетесь только шрифтами Гугл (которые не хранятся локально) или системными шрифтами, то в этом разделе ничего не нужно делать.
Также не добавляйте все шрифты в это поле. Добавляйте только те, которые замедляют загрузку страниц.
Если вы будете предзагружать все шрифты, это может начать замедлять сайт.
Если вы используете плагин интернет-магазина, который не поддерживается WP Rocket, используйте этот раздел, чтобы добавить нужные страницы сайта в исключения, которые не надо кешировать.
Если вы используете популярные плагины интернет-магазина, то WP Rocket уже совместим с ними.
WP Rocket автоматически исключает страницы Корзина, Оформление заказа и Мой Аккаунт из кеширования для этих плагинов:
Если вы используете один из этих плагинов, то в этих настройках вам ничего не нужно делать, все уже настроено по умолчанию.
Некэшируемые URL — Здесь вы можете указать URL страниц, которые никогда не должны кешироваться (по одному URL в строку). Некоторые страницы, например, кастомные страницы авторизации или выхода с сайта, не должны кешироваться. Если вы используете какой-то плагин интернет-магазина, который не поддерживается WP Rocket, добавьте URL нужных страниц в это поле.
Некэшируемые Cookies — эта настройка не будет кешировать страницы в зависимости от присутствия определенных кукис. Эта настройка похожа на предыдущую, только использует кукис вместо URL. Вы можете указать весь или часть ID кукис в этом поле (по одному ID в строке).
Некэшируемые User-Agents — Эта настройка используется для того, чтобы обслуживать посетителей некешированным контентом, когда они заходят с определенных устройств или с определенных браузеров. Добавьте юзер-агенты по одному в строке.
Всегда очищаемые страницы — когда вы обновляете страницу на сайте, WP Rocket очищает кеш этой страницы, кеш главной страницы и кеш связанного с этой страницей контента. Если вы хотите, чтобы кеш определенной страницы всегда сбрасывался, добавьте URL этих страниц по одной в строке.
Кэшируемые запросы — Кэширование запросов ускоряет работу GET параметров. Используется в редких случаях.
В этом разделе вы можете настроить автоматическую очистку базы данных по расписанию.
Это оптимизирует работу сайта и уменьшает объем базы данных.
Включите все настройки, кроме настроек Ревизии и Авто-черновики. Эти настройки включите или выключите в зависимости от вашего сайта.
После того, как вы запустите очистку базы данных, удаленные данные невозможно восстановить. Поэтому перед очисткой базы данных, особенно если вы удаляете Ревизии, убедитесь, что у вас есть бэкап.
CDN — это сеть доставки контента, которая состоит из серверов в разных местах мира. На этих серверах хранятся копии файлов, которые используются для построения страниц сайта.
Когда посетители сайта загружают страницы, они получают контент с ближайшего сервера.
Если большинство посетителей вашего сайта находятся на том же континенте, что и ваш сервер, то вам может быть не нужен CDN, потому что это может замедлять загрузку страниц из-за добавления еще одного узла, через который проходит трафик.
Если ваши посетители приходят с разных континентов, то CDN может быть вам полезен.
На этой странице настроек вы можете подключить сеть CDN.
Пульсация Вордпресс — это технология, которая обеспечивает соединение для передачи данных в режиме реального времени и синхронизации между сервером и браузером.
Примеры использования Пульсации:
Пульсация запускает определенный список задач каждые 15-60 секунд, что потребляет ресурсы сервера и может вызвать высокую загрузку процессора.
Этот функционал позволяет уменьшить частоту или отключить выполнение этих заданий, чтобы сэкономить ресурсы сервера.
Лучшая настройка — Уменьшить активность, — потому что некоторые плагины и темы используют Пульсацию. Если ее отключить, то эти плагины или темы могут работать неправильно.
Если вы точно знаете, что вам не нужно использование Пульсации, то можете ее отключить полностью, но в большинстве случаев достаточно просто уменьшить активность.
В версии WP Rocket 3.9 в этом разделе убрали дополнения “Google Tracking” и “Facebook Pixel”.
Оба дополнения использовались, чтобы помочь исправить рекомендацию Google “leverage browser caching”, если вы использовали Google Analytics или Facebook Pixel на сайте.
Вместо этого загрузка всех JavaScript теперь откладывается до первого взаимодействия с пользователем.
В версии 3.12 находятся такие дополнения:
Если ваш сайт находится на хостингах Cloudways, WP Engine или Flywheel, то ваш сайт будет использовать Varnish для кеширования на стороне сервера.
WP Rocket автоматически определит это окружение и включит дополнение Varnish.
Если ваш сайт находится на хостингах SIteGround, Kinsta или Pressable, то вам не нужно включать эту опцию, потому что кэш WP Rocket уже синхронизирован с их кэшем на сервере.
Здесь вы можете подключить аккаунт Cloudflare для работы с WP Rocket.
Обратите внимание: Вам не нужно использовать это дополнение, чтобы сайт работал через Cloudflare, он и так будет работать через Cloudflare.
Если ваш сайт уже работает через Cloudflare, то он продолжит работать через него независимо от того, включено это дополнение или нет.
Это дополнение добавляет некоторый функционал Cloudflare в админку Вордпресс / WP Rocket.
Шаг 1 — Включите дополнение Cloudflare и нажмите кнопку Настройка:
Шаг 2 — Скопируйте Global API Key в настройках Cloudflare и вставьте в WP Rocket
Шаг 3 — Заполните поле E-mail в настройках WP Rocket. Это е-мейл, на который зарегистрирован аккаунт Cloudflare.
Шаг 4 — Скопируйте Zone ID в настройках Cloudflare и вставьте в поле ID Зоны в настройках WP Rocket.
Шаг 5 — В настройках WP Rocket в разделе Cloudflare настройки включите Оптимальные настройки и Относительный протокол.
Режим разработчика оставьте выключенным.
Шаг 6 — Нажмите Сохранить изменения.
Если вы хотите использовать Cloudflare APO, то отключите это дополнение и используйте официальный плагин Cloudflare.
Если вы используете Sucuri Website Firewall (WAF) и используете их кеш, то вы можете включить эту настройку.
Каждый раз, когда кеш WP Rocket будет очищаться, также будет автоматически очищаться кеш Sucuri.
Скопируйте API ключ из админки Sucuri или из настроек плагина, и вставьте в WP Rocket.
Нажмите Сохранить изменения.
WP Rocket рекомендует использовать свой собственный плагин Imagify для оптимизации изображений.
Хотя это официальный и наиболее совместимый плагин, его оптимизация «на лету» занимает довольно долгое время.
Вы можете попробовать этот плагин, или попробуйте его альтернативу — плагин ShortPixel. Этот плагин делает компрессию на лету и конвертирует изображения в формат WebP, или в еще более новый формат AVIF, который сжимает изображения еще сильнее и с более высоким качеством, чем WebP.
В этом разделе находится экспорт и импорт настроек и возможность откатить версию плагина на одну из предыдущих.
В этом разделе находятся основные инструкции по WP Rocket на английском языке. Также на сайте плагина находятся подробные инструкции по всем настройкам. Очень круто.
WP Rocket — действительно классный и простой плагин. Если вы не хотите особо заморачиваться с настройками кеширования, но при этом не против заплатить за хороший или отличный результат, то попробуйте этот плагин.
У него нет бесплатной версии, так как инфраструктура Вордпресс, связанная с кешированием, постоянно изменяется. Google вводит новые требования, Вордпресс добавляет поддержку формата WebP, и так далее, из-за этого меняются возможности WP Rocket.
WP Rocket стоит 59$ / год за лицензию на один сайт, и это того стоит.
Это простой и эффективный плагин кеширования.
Надеюсь, статья была полезна. Оставляйте комментарии.
Читайте также:
Сайт для тех, кто хочет использовать Вордпресс по максимуму, но не хочет разбираться в коде.