Как исправить медленный LCP из-за картинок

Исправьте медленную загрузку изображения Largest Contentful Paint (LCP) за 4 шага: измените его размер под область отображения, конвертируйте в WebP или AVIF, настройте предварительную загрузку (preload) и установите высокий приоритет fetchpriority. Первые 2 шага дают наибольший эффект и не требуют изменений в разметке страницы.

На большинстве страниц элементом LCP является одно главное изображение (hero image). Это значит, что оптимизация LCP сводится к работе с одним файлом, а не со всем сайтом. Исправление этого файла обычно дает более заметный результат, чем любые другие методы оптимизации.

Что измеряет LCP

LCP фиксирует время, необходимое для отрисовки самого крупного видимого элемента с момента начала загрузки страницы. Google считает хорошим показатель в 2,5 секунды или меньше, от 2,5 до 4 секунд — требующим улучшения, а более 4 секунд — неудовлетворительным.

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

Как найти нужный элемент

Запустите Lighthouse и найдите пункт Largest Contentful Paint element, где указан конкретный измеряемый элемент. Действовать наугад — это потеря времени, так как элемент часто оказывается не тем, о котором думают в первую очередь.

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

Оптимизация изображения по степени влияния

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

1. Измените размер изображения до максимального размера, в котором оно будет отображаться, удвоив его для экранов с высокой плотностью пикселей.
2. Конвертируйте его в WebP или в AVIF, если это большая фотография.
3. Сожмите файл, чтобы размер главного изображения не превышал 200 KB — этого можно достичь при полной ширине на большинстве макетов.
4. Добавьте атрибуты width и height, чтобы браузер зарезервировал место и не происходило сдвига макета (CLS).
5. Настройте предварительную загрузку (preload) изображения в заголовке страницы, чтобы браузер сразу начал его скачивание.
6. Установите для элемента изображения атрибут fetchpriority со значением high, сообщая браузеру, что этот файл имеет наивысший приоритет.

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

Почему изменение размера эффективнее сжатия

Разрешение определяет большую часть размера файла, поэтому изменение размера экономит больше веса, чем любые настройки качества. Фотография шириной 4000 пикселей, отображаемая в размере 1200 пикселей, содержит в 11 раз больше пиксельных данных, чем страница способна показать.

Третья строка показывает, почему изменение размера стоит на первом месте. Изменение размера без сжатия оказалось эффективнее сжатия без изменения размера, а их сочетание дало наилучший результат. Цифры зависят от изображения и соединения, но закономерность остается неизменной.

Preload и fetchpriority

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

Используйте preload только для одного изображения. Предварительная загрузка нескольких файлов сводит пользу на нет, так как браузер будет распределять ресурсы так же, как и без нее. Установка fetchpriority в значение high дает схожий результат с меньшим количеством кода и часто оказывается достаточной для изображений, которые уже присутствуют в исходном HTML.

Ошибки, ухудшающие показатель LCP

• Ленивая загрузка (lazy loading) главного изображения. Ленивая загрузка задерживает файл, который нужен в первую очередь. Применяйте ее только для элементов ниже первого экрана.
• Загрузка главного изображения через JavaScript. Изображение, добавляемое скриптом, не начнет скачиваться, пока этот скрипт не выполнится.
• Использование фонового изображения в CSS. Фоновые изображения обнаруживаются позже элементов img, и им сложнее задать приоритет.
• Предварительная загрузка нескольких изображений. Конкурирующие приоритеты полностью нивелируют преимущество.
• Отсутствие атрибутов width и height. Сдвиг макета ухудшает другой важный показатель, пока вы пытаетесь улучшить этот.

Если элемент LCP — это текст

Задержка текстового LCP обычно вызвана веб-шрифтами, а не самим текстом. Браузер получает слова сразу, но ждет загрузки файла шрифта перед их отображением.

Установите свойство font-display в значение swap, чтобы текст сначала выводился системным шрифтом и заменялся веб-шрифтом по мере его загрузки. Настройте preload для одного самого важного файла шрифта и оптимизируйте набор символов (subsetting) под используемые на сайте. Это часто позволяет уменьшить размер шрифта с 200 KB до менее чем 30 KB. Размещение шрифтов на собственном домене избавляет от лишнего запроса к стороннему ресурсу.

Время ответа сервера определяет предел

Показатель LCP не может быть быстрее времени, за которое сервер отдает первый байт (TTFB), поэтому медленный сервер сводит на нет любые другие улучшения. Стремитесь к показателю TTFB менее 600 миллисекунд.

Проверьте этот параметр перед оптимизацией изображений: если сервер отвечает 2 секунды, достичь целевого LCP в 2,5 секунды невозможно, что бы вы ни делали с файлами. Кэширование, более быстрый хостинг или использование сети доставки контента (CDN) решают эту проблему. Оптимизация изображений улучшает оставшуюся часть процесса, а не борется с внешними ограничениями.

Сторонние скрипты также задерживают изображение

Аналитика, баннеры согласия на файлы cookie, виджеты чатов и рекламные скрипты конкурируют с главным изображением за пропускную способность и процессорное время. Даже идеально оптимизированное изображение загрузится поздно, если перед ним загружаются 12 скриптов.

Баннеры согласия на cookie наносят наибольший вред, так как многие из них блокируют отрисовку до выбора пользователя. Загружайте сторонние скрипты с атрибутами defer или async, чтобы они не задерживали страницу, и проведите аудит того, сколько из них действительно необходимы. Удаление 3 неиспользуемых скриптов отслеживания часто улучшает LCP сильнее, чем очередной этап сжатия изображений.

Правильное тестирование изменений

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

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

Сохранение скорости LCP в будущем

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

Согласуйте максимальную ширину и максимальный размер файлов для главных изображений, зафиксируйте это правило и применяйте его к каждой новой странице. Правило вроде «ширина 1920 пикселей и размер до 200 KB» легко проверить, и оно подходит почти для любого дизайна. Если контент публикуют несколько человек, письменное правило важнее технических навыков, так как общий показатель сайта зависит от худшей страницы, а не от лучшей.

Подготовка главных изображений за один проход

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

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