Руководство по WP Rocket для оптимизации скорости сайта

Что такое WP Rocket?

WP Rocket — плагин, который родился как решение для разных оптимизаций кеша в WordPress. Сегодня он гораздо больше: с ним можно оптимизировать не только кеш, но практически всё, что связано с производительностью загрузки сайта.

Чтобы показать эффект, взгляните на производительность нашего собственного сайта С WP Rocket и БЕЗ него:

Зачем использовать WP Rocket?

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

Главное меню WP Rocket

Допустим, с установкой WP Rocket проблем не возникло; начнём разбирать его интерфейс и разные опции оптимизации. Когда вы нажимаете на вкладку панели управления, появляется такой экран:

Приветственное сообщение и опции, которые изначально можно не трогать, но которые мы здесь разберём.

Мой аккаунт

Если вы купили WP Rocket, блок «View my account» приведёт вас на страницу пользователей WP Rocket, чтобы там вы могли заполнить и проверить всё, что связано с вашим профилем: данные, оплату и т. д.

RocketCDN

RocketCDN — это сервис CDN, который WP Rocket предлагает относительно недавно. Цель — дать необходимые инструменты для лучшей производительности, не ища решений за пределами плагина. Есть и другие очень популярные и столь же эффективные CDN-сервисы, такие как Cloudflare или Amazon CloudFront.

Мой статус

Внутри этой опции есть два переключателя:

• ›

  Rocket Tester: это программа улучшений WP Rocket для тестирования их BETA-версий. Нужно связаться с ними по электронной почте.

• ›

  Rocket Analytics: вы соглашаетесь анонимно делиться данными о производительности вашего WordPress с командой разработки, чтобы помочь улучшить WP Rocket.

Здесь сказать особо нечего: это личное решение, которое не должно влиять на производительность.

Настройка кеша в WP Rocket

Пора перейти к опциям настройки, и начнём мы с кеша:

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

Мобильный кеш

Обычно, говоря о мобильных, мы включаем сюда и планшеты, но в этот раз речь только о мобильных устройствах. WP Rocket определяет через user agent, что мы заходим со смартфонов.

Эту опцию мы будем включать всегда, поскольку как правило, десктопный и мобильный дизайн различаются; если только у нас нет адаптивной версии, эта опция будет включена всегда. Чтобы было понятно: зачем нам отдавать 2 кешированные версии, если дизайн одинаковый? Иными словами, если бы у нас не было мобильной версии, нам не нужно было бы, чтобы этот кеш обрабатывался отдельно, верно?

Здесь добавляется исключение. Когда у нас есть мобильная версия с ресурсами или элементами, которые грузятся только в ней, мы будем сохранять файлы отдельно.

Пример:

• ›У нас есть рекламный блок, который на мобильных грузит JS, отсутствующий в десктопной версии.

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

Кеш пользователей

Кеш пользователей — опция, которую WP Rocket даёт для тех, кто просматривает сайт в авторизованном состоянии.

Включив эту опцию, мы можем предлагать индивидуальную версию кеша для каждого пользователя. Лучше всего включить её, если пользователи авторизуются, но нужно особенно внимательно следить, какие страницы кешируются, а какие нет: если пользователь вводит личные данные (например, банковские), их хранение в кеше может обернуться для нас юридическими проблемами.

Как исключить страницу из кеширования?

Если вы хотите избежать проблем такого рода, лучше всего зайти прямо на нужную страницу и в опциях WP Rocket (в боковой панели или внизу) выбрать «never cache this page».

Срок жизни кеша

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

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

Что нужно учесть

WP Rocket уже учитывает определённые процессы для удаления и создания новых файлов кеша, а именно:

• ›

  Создание новых записей, страниц, категорий, таксономий или правок

• ›

  Создание и редактирование новых модулей, виджетов или любого элемента сайта

• ›

  Когда меняются настройки WP Rocket, влияющие на фронтенд.

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

Что касается времени, можно оставить значение по умолчанию.

Оптимизация файлов в WP Rocket

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

Несколькими способами:

• ›

  Уменьшая вес файлов

• ›

  Убирая ненужные файлы и

• ›

  Выполняя файлы постепенно, по мере необходимости.

Файлы CSS

Файлы CSS отвечают за визуальную часть сайта. Это таблицы стилей, которые придают форму, цвет и стиль нашему WordPress. В этом аспекте привлекательный дизайн может не быть оптимизированным, потому что дизайнер при построении CSS мог не соблюсти ряд базовых правил оптимизации.

Среди самых частых проблем, с которыми мы обычно сталкиваемся в таблицах стилей:

• ›

  Тяжёлые файлы CSS

• ›

  Файлы CSS, которые грузятся на страницах, где эти стили не используются

• ›

  Плохо построенные файлы CSS

• ›

  Загрузка слишком большого числа внешних CSS

• ›

  Использование @import для подтягивания внешних таблиц стилей

Словом, есть целый мир практик, которые часто применяют и которые не полезны для оптимизации хорошего дизайна, но перейдём к тому, что нам предлагает WP Rocket.

Минификация файлов CSS

Эта опция призвана уменьшить вес файлов CSS за счёт удаления пробелов и переносов строк. WP Rocket реализует её включением чекбокса.

Совет SEO Alive: Каждый раз, когда мы выполняем какое-то действие, хорошо бы попробовать загрузить сайт и посмотреть, всё ли в порядке, делайте это в режиме инкогнито браузера.

Процесс показан на следующем изображении, взятом из инструмента minifier.org.

Объединение файлов CSS

Эта функция выполняет своего рода «копирование и вставку» кода одного CSS в другой, чтобы не грузить несколько файлов CSS, а иметь всего один.

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

Идеально — грузить тот код, который использует URL. Поставьте галочку и протестируйте каким-нибудь инструментом вроде GTMETRIX, чтобы увидеть, улучшилась ли скорость загрузки.

Польза от объединения файлов CSS — сокращение запросов к серверу.

Оптимизация загрузки CSS

WP Rocket обновляли с учётом рекомендаций разных инструментов Google по оптимизации скорости загрузки. Если у нас уже есть опыт работы с ними, мы наверняка встречали предупреждение «Eliminate render-blocking resources». Включая эту галочку, мы не даём CSS блокировать загрузку, заставляя его грузиться асинхронно.

То есть рендеринг HTML не останавливается, когда нужно скачать файл CSS; этот файл грузится в фоне, не давая процессу загрузки прерваться. Так что включать стоит.

Файлы JS (JavaScript)

JavaScript был одной из больших проблем, с которыми Google столкнулся при обработке HTML. Не углубляясь в этот тип языка: WP Rocket предусмотрел 5 базовых действий для оптимизации таких файлов. Давайте посмотрим!

Удаление jQuery Migrate

jQuery Migrate — это библиотека JavaScript, обеспечивающая совместимость с кодом jQuery, написанным для версий jQuery до 1.9. Эта библиотека идёт в WordPress изначально, но практически не используется (некоторым плагинам она может быть нужна).

Этим действием мы хотим избежать лишнего запроса и загрузки JS, который не будет использован. Отключите его и походите по своему сайту, чтобы проверить, всё ли работает корректно!

Минификация файлов JavaScript

Так же, как объяснялось для файлов CSS, это действие применяется к файлам JS, немного уменьшая их размер.

Объединение файлов JavaScript

Ещё одно действие, похожее на модуль оптимизации CSS. Помните, что при включении этих чекбоксов нужно проверять, всё ли работает как раньше.

Отложенная загрузка файлов JavaScript

Галочка на этом действии даёт два улучшения производительности:

• ›

  Она добавляет атрибут «defer» к JS, чтобы рендеринг HTML не останавливался из-за загрузки JS. С этим действием файл скачивается параллельно и выполняется в конце обработки HTML.

• ›

  Она сдвигает JS, который блокирует начальный рендеринг.

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

Отсрочка выполнения JavaScript

Ещё одна опция — отложить выполнение несущественного JavaScript до момента, когда пользователь начнёт взаимодействовать со страницей. Это действие не кажется очень важным, но оно позволяет выиграть время и ускорить загрузку. Взаимодействием может быть клик, прокрутка, движение мыши...

Оптимизация медиа

В этой вкладке разберём оптимизацию ключевых элементов на первых шагах WPO-оптимизации. Речь об изображениях, видео, iframe и встроенных в WordPress элементах, полезность которых, мягко говоря, под вопросом.

Lazyload

Обязательное действие в любой оптимизации скорости загрузки. Функция Lazyload приводит к тому, что элементы вроде изображений, видео и iframe не грузятся, пока не понадобятся для отображения.

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

Эмодзи

Браузеры уже включают собственные эмодзи, так что мы можем сэкономить тот запрос, который делается, если не включать эту галочку. Моя рекомендация — включить её.

Встроенный контент

Не даёт другим встраивать контент с вашего сайта, а также не даёт вам встраивать контент с других неавторизованных сайтов. Запросы, которые делает этот JS, сокращаются.

Совместимость с WebP

WebP — относительно новый формат, который Google представил примерно в 2010 году для сжатия с потерями 24-битной графики в вебе, улучшая отдачу этих ресурсов ради ускорения загрузки.

Сейчас его поддерживают не все браузеры, так что при работе с этим форматом придётся быть внимательными и знать, какими браузерами пользуются ваши посетители. Включите эту опцию, если работаете с изображениями WebP.

Настройка предзагрузки кеша

Нужно хорошо понимать, как генерируются файлы кеша WP Rocket, чтобы понять функцию Preload.

Когда пользователь впервые заходит на страницу нашего сайта, именно тогда страница кешируется и создаётся файл кеша, который будет отдаваться последующим посетителям. То же самое происходит, когда кеш устаревает (по заданному нами времени) и кешированная версия удаляется, или когда мы сами чистим кеш всех наших URL.

Предзагрузка кеша

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

Карта сайта — это файл, в котором перечислены URL нашего сайта. С плагинами вроде «Rank Math» или «Yoast» её легко сгенерировать. Если хотите посмотреть, как создать карту сайта с Rank Math, показываем здесь.

Предзагрузка ссылок

Это функция, которую WP Rocket добавил в последних версиях. Цель — предвосхитить загрузку «следующих страниц, которые посетит пользователь». При наведении курсора происходит предзагрузка страницы на случай, если пользователь кликнет по ссылке.

WP Rocket перенял эту функцию, которую уже реализовывали специализированные плагины вроде «Flying Pages», чтобы сделать перемещение по сайту плавнее (пользовательский опыт). При этом на время загрузки это не влияет, и улучшения в метриках инструментов WPO-аудита вы не увидите.

Предзагрузка DNS-запросов

Предзагрузка DNS-запросов очень выручает, когда мы используем сторонние ресурсы вроде YouTube, Facebook, шрифтов или iframe, к которым часто обращаемся.

Когда мы устанавливаем любое соединение в интернете, делается DNS-запрос, который должен быть разрешён и отправлен на сервер. У него есть длительность, которую можно улучшить, если добавить URL нужных ресурсов в это поле, которое даёт нам WP Rocket.

Как видно на примере, достаточно указать только доменное имя //youtube.com //facebook.com

Разрешение DNS занимает примерно от 20 до 120 миллисекунд, и, как указывает GTMETRIX, браузер ничего не скачает с хоста, пока этот процесс не завершится.

Предзагрузка шрифтов

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

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

• ›

  Жирное начертание --> 1 запрос

• ›

  Подчёркнутое начертание --> 1 запрос

• ›

  Прописное начертание --> 1 запрос

Настройка расширенных правил WP Rocket

Никогда не кешировать эти URL

Есть URL, для которых в силу их особенности мы не хотим сохранять кешированную версию. В этой вкладке WP Rocket позволяет ввести список URL, которые мы никогда не хотим кешировать.

Никогда не кешировать эти cookies

WP Rocket даёт нам ещё один инструмент контроля помимо работы по URL. Многие плагины работают с собственными cookies, или мы можем установить свои, чтобы идентифицировать определённых пользователей; способов использовать эти маленькие файлы много.

С WP Rocket мы можем перестать кешировать URL, определяемые по ID cookie, после её сохранения в браузере пользователя, тем самым ещё тоньше настраивая, какие типы URL мы хотим кешировать.

Никогда не кешировать эти user agents

User agent — это описательное поле внутри протокола HTTP, служащее для передачи информации об устройстве, которое делает запрос. Зная эту информацию, мы можем не отдавать кешированные страницы этим user agents.

Например, один из user agents Google — Googlebot, так что указав его в этой части сайта, мы каждый раз при его заходе будем отдавать страницы без кеширования.

Всегда очищать эти URL

Эта опция очень интересна для того типа URL, у которых вам, например, интересно всегда удалять файл кеша при обновлении.

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

Кешировать эти query strings

Query strings — это данные, которые отправляются при запросе к веб-странице через URL.

Обычно они опознаются по знаку вопроса «?», и по общему правилу WP Rocket такие URL не кеширует. В этой опции мы можем заставить его это делать.

Настройка базы данных с WP Rocket

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

Работая над контентом внутри WordPress, мы порождаем и другие виды информации, которые бесполезны и вредят производительности сайта. Для этого WP Rocket даёт нам инструмент, чтобы провести более или менее тщательную уборку.

Очистка записей

Как видно на изображении, есть 3 элемента, которые могут занимать место в базе данных, хотя нам они не нужны. Когда мы обновляем контент, сохраняется предыдущая версия, также создаётся авточерновик того, что мы редактируем, и остаются удалённые записи.

Если убрать эти элементы, мы освободим место в нашей базе данных.

Очистка комментариев

Эта часть важна, потому что иногда наша база данных заполняется «спам»-комментариями, поэтому WP Rocket ввёл опцию для очистки таких элементов.

Очистка transients

Когда мы работаем в WordPress, создаются некоторые временные элементы, которые можно спокойно удалять, поскольку они будут созданы заново.

Очистка базы данных

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

Включение этой галочки выполнит очистку таблиц базы данных. Этот процесс можно автоматизировать.

Настройка CDN с WP Rocket

Прежде чем углубляться в настройку CDN с WP Rocket, хочу объяснить, что такое CDN и зачем он нужен.

Что такое CDN?

CDN (Content Delivery Network) — это сервис, цель которого повысить скорость передачи контента пользователю. Для этого он создаёт сеть распространения контента на разных серверах по всему миру, чтобы сократить время запроса ресурсов пользователем. То есть если пользователь находится в Бразилии, CDN отдаёт контент, размещённый на сервере ближе к нему, чем фактический сервер хостинга сайта.

Изображения взяты со страницы WP Rocket

Как работает CDN?

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

Такие сервисы очень полезны, когда у вас тяжёлый контент — изображения, аудио, видео и/или много визитов. Если у вас изначально сайт с небольшим числом визитов, об этом аспекте можно не беспокоиться.

RocketCDN

WP Rocket предлагает нам возможность подключить свой CDN по цене 7,99 доллара в месяц — меньше 7 евро.

CDN

Когда мы подключаем CDN, нам передают информацию для его использования. Один из таких элементов — CNAME, хотя если его не дали, мы можем его получить.

CNAME — это тип DNS-записи, который сопоставляет исходное доменное имя целевому доменному имени

Чтобы использовать эту функцию, нам нужно будет лишь указать этот CNAME и сказать, для каких файлов он нужен.

Исключить файлы из CDN

Следующая опция, как и ожидается, — исключить те файлы, которые мы не хотим пропускать через CDN.

Оптимизация функции WordPress Heartbeat

WordPress heartbeat — это передача контрольных данных для установления связи между бэкендом и фронтендом WordPress и сервером. Такой процесс может быть одной из причин, по которым вы замечаете медлительность в вашем WordPress.

Среди действий, которые можно ограничить:

• ›

  Автосохранение и ревизии в редакторе записей.

• ›

  Уведомления в панели администрирования WordPress.

• ›

  Информация о том, кто редактирует.

• ›

  Данные в реальном времени.

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

Настройка дополнений WP Rocket

Есть элементы вроде скриптов Google Analytics и Facebook, для которых достаточно включить их в этой части настроек, чтобы получить кешированную версию и повысить производительность. Это действие напрямую отвечает на одно из требований, которые обычно указывают аудиты скорости загрузки вроде Pagespeed: «Leverage browser caching».

Оптимизация изображений

Оптимизация изображений — процесс, который в силу своей сложности мог бы заслужить отдельное руководство. WP Rocket предлагает отдельный плагин для работы с этими ресурсами. Из WP Rocket мы можем перейти к скачиванию его «Free»-версии.

Инструменты WP Rocket

Настройки WP Rocket можно сохранять и импортировать, чтобы не тратить время на этот процесс заново. Также он даёт возможность выполнить «Rollback», то есть откатиться к предыдущей установленной версии.

Обучающие материалы WP Rocket

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

Выводы

Как вы увидели, WP Rocket — это больше чем плагин кеширования: в нашем распоряжении полноценный набор для оптимизации скорости и производительности сайта, так что остаётся только пробовать разные опции. Чего вы ждёте, чтобы ваш WordPress полетел?

Вы знали про WP Rocket? Удалось ли улучшить производительность с этим руководством? Остались вопросы? Ждём вас в комментариях!