Lighthouse Best Practices (böngészős jó gyakorlatok)

A Best Practices pontszám maga nem rangsorolási tényező. Amit jelez, az viszont igen.

• Hiányos tartalom: egy JavaScript-hiba után a script leáll, és a maradék tartalom nem kerül a DOM-ba.
• Blokkolt erőforrás: a HTTP-n hívott kép vagy script a böngészőben elveszik, a felhasználó törött oldalt lát.
• Rossz kép-arány: a nyújtott kép nemcsak ronda, hanem layout-elmozdulást is okoz.
• Kivezetett API-k: ami ma figyelmeztetés a konzolban, az egy-két Chrome-verzió múlva hibát dob.
• Biztonsági rés: a hiányzó CSP és HSTS ugyanebben a kategóriában bukik meg, és ezek valódi támadási felületet hagynak.

Üzleti oldalon a legfájóbb eset a webshop-kosár. A riportokban rendszeresen látunk olyan konzol-hibát, ami csak a pénztár lépésénél jelenik meg. A főoldal ilyenkor hibátlan, a vásárlás mégis elhasal egy böngészőben.

Vonatkozik: minden nyilvános weboldalra, ahol van JavaScript, kép vagy külső script. Webshopoknál a legfontosabb, mert ott egy hiba közvetlenül pénzt visz el.

Kiemelten fontos: sok pluginnal működő WordPress-oldalakon, több éve épült egyedi rendszereken, és minden olyan oldalon, ahova marketing-kódokat kézzel illesztettek be.

Kevésbé fontos: statikus, egy-két oldalas bemutatkozó weblapokon, ahol nincs külső script. Ott a kategória jellemzően magától zöld.

Nem vonatkozik: staging és fejlesztői környezetekre, ahol a debug-üzenetek szándékosan a konzolban vannak. Ott a mérés csak zajt ad. Belépéssel védett admin-felületeknél is inkább kézi konzol-ellenőrzés a jó eszköz.

1. Nyisd meg az oldalt Chrome-ban, inkognitó módban. A kiegészítők saját hibákat dobnak, és elrontják a mérést.
2. Nyisd a DevTools-t (F12), válts a Lighthouse fülre.
3. Kategóriák közül hagyd bejelölve csak a Best Practices tételt, majd indítsd a mérést.
4. Olvasd el a kategória pontszámát, és nyisd ki a Failed audits listát. Minden tétel megmondja, melyik fájl vagy elem a hibás.
5. Váltsd át a Console fülre, és töltsd újra az oldalt. Itt látod a valódi hibaszöveget és a fájl útvonalát.
6. Ismételd meg a fontos sablonokon: főoldal, kategória, termék vagy szolgáltatás, blogcikk, kapcsolat, kosár.
7. Ha távolról mérnél, a PageSpeed Insights is adja ugyanezt a kategóriát, kiegészítő-zaj nélkül.

Jó jel

• 90 feletti Best Practices pontszám.
• Üres konzol a betöltés után, legfeljebb néhány információs sor.
• Minden hálózati kérés https:// sémával indul.
• A képek megadott width és height értéke egyezik a fájl valódi arányával.

Rossz jel

• Piros hibák a konzolban már a főoldalon.
• blocked:mixed-content vagy net::ERR_ bejegyzések a Network fülön.
• deprecated és will be removed szövegek a figyelmeztetések között.
• Ugyanaz a hiba minden sablonon megjelenik, vagyis a fejlécbe vagy a lábba van beépítve.
• 404-re futó script- vagy stílusfájl egy régen törölt szolgáltatásból.

WordPress

1. A konzolban nézd meg a hibás fájl útvonalát. A /wp-content/plugins/ után álló név megmondja a felelőst.
2. Deaktiváld és töröld a nem használt pluginokat. A törölt plugin scriptje néha a témában marad, azt kézzel vedd ki.
3. Frissítsd a core-t, a témát és a PHP-verziót. Az elavult API-hívások gyakran régi plugin- és PHP-verziókból jönnek.
4. A http:// hivatkozásokat cseréld az adatbázisban (például Better Search Replace bővítménnyel). Az SSL-takaró pluginek csak elrejtik a hibát.
5. A képeknél hagyd, hogy a WordPress kiírja a width és height attribútumot. A témában ne nyújtsd CSS-ben más arányra.

Shopify

1. Nézd át a theme.liquid fájlt és a saját kódblokkokat. A régi app-maradványok itt szoktak megmaradni.
2. Az eltávolított appok script-tagjeit töröld a témából, ne csak az appot távolítsd el.
3. Képeknél használd a beépített image_url szűrőt méretparaméterrel, és adj meg width/height attribútumot.

Unas

1. Az adminban keresd meg a saját HTML- és script-blokkokat (fejléc, lábléc, egyéni oldalak).
2. Minden külső hivatkozást írj át HTTPS-re, a nem elérhető forrásokat töröld.
3. A régi mérőkódokat cseréld az aktuális verzióra, a duplikált beillesztéseket vedd ki.

Shoprenter

1. A sablonszerkesztőben nézd át az egyéni JS- és CSS-blokkokat.
2. A fejlécbe illesztett külső kódokat egyenként kapcsold ki, így beazonosítod a hibásat.
3. A termékképeknél tartsd egységesen ugyanazt a képarányt a feltöltésnél.

Egyedi fejlesztés

1. Tedd be a Lighthouse CI-t a build-folyamatba, és állíts küszöböt a Best Practices kategóriára.
2. Kapcsold be a source map generálást a production buildhez.
3. Szűrd a konzolt hibamentesre: a production kódban ne maradjon debug-üzenet.
4. Állíts be Content-Security-Policy fejlécet, és tiltsd a nem biztonságos forrásokat.
5. A deprecations audit listáját dolgozd fel egyszer, mert ezek később hibává válnak.

• A konzol-hibát kozmetikai ügynek nézik: a script leáll, és a tartalom egy része soha nem renderelődik.
• Törölt plugin maradványa a témában: a 404-re futó script minden oldalbetöltésnél hibát dob.
• SSL-takaró plugin igazi javítás helyett: a http:// hivatkozás az adatbázisban marad, és bármikor visszaköszön.
• CSS-ben nyújtott kép: a megadott arány és a fájl arányának eltérése elmozdítja a tartalmat betöltés közben.
• Betöltéskori engedélykérés: a felhasználó azonnal tiltja, és utána már nem is tudod megkérdezni.
• Csak a főoldalt mérik: a magyar KKV-oldalak többségén a hibák a kosárnál és a kapcsolati űrlapnál vannak.
• A pontszámot hajszolják: a 100 pont önmagában semmit nem hoz, a mögötte lévő hibák javítása igen.

Mérés parancssorból, csak erre a kategóriára. A JSON-kimenetből ki tudod olvasni, melyik tétel hasalt el:

npx lighthouse https://example.hu \
  --only-categories=best-practices \
  --output=json --output-path=./bp.json \
  --chrome-flags="--headless"

# mit talált
cat bp.json | jq '.audits["errors-in-console"].details.items'
cat bp.json | jq '.audits.deprecations.score'

A kép-arány audit akkor elhasal, ha a megadott méret és a fájl valódi aránya eltér. Bal oldalon a hibás eset, jobb oldalon a helyes:

<!-- rossz: a fájl 1200x800, a jelölés 4:3 arányt állít -->
<img src="/kepek/termek.jpg" width="1200" height="900" alt="Termékfotó">

<!-- jó: a jelölés a fájl valódi arányát követi, HTTPS-forrásból -->
<img src="https://example.hu/kepek/termek.jpg"
     width="1200" height="800"
     alt="Termékfotó" loading="lazy">

A helyes width és height páros nemcsak ezt az auditot hozza át. A böngésző előre lefoglalja a helyet, így a layout sem ugrik meg betöltés közben.