Ответ
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>