При мобилна емулация (Slow 4G) в Google Lighthouse най-честият виновник за Largest Contentful Paint (LCP) над 4.0–5.0 секунди не е сървърът, а блокиращите рендирането CSS заявки и външните шрифтове. Дори когато най-големият елемент на екрана е чисто текстово <h1> заглавие, браузърът отказва да го изрисува, докато не изтегли и парсне всички синхронни стилове в <head>.
1. Вграждане на Critical CSS и отлагане на основния стилов файл
За да рендира браузърът навигацията и Hero секцията (заедно с <h1>) веднага след първия пакет HTML (TTFB), всички правила за видимата част на екрана (Above-the-Fold) трябва да бъдат вградени в <style id="critical-css">, а пълният style.css да се зарежда неблокиращо:
<noscript><link rel="stylesheet" href="/style.css"></noscript>
2. Локален хостинг на Inter WOFF2 и нулев Cumulative Layout Shift (CLS)
Зареждането на fonts.googleapis.com изисква допълнителен DNS lookup, TLS ръкостискане към два външни домейна и води до CLS > 0.15, когато уеб шрифтът подмени системния шрифт. Решението включва:
Локални WOFF2 подмножества
Хостване на кирилския и латинския WOFF2 файл директно на вашия домейн с rel="preload" за 0ms външно забавяне.
Резервирани размери срещу CLS
Точни пропорции на WebP логото и минимална височина (min-height) на Hero подзаглавието за CLS под 0.02.