tgoop.com/super_oleg_dev/58
Last Update:
LCP - метрика скорости отрисовки самого значимого контента на странице, и в теории полезного для пользователя.
Как правило это некое самое большое изображение в видимой области страницы.
Первый инсайт из статьи - LCP помимо изображения может быть video элементом, или текстом, как правило это h1 или h2 заголовок.
Хороший пример - это Smashing Magazine, у которых в мобильной версии именно заголовок статьи является LCP, а до оптимизации была аватарка автора (и заодно отличная статья как Smashing Magazine улучшали Web Vitals - https://www.smashingmagazine.com/2021/12/core-web-vitals-case-study-smashing-magazine/).
Второй инстайт - LCP это комплексная метрика, и ее оптимизация состоит из множества этапов.
В первую очередь, для ускорения надо уменьшить LCP элемент, и соответственно уменьшить время до его отрисовки.
Что мы можем сделать для изображения:
- Выбираем лучший формат, webp или avif (тут поможет сервис imgproxy или тег picture)
- Прогоняем через оптимизаторы для уменьшения размера (сервис squoosh или imgproxy)
- Отдаем оптимальный размер с помощью srcset
Для видео:
- Формат mp4 и h264 кодек
- Компрессия и удаление аудио дорожки
- Используем CDN
Для текста:
- Формат woff2
- Self-hosted хранение шрифтов
- Очищаем от неиспользуемых начертаний и вариаций
- В идеале используем только системные шрифты
Следующая важная метрика для оптимизации, составная LCP - Time To First Byte, время до ответа нашего сервера:
- Используем более мощный сервер/хостинг по возможности
- Используем CDN
- Кэшируем все что можно с помощью cache-control
- Используем Server-Side Rendering / Static-Site Generation / Incremental Static Regeneration
- Мониторим производительность нашего SSR (время запросов к API, время на рендер, etc.)
- Обязательно измеряем TTFB метрику (с помощью https://zizzamia.github.io/perfume/ или https://github.com/GoogleChrome/web-vitals и таких сервисов как `Calibre`)
Затем проводим аудит приоритетов загрузки ресурсов нашего приложения:
- Добавляем preload нашего LCP изображения и/или файла шрифтов
- loading=”lazy” подходит почти для всех изображений, кроме LCP элемента, это уменьшит приоритет загрузки
- Используем подходящий font-display, рекомендуется swap, но может быть скачок контента при смене шрифтов, выбирайте лучший для вас вариант
- Повышаем приоритет важных ресурсов (используем Priority Hints - https://web.dev/priority-hints/, инлайн критичных ресурсов в HTML, добавляем defer для большинства скриптов)
И последнее, ускоряем Critical Rendering Path за счет ускорения блокирующих ресурсов:
- Минификация JS и CSS
- defer и async скрипты
- Critical CSS и code splitting
- Избавляемся от third-party скриптов, либо максимально откладываем их запуск. Также, можно вынести их в Web Workers с помощью partytown - https://partytown.builder.io/
BY SuperOleg dev notes
Share with your friend now:
tgoop.com/super_oleg_dev/58