Как ускорить сайт на wordpress?

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

Как происходит рендеринг сайта?

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

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

Параллельно с этим происходиn загрузка статических ресурсов. Тут важную роль играет приоритет загрузки.
Приоритет может иметь такие значения как:

• Предварительная загрузка - загружается в первую очередь
• Отсутствие значения - загрузка происходит по очереди блокируя поток
• Асинхронная загрузка - загрузка происходит как в основном потоке, но не блокируя загрузку других ресурсов.
• Отложенная загрузка - ресурсы с данным значение загружаются в последнюю очередь
• Ленивая загрузка - загрузка происходит только тогда, окно браузера доходит до местоположения ресурса( актуально для изображений и фреймов)

Еще одним, проходящим параллельно с этим процессом является создание CSSOM. Это модель документа, аналогична DOM, но построенная из css файлов вашего сайта. Доступ к ней скрипты получить уже не могут, она используется для создания дерева рендеринга.

После создания CSSOM и DOM они преобразуются в древо рендеринга. Именно из него визуализатор браузера формирует макет нашей страницы.
Html элементы и их css правила сопоставляются, происходит присвоение css правил, а также их переназначение.
Элементы, скрытые при помощи линейных стилей в html документе , или правил заданных в css файлах, не прорисовываются. Ресурсы на их отрисовку не затрачиваются во время первичного рендеринга страницы.

Также во время всего это происходит компиляция и исполнение загруженных JS скриптов. Когда парсер доходит до скрипта, браузерначинает его загружать, компилировать и исполнять условия, останавливая создание DOM. Решить это можно путем добавление атрибутов async и defer. В случае defer исполнение скрипта уходит в конец очереди. В случае с async - происходит асинхронно и не прерывает работу парсера.

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

Ускорение загрузки сайта на wordpress

Поверхностно разобравшись с процессами, протекающими при загрузке страницы в нашем браузере , мы можем приступать к ускорению нашего сайта на wordpress.

Отключение неиспользуемых стилей и скриптов в wordpress

Первым делом, нам необходимо отследить неиспользуемые ресурсы на нашей странице.
Нам необходимо открыть консоль разработчика в вашем браузере и перейти в раздел "сфера покрытия" как указано в изображении.

После перезагрузки страницы, в консоли будут отображаться загружаемые скрипты и стили, а также степень их использования.
Для начала нас интересуют практически неиспользуемые таблицы стилей, большинство из вас здесь встретят два файла, находящихся по адресу wp-includes/css/dashicons.min.css и wp-includes/css/dist/block-library/style.css. Количество их неиспользуемых байтов будет равняться 100 процентам. Это файлы используемые редактором блоков gutenberg для визуализации иконок, а также компоновке стандартных блоков в редакторе. Во фронтенде они нам не нужны.
В совокупности эти два файла весят под 150 килобайт и занимают кучу процессорного времени.
Для того, чтобы отключить стили gutenberg во фронтенде, нам необходимо в файле function.php вашей темы, прописать этот код.

function deregister_wp_styles() {
// если у пользователя есть какие либо права
// то выполнение кода прерывается
   if (current_user_can( 'read' )) {
       return;
   }
// удаление стилей dshicons и gutenberg
   wp_deregister_style('dashicons');
   wp_deregister_style('wp-block-library');
}
// привязка функции к фильтру
add_filter('wp_enqueue_scripts', 'deregister_wp_styles', 100);

Теперь если вы выйдете из своего аккаунта на сайте, и откроете консоль разработчика, то этих файлов вы не найдете.

Таким образов мы получим заветные 3-4 балла в pagespeed insight.

Предварительная и отложенная загрузка ресурсов.

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

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

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

<link rel="preload" as="omage" href="ссылка" type="image/формат изображения">

При следующий загрузке страницы изображение будет получено в первую очередь и не будет грузиться в основном потоке.
Все остальные изображения должно содержать атрибут loading="lazy", который отложит их загрузку до необходимого времени.

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

Следующий шаг для ускорения наших страниц это добавление defer и async атрибутов к нашим скриптам.

Все стили и скрипты темы регистрируются при помощи функций wp_enqueue_script() , wp_register_script() для скриптов и wp_enqueue_style() и wp_register_style(). Наиболее емкие и общие скрипты выносятся в подвал, а те что должны выполняться немедленно - загружаются в header.

//инициация скрипта
//первым аргументом в функцию передается id, которой присваивается скрипту, второй аргумент - это ссылка на скрипт, третий - это скрипт необходимый для выполнения текущего, четвертый - версия, пятый это местонахождение скрипта, при значении равным true , он отправляется в подвал сайта, по умолчанию false/ 
function register_scripts() {
   wp_enqueue_script( 'calc-script', get_template_directory_uri(  ).'/js/calc.js', array('node'), null, true);
}
// подключение скрипта при помощи хука
add_action( 'wp_enqueue_scripts', 'register_scripts');

Но как добавить атрибуты async и defer и вывести скрипты из основного потока исполнения?

В современных версиях wordpress появилась возможность добавлять последний аргументом массив данных. Тут мы и может добавить атрибут, например async.

// значением ключа strategy может быть async или defer
function register_scripts() {
   wp_enqueue_script( 'calc-script', get_template_directory_uri(  ).'/js/calc.js', array('node'), null, ['in_footer'=>true,'strategy'=>'async',]);
}
// подключение скрипта при помощи хука
add_action( 'wp_enqueue_scripts', 'register_scripts');

Данное решение избавляет от необходимости вешать дополнительные фильтры или хуки для добавления этих атрибутов.

Таким образом мы вывели скрипт из основного потока исполнения. Теперь он не блокирует отрисовку страницы.

Критические css правила

давайте вспомним предыдущее изображение

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

<head>
  <style>
    .first-screen {display:flex;flex-direction:column:gap:20px;background-size:cover;background-repeat:no-repeat;background-image:url()}
  </style>
</head>

Данный способ увеличит сколько загрузки вашего сайта на 3 - 10 баллов. В зависимости от структуры вашего сайта.

Ленивая загрузка

Ленивая загрузка применяется к изображениям и фреймам вашего сайта. Есть два способа ее реализации. Первый - это атрибут loading="lazy" внутри изображение или iframe.

<img src="img.jpg" alt="#" loading="lazy">

Либо же посредством скриптов JS. В таком случае атрибут src заменяется на data-src. И при появлении изображения в поле видимости, значение src становится равным data-src. Тем самым производя загрузку изображения.

Кэширование wordpress сайта.

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

Если вы когда-нибудь пытались разобраться в том как работает wordpress, вы ,наверняка, представляете сколько функций должен обработать сервер, прежде чем загрузится страница. DOM и CSSOM, на сайте без кэширования, начнут формироваться с задержкой в несколько секунд. Это происходит из за того, что серверу нужно будет каждый раз тратить процессорное время на выполнение всех этих функций. Только после этого он сможет передать пакет с полученным html. Такая задержка - это непозволительная роскошь.

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

Для этого мы и используем кэширование страниц в wordpress. Не стоит изобретать колесо, в решении этой проблемы вам помогут многочисленные плагины кэширования. Например JetPack, NitroPack, и многие другие. Все эти плагины имеют большой объем бесплатного функционала. Но хотел я бы хотел посоветовать один конкретный плагин, а именно NitroPack

Ускорение сайта при помощи плагина NitroPack

Благодаря этому плагину можно формировать кэш, критические css выводить стили и скрипты из основного потока исполнения, подключать отложенную загрузку изображений. Снимать нагрузку c основной сети при помощи CDN линий.

В общем все то, что мы обсуждали выше. Использование плагина не требует больших познаний в области программирования. Достаточно будет потратить 30 минут для того, чтобы более менее разобраться в его работе. Бесплатный тариф имеет такой же функционал как и у платного. Есть лишь ограничения в количестве трафика проходящего через сайт.
Грамотная настройка этого плагина позволяет заметно ускорить загрузку сайта. Количество баллов в pagespeed insight увеличивается ,примерно, на 30 баллов по сравнению с бесплатными версиями других плагинов.