Измерение производительности: Lighthouse и основные веб-показатели

Lighthouse — стандартный инструмент для измерения производительности веб-приложений. Запустите его в Chrome DevTools (на вкладке Lighthouse) или через CLI (npx lighthouse https://yoursite.com). При оценке островной архитектуры запускайте Lighthouse на показательных страницах до и после миграции, чтобы объективно измерить улучшения.

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

В React SPA отрисовка LCP часто задерживается, поскольку браузер должен загрузить и выполнить JavaScript до того, как React отобразит элемент LCP. При островной архитектуре содержимое LCP находится в исходном HTML, поэтому выполнение JavaScript не блокирует LCP. Это одно из наиболее значимых измеримых преимуществ.

Общее время блокировки измеряет, как долго основной поток заблокирован задачами JavaScript продолжительностью более 50 мс. Гидратация крупного React SPA может давать сотни миллисекунд TBT. Архитектура островов значительно сокращает TBT, поскольку объём выполняемого JavaScript пропорционален числу островов, а не размеру страницы.

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

Задержка первого ввода (теперь заменённая показателем Interaction to Next Paint, INP) измеряет, насколько быстро страница реагирует на действия пользователя. Архитектура островов улучшает INP, поскольку каждый остров использует небольшой специализированный пакет JavaScript. Взаимодействия внутри острова выполняются быстро, поскольку для планирования работы не требуется обрабатывать большое дерево React.

Типичное сравнение для страницы блога: полноценный React SPA может получить на мобильном устройстве от 45 до 65 баллов в Lighthouse (TBT: 800 мс, LCP: 3,2 с). Тот же контент на сайте Astro с одним островом React может получить от 90 до 98 баллов (TBT: 80 мс, LCP: 1,1 с). Преимущество особенно заметно на страницах с большим объёмом контента и ограниченной интерактивностью.

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

Архитектура островов особенно хорошо подходит для сайтов с большим объёмом контента и разрозненной интерактивностью: блогов (чтение контента, редкие действия «нравится» или комментарии), документации (чтение документов, редкий поиск или кнопка копирования кода), целевых страниц (в основном статичных, с островом формы подписки на рассылку) и страниц товаров в интернет-магазинах (статичные изображения и описание, остров добавления в корзину).

Google использует основные веб-показатели (LCP, INP, CLS) в качестве сигналов ранжирования. Улучшение этих показателей с помощью архитектуры островов напрямую повышает позиции сайта в результатах поиска. Сайт, повысивший оценку Lighthouse для мобильных устройств с 55 до 92 благодаря переходу на архитектуру островов, одновременно улучшает и пользовательский опыт, и поисковую оптимизацию.

Команды, переходящие с Next.js React SPA на Astro для маркетинговых сайтов и сайтов с документацией, сообщают о стабильных результатах: объём JavaScript уменьшается на 70–90%, оценки производительности на мобильных устройствах повышаются на 20–40 баллов, а расходы на серверный хостинг снижаются, поскольку статические файлы раздаются через CDN без накладных расходов на серверный рендеринг для каждого запроса.

Почему архитектура островов значительно сокращает общее время блокировки (TBT)?

Архитектура островов улучшает все основные веб-показатели: LCP выигрывает благодаря HTML, отрисованному на сервере, TBT снижается, поскольку объём JavaScript пропорционален интерактивности, CLS уменьшается благодаря стабильным макетам, отрисованным на сервере, а INP улучшается благодаря небольшим специализированным пакетам островов. Оценки Lighthouse для страниц с большим объёмом контента значительно повышаются. Этот подход не подходит для приложений с высокой интерактивностью, но отлично работает для блогов, документации, целевых страниц и интернет-магазинов.