Islands architecture: гидратация только интерактивных частей

Прямой ответ

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

<article>...</article>              <!-- статика: без кода -->
<search-island>...</search-island>  <!-- остров: гидратируется -->

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

Разделение страницы и состав островов

Страница разделяется на области по наличию интерактивности, поэтому состав островов определяется действиями пользователя, а не структурой разметки.

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

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

Независимость островов. Острова гидратируются отдельно, поэтому задержка привязки одного острова не блокирует остальные.

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

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

Привязка по взаимодействию и время блокировки

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

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

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

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

Практическое следствие: привязка всех островов при загрузке занимает основной поток, поэтому период неотвечающего интерфейса сохраняется несмотря на частичную гидратацию.

Объём кода и влияние на метрики

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

Код острова. Загружается только код интерактивных компонентов, поэтому объём загрузки сокращается относительно гидратации всей страницы.

Время выполнения. Привязка выполняется для части компонентов, поэтому загрузка основного потока сокращается.

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

Практическое следствие: страница, гидратируемая целиком, загружает код для областей без действий, поэтому время до взаимодействия растёт с объёмом разметки.

О рендеринге на сервере — в статье про SSR; о метриках — в статье про Core Web Vitals.

Практика: применение архитектуры островов

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

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

3. Используйте привязку по взаимодействию. Начальный период неотвечающего интерфейса исключается.

4. Задавайте приоритет привязки по ожидаемому действию. Задержка реакции на действие сокращается.

5. Гидратируйте острова независимо. Задержка привязки одного острова не блокирует остальные.

6. Не выделяйте островом статические области. Загрузка кода без обработчиков не даёт интерактивности.

7. Измеряйте время до взаимодействия. Улучшение метрики подтверждается измерением.

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

1. Не гидратируйте все острова при загрузке страницы. Основной поток занят, поэтому период неотвечающего интерфейса сохраняется.
2. Учитывайте границу острова при изменении разметки. Область, получившая действие, требует выделения островом.
3. Сопоставляйте способ привязки с расположением острова. Область ниже первого экрана привязывается при видимости.
4. Фиксируйте измерение метрик до и после изменения. Влияние на загрузку подтверждается измерением.
5. Пересматриваем состав островов при изменении страницы. Новая интерактивная область требует выделения.

Практический сценарий: частичная гидратация не сократила время блокировки

Контекст: страница была переведена на архитектуру островов, но время до взаимодействия почти не изменилось.

1. Диагностика. Измерение показало, что все острова гидратировались сразу при загрузке страницы. Основной поток выполнял привязку всех компонентов одновременно, поэтому период блокировки соответствовал прежнему значению.
2. Причина. Разделение на острова сократило объём кода, но способ привязки остался прежним: все компоненты гидратировались при загрузке.
3. Действия. (а) Заменили привязку при загрузке на привязку по взаимодействию для островов, не требующих немедленного отклика; (б) настроили привязку при видимости для областей ниже первого экрана, чтобы код выполнялся до возможного действия; (в) задали приоритет привязки для острова поиска, поскольку действие ожидается сразу; (г) сузили границу островов до минимальных интерактивных областей, чтобы объём кода сократился; (д) измерили время до взаимодействия и убедились в сокращении периода блокировки.
4. Результат. Страница отвечает на действия сразу после отображения, поскольку привязка островов выполняется по мере необходимости.

Вывод: разделение страницы на острова сокращает объём загружаемого кода, но не устраняет блокировку при привязке всех островов одновременно. Привязка по взаимодействию и по видимости с приоритетом для ожидаемых действий сокращает время до взаимодействия.

FAQ

Что такое остров в архитектуре страниц? Интерактивная область страницы, гидратируемая независимо от остальной разметки. Статические области кода не требуют.

Почему недостаточно разделить страницу на острова? Объём кода сокращается, но привязка всех островов при загрузке занимает основной поток, поэтому период блокировки сохраняется.

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

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

Источники: Islands Architecture (Jason Miller), web.dev Rendering on the Web, web.dev TBT — ссылки в шапке.