Оптимизация сайта WP с плагином LiteSpeed и QUIC.cloud

Из этой статьи вы узнаете, как на сайте WordPesss настроить плагин LiteSpeed и CDN от QUIC.cloud. Чтобы плагин помог вам оптимизировать сайт по максимуму, необходим хостинг с поддержкой ⚡LiteSpeed или OpenLiteSpeed. Если же ваш сайт расположен на хостинге Apache, NGINX и т.д., то плагин будет выполнять свои функции только совместно с QUIC.cloud.

Преимущества LiteSpeed + QUIC.cloud для WordPress

• Высокая производительность при росте трафика;
• Защита от DDoS-атак и ботов;
• Одновременная поддержка протоколов IPv4 и IPv6;
• Уменьшение нагрузки на процессорные вычисления, благодаря чему ускоряется скорость обработки данных.
• Кэширование динамических страниц.
• Добавление списка файлов cookie, которые не должны кэшироваться.
• Оптимизация изображений.
• Поддерживает функционал Apache и Cloudlinux: .htaccess, modsec, php per directory, custom php options, cagefs и т.д.
• Бесплатные услуги на основе ежемесячных лимитов.
• На момент написания статьи QUIC.cloud имеет 68 узла PoPs по всему миру.

Инструкция

Устанавливаем на сайт бесплатный плагин LiteSpeed из репозитория WordPress и активируем его.

На первых шагах настройки плагина рассмотрим подключение сайта к CDN от QUIC.cloud, с помощью которого можно:

• создать критический CSS,
• оптимизировать и конвертировать в формат webp изображения,
• получить SSL сертификат,
• включить Anti DDoS и защиту от ботов,
• а также кэшировать динамические страницы, даже если на вашем хостинге не подключен веб-сервер LiteSpeed. Если же у вас хостинг с LiteSpeed, то плагин и без CDN значительно повышает производительность сайта и кэширует динамические страницы, но дополнительные возможности доступны только с облачным сервисом.

Подключаемся к QUIC.cloud

Итак, чтобы сопрячь ваш сайт с облаком, перейдите на QUIC.cloud и зарегистрируйтесь. Вернитесь на сайт и на вкладке плагина «General > Domain Key» нажмите кнопку «Request Domain Key». Сверху появится уведомление об успешном запросе, перезагрузите страницу. Когда ключ сгенерируется кликайте на кнопку «Link QUIC.cloud», нажмите «Yes link this new domain to my account» и затем вас обратно перенаправит в панель WordPress.

На той же вкладке появится кнопка «Visit my Dashboard on QUIC.cloud», нажмите на неё. Если панель облака открылась и в списке появился ваш домен со статусом OK, значит сопряжение прошло успешно.

Далее на вкладке плагина «General» укажем IP вашего сервера. Чтобы узнать его, нажимайте ссылку «Check my public IP from DoAPI.us», который отобразится возле надписи «Your server IP is». Копируем, вставляем в строку Server IP и сохраняем настройки.

Те, кто не собирается использовать CDN и прочие услуги QUIC.cloud, могут пропустить следующий этап настройки.

Настройка CDN

Для подключения к CDN переходим в панель QUIC.cloud. Изначально, вам будут предоставлены бесплатные кредиты, которых вам хватит на месяц или более, особенно, если у вас небольшой сайт и мало трафика. Если кредитов не хватает, то их всегда можно докупить. К примеру, 5000 кредитов стоит всего 5$ — это 500 ГБ трафика.

Итак, на вкладке «My Domains» нажмите на свой домен чтобы увидеть список предлагаемых услуг. Затем кликайте по нужной услуге и переходите к их настройкам.

Кстати, услуги по оптимизации можно активировать и без использования CDN, также QUIC.cloud можно использовать совместно с Cloudflare для оптимизации статических файлов (изображения, JavaScript, CSS и т.д.), а QUIC.cloud для кэширования и обслуживания динамического контента.

Если вы выбрали услугу CDN, то перейдите на вкладку «DNS Zones». Необходимо установить записи CNAME для корневого домена и изменить сервера имён (NS) у регистратора вашего домена, на NS от QUIC.cloud. Не забудьте выставить TTL на минимум, чтобы смена адресов произошла как можно быстрее. Обычно записи CNAME добавляются автоматически, но вы всё же сравните их с записями на хостинге; если это CPANEL, то увидеть их можно в разделе «Редактор Зоны > Домены > Управление зоной».

Когда статус изменится на «Using DNS», вернитесь к выбору услуг и кликайте CDN, если статус CDN — «ОК», то CDN подключен. Произведите соответствующие настройки на вкладке «CDN Config».

• Включите «Map Both www/non-www» если ваш сайт работает с префиксом www.
• «Connection Type to Origin» включите «MATCH» если хотите, чтобы ваш сайт открывался только по HTTPS.
• Включите «Frontend Force HTTPS», чтобы перенаправить все HTTP запросы на HTTPS через заголовок 301.
• Включите «Enable QUIC Backend» если ваш сайт работает по протоколу QUIC или HTTP/3, и вы хотите, чтобы QUIC.cloud также подключался к сайту по этим протоколам.
• Включите «reCAPTCHA & WP Brute Force Defence» и «Protect From Bad Visitor» для защиты сайта от плохих ботов и взлома. Ограничьте количество одновременных подключений и максимальное количество попыток входа.
• Включите «Restrict XML-RPC requests» чтобы ограничить запросы XML-RPC для всех подозрительных посетителей. Отключенная функция также будет ограничивать запросы к XML-RPC, но только когда обнаружит активность и покажет 403 ошибку в течение 5-ти минут.
• В пункте «Access Control» добавьте доверенные IP в белый список, а все подозрительные в чёрный.
• Выберите предпочитаемый тип reCAPTCHA: видимая или невидимая и установите «MaxTries» — максимальное количество попыток её разгадывания.
• Добавьте в белый список ботов, которых блокирует защита QUIC.cloud. Например: Mail.RU, bingbot, facebookexternalhit, pinterest, yandex. По умолчанию сервис не блокирует известных ботов, таких как GoogleBot.
• При желании можете использовать Google reCAPTCHA вместо QUIC.cloud. Пропустите настройки «Custom reCAPTCHA Keys», если оставляете капчу по умолчанию.
• В пункте «SSL Certificate» сгенерируйте бесплатный SSL сертификат или вставьте свой.
• Сохраните все настройки и проверьте работу сайта.

Как исключить из Google Аналитики реферальный спам и заблокировать ботов на сайте

Настройки кэша LiteSpeed

Возвращаемся к настройкам плагина на вкладку «Cache».

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

Cache Control Settings

• Включите настройку «Enable Cache».
• Если на сайте есть регистрация, то включите кэш для залогиненных юзеров напротив пункта «Cache Logged-in Users».
• Включите кэш комментариев — «Cache Commenters».
• Включите кэширование для WordPress REST API. Это может также значительно ускорит сайт.
• Включите кэш для страницы входа на сайт — «Cache Login Page».
• «Cache favicon.ico» создаст кэш для фавикона.
• Включите «Cache PHP Resources» — это позволит избежать повторных вызовов функций PHP, что снизит нагрузку на хостинг и увеличит производительность сайта. Это касается статических ресурсов CSS или JS, подключаемых к PHP. Если эти ресурсы динамические, то отключите данную настройку.
• Оставьте «Cache Mobile» отключенным если у вас одна тема для всех устройств. Если же для мобильных устройств вы используете другую тему или в плагине AMP включен режим Reader, то подключите данную функцию.
• Добавьте в «Private Cached URIs» пути URI тех страниц, которые вы не хотите кэшировать.
• «Private Cached URIs» позволяет принудительно кэшировать выбранные страницы только на клиентском уровне (в браузере), можно создать пользовательский TTL для каждого URI.
• «Force Cache URIs» позволяет принудительно кэшировать выбранные страницы на сетевом (публичном) уровне, также можно создать пользовательский TTL для каждого URI.
• Исключите из кэширования определенные строки запроса в пункте «Drop Query String».

TTL

На вкладке TTL оставьте настройки по умолчанию или создайте свои.

Purge

На вкладке «Purge» включите «Purge All On Upgrade». Это позволит сбросить кэш при установке или обновлении плагина, темы или ядра. Ниже выберите страницы, для которых необходимо сбросить кэш при обновлении контента. Включите «Serve Stale», если ваш контент совсем не обновляется или долго не будет обновляться. Это значительно снизит нагрузку на сервер. Далее можно запланировать период автоматической очистки выбранных URL.

Excludes

Настройки, расположенные на вкладке «Excludes» позволяют полностью отключить кэширование на определённых страницах или разделах сайта или исключить определённые куки. В пункте «Do Not Cache User Agents» можно отключить кэширование для различных User-agent, пример смотрите на изображении.

«Do Not Cache Roles» отключает кэширование для определённых ролей, например, для Администратора.

ESI

Раздел ESI предназначен для раздельного кэширования содержимого одной страницы. Например, на сайте используется виджет «Последние статьи» и при опубликовании нового поста содержимое всех страниц должно остаться закэшированным, тогда как сам виджет необходимо обновить. В пример также можно привести корзину WooCommerce и страницы аккаунтов. Если ESI не используется, то для каждого пользователя будет создан отдельная закэшированная страница, соответственно, возрастает нагрузка на сервер. Если же ESI включен, то будет использоваться общедоступный кэш с блоком ESI. Плагин позволяет настраивать отдельное кэширование для виджетов. В остальных случаях используйте PHP хуки LSCache для WordPress API.

Object

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

<!-- Object Cache [total] 5190 [hit_incall] 5056 [hit] 6 [miss_incall] 21 [miss] 107 [set] 171 -->

Browser

Кэш браузера сохраняет некоторые данные страниц (изображения, css и видео) на устройстве посетителя, чтобы при следующем посещении страница загрузилась быстрее. Рекомендуется включить данную функцию и оставить значение Browser Cache TTL по умолчанию.

Оптимизация скорости страницы

Переходим на вкладку «Page Optimization». Здесь мы сможем оптимизировать стили, скрипты и изображения, чтобы отрисовка страниц происходила быстрее. При включении каждой функции сбрасывайте кэш и проверяйте работу сайта. Если некоторые страницы или формы «ломаются», то отключайте функцию целиком или же отключите оптимизацию для отдельного файла в настройках плагина LiteSpeed.

Настройки CSS

• Включите «CSS Minify» чтобы сжать все скрипты, в том числе и встроенные inline скрипты.
• Объедините локальные файлы CSS в один общий файл включив функцию «Комбинирование CSS». Не забудьте сохранить настройки, сбросить кэш и проверить страницы.
• Если используете сервис QUIC.cloud, то включите «Сгенерировать UCSS» и «UCSS Inline», чтобы создать стили только для отображаемой в данный момент страницы, это уменьшит размер CSS-файла.
• Включите «Объединение внешних и встроенных CSS» если хотите, чтобы все стили были объединены в один файл.
• Опция CSS HTTP/2 Push заранее загружает необходимые стили до вывода содержимого на экран. Для работы необходим HTTP/2.
• Если вы используете сервис QUIC.cloud, то включите пункт «Асинхронная загрузка CSS» для создания критического CSS, т.е. CSS будет загружен из заголовка HTML до отображения содержимого. Должен быть включён cron. После активации перейдите в панель QUIC.cloud и на вкладке «Page Optimization» можно будет наблюдать за статусом данной услуги. Для тестирования вам будет предоставлено 2000 кредитов бесплатно. Чтобы отключить асинхронную загрузку, например, для шрифтов, используйте атрибут data-no-async=»1″.
• Если вы включили «Асинхронную загрузку CSS», и если у вас одинаковые стили для всех страниц одного типа, тогда, в целях экономии кредитов QUIC.cloud можно включить настройку «CSS на URL-адрес».
• «Встроенная асинхронная библиотека CSS» отложит загрузку стилей, которые браузер загрузит в фоновом режиме, не мешая отрисовке контента. Используйте, если включили критические стили.
• «Оптимизация отображения шрифта» добавит свойство CSS font-display, которое определяет способ загрузки и отображения файлов шрифтов в браузере. Рекомендуемое значение Swap, дает шрифту нулевой второй период блока и бесконечный период подкачки. Используйте если пользовательский шрифт для вас важен.

Настройки JS

• Включите «Минификация JS» чтобы сжать все локальные и встроенные скрипты, тем самым достигается ускорение загрузки и оптимизация запросов.
• Включение настройки «Объединение JS» соберёт все файлы JS в один, что уменьшит количество запросов к серверу, но не всегда ускоряет страницу, так как в объединённом файле оказывается код, который можно было не запускать при первом же запросе.
• Включайте «Объединение внешних и встроенных JS», если включили предыдущий пункт. Это позволит избежать некоторых ошибок, объединённых в один файл локальных JS, добавляя в него и встроенные в HTML скрипты.
• Включенная настройка «JS HTTP/2 Push» заранее загружает JS-файлы до вывода содержимого на экран. Для работы необходим HTTP/2.
• В пункте «Загрузить отложенный JS» включите Deferred (в русском переводе плагина «Отложено») если хотите, чтобы скрипты загружались после полной загрузки HTML. Или Delayed (в русском переводе плагина «Отложенные») если хотите, чтобы скрипты загрузились пока посетитель не начнёт взаимодействовать со страницей (клик, скролл). Это может значительно ускорить загрузку страниц и накинет несколько баллов в Google PageSpeed Insights. Но необходимо тщательно протестировать.

Настройки HTML

• Включите «Минификацию HTML» если в вашем коде много пробелов, ненужных кавычек и HTML комментариев, и, если необходимо уменьшить вес файла.
• DNS-prefetch (предзагрузка DNS) снижает время ожидания пользователя, если на вашем сайте есть ссылки на ресурсы с доменом отличным от вашего. Например, вы используете Гугл шрифты и если указать в настройках DNS-prefetch ссылку https://fonts.gstatic.com/, то плагин добавит в тег head такую строчку <link rel=»dns-perfetch» href=»https://fonts.gstatic.com»/ >. Добавьте сюда ссылки сервисов аналитики и рекламы от Гугл и Яндекс и т.п. Но предварительно проверьте, не подключен ли элемент link с dns-perfetch каким-либо плагином, например, Google Site Kit.
• «Управление предварительной выборкой DNS» включает и отключает предварительное получение DNS имен внешних ресурсов (картинки, скрипты), которые используются на сайте. Это может ускорить время загрузки страницы при медленном интернете. Добавляет HTTP-заголовок X-DNS-Prefetch-Control: on.
• «Селекторы отложенной загрузки HTML» поможет лениво загрузить какой-нибудь HTML-контейнер. К примеру, можно задержать рендеринг блока с комментариями, указав идентификатор comments.
• Включите «Удалить строки запроса», так как строки запроса в статических ресурсах могут замедлять работу сайта, к тому же такие файлы не кэшируются. Строка запроса – это всё, что следует за «?» или «&» в URL, обычно это версии файлов.
• Далее настройки позволяют включить асинхронную загрузку шрифтов Гугл, чтобы они не блокировали содержимое страницы или вовсе их удалить. Также можно удалить WordPress Emoji, если вы их не используете на сайте и всё, что содержится в тегах <noscript>, но только в том случае, если вы уверены, что ваш сайт не посещают пользователи с отключенным javascript в браузере.

Настройки медиафайлов

• Включите поддержку «Отложенной загрузки изображений», с ней изображения загружаются не сразу при открытии страницы, а только когда появляется необходимость. Это поможет повысить производительность, оптимизировать использование ресурсов устройства и снизить связанные с этим расходы. Протестируйте также настройку «Встроенная библиотека изображений с отложенной загрузкой» для постепенной загрузки элементов DOM.
• Если включили ленивую загрузку изображений, то включите заполнитель (placeholder) изображения, имитирующий загрузку контента и «Адаптивный заполнитель». Далее можете использовать placeholder в формате SVG и установить для него цвет фона. В WordPress по умолчанию есть ленивая загрузка изображений, но отсутствуют заполнители, поэтому лучше использовать подобные плагины.
• Включите «Отложенная загрузка Iframes» для Youtube, Instagram и пр.
• Используйте Генератор LQIP если подключились к QUIC.cloud. В этом случае заполнители изображений будут генерироваться на лету с помощью облака, представляет собой размытую и сжатую версию оригинального изображения, что выглядит намного лучше, чем предыдущие заполнители. Для теста назначается 1000 кредитов. Отслеживать прогресс можно в облаке на вкладке LQIP. Также установите качество заполнителя (уровень сжатия) и минимальные размеры.
• Если включили отложенную загрузку включите «Добавить недостающие размеры» — это предотвратит смещение макета (CLS) при загрузке контента.

Исключение медиафайлов

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

Настройки локализации

Включите «Кэш Gravatar» если используете на сайте комментарии или отображаете список пользователей с аватарками от Граватар — это увеличит скорость загрузки страницы, обновляйте кэш вручную или с помощью cron.

Tuning

На этой странице исключите все CSS и JS которые отображаются неправильно или которые нет необходимости оптимизировать. Это может быть document.write, gtag, gtm, dataLayer, adsbygoogle, tag.js, yandex, jquery.js, cookie.js и т.д. Добавьте вручную атрибут data-no-optimize=»1″, если не получается исключить скрипт или CSS в настройках. Также можете полностью исключить страницы по URI.

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

LiteSpeed Cache умеет сжимать изображения и конвертировать их в формат WebP. Стандартная очередь обработки бесплатна для всех, для этого не нужен аккаунт на QUIC.cloud, только необходимо получить ключ API на вкладке «Общие». Тогда как для быстрой обработки выделяется бесплатная ежемесячная квота в 10000 изображений, а если этого будет недостаточно, то дополнительную квоту можно приобрести за 3 000 кредитов — это 10000 изображений. Отслеживайте статус быстрой обработки на вкладке Image Optimization на панели QUIC.cloud.

Чтобы начать оптимизацию изображений произведите настройки оптимизации на второй вкладке, затем, нажмите на кнопку «Сбор данных». Когда процесс завершится, надпись на кнопке изменится на «Отправить запрос на оптимизацию». Нажмите её и ожидайте. В первый раз LiteSpeed загрузит лишь несколько изображений, чтобы проанализировать скорость взаимодействия между серверами. По завершении, необходимо снова нажать кнопку «Отправить запрос на оптимизацию», а чтобы в дальнейшем не делать это вручную, можно включить «Автозапрос через Cron».

База данных

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