Renderelést blokkoló szkriptek

Ha a <head>-ben egy külső szkript async és defer nélkül áll, a böngésző megáll, letölti és lefuttatja, mielőtt az oldal többi részét feldolgozná. Amíg ez tart, a látogató üres vagy félkész oldalt lát. A Lighthouse is ezt a mintát jelöli renderelést blokkolónak. Az MDN pontosabban fogalmaz: az ilyen szkript a HTML feldolgozását (parsing) blokkolja, ezen keresztül késlelteti azt, ami utána következik.

Hogyan mérjük

A riport böngészőben (mobil-emulációval) betölti a nyitóoldalt, és a betöltött oldal <head> részében megkeresi azokat a <script src="…"> elemeket, amelyek:

• nem async,

• nem defer,

• és nem type="module" típusúak.

• Megfelelő: nincs ilyen szkript.

• Hiba (közepes súlyosság): legalább egy van. A riport az első 20 darab címét listázza, ezért a darabszám legfeljebb 20-ig számolódik.

A teszt nem számolja a <body>-ba írt szkripteket, az inline (src nélküli) szkripteket és a CSS-fájlokat, pedig a stíluslapok is blokkolhatják a megjelenítést. A Lighthouse két típust jelöl: a fenti szkriptet és a rel="stylesheet" stíluslapot. A riport csak a szkriptekre figyel.

Hogyan javítsd

Az MDN szerint a defer-es szkript a dokumentum feldolgozása után, a DOMContentLoaded esemény előtt fut le, és a több defer-es szkript a dokumentumban szereplő sorrendben fut. Az async-es szkript a letöltése után azonnal fut, ezért olyan szkripthez való, amely nem függ más szkripttől.

HTML

HTML

<script defer src="/js/app.js"></script>

Ha egy inline szkript a halasztott szkript kódját használja (például a jQuery-t), az a halasztás miatt hibát dob: ilyenkor azt is halaszd, vagy ezt a szkriptet hagyd halasztás nélkül. Az alternatíva, hogy a szkriptet a <body> aljára teszed.

WordPress

WordPress 6.3 óta a szkriptek betöltési stratégiáját a wp_enqueue_script() hívásban adhatod meg:

PHP (téma vagy bővítmény)

wp_enqueue_script(
    'sajat-szkript',
    get_theme_file_uri( 'js/app.js' ),
    array(),
    '1.0.0',
    array(
        'in_footer' => true,
        'strategy'  => 'defer',
    )
);

A strategy értéke defer vagy async lehet; az in_footer a láblécbe teszi a szkriptet. Ha egy szkriptre egy adott oldalon nincs szükség, a wp_dequeue_script() kiveszi a betöltésből. A halasztásnál ugyanaz a figyelmeztetés áll, mint a HTML-nél: a más szkriptre épülő inline kódot is át kell állítani.

Hogyan ellenőrizd

Futtasd újra a riportot. A betöltött oldal forrását is megnézheted:

Terminál

curl -s https://pelda.hu/ | grep -iE "<script[^>]+src=" | head -20

Nézd a <head> részben álló sorokat: ha egyiken sincs async, defer vagy type="module", a teszt hibát jelez. A Chrome DevTools Lighthouse paneljén vagy a PageSpeed Insights oldalán a „Eliminate render-blocking resources” (renderelést blokkoló erőforrások kiküszöbölése) audit ugyanezt mutatja, a stíluslapokkal együtt. A hatás a Labor-LCP és a Labor-TBT értékben is látszik.