WordPress 6.8 представляет спекулятивную загрузку, которая может обеспечить практически мгновенное время загрузки страниц путем предварительной загрузки URL-адресов до того, как пользователь перейдет по ним.
Функция основана на Speculation Rules API – возможности веб-платформы, позволяющей определять правила для того, какие типы URL-адресов предварительно загружать или предварительно отображать, и насколько рано должна происходить такая спекулятивная загрузка.
Дополнительную информацию о Speculation Rules API и связанных с ним предшествующих разработках в WordPress Core можно найти в анонсе о спекулятивной загрузке.
Контекст
До внедрения в WordPress Core эта функция успешно использовалась более чем на 50 000 сайтов WordPress через плагин Speculative Loading, который теперь был перенесен в ядро с некоторыми изменениями. Согласно данным, полученным из HTTP Archive и Chrome User Experience Report (CrUX) за весь период с момента запуска плагина, сайты, включившие спекулятивную загрузку, улучшили показатель прохождения Largest Contentful Paint (LCP) на ~1,9% по медиане, что, хотя и может показаться небольшим числом, является огромным улучшением для одной функции, учитывая, что на данные влияет множество сайтов с различными особенностями производительности.
Speculation Rules API был впервые представлен в начале 2023 года и с тех пор получил широкое распространение. Сегодня более 8% навигаций в Chrome используют Speculation Rules. Важным событием несколько месяцев назад стало то, что Cloudflare включил спекулятивную загрузку в масштабном режиме через свою функцию Speed Brain.
Speculation Rules API в настоящее время поддерживается Chrome, Edge и Opera, что означает, что большинство конечных пользователей в интернете могут воспользоваться его возможностями. Для пользователей браузеров без поддержки API никаких негативных эффектов нет, поскольку Speculation Rules API является прогрессивным улучшением. Браузеры без поддержки просто игнорируют его присутствие, то есть сайты сохраняют прежнее поведение.
Поведение по умолчанию и настройка
Реализация WordPress Core включает спекулятивную загрузку по умолчанию во фронтенде всех сайтов, за исключением случаев, когда пользователь авторизован или когда на сайте отключены красивые постоянные ссылки. URL-адреса предварительно загружаются с консервативной активностью: это означает, что предварительная загрузка запускается, когда пользователь начинает нажимать на ссылку. Хотя это обычно происходит лишь за долю секунды до фактического перехода, этого достаточно для заметного улучшения производительности.
Это значение по умолчанию prefetch с conservative активностью используется как разумная отправная точка для включения спекулятивной загрузки в масштабе WordPress. Оно соответствует конфигурации, которую Cloudflare использует в своей функции спекулятивной загрузки, и минимизирует вероятность спекулятивных загрузок без последующего перехода по URL. Плагин Speculative Loading использует по умолчанию prerender с moderate активностью, что приводит к большему улучшению производительности благодаря более раннему запуску спекулятивной загрузки, а также предварительному рендерингу URL, но также имеет компромиссы, связанные с непреднамеренным запуском определенного клиентского поведения даже в случае, если пользователь так и не переходит по URL.
Настройка через действия и фильтры
Исключение шаблонов URL из спекулятивной загрузки
Когда URL предварительно загружается, ответ сервера загружается до того, как пользователь переходит по нему. В большинстве случаев это не проблема, так как ответы сервера для фронтенд URL обычно никак не меняют состояние сайта. Однако могут быть плагины, использующие паттерн так называемых «URL действий», где простой переход по определенному URL (с GET запросом) вызывает изменение состояния — например, на сайте электронной коммерции WordPress это может быть добавление товара в корзину или отметка товара как избранного. Стоит отметить, что это антипаттерн, поскольку изменения состояния обычно должны запускаться только POST запросами, например, через отправку форм, а GET запросы должны быть «идемпотентными». Несмотря на это, плагины, использующие этот паттерн, должны обеспечить исключение таких URL из предварительной загрузки и предварительного рендеринга. В случае conservative активности это не должно быть проблемой, поскольку практически гарантировано, что пользователь также перейдет по URL. Но для сайтов, использующих более активную конфигурацию, есть вероятность, что переход никогда не произойдет, поэтому исключение таких URL важно.
По умолчанию любые URL, содержащие параметры запроса, автоматически исключаются из предварительной загрузки и предварительного рендеринга, что должно охватывать большинство таких URL действий. Однако в случае, если плагин реализует свои собственные правила перезаписи для этих URL вместо использования пользовательских параметров запроса, они могут использовать фильтр wp_speculation_rules_href_exclude_paths для указания шаблонов URL для исключения.
Этот пример гарантирует, что любые URL с путем, начинающимся с «/cart/», будут исключены из спекулятивной загрузки, независимо от того, используется ли prefetch или prerender:
add_filter('wp_speculation_rules_href_exclude_paths', function($href_exclude_paths) {
$href_exclude_paths[] = '/cart/*';
return $href_exclude_paths;
});
Все предоставленные шаблоны URL должны соответствовать спецификации URL Pattern, и все они будут рассматриваться относительно фронтенда сайта. Для сайтов, где домашний URL находится в подкаталоге, WordPress автоматически добавит соответствующий сегмент пути, так что разработчикам плагинов не нужно об этом беспокоиться.
Хотя поведение WordPress Core по умолчанию заключается в предварительной загрузке URL, сайты могут включить предварительный рендеринг URL. Это приводит к значительному повышению производительности, но также имеет дополнительные последствия для спекулятивно загружаемых URL, поскольку даже их клиентский код будет загружен. Если сайт содержит какую-либо клиентскую логику, которая должна выполняться только после того, как пользователь фактически перейдет по URL, необходимо сначала проверить, выполняется ли предварительный рендеринг сайта, и запускать такую логику только после того, как произошел переход (см. документацию «Определение предварительного рендеринга в JavaScript»). Распространенный случай использования — это инструменты аналитики (см. документацию «Влияние на аналитику»). Многие популярные провайдеры уже поддерживают предварительный рендеринг, поэтому никаких изменений не требуется. Но если ваш сайт или плагин включает такую функциональность на определенных URL, и вы еще не обновили JavaScript логику для поддержки предварительного рендеринга, вы можете временно исключить соответствующие URL конкретно из предварительного рендеринга.
Этот пример гарантирует, что любые URL с путем, начинающимся с «/personalized-area/», будут исключены только из спекулятивной загрузки prerender:
add_filter('wp_speculation_rules_href_exclude_paths', function($href_exclude_paths, $mode) {
if ('prerender' === $mode) {
$href_exclude_paths[] = '/personalized-area/*';
}
return $href_exclude_paths;
}, 10, 2);
Изменение конфигурации спекулятивной загрузки по умолчанию
Как упоминалось ранее, сайты WordPress могут изменять конфигурацию спекулятивной загрузки по умолчанию. Для дальнейшего улучшения производительности вы можете сделать конфигурацию более активной или использовать предварительный рендеринг. Это можно достичь через фильтр wp_speculation_rules_configuration, который принимает либо ассоциативный массив с ключами mode и eagerness для управления конфигурацией, либо null для отключения спекулятивной загрузки для текущего запроса.
Значение по умолчанию для фильтра — array( 'mode' => 'auto', 'eagerness' => 'auto' ), если только пользователь не авторизован или на сайте не отключены красивые постоянные ссылки, в этом случае значение по умолчанию — null. Для обоих параметров конфигурации значение auto означает, что WordPress Core будет принимать решение о конфигурации, что на сегодняшний день фактически приводит к mode со значением prefetch и eagerness со значением conservative. В зависимости от различных критериев, таких как состояние Speculation Rules API и поддержка экосистемы, поведение может измениться в будущем релизе WordPress.
Вот пример, который использует фильтр для увеличения активности до moderate. Это улучшит преимущества производительности, одновременно увеличивая компромисс для спекулятивной загрузки без последующего перехода:
add_filter('wp_speculation_rules_configuration', function($config) {
if (is_array($config)) {
$config['eagerness'] = 'moderate';
}
return $config;
});
Значение mode может быть auto, prefetch или prerender, а значение eagerness может быть auto, conservative, moderate или eager. Speculation Rules API также определяет еще одно значение активности immediate, однако это значение настоятельно не рекомендуется для правил уровня документа, которые спекулятивно загружают любые URL, поэтому API WordPress Core не позволяет использовать его для общей конфигурации.
Если вы хотите добиться еще большего повышения производительности, вот пример, который использует фильтр для выбора prerender с moderate активностью. Это похоже на то, что реализует плагин Speculative Loading, и может привести к значительному повышению производительности. Пожалуйста, помните о влиянии предварительного рендеринга на клиентскую JavaScript логику, объясненном в предыдущем разделе, прежде чем включать prerender.
add_filter('wp_speculation_rules_configuration', function($config) {
if (is_array($config)) {
$config['mode'] = 'prerender';
$config['eagerness'] = 'moderate';
}
return $config;
});
Как упоминалось ранее, спекулятивная загрузка по умолчанию отключена для сайтов, которые не используют красивые постоянные ссылки. Это связано с тем, что вышеупомянутое исключение URL с параметрами запроса не будет надежно применяться, если даже аргументы WordPress Core используют параметры запроса. Однако могут быть случаи, когда, как владелец сайта без красивых постоянных ссылок, вы уверены, что ваш сайт не использует какие-либо проблемные паттерны, которые являются причиной этого исключения, или вы уже определили их и явно исключили URL с конкретными параметрами запроса из спекулятивной загрузки. В этом случае вы можете использовать фильтр для включения спекулятивной загрузки, как показано здесь:
add_filter('wp_speculation_rules_configuration', function($config) {
if (!$config && !get_option('permalink_structure')) {
$config = array(
'mode' => 'auto',
'eagerness' => 'auto',
);
}
return $config;
});
Пожалуйста, будьте осторожны при включении спекулятивной загрузки таким образом. Значения по умолчанию WordPress Core были тщательно продуманы, чтобы обеспечить безопасную работу большинства сайтов, поэтому используйте этот фрагмент кода, только если вы уверены, что это не будет иметь негативных последствий для вашего сайта.
Включение дополнительных правил спекуляции
Speculation Rules API позволяет определять несколько правил для настройки того, как браузер должен спекулятивно загружать URL. По умолчанию WordPress Core включает только одно правило, которое обрабатывает все вышеупомянутое поведение. Более продвинутая настройка возможна путем предоставления совершенно новых правил спекуляции в дополнение к основному правилу Core, что можно осуществить с помощью действия wp_load_speculation_rules. Действие получает экземпляр нового класса WP_Speculation_Rules, который имеет встроенные механизмы валидации и может быть изменен по необходимости. Добавляя новые правила, вы можете реализовать полностью пользовательские конфигурации, которые будут применяться поверх основного правила WordPress Core.
Вот пример, который напрямую связан с предыдущим примером, изменяющим конфигурацию по умолчанию на prerender с moderate активностью. Вы можете предпочесть не менять значения по умолчанию, но могут быть определенные URL, для которых вы хотели бы включить prerender с moderate активностью. Вы можете добавить пользовательское правило спекуляции на уровне URL для этого:
add_action('wp_load_speculation_rules', function(WP_Speculation_Rules $speculation_rules) {
$speculation_rules->add_rule('prerender', 'my-moderate-prerender-url-rule', array(
'source' => 'list',
'urls' => array(
'/some-url/',
'/another-url/',
'/yet-another-url/',
),
'eagerness' => 'moderate',
));
});
Развивая этот пример дальше, возможно, нет простого способа предоставить список URL, например, в случае, если они часто меняются или нужно регулярно добавлять новые URL. В этом случае вы можете рассмотреть использование правила спекуляции на уровне документа, которое применяется ко всем ссылкам, отмеченным определенным классом, или где родительский элемент имеет определенный класс:
add_action('wp_load_speculation_rules', function(WP_Speculation_Rules $speculation_rules) {
$speculation_rules->add_rule('prerender', 'my-moderate-prerender-optin-rule', array(
'source' => 'document',
'where' => array(
'selector_matches' => '.moderate-prerender, .moderate-prerender a',
),
'eagerness' => 'moderate',
));
});
С этим правилом пользователи смогут добавлять класс moderate-prerender к любому блоку, который поддерживает расширенный пользовательский интерфейс для добавления классов, и таким образом они смогут вручную включать любую ссылку по требованию.
Пожалуйста, обратитесь к спецификации Speculation Rules API для получения подробной информации о том, как может выглядеть определение правила.
Настройка через пользовательский интерфейс
Предыдущий пример уже намекает на то, как спекулятивная загрузка может быть настроена через пользовательский интерфейс. Хотя специальный интерфейс для этой функции, подобный тому, что существует в плагине Speculative Loading, выходит за рамки WordPress Core, многие типы блоков предоставляют поле «Дополнительные CSS-классы» на панели «Расширенные» в боковой панели блока.
WordPress Core имеет встроенную поддержку CSS-классов no-prefetch и no-prerender. Вы можете добавить их к любому блоку, чтобы отключить предварительную загрузку или предварительный рендеринг ссылок внутри этого блока соответственно. Обратите внимание, что no-prefetch отключает оба варианта, то есть полностью отключает спекулятивную загрузку, поскольку предварительная загрузка является частью предварительного рендеринга. Пожалуйста, обратитесь к разделу об исключении URL-шаблонов для получения рекомендаций о том, когда может быть полезно исключить URL из предварительной загрузки или предварительного рендеринга.
Этот механизм позволяет продвинутым пользователям осуществлять детальный контроль над спекулятивной загрузкой для конкретных блоков.
Итоги и дополнительная информация
Функция спекулятивной загрузки в WordPress 6.8 является большим достижением для производительности WordPress и веба в целом, начиная процесс загрузки страницы еще до того, как происходит навигация пользователя.
Путем дальнейшей точной настройки в соответствии с потребностями вашего сайта вы можете достичь еще большего повышения производительности, чем при конфигурации по умолчанию.
