Frontend Lighthouse CI: Folyamatos Teljesítménymonitoring Webalkalmazásokhoz

A mai rohanó digitális világban a weboldalak teljesítménye kulcsfontosságú. Egy lassan betöltődő vagy rosszul optimalizált weboldal frusztrált felhasználókhoz, csökkent elköteleződéshez és végső soron negatív üzleti hatáshoz vezethet. Itt jön képbe a Lighthouse CI. Ez az útmutató végigvezeti Önt a Lighthouse CI implementálásán a folyamatos teljesítménymonitoring érdekében, lehetővé téve, hogy proaktívan azonosítsa és kezelje a teljesítménybeli szűk keresztmetszeteket, mielőtt azok hatással lennének a felhasználóira.

Mi az a Lighthouse CI?

A Lighthouse CI egy nyílt forráskódú, automatizált teljesítménytesztelő eszköz, amely zökkenőmentesen integrálódik a Folyamatos Integrációs és Folyamatos Szállítási (CI/CD) folyamatába. A Google Lighthouse auditáló eszközét használja, hogy gyakorlatias betekintést nyújtson webhelye teljesítményébe, akadálymentesítésébe, SEO-jába és a bevált gyakorlatok alkalmazásába. A Lighthouse CI beépítésével a munkafolyamatába folyamatosan nyomon követheti webhelye teljesítményét, követheti a regressziókat, és biztosíthatja, hogy minden kódbeli változtatás hozzájáruljon a jobb felhasználói élményhez. A Lighthouse CI nem kötődik egyetlen konkrét felhőszolgáltatóhoz sem, és különböző környezetekben használható. Például futtatható egy Docker konténerben olyan szolgáltatásokon, mint a Github Actions, a Jenkins, a CircleCI és még sok más.

Miért használjuk a Lighthouse CI-t?

A Lighthouse CI implementálása számos előnnyel jár:

• A teljesítménybeli regressziók korai felismerése: Azonosítsa az új kódváltoztatások által okozott teljesítményproblémákat, mielőtt azok éles környezetbe kerülnének.
• Jobb weboldal-teljesítmény: Szerezzen gyakorlatias betekintést webhelye sebességének, akadálymentesítésének és SEO-jának optimalizálásához.
• Fokozott felhasználói élmény: Biztosítson gyorsabb és felhasználóbarátabb weboldalt, amely leköti a látogatókat.
• Csökkentett visszafordulási arány: Optimalizálja a betöltési időket a felhasználói frusztráció csökkentése és a webhely elhagyásának megelőzése érdekében.
• Megnövekedett konverziós arányok: A gyorsabb weboldal általában magasabb konverziós arányokhoz és jobb üzleti eredményekhez vezet.
• Automatizált teljesítménytesztelés: Integrálja a teljesítménytesztelést a CI/CD folyamatába a folyamatos monitorozás érdekében.
• Adatvezérelt döntéshozatal: Alapozza optimalizálási erőfeszítéseit konkrét teljesítménymutatókra és betekintésekre.
• Hosszú távú teljesítménykövetés: Kövesse nyomon webhelye teljesítményét az idő múlásával, hogy azonosítsa a trendeket és mérje az optimalizálások hatását.

A Lighthouse CI főbb jellemzői

• Automatizált auditok: Automatikusan futtatja a Lighthouse auditokat a CI/CD folyamat részeként.
• Teljesítménykeretek (Performance Budgets): Állítson be teljesítménykereteket, hogy biztosítsa, webhelye az elfogadható teljesítményküszöbökön belül marad.
• Regressziókövetés: Nyomon követi a teljesítménybeli regressziókat az idő múlásával, lehetővé téve az azokat okozó kódváltoztatások azonosítását.
• Gyakorlatias betekintések: Részletes jelentéseket nyújt gyakorlatias javaslatokkal a webhely teljesítményének javítására.
• Testreszabható konfiguráció: Konfigurálja a Lighthouse CI-t az Ön specifikus igényeinek és követelményeinek megfelelően.
• Integráció CI/CD eszközökkel: Zökkenőmentesen integrálódik olyan népszerű CI/CD eszközökkel, mint a Jenkins, CircleCI, GitHub Actions és GitLab CI.
• Nyílt forráskódú: A Lighthouse CI egy nyílt forráskódú projekt, ami azt jelenti, hogy ingyenesen használható és módosítható.

A Lighthouse CI beállítása: Lépésről lépésre útmutató

Itt egy átfogó útmutató a Lighthouse CI projektjéhez való beállításához:

1. A Lighthouse CI CLI telepítése

Először is, telepítenie kell a Lighthouse CI parancssori felületét (CLI) globálisan npm vagy yarn segítségével:

            npm install -g @lhci/cli
yarn global add @lhci/cli
            

              
                Copy
              
            
          

2. A Lighthouse CI konfigurálása

Hozzon létre egy lighthouserc.js fájlt a projekt gyökérkönyvtárában a Lighthouse CI konfigurálásához. Ez a fájl határozza meg az auditálandó URL-eket, az érvényességi szabályokat és egyéb konfigurációs opciókat.

Itt egy alapvető példa egy lighthouserc.js fájlra:

            module.exports = {
  ci:
   {
    collect: {
      url: ['http://localhost:3000', 'http://localhost:3000/about']
    },
    assert: {
      preset: 'lighthouse:recommended'
    },
    upload: {
      target: 'temporary-public-storage'
    },
  },
};

            

              
                Copy
              
            
          

Magyarázat:

• collect.url: Meghatározza a Lighthouse által auditálandó URL-eket. Ebben a példában a localhost:3000-en futó weboldal kezdőlapját és "about" oldalát auditáljuk. Ne felejtse el ezt a *saját* projektjének megfelelő URL-ekkel helyettesíteni, amelyek staging környezeteket is tartalmazhatnak.
• assert.preset: A lighthouse:recommended előbeállítást használja, amely a Lighthouse ajánlásain alapuló, előre meghatározott érvényességi szabályokat alkalmaz. Ez egy jó kiindulópont, de szükség szerint testreszabhatja ezeket a szabályokat.
• upload.target: Beállítja, hogy hova töltődjenek fel a Lighthouse CI eredményei. A temporary-public-storage hasznos teszteléshez és fejlesztéshez, de éles környezetekben általában egy tartósabb tárolási megoldást érdemes használni (erről később).

3. A Lighthouse CI integrálása a CI/CD folyamatba

A következő lépés a Lighthouse CI integrálása a CI/CD folyamatba. A pontos lépések a CI/CD szolgáltatótól függően változnak, de az általános folyamat magában foglalja egy szkript hozzáadását a CI/CD konfigurációhoz, amely futtatja a Lighthouse CI parancsokat.

Példa GitHub Actions használatával:

Hozzon létre egy .github/workflows/lighthouse-ci.yml nevű fájlt a repositoryjában a következő tartalommal:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16.x'
      - name: Install dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.11.x
          lhci autorun

            

              
                Copy
              
            
          

Magyarázat:

• on.push.branches: Elindítja a munkafolyamatot a main ágra történő push eseménykor.
• on.pull_request: Elindítja a munkafolyamatot pull requestek esetén.
• jobs.lighthouse.runs-on: Meghatározza a jobhoz használandó operációs rendszert (ebben az esetben Ubuntu).
• steps: Meghatározza a jobban végrehajtandó lépéseket:
• actions/checkout@v3: Letölti a repository tartalmát.
• actions/setup-node@v3: Beállítja a Node.js-t.
• npm ci: Telepíti a függőségeket.
• Run Lighthouse CI: Futtatja a Lighthouse CI parancsokat:
• npm install -g @lhci/cli@0.11.x: Globálisan telepíti a Lighthouse CI CLI-t. *Fontos*: Mindig ajánlott egy konkrét verziót zárolni.
• lhci autorun: Futtatja a Lighthouse CI-t "autorun" módban, amely automatikusan begyűjti az auditokat, érvényesíti a teljesítménykereteket és feltölti az eredményeket.

Fontos szempontok a CI/CD integrációhoz:

• Szerver indítása: Mielőtt futtatná az lhci autorun parancsot, győződjön meg róla, hogy a webszervere fut (pl. npm start). Lehet, hogy hozzá kell adnia egy lépést a CI/CD konfigurációjához, hogy a szervert a háttérben elindítsa.
• Adatbázis-migrációk: Ha az alkalmazása adatbázisra támaszkodik, győződjön meg róla, hogy az adatbázis-migrációk lefutnak a CI/CD folyamat részeként *mielőtt* a Lighthouse CI futna.
• Környezeti változók: Ha az alkalmazása környezeti változókat igényel, győződjön meg róla, hogy ezek megfelelően vannak beállítva a CI/CD környezetben.

4. A Lighthouse CI futtatása

Mostantól, amikor a main ágra pushol változtatásokat vagy pull requestet hoz létre, a Lighthouse CI munkafolyamat automatikusan lefut. Az eredmények elérhetők lesznek a GitHub Actions felületén.

5. A Lighthouse CI eredményeinek megtekintése

A Lighthouse CI eredményei a lighthouserc.js fájlban megadott helyre (pl. temporary-public-storage) töltődnek fel. Ezeket az eredményeket a CI/CD kimenetében található linken keresztül érheti el. Ezek az eredmények részletes információkat nyújtanak webhelye teljesítményéről, akadálymentesítéséről, SEO-járól és a bevált gyakorlatokról.

Érvényességi szabályok és teljesítménykeretek konfigurálása

A Lighthouse CI lehetővé teszi érvényességi szabályok (assertions) és teljesítménykeretek (performance budgets) beállítását, hogy biztosítsa, webhelye megfelel a teljesítménycéloknak. Az érvényességi szabályok olyan szabályok, amelyek specifikus teljesítménymutatókat (pl. First Contentful Paint, Largest Contentful Paint) ellenőriznek előre meghatározott küszöbértékekhez képest. A teljesítménykeretek elfogadható határokat definiálnak a különböző teljesítménymutatókhoz.

Itt egy példa az érvényességi szabályok konfigurálására a lighthouserc.js fájlban:

            module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000']
    },
    assert: {
      assertions: {
        'first-contentful-paint': ['warn', { maxNumericValue: 2000 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
        'total-blocking-time': ['warn', { maxNumericValue: 500 }],
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 0.8 }],
      }
    },
   upload: {
      target: 'temporary-public-storage'
    },
  }
};

            

              
                Copy
              
            
          

Magyarázat:

• first-contentful-paint: Figyelmeztetési küszöböt állít be a First Contentful Paint (FCP) számára 2000 ms-nál.
• largest-contentful-paint: Figyelmeztetési küszöböt állít be a Largest Contentful Paint (LCP) számára 2500 ms-nál.
• cumulative-layout-shift: Figyelmeztetési küszöböt állít be a Cumulative Layout Shift (CLS) számára 0.1-nél.
• total-blocking-time: Figyelmeztetési küszöböt állít be a Total Blocking Time (TBT) számára 500 ms-nál.
• categories:performance: Figyelmeztetési küszöböt állít be az általános Teljesítmény kategória pontszámára 0.9-nél.
• categories:accessibility: Hiba küszöböt állít be az általános Akadálymentesítés kategória pontszámára 0.8-nál.

Érvényességi szintek:

• off: Kikapcsolja az érvényességi szabályt.
• warn: Figyelmeztetést jelenít meg, ha a szabály nem teljesül.
• error: Sikertelennek jelöli a Lighthouse CI futást, ha a szabály nem teljesül.

Érvényességi szabályok testreszabása:

Testreszabhatja az érvényességi szabályokat az Ön specifikus igényeinek megfelelően. Például szigorúbb küszöbértékeket állíthat be a kritikus teljesítménymutatókhoz, vagy kikapcsolhatja azokat a szabályokat, amelyek nem relevánsak az alkalmazása szempontjából.

Lighthouse CI feltöltési célpont kiválasztása

Az upload.target opció a lighthouserc.js fájlban határozza meg, hova töltődjenek fel a Lighthouse CI eredményei. A temporary-public-storage célpont kényelmes teszteléshez és fejlesztéshez, de nem alkalmas éles környezetekhez, mert az adatok nem tartósak.

Itt van néhány alternatív feltöltési célpont:

• Lighthouse CI szerver: Az éles környezetekhez ajánlott megközelítés a Lighthouse CI szerver használata. A Lighthouse CI szerver tartós tárolási megoldást nyújt a Lighthouse CI eredményeinek, valamint egy felhasználói felületet az adatok megtekintéséhez és elemzéséhez. Telepíthető különböző felhőszolgáltatókhoz vagy saját infrastruktúrán is üzemeltethető.
• Google Cloud Storage: Feltöltheti a Lighthouse CI eredményeit egy Google Cloud Storage vödörbe. Ez egy költséghatékony és skálázható megoldás az adatok tárolására.
• Amazon S3: Hasonlóan a Google Cloud Storage-hez, feltöltheti a Lighthouse CI eredményeit egy Amazon S3 vödörbe.

A Lighthouse CI szerver beállítása:

A Lighthouse CI szerver beállítása a következő lépéseket foglalja magában:

1. A Lighthouse CI szerver telepítése: Telepítheti a Lighthouse CI szervert npm vagy yarn segítségével:

            npm install -g @lhci/server
yarn global add @lhci/server
            

              
                Copy
              
            
          

2. Az adatbázis konfigurálása: A Lighthouse CI szervernek adatbázisra van szüksége az adatok tárolásához. Használhat különféle adatbázisokat, beleértve a PostgreSQL-t, a MySQL-t és az SQLite-ot. Konfigurálja az adatbázis-kapcsolat beállításait az .env fájlban.
3. A Lighthouse CI szerver indítása: Indítsa el a Lighthouse CI szervert az lhci server paranccsal.
4. A Lighthouse CI CLI konfigurálása a szerver használatára: Frissítse a lighthouserc.js fájlt, hogy a Lighthouse CI szervert használja feltöltési célpontként:

            module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000']
    },
    assert: {
      preset: 'lighthouse:recommended'
    },
    upload: {
      target: 'lhci',
      serverBaseUrl: 'http://your-lhci-server.com',
      token: 'YOUR_LHCI_TOKEN'
    },
  }
};

            

              
                Copy
              
            
          

Cserélje le a http://your-lhci-server.com-t a Lighthouse CI szerver URL-jére és a YOUR_LHCI_TOKEN-t a projektjéhez tartozó hozzáférési tokenre.

Bevált gyakorlatok a Lighthouse CI használatához

Ahhoz, hogy a legtöbbet hozza ki a Lighthouse CI-ból, kövesse ezeket a bevált gyakorlatokat:

• Futtasson Lighthouse CI-t minden kódváltoztatáskor: Integrálja a Lighthouse CI-t a CI/CD folyamatába, hogy minden kódváltoztatáskor auditokat futtasson. Ez segít a teljesítménybeli regressziók korai elkapásában.
• Állítson be teljesítménykereteket: Definiáljon teljesítménykereteket, hogy biztosítsa, webhelye az elfogadható teljesítményküszöbökön belül marad.
• Monitorozza a teljesítménytrendeket: Kövesse nyomon webhelye teljesítményét az idő múlásával, hogy azonosítsa a trendeket és mérje az optimalizálások hatását.
• Priorizálja az optimalizálási erőfeszítéseket: Először a legkritikusabb teljesítménymutatók optimalizálására összpontosítson.
• Használjon valós adatokat: Használjon valós adatokat az optimalizálási erőfeszítésekhez. Például használhatja a Google Analytics-t annak azonosítására, hogy mely oldalakat látogatják leggyakrabban a felhasználók.
• Teszteljen valós eszközökön: Tesztelje webhelyét valós eszközökön, hogy biztosítsa, jól teljesít a valós körülmények között.
• Rendszeresen tekintse át a Lighthouse CI eredményeit: Győződjön meg róla, hogy rendszeresen áttekinti a Lighthouse CI eredményeit, és intézkedéseket tesz az azonosított teljesítményproblémák kezelésére.
• Optimalizálja a képeket: Optimalizálja a képeket, hogy csökkentse a fájlméretüket a minőség feláldozása nélkül. Olyan eszközök, mint az ImageOptim (macOS), a TinyPNG és az ImageKit hasznosak erre.
• Minifikálja a CSS-t és a JavaScriptet: Minifikálja a CSS és JavaScript fájlokat, hogy csökkentse a méretüket. Olyan eszközök, mint az UglifyJS és a CSSNano segíthetnek ebben.
• Használja ki a böngésző gyorsítótárazását: Használja ki a böngésző gyorsítótárazását, hogy csökkentse a webhelye által a szerver felé indított kérések számát.
• Használjon tartalomkézbesítő hálózatot (CDN): Használjon CDN-t a webhelye tartalmának világszerte elosztott szerverekre történő terjesztéséhez. Ez javíthatja a betöltési időket a különböző földrajzi helyeken lévő felhasználók számára. Olyan szolgáltatások, mint a Cloudflare és az Amazon CloudFront népszerű CDN-ek.
• Késleltesse a képernyőn kívüli képeket: Implementáljon lusta betöltést (lazy loading) azokhoz a képekhez, amelyek nem láthatók azonnal a képernyőn. Ez jelentősen javíthatja a kezdeti oldalbetöltési időt. A loading="lazy" attribútum használható egyszerű lusta betöltéshez.
• Távolítsa el a renderelést blokkoló erőforrásokat: Azonosítsa és távolítsa el azokat az erőforrásokat, amelyek blokkolják az oldal renderelését. Ez gyakran magában foglalja a kritikus CSS beágyazását és a nem kritikus CSS és JavaScript késleltetett betöltését.
• Csökkentse a JavaScript végrehajtási idejét: Profilozza a JavaScript kódját a lassan futó függvények azonosítása és optimalizálása érdekében. Olyan technikák, mint a kód-darabolás (code splitting) és a felesleges kód eltávolítása (tree shaking), segíthetnek csökkenteni a letöltendő és végrehajtandó JavaScript mennyiségét.

Haladó Lighthouse CI technikák

Miután megismerkedett a Lighthouse CI alapjaival, felfedezhet néhány haladó technikát a teljesítménymonitoring további javítására:

• Egyedi Lighthouse auditok: Létrehozhat egyedi Lighthouse auditokat, hogy teszteljen olyan specifikus teljesítményproblémákat, amelyek relevánsak az alkalmazása szempontjából.
• Headless Chrome konfiguráció: Konfigurálja a Headless Chrome-ot specifikus eszköz-emulációk vagy hálózati sávszélesség-korlátozási beállítások használatára.
• Integráció monitorozó eszközökkel: Integrálja a Lighthouse CI-t a meglévő monitorozó eszközeivel (pl. New Relic, Datadog), hogy átfogóbb képet kapjon webhelye teljesítményéről.
• Vizuális regressziós tesztelés: Kombinálja a Lighthouse CI-t vizuális regressziós tesztelő eszközökkel, hogy észlelje azokat a vizuális változásokat, amelyek hatással lehetnek a teljesítményre.

Lighthouse CI globális közönség számára: Megfontolások nemzetközi weboldalakhoz

Amikor a Lighthouse CI-t globális közönséget célzó weboldalakhoz használja, vegye figyelembe a következőket:

• Teszteljen több helyszínről: A szerver válaszideje jelentősen változhat a felhasználó tartózkodási helyétől függően. Használjon CDN-t (Tartalomkézbesítő Hálózatot), és fontolja meg a Lighthouse CI auditok futtatását különböző földrajzi régiókból, hogy pontosabb képet kapjon nemzetközi felhasználói teljesítményéről. Néhány CI/CD szolgáltató lehetőséget kínál a futtató földrajzi helyének megadására.
• Vegye figyelembe a hálózati körülményeket: A hálózati sebességek és a késleltetés világszerte nagyon eltérőek. Szimuláljon különböző hálózati körülményeket a Lighthouse CI auditok során, hogy megértse, hogyan teljesít a webhelye különböző korlátok között. A Lighthouse lehetővé teszi a hálózati kapcsolat korlátozását, szimulálva a lassabb kapcsolatokat, például a 3G-t.
• Tartalom lokalizálása: Győződjön meg róla, hogy a lokalizált tartalma megfelelően van optimalizálva. Ez magában foglalja a képek optimalizálását különböző nyelvekhez és karakterkészletekhez, valamint a megfelelő kódolást a megjelenítési problémák elkerülése érdekében.
• Betűtípusok betöltése: Optimalizálja a betűtípusok betöltését különböző nyelvekhez. Fontolja meg a font-display: swap használatát, hogy megakadályozza a szöveg láthatatlanságát a betűtípus betöltése közben.
• Harmadik féltől származó szkriptek: Legyen tudatában a harmadik féltől származó szkripteknek, mivel ezek jelentősen befolyásolhatják a teljesítményt, különösen a lassabb hálózati kapcsolatokkal rendelkező régiókban élő felhasználók számára. Rendszeresen auditálja a harmadik féltől származó szkriptek teljesítményét, és fontolja meg az aszinkron betöltést vagy a kritikus szkriptek saját hosztolását.
• Mobiloptimalizálás: A mobilhasználat a világ számos részén elterjedt. Győződjön meg róla, hogy webhelye optimalizálva van mobil eszközökre, és hogy a Lighthouse CI auditjai tartalmaznak mobil-specifikus teszteket.

Gyakori Lighthouse CI problémák hibaelhárítása

Íme néhány gyakori probléma, amellyel találkozhat a Lighthouse CI használata során, és hogyan háríthatja el őket:

• A Lighthouse CI "Timeout" hibával sikertelen: Ez akkor fordulhat elő, ha a webhelye túl lassan töltődik be, vagy ha a Lighthouse CI nem tud csatlakozni a webhelyéhez. Próbálja meg növelni az időtúllépési értéket a lighthouserc.js fájlban, vagy ellenőrizze a webhelye szervernaplóit hibák után.
• A Lighthouse CI inkonzisztens eredményeket jelent: A Lighthouse eredményei futásonként kissé eltérhetnek a hálózati körülmények vagy más tényezők miatt. Futtasson több auditot, hogy stabilabb átlagot kapjon.
• A Lighthouse CI nem tudja feltölteni az eredményeket: Ellenőrizze az upload.target konfigurációt, és győződjön meg róla, hogy a Lighthouse CI szervere fut és elérhető. Ellenőrizze továbbá, hogy a megfelelő hozzáférési token van-e beállítva.
• A Lighthouse CI váratlan teljesítményregressziókat jelent: Vizsgálja meg azokat a kódváltoztatásokat, amelyek a regresszió észlelése előtt történtek. Használja a Lighthouse CI jelentéseit az adott teljesítménymutatók azonosítására, amelyek visszaestek, és összpontosítsa az optimalizálási erőfeszítéseit ezekre a területekre.

Összegzés

A Frontend Lighthouse CI egy hatékony eszköz a webalkalmazások folyamatos teljesítménymonitoringjára. A Lighthouse CI integrálásával a CI/CD folyamatába proaktívan azonosíthatja és kezelheti a teljesítményproblémákat, biztosítva, hogy webhelye optimális felhasználói élményt nyújtson. Ne felejtse el adaptálni a beállításokat, az érvényességi szabályokat és a tesztelési helyszíneket a globális közönséghez, hogy a lehető legjobb élményt nyújtsa a felhasználóknak világszerte.

Az ebben az útmutatóban vázolt lépések és bevált gyakorlatok követésével jelentősen javíthatja webhelye teljesítményét, csökkentheti a visszafordulási arányt, növelheti a konverziós arányokat, és végső soron elérheti üzleti céljait. Kezdje el még ma a Lighthouse CI implementálását, és tárja fel webalkalmazásai teljes potenciálját.