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 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

  1. 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.
  2. 2Független szkriptekhez (analitika, chat) használj asyncot — letöltés után azonnal futnak, sorrendtől függetlenül.
  3. 3A kritikus szkripteket tartsd minimálisnak; a többit a <body> végén vagy deferrel töltsd.
  4. 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