Frontend Lighthouse CI: Kontinuálne monitorovanie výkonu pre webové aplikácie

V dnešnom rýchlom digitálnom svete je výkon webových stránok prvoradý. Pomaly sa načítavajúca alebo zle optimalizovaná webová stránka môže viesť k frustrovaným používateľom, zníženému zapojeniu a v konečnom dôsledku k negatívnemu vplyvu na vaše podnikanie. A práve tu prichádza na rad Lighthouse CI. Táto príručka vás prevedie implementáciou Lighthouse CI pre kontinuálne monitorovanie výkonu, čo vám umožní proaktívne identifikovať a riešiť úzke miesta výkonu skôr, ako ovplyvnia vašich používateľov.

Čo je Lighthouse CI?

Lighthouse CI je open-source, automatizovaný nástroj na testovanie výkonu, ktorý sa bezproblémovo integruje do vášho pipeline kontinuálnej integrácie a doručovania (CI/CD). Využíva audítorský nástroj Google Lighthouse na poskytovanie praktických poznatkov o výkone, prístupnosti, SEO a osvedčených postupoch vašej webovej stránky. Začlenením Lighthouse CI do vášho pracovného postupu môžete neustále monitorovať výkon vašej webovej stránky, sledovať regresie a zabezpečiť, aby každá zmena kódu prispela k lepšiemu používateľskému zážitku. Lighthouse CI nie je viazaný na jedného konkrétneho poskytovateľa cloudu a môže byť použitý s rôznymi nastaveniami. Napríklad môže bežať v Docker kontajneri na službách ako Github Actions, Jenkins, CircleCI a mnohých ďalších.

Prečo používať Lighthouse CI?

Implementácia Lighthouse CI ponúka množstvo výhod:

• Včasné odhalenie regresií výkonu: Identifikujte problémy s výkonom zavedené novými zmenami kódu skôr, ako sa dostanú do produkcie.
• Zlepšený výkon webovej stránky: Získajte praktické poznatky o tom, ako optimalizovať vašu webovú stránku pre rýchlosť, prístupnosť a SEO.
• Zlepšený používateľský zážitok: Poskytnite rýchlejšiu a používateľsky prívetivejšiu webovú stránku, ktorá udrží návštevníkov zaujatých.
• Znížená miera odchodov (Bounce Rate): Optimalizujte časy načítania, aby ste znížili frustráciu používateľov a zabránili im opustiť vašu stránku.
• Zvýšené konverzné pomery: Rýchlejšia webová stránka zvyčajne vedie k vyšším konverzným pomerom a lepším obchodným výsledkom.
• Automatizované testovanie výkonu: Integrujte testovanie výkonu do vášho CI/CD pipeline pre nepretržité monitorovanie.
• Rozhodovanie založené na dátach: Založte svoje optimalizačné úsilie na konkrétnych metrikách a poznatkoch o výkone.
• Dlhodobé sledovanie výkonu: Monitorujte výkon vašej webovej stránky v priebehu času, aby ste identifikovali trendy a merali dopad vašich optimalizácií.

Kľúčové vlastnosti Lighthouse CI

• Automatizované audity: Spúšťa audity Lighthouse automaticky ako súčasť vášho CI/CD procesu.
• Výkonnostné rozpočty: Nastavte výkonnostné rozpočty, aby ste zabezpečili, že vaša webová stránka zostane v prijateľných výkonnostných limitoch.
• Sledovanie regresií: Sleduje regresie výkonu v priebehu času, čo vám umožňuje identifikovať zmeny kódu, ktoré ich spôsobili.
• Praktické poznatky: Poskytuje podrobné reporty s praktickými odporúčaniami, ako zlepšiť výkon vašej webovej stránky.
• Prispôsobiteľná konfigurácia: Nakonfigurujte Lighthouse CI tak, aby vyhovoval vašim špecifickým potrebám a požiadavkám.
• Integrácia s nástrojmi CI/CD: Bezproblémovo sa integruje s populárnymi nástrojmi CI/CD, ako sú Jenkins, CircleCI, GitHub Actions a GitLab CI.
• Open Source: Lighthouse CI je open-source projekt, čo znamená, že je zadarmo na použitie a úpravu.

Nastavenie Lighthouse CI: Sprievodca krok za krokom

Tu je komplexný sprievodca nastavením Lighthouse CI pre váš projekt:

1. Inštalácia Lighthouse CI CLI

Najprv musíte nainštalovať príkazový riadok (CLI) Lighthouse CI globálne pomocou npm alebo yarn:

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

              
                Copy
              
            
          

2. Konfigurácia Lighthouse CI

Vytvorte súbor lighthouserc.js v koreňovom adresári vášho projektu na konfiguráciu Lighthouse CI. Tento súbor definuje URL adresy na auditovanie, pravidlá pre tvrdenia (assertions) a ďalšie možnosti konfigurácie.

Tu je základný príklad súboru lighthouserc.js:

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

            

              
                Copy
              
            
          

Vysvetlenie:

• collect.url: Špecifikuje URL adresy, ktoré má Lighthouse auditovať. V tomto príklade auditujeme domovskú stránku a stránku "o nás" webu bežiaceho na localhost:3000. Nezabudnite to nahradiť URL adresami relevantnými pre *váš* projekt, ktoré môžu zahŕňať aj testovacie (staging) prostredia.
• assert.preset: Používa prednastavenie lighthouse:recommended, ktoré aplikuje súbor preddefinovaných tvrdení založených na odporúčaniach Lighthouse. Je to dobrý východiskový bod, ale tieto tvrdenia si môžete podľa potreby prispôsobiť.
• upload.target: Konfiguruje, kam sa budú nahrávať výsledky Lighthouse CI. temporary-public-storage je užitočné pre testovanie a vývoj, ale pre produkčné prostredia budete zvyčajne chcieť použiť trvalejšie riešenie úložiska (o ktorom sa budeme baviť neskôr).

3. Integrácia Lighthouse CI do vášho CI/CD pipeline

Ďalším krokom je integrácia Lighthouse CI do vášho CI/CD pipeline. Presné kroky sa budú líšiť v závislosti od vášho poskytovateľa CI/CD, ale všeobecný proces zahŕňa pridanie skriptu do vašej konfigurácie CI/CD, ktorý spúšťa príkazy Lighthouse CI.

Príklad použitia GitHub Actions:

Vytvorte súbor s názvom .github/workflows/lighthouse-ci.yml vo vašom repozitári s nasledujúcim obsahom:

            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
              
            
          

Vysvetlenie:

• on.push.branches: Spúšťa workflow pri push-och do main vetvy.
• on.pull_request: Spúšťa workflow pri pull requestoch.
• jobs.lighthouse.runs-on: Určuje operačný systém, ktorý sa má použiť pre úlohu (v tomto prípade Ubuntu).
• steps: Definuje kroky, ktoré sa majú vykonať v úlohe:
• actions/checkout@v3: Stiahne repozitár.
• actions/setup-node@v3: Nastaví Node.js.
• npm ci: Nainštaluje závislosti.
• Run Lighthouse CI: Spustí príkazy Lighthouse CI:
• npm install -g @lhci/cli@0.11.x: Nainštaluje Lighthouse CI CLI globálne. *Dôležité*: Vždy sa odporúča uzamknúť konkrétnu verziu.
• lhci autorun: Spustí Lighthouse CI v režime "autorun", ktorý automaticky zbiera audity, overuje výkonnostné rozpočty a nahráva výsledky.

Dôležité úvahy pre integráciu CI/CD:

• Spustenie servera: Pred spustením lhci autorun sa uistite, že váš webový server beží (napr. npm start). Možno budete musieť do konfigurácie CI/CD pridať krok na spustenie servera na pozadí.
• Databázové migrácie: Ak vaša aplikácia závisí od databázy, uistite sa, že databázové migrácie sú spustené ako súčasť vášho CI/CD procesu *pred* spustením Lighthouse CI.
• Premenné prostredia: Ak vaša aplikácia vyžaduje premenné prostredia, uistite sa, že sú správne nakonfigurované vo vašom CI/CD prostredí.

4. Spustenie Lighthouse CI

Teraz, kedykoľvek pošlete zmeny do main vetvy alebo vytvoríte pull request, workflow Lighthouse CI sa automaticky spustí. Výsledky budú dostupné v rozhraní GitHub Actions.

5. Zobrazenie výsledkov Lighthouse CI

Výsledky Lighthouse CI budú nahrané na miesto určené v súbore lighthouserc.js (napr. temporary-public-storage). K týmto výsledkom sa dostanete kliknutím na odkaz uvedený vo výstupe CI/CD. Tieto výsledky poskytujú podrobné informácie o výkone, prístupnosti, SEO a osvedčených postupoch vašej webovej stránky.

Konfigurácia tvrdení a výkonnostných rozpočtov

Lighthouse CI vám umožňuje konfigurovať tvrdenia (assertions) a výkonnostné rozpočty, aby ste zabezpečili, že vaša webová stránka spĺňa vaše výkonnostné ciele. Tvrdenia sú pravidlá, ktoré kontrolujú špecifické metriky výkonu (napr. First Contentful Paint, Largest Contentful Paint) oproti preddefinovaným prahovým hodnotám. Výkonnostné rozpočty definujú prijateľné limity pre rôzne metriky výkonu.

Tu je príklad, ako nakonfigurovať tvrdenia vo vašom súbore lighthouserc.js:

            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
              
            
          

Vysvetlenie:

• first-contentful-paint: Nastavuje prahovú hodnotu pre varovanie pre First Contentful Paint (FCP) na 2000ms.
• largest-contentful-paint: Nastavuje prahovú hodnotu pre varovanie pre Largest Contentful Paint (LCP) na 2500ms.
• cumulative-layout-shift: Nastavuje prahovú hodnotu pre varovanie pre Cumulative Layout Shift (CLS) na 0.1.
• total-blocking-time: Nastavuje prahovú hodnotu pre varovanie pre Total Blocking Time (TBT) na 500ms.
• categories:performance: Nastavuje prahovú hodnotu pre varovanie pre celkové skóre kategórie Performance na 0.9.
• categories:accessibility: Nastavuje prahovú hodnotu pre chybu pre celkové skóre kategórie Accessibility na 0.8.

Úrovne tvrdení:

• off: Vypne tvrdenie.
• warn: Zobrazí varovanie, ak tvrdenie zlyhá.
• error: Spôsobí zlyhanie behu Lighthouse CI, ak tvrdenie zlyhá.

Prispôsobenie tvrdení:

Tvrdenia si môžete prispôsobiť tak, aby vyhovovali vašim špecifickým potrebám. Napríklad môžete nastaviť prísnejšie prahové hodnoty pre kritické metriky výkonu alebo vypnúť tvrdenia, ktoré nie sú relevantné pre vašu aplikáciu.

Výber cieľa pre nahrávanie Lighthouse CI

Možnosť upload.target vo vašom súbore lighthouserc.js špecifikuje, kam sa budú nahrávať výsledky Lighthouse CI. Cieľ temporary-public-storage je vhodný pre testovanie a vývoj, ale nie je vhodný pre produkčné prostredia, pretože dáta nie sú trvalé.

Tu sú niektoré alternatívne ciele nahrávania:

• Lighthouse CI Server: Odporúčaným prístupom pre produkčné prostredia je použitie Lighthouse CI servera. Lighthouse CI server poskytuje trvalé riešenie úložiska pre vaše výsledky Lighthouse CI, ako aj používateľské rozhranie na prezeranie a analýzu vašich dát. Môže byť nasadený na rôznych cloudových poskytovateľoch alebo hosťovaný na vašej vlastnej infraštruktúre.
• Google Cloud Storage: Svoje výsledky Lighthouse CI môžete nahrať do Google Cloud Storage bucketu. Je to cenovo výhodné a škálovateľné riešenie na ukladanie vašich dát.
• Amazon S3: Podobne ako Google Cloud Storage, môžete svoje výsledky Lighthouse CI nahrať do Amazon S3 bucketu.

Nastavenie Lighthouse CI Servera:

Nastavenie Lighthouse CI servera zahŕňa nasledujúce kroky:

1. Inštalácia Lighthouse CI Servera: Lighthouse CI server môžete nainštalovať pomocou npm alebo yarn:

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

              
                Copy
              
            
          

2. Konfigurácia databázy: Lighthouse CI server vyžaduje databázu na ukladanie svojich dát. Môžete použiť rôzne databázy, vrátane PostgreSQL, MySQL a SQLite. Nakonfigurujte nastavenia pripojenia k databáze v súbore .env.
3. Spustenie Lighthouse CI Servera: Spustite Lighthouse CI server pomocou príkazu lhci server.
4. Konfigurácia Lighthouse CI CLI na použitie servera: Aktualizujte váš súbor lighthouserc.js tak, aby používal Lighthouse CI server ako cieľ nahrávania:

            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
              
            
          

Nahraďte http://your-lhci-server.com URL adresou vášho Lighthouse CI servera a YOUR_LHCI_TOKEN prístupovým tokenom pre váš projekt.

Osvedčené postupy pre používanie Lighthouse CI

Aby ste z Lighthouse CI vyťažili maximum, dodržiavajte tieto osvedčené postupy:

• Spúšťajte Lighthouse CI pri každej zmene kódu: Integrujte Lighthouse CI do vášho CI/CD pipeline, aby sa audity spúšťali pri každej zmene kódu. To vám pomôže včas odhaliť regresie výkonu.
• Nastavte výkonnostné rozpočty: Definujte výkonnostné rozpočty, aby ste zabezpečili, že vaša webová stránka zostane v prijateľných výkonnostných limitoch.
• Monitorujte trendy výkonu: Sledujte výkon vašej webovej stránky v priebehu času, aby ste identifikovali trendy a merali dopad vašich optimalizácií.
• Prioritizujte optimalizačné úsilie: Zamerajte sa najprv na optimalizáciu najkritickejších metrík výkonu.
• Používajte reálne dáta: Používajte reálne dáta na informovanie vášho optimalizačného úsilia. Napríklad môžete použiť Google Analytics na identifikáciu stránok, ktoré sú najčastejšie navštevované vašimi používateľmi.
• Testujte na reálnych zariadeniach: Testujte svoju webovú stránku na reálnych zariadeniach, aby ste sa uistili, že funguje dobre v reálnych podmienkach.
• Pravidelne kontrolujte výsledky Lighthouse CI: Uistite sa, že pravidelne kontrolujete výsledky Lighthouse CI a podnikáte kroky na riešenie akýchkoľvek zistených problémov s výkonom.
• Optimalizujte obrázky: Optimalizujte svoje obrázky, aby ste znížili ich veľkosť súboru bez straty kvality. Nástroje ako ImageOptim (macOS), TinyPNG a ImageKit sú na to užitočné.
• Minifikujte CSS a JavaScript: Minifikujte svoje CSS a JavaScript súbory, aby ste znížili ich veľkosť. Pomôcť môžu nástroje ako UglifyJS a CSSNano.
• Využívajte kešovanie prehliadača: Využívajte kešovanie prehliadača na zníženie počtu požiadaviek, ktoré vaša webová stránka posiela na server.
• Používajte sieť na doručovanie obsahu (CDN): Používajte CDN na distribúciu obsahu vašej webovej stránky na servery po celom svete. To môže zlepšiť časy načítania pre používateľov v rôznych geografických lokalitách. Služby ako Cloudflare a Amazon CloudFront sú populárne CDN.
• Odložte načítanie obrázkov mimo obrazovky: Implementujte lenivé načítavanie (lazy loading) pre obrázky, ktoré nie sú okamžite viditeľné na obrazovke. To môže výrazne zlepšiť počiatočný čas načítania stránky. Atribút loading="lazy" sa dá použiť pre jednoduché lenivé načítavanie.
• Eliminujte zdroje blokujúce vykresľovanie: Identifikujte a eliminujte zdroje, ktoré blokujú vykresľovanie vašej stránky. To často zahŕňa vkladanie kritického CSS priamo do HTML (inlining) a odkladanie nekritického CSS a JavaScriptu.
• Znížte čas vykonávania JavaScriptu: Profilujte svoj JavaScript kód, aby ste identifikovali a optimalizovali pomaly bežiace funkcie. Techniky ako rozdeľovanie kódu (code splitting) a tree shaking môžu pomôcť znížiť množstvo JavaScriptu, ktoré je potrebné stiahnuť a spustiť.

Pokročilé techniky Lighthouse CI

Keď sa zoznámite so základmi Lighthouse CI, môžete preskúmať niektoré pokročilé techniky na ďalšie zlepšenie monitorovania výkonu:

• Vlastné audity Lighthouse: Môžete vytvoriť vlastné audity Lighthouse na testovanie špecifických problémov s výkonom, ktoré sú relevantné pre vašu aplikáciu.
• Konfigurácia Headless Chrome: Nakonfigurujte Headless Chrome na použitie špecifických emulácií zariadení alebo nastavení obmedzenia siete (network throttling).
• Integrácia s monitorovacími nástrojmi: Integrujte Lighthouse CI s vašimi existujúcimi monitorovacími nástrojmi (napr. New Relic, Datadog), aby ste získali komplexnejší pohľad na výkon vašej webovej stránky.
• Testovanie vizuálnej regresie: Skombinujte Lighthouse CI s nástrojmi na testovanie vizuálnej regresie, aby ste odhalili vizuálne zmeny, ktoré môžu ovplyvniť výkon.

Lighthouse CI pre globálne publikum: Úvahy pre medzinárodné webové stránky

Pri používaní Lighthouse CI pre webové stránky zamerané na globálne publikum zvážte nasledujúce:

• Testujte z viacerých lokalít: Časy odozvy servera sa môžu výrazne líšiť v závislosti od polohy používateľa. Používajte CDN (Content Delivery Network) a zvážte spustenie auditov Lighthouse CI z rôznych geografických regiónov, aby ste získali presnejší obraz o výkone pre vašich medzinárodných používateľov. Niektorí poskytovatelia CI/CD ponúkajú možnosti špecifikovať geografickú polohu bežiaceho prostredia (runner).
• Zohľadnite podmienky siete: Rýchlosti a latencia siete sa po celom svete veľmi líšia. Simulujte rôzne podmienky siete počas vašich auditov Lighthouse CI, aby ste pochopili, ako sa vaša webová stránka správa pri rôznych obmedzeniach. Lighthouse umožňuje obmedziť sieťové pripojenie, simulujúc pomalšie pripojenia ako 3G.
• Lokalizácia obsahu: Uistite sa, že váš lokalizovaný obsah je správne optimalizovaný. To zahŕňa optimalizáciu obrázkov pre rôzne jazyky a znakové sady a správne kódovanie, aby sa predišlo problémom so zobrazením.
• Načítavanie písiem: Optimalizujte načítavanie písiem pre rôzne jazyky. Zvážte použitie `font-display: swap`, aby ste zabránili tomu, že text bude počas načítavania písma neviditeľný.
• Skripty tretích strán: Dávajte pozor na skripty tretích strán, pretože môžu výrazne ovplyvniť výkon, najmä pre používateľov v regiónoch s pomalším pripojením na sieť. Pravidelne auditujte výkon skriptov tretích strán a zvážte použitie asynchrónneho načítavania alebo hosťovanie kritických skriptov na vlastnom serveri.
• Optimalizácia pre mobilné zariadenia: Používanie mobilných zariadení je v mnohých častiach sveta rozšírené. Uistite sa, že vaša webová stránka je optimalizovaná pre mobilné zariadenia a že vaše audity Lighthouse CI zahŕňajú testy špecifické pre mobilné zariadenia.

Riešenie bežných problémov s Lighthouse CI

Tu sú niektoré bežné problémy, s ktorými sa môžete stretnúť pri používaní Lighthouse CI, a ako ich riešiť:

• Lighthouse CI zlyhá s chybou "Timeout": To sa môže stať, ak sa vaša webová stránka načíta príliš dlho alebo ak sa Lighthouse CI nemôže pripojiť k vašej webovej stránke. Skúste zvýšiť hodnotu časového limitu vo vašom súbore lighthouserc.js alebo skontrolujte logy servera vašej webovej stránky na chyby.
• Lighthouse CI hlási nekonzistentné výsledky: Výsledky Lighthouse sa môžu medzi jednotlivými spusteniami mierne líšiť v dôsledku sieťových podmienok alebo iných faktorov. Spustite viacero auditov, aby ste získali stabilnejší priemer.
• Lighthouse CI nedokáže nahrať výsledky: Skontrolujte konfiguráciu upload.target a uistite sa, že váš Lighthouse CI server beží a je dostupný. Tiež si overte, či máte nakonfigurovaný správny prístupový token.
• Lighthouse CI hlási neočakávané regresie výkonu: Preskúmajte zmeny kódu, ktoré boli vykonané pred zistením regresie. Použite reporty Lighthouse CI na identifikáciu špecifických metrík výkonu, ktoré sa zhoršili, a zamerajte svoje optimalizačné úsilie na tieto oblasti.

Záver

Frontend Lighthouse CI je výkonný nástroj na kontinuálne monitorovanie výkonu webových aplikácií. Integráciou Lighthouse CI do vášho CI/CD pipeline môžete proaktívne identifikovať a riešiť problémy s výkonom, čím zabezpečíte, že vaša webová stránka poskytuje optimálny používateľský zážitok. Nezabudnite prispôsobiť svoje nastavenia, pravidlá tvrdení a testovacie lokality pre globálne publikum, aby ste vytvorili čo najlepší zážitok pre používateľov po celom svete.

Dodržiavaním krokov a osvedčených postupov uvedených v tejto príručke môžete výrazne zlepšiť výkon vašej webovej stránky, znížiť mieru odchodov, zvýšiť konverzné pomery a v konečnom dôsledku dosiahnuť svoje obchodné ciele. Začnite implementovať Lighthouse CI ešte dnes a odomknite plný potenciál vašich webových aplikácií.