A csatlakozás sikertelen. Kérjük, próbálja újra.

Ugrás a tartalomhoz
SEO Tools
Súgó és dokumentáció
Sebesség Magas hatás Nehéz 1–3 óra

Blokkoló CSS csökkentése

A nagy CSS a fejlécben hátráltatja a renderelést.

Mi ez

A CSS alapból blokkoló — a böngésző semmit nem rendel, amíg le nem tölti és fel nem dolgozza a stílusokat. A nagy vagy sok CSS fájl így késlelteti az oldal első képét.

Miért foglalkozzon vele

Egy nagy, az egész weboldalra szóló CSS betöltése egy egyszerű oldalt is hátráltat. Az optimalizálás közvetlenül javítja az LCP-t és az érzékelt sebességet.

Hogyan csinálja

  1. 1Emeld ki a „critical CSS”-t a látható részhez, és illeszd be inline-ban a <head>-be.
  2. 2A többi CSS-t töltsd aszinkron módon (media="print" trükk vagy rel="preload" + onload).
  3. 3Távolítsd el a nem használt stílusokat (PurgeCSS / a devtools Coverage eszköze).
  4. 4Bontsd a CSS-t oldalanként/komponensenként egyetlen monolit helyett.

Nem kritikus CSS aszinkron betöltése

Helyesen
<link rel="preload" href="/css/styly.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/styly.css"></noscript>

Összegzés

A critical CSS inline + a többi aszinkron a leghatékonyabb minta a blokkoló CSS ellen. Ez nehezebb módosítás, de lassú weboldalaknál jelentős gyorsulást hoz az első renderelésben. A modern build eszközök és keretrendszerek megkönnyítik.

Kapcsolódó témák