Оптимизация_HTML_CSS_JavaScript
Оптимизация HTML и удаление неиспользуемого кода CSS, JavaScript на WordPress
1 марта 2021
Показать все

Кэширование сайта на WordPress с помощью плагина WP Rocket

WP-Rocket-Caching-Plugin

Кэширование сайта на базе WordPress с помощью плагина WP Rocket — это следующий этап в оптимизации кода HTML, CSS и JavaScript.

При правильной настройке и активации определенных опций кэширования в плагине WP Rocket, гарантированно ускориться загрузка страниц и постов сайта.

Важную роль имеет то, что в WP Rocket есть возможность настройки отложенной загрузки изображений, фреймов и видео, по мере их появления при скроле страниц, и уменьшает количество HTTP запросов.

При предварительной оптимизации изображений (перед загрузкой на сайт), например, в Photoshop или с помощью различных online-сервисов, избавляет нас от установки дополнительных плагин.

Почему, именно, плагин кэширования WP Rocket.

Почему для кэширования сайта выбор пал на плагин WP Rocket?
Я протестировал несколько известных плагинов для кэширования WordPress:

  1. WP Super Cache (бесплатный);
  2. W3 Total Cache (бесплатный);
  3. LiteSpeed Cache (беcплатный);
  4. Breeze (бесплатный);
  5. Swift Performance (платный);
  6. WP Rocket (платный).

Задача была — найти оптимальный вариант кэширования, именно, для такого сайта, как у меня.
Как я уже упоминал в первой статье этой рубрики — Оптимизация сайта под требования PageSpeed Insights — сайт очень тяжелый.
Установлена Премиум-тема BeTheme. Премиум плагин Slider Revolution.
На сайте используется три редактора страниц:

  • Классический редактор WordPress;
  • Редактор страниц Muffin Builder
    (встроенный редактор от разработчиков темы);
  • Редактор страниц плагина WPBakery Page Builder
    (идущий по-умолчанию вместе с темой).

Плюс плагин членства пользователей WishList Member, для учебного раздела сайта Centr-Sit-Info.
Все это создает определенную нагрузку на сайт.

Плагины WP Super Cache и W3 Total Cache не дали ожидаемых результатов.
Тема сайта адаптивная. Использовать дополнительный плагин AMP, для мобильной версии, смысла не было. Удалось выйти в оранжевую зону PageSpeed Insights и то, только для компьютеров.

LiteSpeed Cache и Breeze, как оказалось, создавались разработчиками под свои, конкретные, сервера.

Swift Performance — отличный плагин, но требует детального изучения, очень кропотливого тестирования и профессиональных знаний.
Оставил на заметку для дальнейшего изучения.

Требовался плагин для оптимизации кода каждой станицы в отдельности, как это происходит при тестировании на сервисе от Google — PageSpeed Insights.
Asset CleanUp Pro подошел как нельзя кстати.

Менеджер CSS и JavaScript от этого плагина присутствует в Редакторе каждой страницы и записи сайта.
В статье — Оптимизация HTML и удаление неиспользуемого кода CSS, JavaScript на WordPress — досконально рассмотрены все его настройки.

Подробные видео-уроки по работе с Менеджером Asset CleanUp Pro смотрите в Учебном разделе сайта Centr-Sit-Info Уровень Profi-bizblog в подразделе меню — Производительность и скорость загрузки сайта на WordPress.
Там же можно скачать и дополнительные скрипты по оптимизации.

В плагине Asset CleanUp Pro есть свой раздел кэширования сайта, но в тандеме с WP Rocket можно добиться, если не идеального, так очень близкого к нему результата.

Основная масса страниц и постов сайта вышла в зеленую зону при тестировании в PageSpeed Insights. Некоторые еще необходимо доработать.

Эти два плагина интегрируются не только друг с другом, но и с многими плагинами SEO-оптимизации.
Выбор плагина WP Rocket для кэширования сайта стал определяющим.

Настройка плагина кэширования WP Rocket.

После установки и активации, приступаем к настройкам опций по оптимизации кода CSS, JavaScript, медиа-файлов и их кэширования плагином WP Rocket.

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

Кэширование сайта на WordPress с помощью плагина WP Rocket

Меню опций настроек WP Rocket.

Меню плагина состоит из 13 основных вкладок.

Панель управления — информация и помощь.

Мой профиль.
Здесь можно увидеть информацию об активации, получить ответ на часто задаваемые вопросы.

Rocket CDN.
Войти в свою учетную запись WP Rocket.

Быстрые действия.

  • Удалить все файлы кэша.
  • Начать кэширование страниц.
  • Очистить OPCache данные.

КЭШ — Настройки кэша.

Мобильный кэш.
Включить кэширование для мобильных устройств.

Если используете отдельную тему для мобильных устройств или плагин АМР,
ставите галочку — Разделять файлы для мобильных устройств.

Нужно помнить, что в этом случае размер кэша сильно увеличивается.
Я эту опцию не включаю, так как тема сайта адаптивная.

Пользовательский кэш.
По-умолчанию, контент кэшируется только для не зарегистрированных пользователей.

Если есть такая необходимость, можете включить —
Кэшировать авторизованных пользователей.
В этом случае — Администратор сайта попадает в этот список (не рекомендую).

Время жизни кэша.
Указать, через какое время очищать весь кэш.
У меня установлено 10 часов — по-умолчанию (0 — отключает авто-очистку).

ФАЙЛЫ — Оптимизация CSS и JS.

CSS файлы.
Отмечаем — Сжимать стили CSS.

Объединять CSS файлы — включайте эту опцию с осторожностью.
При определенных настройках некоторых плагин, могут не отображаться цифры в нумерованных списках, именно, кэшируемых страниц и постов.

Оптимизация доставки CSS. Ускоряет загрузку страниц сайта. Но в некоторых темах может происходить смещение макета.
Необходимо тестировать.

JavaScript файлы.
У меня активированы все опции:

  • Сжатие JavaScript файлов;
  • Объединять JavaScript файлы;
  • Асинхронная загрузка JavaScript;
  • Отложить загрузку JavaScript.

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

МЕДИА — LazyLoad, вставки, WebP.

LazyLoad.
Отложенная загрузка изображений, фреймов и видео, по мере их появления
в области видимости (при скроле страницы).

Ставим галочки — Включить для изображений и Включить для фреймов и видео.

Опцию — Заменять видео YouTube превью картинкой — на ваше усмотрение
(у меня не активирована).

Кэширование сайта на WordPress с помощью плагина WP Rocket

Исключаемые изображения и фреймы. Обязательно вставляем URL-адреса изображений, которые подгружаются в окне первого экрана.

Активируем опции — Размеры изображения и Вставки.

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

ПРЕДЗАГРУЗКА — Создать файлы кэша, предзагрузить шрифты.

Предзагрузка кэша.
Включенная Предзагрузка WP Rocket создает кэш, начиная с ссылок на Главной странице, либо согласно указанной карте сайта.

Ставим галочки и Активировать предзагрузку и на основе Карты сайта.
Если используете плагин Yoast Seo, отмечаете и эту опцию.

В окне — Карты сайта для предзагрузки — вписываете URL-адрес карты сайта для поисковых систем.

Оптимизация DNS запросов.
DNS-кэширование ускоряет загрузку файлов с удаленных сервисов, особенно
на мобильных устройствах.

В окне — URL для кэширования — указываете все URL-адреса хостингов, с помощью которых генерируется контент на сайте.
Это те же соцсети, от которых стоят виджеты или сервисы аналитики от Google и Yandex (без https: — по одному в строке).

Предзагрузка шрифтов.
В окне — Шрифты для предзагрузки — вписываем ссылки на шрифты для предзагрузки
(по одной в строке).

Файлы шрифтов должны находиться на вашем сервере.
Либо на домене, указанном во вкладке — Оптимизация DNS запросов.

Это касается всех сторонних сервисов, особенно Google-шрифтов, которые часто используются в темах для WordPress.
(Допустимые файлы: otf, ttf, svg, woff, woff2).
Сохраняем изменения.

РАСШИРЕННЫЕ — Расширенные правила.

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

  • страницы Входа или Выхода из сайта или раздела;
  • страницы Регистрации на сайте;
  • страницы Регистрации в выделенных разделах сайта.
    Обычно генерируются определенными плагинами (пример: WishList Member, WooCommerce и т.д.).

На обычных сайтах-блогах достаточно будет вписать:

  • / register
  • / wp-login

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

  • Некэшируемые Cookies;
  • Некэшируемые User-Agent;
  • Всегда очищаемые страницы.

Кэшируемые запросы.
В окне — Укажите запросы для кэширования (по одному в ряд) — вписываете ссылки запросов (в основном на сторонние сервисы), которые идут с сайта.
Здесь вам в помощь подсказки PageSpeed Insights при тестировании страниц.

БАЗА ДАННЫХ — Оптимизация и очистка.

Можно использовать эту вкладку меню WP Rocket, если нет отдельного плагина для оптимизации и очистки Базы данных WordPress.
Конечно, можно и комбинировать.

Мой совет — не включайте Автоматическую очистку — можно потерять черновики и ревизии.
Лучше очищать по-необходимости, вручную.

CDN — Интеграция с CDN.

Активация опций вкладки CDN WP Rocket на ваше усмотрение. Опция платная.
Подойдет для сайтов с высокой посещаемостью, интернет-магазинов.
Я, пока, на своем сайте не использую.

ПУЛЬСАЦИЯ — Управлять WordPress Heartbeat API.

Уменьшает или отключает периодический запрос сервера на предмет новых данных.
Активируем — Уменьшить активность.

ДОПОЛНЕНИЯ — Новые возможности.

Быстрые WP Rocket дополнения.
Активируем первые три опции кэширования для:

  • Google Аналитика;
  • Facebook Пиксель (если установлен);
  • Varnish (если используется Varnish на сервере).

Все остальные вкладки и опции настроек — Кэширования сайта с помощью плагина WP Rocket, исключительно на ваше усмотрение и по необходимости.

Видео-версия урока из Учебного раздела Centr-Sit-Info Уровень Profi-bizblog:

 

P.S. Все дополнительные материалы, дистрибутив плагина WP Rocket с подробнейшими видео-уроками, можно получить, зарегистрировавшись в Учебном разделе сайта Centr-Sit-Info Уровень Profi-bizblog.

Если у Вас остались вопросы по теме кэширование сайта, пишите в комментариях. С удовольствием отвечу.

Подписывайтесь на обновления Sit-Info, чтобы вовремя знать о выходе нового поста.

Не забываете нажать на кнопку — Поделиться в социальных сетях.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *