07 Фев
WordPress 6.8 представляет предварительную загрузку, которая может привести к почти мгновенной загрузке страниц, загружая URL-адреса до того, как пользователь перейдет к ним. Эта функция основана на Speculation Rules API, веб-платформе, которая позволяет определять правила для того, какие типы URL-адресов предварительно загружать или предварительно отрисовывать, и как рано должна происходить такая предварительная загрузка.
Контекст
До внедрения в ядро WordPress эта функция успешно использовалась на более чем 50 000 сайтах WordPress с помощью плагина Speculative Loading feature plugin, который теперь перенесен в ядро с некоторыми изменениями. На основе данных, полученных из HTTP Archive и Chrome User Experience Report (CrUX) за все время с момента запуска плагина, сайты, на которых была включена предварительная загрузка, улучшили свой показатель LCP (Largest Contentful Paint) в среднем на ~1,9%, что, хотя и может показаться небольшим числом, является огромным скачком для одной функции, учитывая, что в данных участвует множество сайтов с различными последствиями для производительности.
API правил спекуляции был впервые представлен в начале 2023 года и с тех пор постоянно набирает популярность. Сегодня более 8% навигаций в Chrome используют правила спекуляции. Соответствующий важный запуск произошел несколько месяцев назад, когда Cloudflare включила спекулятивную загрузку в большом масштабе с помощью своей функции Speed Brain.
API правил спекуляции поддерживается Chrome, Edge и Opera, что означает, что подавляющее большинство конечных пользователей, просматривающих веб-страницы, могут воспользоваться его возможностями. Для пользователей браузеров, не поддерживающих API, никаких негативных последствий нет, поскольку API правил спекуляции является прогрессивным улучшением. Браузеры без поддержки просто игнорируют его присутствие, то есть сайты ведут себя так же, как и раньше.
“WordPress 6.8: Загрузка до клика – скорость будущего уже сегодня!”
Поведение по умолчанию и настройка
Реализация в ядре WordPress включает предварительную загрузку по умолчанию во внешнем интерфейсе всех сайтов, за исключением случаев, когда пользователь вошел в систему или когда на сайте отключены красивые постоянные ссылки. 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 web specification, и все они будут рассматриваться относительно внешнего интерфейса сайта. Для сайтов, где домашний URL-адрес находится в подкаталоге, WordPress автоматически добавит соответствующий сегмент пути, чтобы разработчикам плагинов не нужно было об этом беспокоиться.
Хотя поведение WordPress Core по умолчанию – предварительная загрузка URL-адресов, сайты могут выбрать предварительную отрисовку URL-адресов. Это приводит к значительному повышению производительности, но также имеет дополнительные последствия для спекулятивно загруженных URL-адресов, поскольку будет загружен даже их код на стороне клиента. Если сайт содержит какую-либо логику на стороне клиента, которая должна запускаться только после того, как пользователь фактически перейдет по URL-адресу, необходимо сначала проверить, выполняется ли предварительная отрисовка сайта, и запускать такую логику только после того, как произойдет переход (см. документацию “Detect prerender in JavaScript”). Распространенным вариантом использования этого является аналитика (см. документацию “Impact on analytics”). Многие популярные провайдеры уже поддерживают предварительную отрисовку, поэтому никаких изменений не требуется. Но если ваш сайт или ваш плагин включает в себя такую функциональность на определенных 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”. В зависимости от различных критериев, таких как состояние 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. API правил спекуляции также определяет другое значение готовности – immediate, однако это значение настоятельно не рекомендуется для правил на уровне документа, которые спекулятивно загружают какие-либо URL-адреса, поэтому API WordPress Core не позволяет использовать его для своей общей конфигурации.
Если вы хотите получить еще больший прирост производительности, вот пример, который использует фильтр для выбора “prerender” с “moderate” готовностью. Это похоже на то, что реализует плагин Speculative Loading feature plugin, и это может привести к значительному повышению производительности. Пожалуйста, имейте в виду влияние предварительной отрисовки на логику 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 по умолчанию были тщательно продуманы, чтобы безопасно обслуживать большинство сайтов, поэтому используйте этот фрагмент кода, только если вы уверены, что это не окажет негативного влияния на ваш сайт.
Включение дополнительных правил спекуляции
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 feature plugin, выходит за рамки WordPress Core, многие типы блоков предоставляют поле “Дополнительные классы CSS” на панели “Дополнительно” на боковой панели блока.
WordPress Core имеет встроенную поддержку классов CSS no-prefetch и no-prerender. Вы можете добавить их в любой блок, чтобы ссылки в этом блоке были исключены из предварительной загрузки или предварительной отрисовки соответственно. Обратите внимание, что no-prefetch исключает и то, и другое, то есть полностью исключает спекулятивную загрузку, поскольку предварительная загрузка является частью предварительной отрисовки. Пожалуйста, обратитесь к разделу об исключении шаблонов URL-адресов для получения указаний о том, когда может быть полезно исключить URL-адреса из предварительной загрузки или предварительной отрисовки.
Этот механизм позволяет опытным пользователям детально контролировать спекулятивную загрузку для определенных блоков.
Итоги и дальнейшее чтение
Функция спекулятивной загрузки в WordPress 6.8 – это большая победа для производительности WordPress и Интернета в целом, поскольку она запускает процесс загрузки страницы еще до того, как пользователь перейдет по ней. Настроив ее в соответствии с потребностями вашего сайта, вы можете добиться еще большего повышения производительности, чем с конфигурацией по умолчанию.
Автор статьи: Felix Arntz
Источник статьи на английском языке: здесь
