Ответ
FCP (First Contentful Paint) — это время, за которое браузер отображает первый значимый контент (текст, изображение, SVG и т. д.). Основные факторы:
- Скорость загрузки HTML — критически важна, так как без него не начнётся рендеринг.
- Блокирующие CSS/JS — стили и скрипты в
<head>могут задерживать отрисовку. - Время ответа сервера (TTFB) — если сервер медленный, FCP будет хуже.
- Оптимизация шрифтов — неоптимизированные веб-шрифты могут блокировать рендеринг.
- Кэширование — использование кэша браузера или CDN ускоряет загрузку ресурсов.
Пример оптимизации:
<!-- Предзагрузка критического CSS -->
<link rel="preload" href="critical.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="critical.css"></noscript>Ответ 18+ 🔞
Да ты посмотри, какой важный показатель выкатили — FCP! Это, блядь, время, за которое браузер тебе хоть что-то осмысленное на экране покажет: текст, картинку, какую-нибудь хрень. А теперь, сука, держись за стул, почему он может быть хуже некуда.
Первое и главное — скорость загрузки HTML. Ну логично же, ёпта! Если твой основной документ ползёт как черепаха, о каком первом контенте речь? Без него рендеринг даже не начнётся, тут всё просто.
Второе — блокирующие CSS и JS в <head>. Вот это, блядь, классика! Ты в шапку запихнул здоровенные стили и скрипты, браузер их тупо жрёт и не рисует ни хуя, пока всё не проглотит. Рендеринг стоит колом, а пользователь смотрит в белый экран.
Третье — время ответа сервера (TTFB). Если твой сервер тупит и отвечает как сонная муха, то все остальные оптимизации — это, простите, мёртвому припарки. Пока он думает, FCP уже в говне.
Четвёртое — оптимизация шрифтов. О, это отдельная песня! Кастомные веб-шрифты, которые не оптимизированы, могут так заблокировать рендеринг, что мама не горюй. Браузер будет их ждать, вместо того чтобы показать хоть что-то.
Пятое — кэширование. Ну тут, вроде, понятно: если ресурсы лежат в кэше браузера или на быстром CDN, то, ёбана, они загрузятся моментально. А если нет — жди, пока их с другого конца света притащат.
Вот тебе, кстати, пример, как можно немного схитрить с критическими стилями:
<!-- Предзагрузка критического CSS -->
<link rel="preload" href="critical.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="critical.css"></noscript>Суть в чём? Говорим браузеру: «Слушай, дружище, этот файл critical.css овердохуища важен, качай его в первую очередь и сразу применяй, как загрузится». А если у юзера JS выключен — ну, на fallback сработает. В общем, хитрая жопа, но иногда помогает.