Sebesség Magas hatás Egyszerű 5–15 perc

Defer / async a szkripteken

A szinkron <script> blokkolja a renderelést, halaszd el.

Mi ez

Amikor a böngésző egy egyszerű <script>-be ütközik, leállítja az oldal renderelését, letölti és lefuttatja a szkriptet, és csak utána folytatja. Ezt hívják „render-blocking” (blokkoló) szkriptnek. A defer és async attribútumok ezt a viselkedést módosítják.

Miért foglalkozzon vele

Minden blokkoló szkript a fejlécben késlelteti a pillanatot, amikor a felhasználó látja a tartalmat (rontja az LCP-t és a First Paintet). Több szkriptnél a késés összeadódik. Mobilon és lassú kapcsolaton ez másodperceket jelent üres fehér oldalból, és magasabb elhagyási arányt.

Hogyan csinálja

1Azokat a szkripteket, amelyek nem szükségesek az első rendereléshez, jelöld defer attribútummal, háttérben töltődnek le és csak az oldal felépítése után futnak le, a sorrendjükben.
2Független szkriptekhez (analitika, chat) használj asyncot, letöltés után azonnal futnak, sorrendtől függetlenül.
3A kritikus szkripteket tartsd minimálisnak; a többit a <body> végén vagy deferrel töltsd.
4Szabály: defer = a DOM-tól vagy a sorrendtől függ; async = önálló, semmin nem múlik.

Példa

Rosszul

<head>
  <script src="/js/app.js"></script>   <!-- blokkolja a renderelést -->
</head>

Helyesen

<head>
  <script src="/js/app.js" defer></script>
  <script src="/js/analytics.js" async></script>
</head>

Összegzés

A defer/async az egyik legolcsóbb és leghatékonyabb sebességoptimalizálás, gyakran elég egyetlen szót hozzáírni a taghez. A legtöbb szkripthez a defer a helyes választás. Telepítés után ellenőrizd, hogy semmi nem hagyott fel a működéssel (főleg a sorrendfüggő szkriptek), és mérd az LCP javulását.

Kapcsolódó témák