Súgó és dokumentáció
Sebesség Magas hatás Közepes 30–60 perc
Blokkoló erőforrások (render-blocking)
CSS és JS a fejlécben, amely fékezi az első renderelést.
Mi ez
A render-blocking erőforrások olyan fájlok (jellemzően CSS és szinkron JS a <head>-ben), amelyeket a böngészőnek le kell töltenie és fel kell dolgoznia, mielőtt megjelenítené a tartalmat. Addig a felhasználó ürességet lát.
Miért foglalkozzon vele
Ezek a leggyakoribb okai a lassú első renderelésnek és a rossz LCP-nek. Minél több van belőlük és minél nagyobbak, annál tovább tart, míg megjelenik a tartalom.
Hogyan csinálja
- 1A szkripteket halaszd el defer/async segítségével.
- 2Azonosítsd a „critical CSS”-t (a látható részhez tartozó stílusokat) és illeszd be inline-ban, a többit töltsd aszinkron módon.
- 3Egyesítsd és minifikáld a CSS/JS fájlokat, távolítsd el a nem használt stílusokat.
- 4A külső betűtípusokat töltsd font-display: swap mellett, és előzd be őket.
Összegzés
A cél a látható tartalom mielőbbi kézbesítése és minden más elhalasztása. Kezdd a szkriptek elhalasztásával (gyors győzelem) és a CSS optimalizálásával (critical CSS). Ennek a területnek közvetlen hatása van az LCP-re, arra a metrikára, amelyet a Google figyel.
Kapcsolódó témák