[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"page:\u002Fblog\u002Flargest-contentful-paint-lcp-kak-snizit":3,"crumbs:\u002Fblog\u002Flargest-contentful-paint-lcp-kak-snizit":9},{"path":4,"url":5,"title":6,"description":7,"h1":6,"html":8},"\u002Fblog\u002Flargest-contentful-paint-lcp-kak-snizit\u002F","https:\u002F\u002Fseopeak.ru\u002Fblog\u002Flargest-contentful-paint-lcp-kak-snizit\u002F","Largest Contentful Paint (LCP): как снизить","LCP — момент, когда появляется самый крупный элемент экрана. Снижают его быстрым HTML, лёгкой картинкой героя без ленивой загрузки и отрисовкой без ожидания скрипта.","\u003Cp>Largest Contentful Paint (LCP) — это момент, когда в видимой части экрана появляется самый крупный элемент страницы. Обычно это фото героя, крупный заголовок или постер видео. До этой отметки посетитель ещё не видит главное. LCP входит в Core Web Vitals. Хороший результат — до 2,5 секунды у 75% визитов. От 2,5 до 4 секунд метрика средняя, дольше 4 секунд — слабая.\u003C\u002Fp>\n\u003Cp>Снизить LCP значит сократить время до этого крупного элемента, а не до всей страницы целиком. Картинки ниже первого экрана на цифру почти не влияют. Сначала смотрят, что именно браузер признал самым крупным, и ускоряют только его. Первая отрисовка разобрана отдельно: \u003Ca href=\"\u002Fblog\u002Ffirst-contentful-paint-fcp-kak-uskorit\u002F\">First Contentful Paint (FCP): как ускорить\u003C\u002Fa>. Отзывчивость после появления контента — в материале \u003Ca href=\"\u002Fblog\u002Ftotal-blocking-time-tbt-kak-snizit\u002F\">Total Blocking Time (TBT): как снизить\u003C\u002Fa>. Общая скорость сайта — в статье \u003Ca href=\"\u002Fblog\u002Fkak-uskorit-zagruzku-sayta\u002F\">как ускорить загрузку сайта\u003C\u002Fa>.\u003C\u002Fp>\n\n\u003Ch2>Из чего складывается LCP\u003C\u002Fh2>\n\u003Cp>Время до крупного элемента делится на четыре отрезка. Их видно в PageSpeed Insights и в панели Performance.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Ответ сервера. Время от перехода по адресу до первого байта HTML. Пока документа нет, рисовать нечего.\u003C\u002Fli>\n\u003Cli>Задержка перед загрузкой ресурса. Документ уже пришёл, а браузер ещё не начал качать картинку или шрифт самого крупного элемента. Часто файл спрятан в скрипте или в стилях и обнаруживается слишком поздно.\u003C\u002Fli>\n\u003Cli>Скачивание ресурса. Сколько длится загрузка самого файла: тяжёлое фото тянет этот отрезок.\u003C\u002Fli>\n\u003Cli>Задержка отрисовки. Файл уже на месте, но элемент не попадает на экран: его держит чужой скрипт, стили или шрифт, который скрывает текст.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Для цели в 2,5 секунды ориентир такой. Около 40% времени уходит на ответ сервера, около 40% — на скачивание файла. Две задержки, до старта загрузки и до отрисовки, держат короче 10% каждая. Это доли, а не жёсткий норматив: если вся цифра уже ниже 2,5 секунды, пропорции не важны. Если же пауза до старта загрузки съедает секунду, уложиться в хорошую зону почти невозможно, даже с лёгкой картинкой.\u003C\u002Fp>\n\n\u003Ch2>Что обычно становится самым крупным элементом\u003C\u002Fh2>\n\u003Cp>На телефоне и на компьютере это часто разные блоки. Широкий баннер на десктопе на узком экране уходит вниз, и самым крупным становится заголовок. Поэтому замер смотрят в двух версиях.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Фото или иллюстрация первого экрана.\u003C\u002Fli>\n\u003Cli>Крупный текстовый блок, чаще заголовок.\u003C\u002Fli>\n\u003Cli>Постер видео, если ролик стоит в первом экране.\u003C\u002Fli>\n\u003Cli>Картинка из фона блока. Браузер учитывает и её, но находит позже, чем обычный тег изображения.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2>Как снизить LCP\u003C\u002Fh2>\n\u003Cp>Цель одна: самый крупный элемент первого экрана должен оказаться в HTML сразу, а его файл — начать качаться без паузы. Ниже — что сделать по шагам.\u003C\u002Fp>\n\u003Cp>1. Найдите элемент. В PageSpeed Insights открывают блок LCP и смотрят, какой узел он назвал. Это и есть единственная цель правки. Ускорять галерею внизу страницы, пока героем числится баннер, бесполезно.\u003C\u002Fp>\n\u003Cp>2. Ускорьте ответ сервера. Кэш готового HTML, короткий маршрут без цепочки редиректов, один переход на https. Если первый байт документа приходит через две секунды, LCP уже не может быть хорошим: на картинку времени не остаётся.\u003C\u002Fp>\n\u003Cp>3. Положите элемент в документ, а не вставляйте скриптом. Заголовок и картинка героя приходят в HTML. Если баннер рисуется после выполнения бандла, браузер узнает адрес файла слишком поздно. Весь этот простой попадает в задержку перед загрузкой.\u003C\u002Fp>\n\u003Cp>4. Не прячьте героя ленивой загрузкой. У картинки первого экрана нет loading="lazy". Ленивая загрузка нужна кадрам ниже сгиба. Герою ставят fetchpriority="high" и при необходимости предзагрузку этого одного файла. Предзагружать пачку картинок не нужно: они отнимут канал у той, что должна появиться первой.\u003C\u002Fp>\n\u003Cp>5. Сделайте файл лёгким. Героя отдают в современном формате, в размере экрана, а не в исходнике на несколько тысяч пикселей. Для разных ширин — свой файл. Скачивание и есть тот отрезок, который сжимается вместе с весом.\u003C\u002Fp>\n\u003Cp>6. Не держите отрисовку. Стили и скрипты, без которых первый экран не собрать, оставляют короткими. Чат, метрика и виджеты этому элементу не нужны. Если самый крупный элемент — текст, на странице один файл шрифта, предзагрузка и показ букв сразу, без скрытия до скачивания. Пока шрифт прячет заголовок, LCP стоит, хотя HTML уже на месте.\u003C\u002Fp>\n\u003Cp>7. Достаньте картинку из фона. Адрес в CSS браузер видит только после разбора стилей. Тот же кадр в теге изображения обнаруживается из HTML сразу. Если фон менять нельзя, этот адрес предзагружают отдельно, тем же файлом, который реально стоит на первом экране.\u003C\u002Fp>\n\u003Cp>8. Не отдавайте первый экран слайдеру. Слайдер часто показывает пустую рамку, пока не выполнится скрипт, или считает самым крупным не первый слайд, а соседний, который посетитель ещё не видит. Первый кадр кладут в HTML как обычную картинку. Листание подключают после отрисовки.\u003C\u002Fp>\n\n\u003Ch2>Как проверить, что стало быстрее\u003C\u002Fh2>\n\u003Cp>Цифру смотрят в PageSpeed Insights, отдельно для телефона и компьютера. После каждой правки сравнивают LCP и четыре отрезка: ответ сервера, пауза до загрузки файла, само скачивание, пауза до отрисовки. Если выросла только одна доля, правят её, а не всё подряд.\u003C\u002Fp>\n\u003Cp>Полевую цифру смотрят в Core Web Vitals по 75-му перцентилю. Лабораторный замер падает сразу. Поле обновляется по мере новых визитов, поэтому несколько дней расхождение нормально. Страницу проверяют с тем героем, который видит живой посетитель: другой баннер для рекламы и теста даёт другую цифру.\u003C\u002Fp>\n\n\u003Ch2>Какой результат считать нормальным\u003C\u002Fh2>\n\u003Cp>Ориентир — до 2,5 секунды у большинства визитов с телефона. Статья и страница услуги укладываются в эту границу, когда заголовок и одна картинка приходят в HTML, а файл героя не тяжёлый и не помечен ленивой загрузкой. Каталог и главная с широким баннером держатся там же, если баннер отдан в размере экрана и не ждёт скрипт слайдера. Если ответ сервера сам по себе длиннее двух секунд, сначала сокращают его: сжатие картинки эту дыру не закроет.\u003C\u002Fp>\n",[10,13],{"path":11,"label":12},"\u002Fblog","Блог",{"path":14,"label":6},"\u002Fblog\u002Flargest-contentful-paint-lcp-kak-snizit"]