LCP, она же Largest Contentful Paint, она же Отрисовка Самого Крупного Контента – метрика, показывающая, как быстро на экране пользователя появляется самый большой элемент после перехода по ссылке.
Чаще всего им является картинка, видеоролик или крупный текстовый блок. LCP помогает понять, насколько быстро человек увидит основное содержимое страницы и почувствует, что она вообще загружается.
Выглядит это так:
На скриншоте видно, как сначала прогружается поисковая строка с запросом, а потом ее основа – база в виде выжимки информации с фотографиями, которые еще пока не подгрузились. Это и будет LCP.
Какой показатель LCP считается хорошим, а какой – нет
2,5 секунды – не дольше. Все что больше – хуже. Меньше – лучше.
Как улучшить показатель
Ниже – варианты, как можно улучшить LCP.
Ускорить время ответа сервера
Чем быстрее сервер отдает контент браузеру, тем лучше скорость загрузки и, собственно, лучше LCP. Здесь обычно начинают с фреймворков – многие из них предлагают рекомендации по ускорению работы.
Дальше – CDN. Это система, которая хранит данные на серверах по всему миру, сокращая задержки. Следом – кэширование и так называемые «воркер-сервисы». Кэширование поможет в том случае, если страницы меняются редко – они будут сохраняться на устройстве пользователя, чтобы не грузиться каждый раз по новой.
Что до «воркер-сервисов», – это скрипты, запускаемые браузером в фоновом процессе. Они не зависят от страницы, с которой взаимодействуют и, по сути, представляют собой связующее звено между приложением, браузером и сетью. Позволяют выполнять задачи, которые не требуют взаимодействия с пользователем (или даже нахождения на вкладке браузера).
Ускорить загрузку элементов
Время, которое требуется контенту для загрузки, напрямую влияет на LCP, так что обычно имеет смысл поработать и непосредственно с элементами на странице.
Вот что тут можно сделать:
- Оптимизировать изображения – можно включить lazy loading (так называемая «ленивая загрузка»), тогда изображения будут загружаться по мере прокрутки страницы. Также есть смысл сжать их (но так, чтобы без потери качества) или перевести в современный формат WebP. Для еще большей скорости можно подключить вышеупомянутый CDN – это разгрузит сервер и ускорит «доставку» контента.
- Сначала загрузить самое важное – шрифты, изображения, видеозаписи.
- Использовать gzip или brotli. Это виды сжатия. Они могут значительно уменьшить размер файлов HTML, CSS и JavaScript при их передаче между сервером и браузером.
CSS – язык, который отвечает за внешний вид страниц. Почти каждый сайт использует его связке с HTML для создания красивых и удобных страниц. HTML организует структуру документа – заголовки, абзацы, списки и другие элементы, а CSS управляет их оформлением: цветами, шрифтами, отступами и многим другим. JavaScript же – основа. Почти все, что есть сейчас в интернете, создано с его помощью. Он дополняет как CSS, так и HTML, добавляя элементам интерактивности.
Оптимизировать рендер на клиентской стороне
Способ актуален для сайтов, которые используют клиентский рендеринг. То есть когда страницы формируются в браузере с помощью JavaScript, а сервер лишь отдает исходные данные. Вариант удобен для динамических приложений, но у него есть минус: чем больше сайт «обрастает» библиотеками и кодом, тем медленнее он будет загружаться.
Впрочем, это тоже можно решить. Скажем, убрав лишние пробелы и сократив количество переменных в коде.
Как альтернативный вариант – генерировать статические HTML-файлы с помощью headless-браузера и передавать их пользователям. Это тоже снизит нагрузку на сервер, однако уже не подойдет для динамического контента.
Headless-браузер – вариация браузера без визуальной оболочки. Она загружает страницы, выполняет все стандартные действия, но не имеет при этом графического интерфейса. Его часто используют для автоматизированного тестирования сайтов, проверки верстки и качества контента.
