Оптимизация HTML и удаление неиспользуемого кода CSS, JavaScript на WordPress
1 марта 2021WP Rocket — новые изменения и удаление неиспользуемого CSS с помощью плагина Debloat
24 сентября 2023Кэширование сайта на базе WordPress с помощью плагина WP Rocket — это следующий этап в оптимизации кода HTML, CSS и JavaScript.
При правильной настройке и активации определенных опций кэширования в плагине WP Rocket, гарантированно ускориться загрузка страниц и постов сайта.
Важную роль имеет то, что в WP Rocket есть возможность настройки отложенной загрузки изображений, фреймов и видео, по мере их появления при скроле страниц, и уменьшает количество HTTP запросов.
При предварительной оптимизации изображений (перед загрузкой на сайт), например, в Photoshop или с помощью различных online-сервисов, избавляет нас от установки дополнительных плагин.
Почему, именно, плагин кэширования WP Rocket.
Почему для кэширования сайта выбор пал на плагин WP Rocket?
Я протестировал несколько известных плагинов для кэширования WordPress:
- WP Super Cache (бесплатный);
- W3 Total Cache (бесплатный);
- LiteSpeed Cache (беcплатный);
- Breeze (бесплатный);
- Swift Performance (платный);
- 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.
Чтобы достичь максимального ускорения загрузки страниц сайта, лучше использовать ручную настройку.
Меню опций настроек 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 превью картинкой — на ваше усмотрение
(у меня не активирована).
Исключаемые изображения и фреймы. Обязательно вставляем 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, чтобы вовремя знать о выходе нового поста.
Не забываете нажать на кнопку — Поделиться в социальных сетях.