Webalkalmazások Gyorsítása Lighthouse és Egyedi Auditok Segítségével

A felhasználók elhagyják a lassú oldalakat. A Google viszont a gyorsakat előrébb sorolja. Hogyan javíthatod következetesen a teljesítményt? Ebben az útmutatóban túllépünk az alapokon — auditálunk, javítunk, sőt egyedi auditokat is létrehozunk.

🚀 Miért Fontos a Teljesítmény?

• A gyorsabb weboldalak csökkentik a kilépési arányt és növelik a konverziót.
• A Google Core Web Vitals metrikái rangsorolási tényezők.
• Mobilra optimalizált sebesség kiemelten fontos, főleg e-kereskedelemnél és SaaS esetén.

🔍 1. Lépés: Auditálás Lighthouse-szal a DevTools-ben

Nyisd meg az oldalad Chrome-ban, nyisd meg a DevTools-t (F12), válaszd ki a Lighthouse fület, állítsd be a „Performance” opciót, majd futtasd az auditot.

📊 Fontosabb Metrikák

• **LCP (Largest Contentful Paint)** – Legyen 2.5 másodperc alatt.
• **CLS (Cumulative Layout Shift)** – Maradjon 0.1 alatt a jó UX érdekében.
• **TBT (Total Blocking Time)** – Legyen kevesebb mint 300 ms a jó reakcióidőért.

🧰 2. Lépés: A Lényeges Hibák Javítása

npm install next-optimized-images react-lazyload

Javítási példák:

• Lazy loading használata: `<img loading='lazy' />`
• Kép tömörítés WebP vagy AVIF formátumban
• Hosszú JS feladatok feldarabolása `requestIdleCallback()` segítségével

🧪 3. Lépés: Egyedi Lighthouse Audit Készítése

Haladó csapatok bővíthetik a Lighthouse-t. Például ellenőrizhetik, hogy minden oldal tartalmaz-e strukturált adatokat:

// Egyedi audit: JSON-LD script ellenőrzése
module.exports = class StructuredDataAudit {
  static get meta() {
    return { id: 'structured-data', title: 'Structured Data Audit', ... };
  }
  static audit(artifacts) {
    const hasLD = artifacts.SomePageHTML.includes('<script type="application/ld+json">');
    return { score: hasLD ? 1 : 0 };
  }
};

📘 Összefoglalás

• Használd a Lighthouse-t a valós teljesítményhibák feltárására
• Helyezd előtérbe a Core Web Vitals értékeket
• Használj lazy loadingot és optimalizált képeket
• Készíts egyedi auditokat a saját csapatod szabályaihoz

Egyedi audit sablonok letöltése