[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"page:\u002Fblog\u002Ffirst-contentful-paint-fcp-kak-uskorit":3,"crumbs:\u002Fblog\u002Ffirst-contentful-paint-fcp-kak-uskorit":9},{"path":4,"url":5,"title":6,"description":7,"h1":6,"html":8},"\u002Fblog\u002Ffirst-contentful-paint-fcp-kak-uskorit\u002F","https:\u002F\u002Fseopeak.ru\u002Fblog\u002Ffirst-contentful-paint-fcp-kak-uskorit\u002F","First Contentful Paint (FCP): как ускорить","FCP — момент, когда на экране появляется первый контент. Ускоряют его быстрым HTML, стилями первого экрана, отложенными скриптами и шрифтом, который не прячет текст.","\u003Cp>First Contentful Paint (FCP) — это момент, когда на экране появляется первый контент страницы: текст, картинка, фон или svg. До этой отметки посетитель смотрит на пустое поле. В Lighthouse и PageSpeed Insights хороший FCP — до 1,8 секунды. Дольше трёх секунд метрика уже слабая.\u003C\u002Fp>\n\u003Cp>Ускорить FCP значит сократить путь от запроса адреса до первой отрисовки. Пока документ не приехал и браузер не получил, чем рисовать первый экран, цифра не сдвинется. Ниже — что сделать по шагам. Общая скорость сайта разобрана отдельно: \u003Ca href=\"\u002Fblog\u002Fkak-uskorit-zagruzku-sayta\u002F\">как ускорить загрузку сайта\u003C\u002Fa>.\u003C\u002Fp>\n\n\u003Ch2>Что мешает первой отрисовке\u003C\u002Fh2>\n\u003Cp>Браузер рисует контент только после трёх вещей: сервер отдал HTML, стили первого экрана применились, текст или картинка не ждут чужой файл. Любая задержка на этом отрезке двигает FCP.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Долгий ответ сервера. Пока HTML не пришёл, рисовать нечего.\u003C\u002Fli>\n\u003Cli>Пустой HTML, в котором текст появляется только после JavaScript.\u003C\u002Fli>\n\u003Cli>Тяжёлые CSS и скрипты в начале страницы: браузер останавливает отрисовку, пока их не прочитает.\u003C\u002Fli>\n\u003Cli>Шрифт, который скрывает буквы, пока файл не скачается.\u003C\u002Fli>\n\u003Cli>Картинка первого экрана тяжёлая или помечена ленивой загрузкой.\u003C\u002Fli>\n\u003Cli>Цепочка редиректов до финального адреса.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2>Как ускорить FCP\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>1. Отдайте HTML сразу.\u003C\u002Fstrong> Кэш готовой страницы, короткий ответ сервера, один переход на https без лишних редиректов. Первый байт документа — старт отсчёта, и его держат близко к посетителю.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>2. Положите первый экран в HTML.\u003C\u002Fstrong> Заголовок, первый абзац и картинка героя приходят в документе, а не дорисовываются скриптом. Если экран пустой, пока не выполнится бандл, FCP ждёт JavaScript целиком.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>3. Оставьте в критическом пути только стили первого экрана.\u003C\u002Fstrong> Их вставляют в начало документа. Остальные таблицы стилей подключают следом, когда первая отрисовка уже случилась. Чужие CSS конструктора, виджетов и неиспользуемых блоков из этого пути убирают.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>4. Сдвиньте скрипты после первой отрисовки.\u003C\u002Fstrong> Чат, метрика, карты и виджеты первому экрану не нужны. Их подключают с отложенной загрузкой. В начале страницы остаётся только тот код, без которого документ не собрать.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>5. Не прячьте текст шрифтом.\u003C\u002Fstrong> На первый экран — один файл woff2, предзагрузка этого файла и \u003Ccode>font-display: swap\u003C\u002Fcode>. Буквы рисуются системным шрифтом сразу и подменяются, когда свой шрифт доехал. Пока браузер ждёт файл и скрывает текст, FCP стоит.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>6. Сделайте лёгкой картинку первого экрана.\u003C\u002Fstrong> Если первое, что видит человек, — фото, его сжимают и отдают в современном формате. У этой картинки нет \u003Ccode>loading=\"lazy\"\u003C\u002Fcode>: ленивая загрузка нужна кадрам ниже первого экрана. Ленивый герой как раз отодвигает первую отрисовку.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>7. Уберите чужие домены из старта.\u003C\u002Fstrong> Шрифт, скрипт и пиксель с другого сервера добавляют соединение до того, как на экране что-то появится. То, без чего первый экран живёт, подключают после FCP.\u003C\u002Fp>\n\n\u003Ch2>Как проверить, что стало быстрее\u003C\u002Fh2>\n\u003Cp>Цифру смотрят в \u003Ca href=\"https:\u002F\u002Fpagespeed.web.dev\u002F\" rel=\"noopener\">PageSpeed Insights\u003C\u002Fa>, отдельно для телефона и компьютера. После каждой правки сравнивают FCP и блок «устраните ресурсы, блокирующие отрисовку». Если первая отрисовка всё ещё ждёт сервер, дальше уже вопрос ответа HTML, а не картинок внизу страницы.\u003C\u002Fp>\n\u003Cp>Если нужно пройти эти шаги на живом сайте — оставьте \u003Ca href=\"\u002Fzayavka\u002F\">заявку\u003C\u002Fa>. Разберём, что держит первую отрисовку, и уберём это из критического пути.\u003C\u002Fp>\n",[10,13],{"path":11,"label":12},"\u002Fblog","Блог",{"path":14,"label":6},"\u002Fblog\u002Ffirst-contentful-paint-fcp-kak-uskorit"]