Улучшение загрузки следующей страницы

Веб-функции: правила прогнозирования

Один из самых эффективных способов ускорить загрузку страниц – начать загружать следующую страницу до того, как пользователь перейдет на нее. Это можно сделать с помощью упреждающей загрузки, используя Speculation Rules API.

Принцип работы

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

Правила могут представлять собой список URL, заданный в коде с помощью ключа urls (правило списка), или ключ where, содержащий набор селекторов href и селекторов CSS, которые используются для поиска ссылок на странице (правило document).

Правила также могут включать необязательное свойство eagerness, которое указывает, когда страница должна быть предварительно загружена или отрисована. Для свойства eagerness можно задать значение immediate, eager, moderate или conservative. immediate начинает спекулятивную загрузку как можно раньше, а остальные ждут сигналов от пользователя, например наведения указателя на короткое или более длительное время или нажатия на страницу.

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

Для чего его можно использовать

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

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

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

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

Аналогично, предварительная выборка – это более консервативный выбор, чем предварительная отрисовка. Она использует меньше ресурсов (как на стороне клиента, так и на стороне сервера), но приносит меньше пользы пользователю. Это хороший вариант для начальной реализации, а затем, когда разработчик явно запросит это, можно перейти к предварительной отрисовке.

Как использовать полученные данные

Правила Speculation Rules имеют формат JSON и могут быть включены в тег <script type="speculationrules">. Правила можно включить в раздел <head> или <body> документа или добавить динамически с помощью JavaScript.

Также можно использовать tag на глобальном уровне или для отдельных правил. Если этот тег задан, он будет включен в заголовок Sec-Speculation-Tags и позволит вам определить, какие предположения были сделаны на стороне сервера.

Пример простого правила со списком URL для предварительной загрузки заданных URL

<script type="speculationrules">
  {
    "tag": "product-page-speculations",
    "prefetch": [
      {
        "urls": ["/product/1", "/product/2", "/product/3"]
      }
    ]
  }
</script>

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

<script type="speculationrules">
  {
    "tag": "all-links-speculations",
    "prerender": [{
      "where": { "href_matches": "/*" }
    }]
  }
</script>

<script type="speculationrules">
  {
    "tag": "speculations-with-exclusions",
    "prerender": [{
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": {"href_matches": "/wp-admin"}},
          { "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
          { "not": {"selector_matches": ".do-not-prerender"}},
          { "not": {"selector_matches": "[rel~=nofollow]"}}
        ]
      }
    }]
  }
</script>

Пример набора правил со смешанными условиями

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

<script type="speculationrules">
  {
    "prefetch": [{
      "tag": "prefetch-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "eager"
    }],
    "prerender": [{
      "tag": "prerender-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

Рекомендации

  • РЕКОМЕНДУЕТСЯ использовать правила упреждающей загрузки для предзагрузки и предварительной отрисовки страниц, которые пользователь, скорее всего, посетит следующими.
  • РЕКОМЕНДУЕТСЯ использовать правила спекуляции для статических сайтов, контент которых меняется редко и страницы которых проще создавать, особенно если они кешируются на периферии.
  • РЕКОМЕНДУЕТСЯ соблюдать осторожность при использовании правил спекуляции для динамических страниц, контент которых часто меняется, может устаревать и требует больше ресурсов для создания.
  • РЕКОМЕНДУЕТСЯ отдавать предпочтение правилам документов, а не правилам списков, поскольку они более гибкие, позволяют использовать одно и то же правило на нескольких страницах и могут использоваться для предзагрузки и предварительной отрисовки страниц, которые не известны заранее.
  • РЕКОМЕНДУЕТСЯ учитывать различия между предварительной выборкой и предварительной отрисовкой и выбирать подходящий вариант для каждого случая. Предварительная отрисовка требует больше ресурсов, чем предварительная загрузка, и может вызывать больше непредвиденных побочных эффектов в сложных приложениях, отображающих динамическое состояние, но обеспечивает более удобное взаимодействие с пользователем. Если вы не уверены, какой вариант выбрать, обратитесь к разработчику.
  • РЕКОМЕНДУЕТСЯ учитывать компромиссы между разными уровнями eagerness и выбирать подходящий для вашего случая. Более активное упреждающее выполнение повышает удобство для пользователей, но требует больше ресурсов и может привести к непредвиденным побочным эффектам в сложных приложениях, которые показывают динамическое состояние. Если вы не уверены, спросите у разработчика, какой вариант он предпочитает.
  • НЕ злоупотребляйте правилами упреждающей загрузки, например не применяйте их ко всем ссылкам на странице. В браузерах есть ограничения (2 предположения для неактивных предположений). Значение immediate следует использовать только для небольшого количества ссылок.
  • НЕ спекулируйте URL, которые могут вызвать изменения состояния, например /logout или /add-to-cart, и явно исключайте их из правил спекуляции, если они могут быть включены в правила документа.
  • НЕ ИСПОЛЬЗУЙТЕ правила предположений в одностраничных приложениях. Правила спекуляции предназначены для многостраничных приложений, в которых браузер переходит к новому документу при каждой навигации. В одностраничных приложениях браузер не переходит к новому документу при каждой навигации, поэтому правила предположений не будут работать должным образом.

Поддержка браузеров и резервные стратегии

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