Sebesség Alacsony hatás Közepes 15–30 perc

Kulcserőforrások előbetöltése (preload)

A fontos erőforrások korábban betölthetők a rel="preload" révén.

Mi ez

A rel="preload" megmondja a böngészőnek, hogy magas prioritással előre töltse le azt az erőforrást, amelyre hamarosan szükség lesz (hajtás feletti fő kép, kulcsfontosságú betűtípus, kritikus CSS).

Miért foglalkozzon vele

Preload nélkül a böngésző bizonyos fontos erőforrásokat későn fedez fel (pl. a csak CSS-ből hivatkozott betűtípust), ami késlelteti a megjelenésüket. A preload felgyorsítja ezt és javítja az LCP-t.

Hogyan csinálja

1Töltsd elő az LCP képet (a hajtás feletti fő vizuált).
2Töltsd elő a kulcsfontosságú betűtípusokat és adj hozzá font-display: swap értéket.
3Ne vidd túlzásba, mindennek a preloadja szétaprózza a prioritást és árt.

Példa

Helyesen

<link rel="preload" href="/fonts/jakarta.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/img/hero.webp" as="image">

Összegzés

A preload célzott eszköz néhány valóban kulcsfontosságú erőforráshoz (LCP kép, fő betűtípus). Megfontoltan használva javítja az LCP-t; átfogóan használva ellenkezőleg árt. A kevesebb néha több.

Kapcsolódó témák