JavaScript Teljesítmény és SEO
A JavaScript csodálatos eszköz, de egyben a modern weboldalak legnagyobb ellensége is. Ha egy weboldal lassan tölt be, az esetek 90%-ában a túl sok, vagy rosszul beillesztett JavaScript kód a hibás. A Google pedig kíméletlenül bünteti a lassú oldalakat a találati listán.
A probléma: A Render-Blocking (Megjelenítést gátló) Scriptek
Amikor a böngésző fentről lefelé olvassa a HTML kódodat, és talál egy <script src="..."> taget a <head> szekcióban, azonnal megáll. Abbahagyja a weboldal vizuális felépítését (a renderelést), letölti a JS fájlt, végrehajtja, és csak utána folytatja a HTML olvasását.
Ha van 5 darab külső JS fájlod (például egy WordPress oldalon a sok bővítmény miatt), a látogató másodpercekig csak egy üres, fehér képernyőt fog látni. Ezt a Google PageSpeed Insights eszköze "Render-Blocking Resources" hibaként jelzi.
A Megoldás: defer és async
Hogy elkerüljük a fagyást, a modern HTML5 bevezetett két varázsszót (attribútumot), amit a script taghez adhatunk.
1. Az 'async' (Aszinkron) attribútum
<script src="analitika.js" async></script>Ha ezt használod, a böngésző a háttérben, a HTML olvasásával párhuzamosan tölti le a fájlt. Amint letöltött, azonnal megállítja a HTML-t, és lefuttatja a scriptet. Mikor használd? Független scripteknél, amik nem módosítják a weboldal kinézetét (pl. Google Analytics követőkód).
2. A 'defer' (Késleltetett) attribútum - A Legjobb Barátod
<script src="fo-program.js" defer></script>A defer a legbiztonságosabb és legjobb megoldás a teljesítményre. A böngésző a háttérben letölti a fájlt, de megvárja, amíg a teljes HTML weboldal felépül és megjelenik a képernyőn, és csak a legvégén futtatja le a JavaScriptet. Így a látogató azonnal látja az oldalt, zéró várakozási idővel.
A "Bloat" (Kódszemét) veszélye
Sok kezdő fejlesztő és cégvezető beleesik abba a hibába, hogy kész weboldal-építőket (pl. Elementor, Divi) és tucatnyi bővítményt használ. Ezek a rendszerek gyakran több megabájtnyi felesleges JavaScriptet töltenek be minden egyes aloldalon, még akkor is, ha csak egy sima szöveges blogposztról van szó.
A Google algoritmusa (a Core Web Vitals) méri az úgynevezett FID (Largest Contentful Paint) és INP (Interaction to Next Paint) értékeket. Ha a sok JS miatt a telefon processzora leterhelődik, az oldalad elbukik ezeken a teszteken, és elveszíted a SEO pozícióidat.