Szkriptek száma

Minden szkriptet le kell tölteni, értelmezni és lefuttatni, a lassú telefonokon pedig ez érződik a legjobban. A sok szkript általában sok bővítményből, követőkódból és külső szolgáltatásból áll össze, amelyek közül nem mindegyik kell az oldal működéséhez. A web.dev is a fel nem használt kód eltávolítását ajánlja a JavaScript-terhelés csökkentésére.

Hogyan mérjük

A riport böngészőben (mobil-emulációval) betölti a nyitóoldalt, és a Lighthouse által rögzített hálózati kérések közül megszámolja azokat, amelyek típusa Script. Ebbe beletartozik minden szkript, a saját oldalról és külső szolgáltatótól is, a <head>-ben és a <body>-ban, a dinamikusan később betöltött is, amennyiben a betöltés idején lekérte az oldal.

• Megfelelő: legfeljebb 20 szkript.
• Hiba (alacsony súlyosság): 20-nál több szkript.

A 20-as határ a riport saját mércéje, rá nincs szabvány vagy hivatalos ajánlás. A teszt a darabszámot nézi, a méretet és a futási időt nem: egyetlen nagy szkript egynek számít, pedig lassabb lehet, mint több kicsi. Ezt a Labor-TBT és az Oldalsúly teszt mutatja. A mérés legfeljebb 500 kérést rögzít.

Hogyan javítsd

Itt nincs egyetlen kódrészlet, amely megoldja a problémát: a teendő a szkriptek számának tényleges csökkentése.

1. Listázd a szkripteket. A böngésző fejlesztői eszközeinek Hálózat (Network) paneljén szűrj a JS típusra, és nézd meg, melyik honnan jön.
2. Keresd meg a nem használtat. A Chrome DevTools Coverage panelje megmutatja, a betöltött JavaScript és CSS mekkora része fut le ténylegesen.
3. Töröld, amit nem használsz. Régi követőkódok, kikapcsolt funkciókhoz tartozó szkriptek, az oldalról már levett szolgáltatások beágyazásai.
4. Késleltesd, ami nem kell azonnal. A defer vagy az async attribútum javít a betöltésen, de a számot nem csökkenti. Lásd a Renderelést blokkoló szkriptek oldalt.
5. Nézd át a külső szolgáltatókat. A web.dev külön útmutatót ad a harmadik féltől származó szkriptek azonosítására és hatékony betöltésére.

WordPress

WordPressben a szkriptek zöme a bővítmények és a téma wp_enqueue_script() hívásaiból jön. Töröld a nem használt bővítményeket és követőkódokat. Ha egy bővítmény szkriptjére csak bizonyos oldalakon van szükség, a wp_dequeue_script() a szkript kezelőnevével kiveszi a többi oldalon a betöltésből, de előbb teszteld, hogy nem törsz-e el vele funkciót.

Hogyan ellenőrizd

Futtasd újra a riportot. A számot kézzel is leellenőrizheted a böngésző Hálózat paneljén (JS szűrő), de a darabszám eltérhet: a riport mobil-emulációval, kijelentkezve, a nyitóoldal betöltésekor számol, a te böngésződ más bővítményekkel, belépve vagy gyorsítótárból dolgozhat.