Узнайте о прогнозирующей предварительной выборке и о том, как ее реализует Guess.js.
В своем сеансе «Быстрая веб-навигация с помощью прогнозирующей предварительной выборки» на Google I/O 2019 я начал с разговора об оптимизации веб-приложений с помощью разделения кода и потенциальных последствиях для производительности для последующей навигации по страницам. Во второй части доклада я обсудил, как повысить скорость навигации с помощью Guess.js для настройки прогнозирующей предварительной выборки:
Разделение кода для более быстрых веб-приложений
Веб-приложения работают медленно, а JavaScript — один из самых дорогих ресурсов, которые вы поставляете. Ожидание медленной загрузки веб-приложения может расстроить ваших пользователей и снизить конверсию.
Отложенная загрузка — это эффективный метод уменьшения количества байтов JavaScript, передаваемых по сети. Вы можете использовать несколько методов для отложенной загрузки JavaScript, в том числе:
- Разделение кода на уровне компонентов
- Разделение кода на уровне маршрута
Благодаря разделению кода на уровне компонентов вы можете перемещать отдельные компоненты в отдельные фрагменты JavaScript. При определенных событиях вы можете загружать соответствующие сценарии и визуализировать компоненты.
Однако при разделении кода на уровне маршрута вы перемещаете целые маршруты на независимые фрагменты. Когда пользователи переходят с одного маршрута на другой, им необходимо загрузить соответствующий JavaScript и загрузить запрошенную страницу. Эти операции могут привести к значительным задержкам, особенно в медленных сетях.
Предварительная загрузка JavaScript
Предварительная выборка позволяет браузеру загружать и кэшировать ресурсы, которые, скорее всего, понадобятся пользователю в ближайшее время. Обычный метод — использовать <link rel="prefetch"> , но есть две распространенные ошибки:
- Предварительная выборка слишком большого количества ресурсов ( перезагрузка ) потребляет много данных.
- Некоторые ресурсы, необходимые пользователю, могут никогда не быть предварительно загружены.
Прогнозирующая предварительная выборка решает эти проблемы, используя отчет о шаблонах навигации пользователей, чтобы определить, какие ресурсы следует выбирать предварительно.
Прогнозирующая предварительная выборка с помощью Guess.js
Guess.js — это библиотека JavaScript, обеспечивающая функцию прогнозирующей предварительной выборки. Guess.js использует отчет Google Analytics или другого поставщика аналитики для построения прогнозной модели, которую можно использовать для умной предварительной выборки только того, что может понадобиться пользователю.
Guess.js имеет интеграцию с Angular , Next.js , Nuxt.js и Gatsby . Чтобы использовать его в своем приложении, добавьте эти строки в конфигурацию вашего веб-пакета, чтобы указать идентификатор представления Google Analytics :
const { GuessPlugin } = require('guess-webpack');
// ...
plugins: [
// ...
new GuessPlugin({ GA: 'XXXXXX' })
]
// ...
Если вы не используете Google Analytics, вы можете указать reportProvider и загрузить данные из любимого сервиса.
Интеграция с фреймворками
Чтобы узнать больше о том, как интегрировать Guess.js с вашим любимым фреймворком, посетите эти ресурсы:
Краткое описание интеграции с Angular можно посмотреть в этом видео:
Как работает Guess.js?
Вот как Guess.js реализует прогнозирующую предварительную выборку:
- Сначала он извлекает данные для пользовательских шаблонов навигации от вашего любимого поставщика аналитики.
- Затем он сопоставляет URL-адреса из отчета с фрагментами JavaScript, созданными веб-пакетом.
- На основе извлеченных данных он создает простую прогнозирующую модель того, на какие страницы пользователь, скорее всего, перейдет с той или иной страницы.
- Он вызывает модель для каждого фрагмента JavaScript, предсказывая, какие другие фрагменты могут понадобиться в дальнейшем.
- Он добавляет инструкции предварительной выборки к каждому фрагменту.
Когда Guess.js будет завершен, каждый чанк будет содержать инструкции по предварительной выборке, подобные:
__GUESS__.p(
['a.js', 0.2],
['b.js', 0.8]
)
Этот код, сгенерированный Guess.js, сообщает браузеру рассмотреть возможность предварительной загрузки фрагмента a.js с вероятностью 0.2 и фрагмента b.js с вероятностью 0.8 .
Как только браузер выполнит код, Guess.js проверит скорость соединения пользователя. Если этого достаточно, Guess.js вставит два тега <link rel="prefetch"> в заголовок страницы, по одному для каждого фрагмента. Если пользователь находится в высокоскоростной сети, Guess.js предварительно выполнит выборку обоих фрагментов. Если у пользователя плохое сетевое соединение, Guess.js будет предварительно загружать только чанк b.js поскольку он с высокой вероятностью понадобится.
Узнать больше
Чтобы узнать больше о Guess.js, посетите эти ресурсы: