Testovanie výkonnosti frontendu: Integrácia Lighthouse CI pre neustále zlepšovanie

V dnešnom digitálnom svete je výkonnosť webových stránok prvoradá. Pomalé načítavanie, problémy s prístupnosťou a zlé SEO môžu výrazne ovplyvniť používateľskú skúsenosť a následne aj obchodné výsledky. Testovanie výkonnosti frontendu sa stalo nevyhnutnou súčasťou moderného životného cyklu vývoja softvéru, ktoré zabezpečuje, že webové stránky a aplikácie sú rýchle, spoľahlivé a používateľsky prívetivé pre globálne publikum. Tento článok sa venuje integrácii Lighthouse CI, mocného open-source nástroja, do vášho pipelineu pre nepretržitú integráciu (CI) s cieľom automatizovať testovanie výkonnosti frontendu a podporovať neustále zlepšovanie.

Prečo je testovanie výkonnosti frontendu dôležité?

Predtým, ako sa ponoríme do Lighthouse CI, poďme pochopiť, prečo je testovanie výkonnosti frontendu kľúčové:

• Používateľská skúsenosť: Rýchla a responzívna webová stránka poskytuje lepšiu používateľskú skúsenosť, čo vedie k zvýšenému zapojeniu a zníženej miere odchodov. Predstavte si potenciálneho zákazníka v Tokiu v Japonsku, ktorý sa snaží kúpiť produkt na pomaly sa načítavajúcom e-shope. Pravdepodobne stránku opustí a bude hľadať alternatívy.
• Hodnotenie v SEO: Vyhľadávače ako Google považujú rýchlosť a výkonnosť webových stránok za faktory hodnotenia. Rýchlejšie stránky sa zvyčajne umiestňujú vyššie vo výsledkoch vyhľadávania, čím získavajú viac organickej návštevnosti. Iniciatíva Google Core Web Vitals zdôrazňuje dôležitosť faktorov ako Largest Contentful Paint (LCP), First Input Delay (FID) a Cumulative Layout Shift (CLS) pre SEO.
• Prístupnosť: Zlepšenia výkonnosti často vedú k lepšej prístupnosti pre používateľov so zdravotným postihnutím. Optimalizovaný kód a obrázky môžu zlepšiť zážitok pre používateľov, ktorí sa spoliehajú na čítačky obrazovky alebo majú obmedzenú šírku pásma.
• Konverzný pomer: Rýchlejšia webová stránka môže priamo ovplyvniť konverzný pomer. Štúdie ukázali, že aj jednosekundové oneskorenie pri načítaní stránky môže viesť k výraznému poklesu konverzií. Predstavte si používateľa v Bombaji v Indii, ktorý sa snaží rezervovať let. Pomalý proces rezervácie by ho mohol viesť k opusteniu nákupu a výberu konkurencie.
• Optimalizácia zdrojov: Testovanie výkonnosti pomáha identifikovať oblasti, kde je možné optimalizovať zdroje, čo vedie k úsporám nákladov na serverovú infraštruktúru a využitie šírky pásma.

Predstavujeme Lighthouse CI

Lighthouse CI je open-source, automatizovaný nástroj navrhnutý pre bezproblémovú integráciu s vaším CI/CD pipelineom. Spúšťa Lighthouse, populárny audítorský nástroj vyvinutý spoločnosťou Google, a poskytuje prehľady o výkonnosti, prístupnosti, SEO, osvedčených postupoch a zhode s Progressive Web App (PWA) vašej webovej stránky. Lighthouse CI vám pomôže:

• Automatizovať audity výkonnosti: Spúšťať audity Lighthouse automaticky pri každom commite alebo pull requeste.
• Sledovať výkonnosť v čase: Monitorovať metriky výkonnosti v priebehu času a včas identifikovať regresie.
• Nastaviť rozpočty výkonnosti: Definovať rozpočty výkonnosti a zlyhať buildy, ak sú prekročené.
• Integrovať so systémami CI/CD: Integrovať s populárnymi systémami CI/CD ako GitHub Actions, GitLab CI, CircleCI a Jenkins.
• Spolupracovať na problémoch s výkonnosťou: Zdieľať reporty z Lighthouse a spolupracovať s tímom na riešení problémov s výkonnosťou.

Nastavenie Lighthouse CI

Tu je podrobný návod na nastavenie Lighthouse CI vo vašom projekte:

1. Inštalácia Lighthouse CI

Nainštalujte Lighthouse CI CLI 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 pre konfiguráciu Lighthouse CI. Tu je príklad konfigurácie:

            module.exports = {
  ci:
{
    collect:
{
      url: ['http://localhost:3000', 'http://localhost:3000/about'],
      startServerCommand: 'npm start',
      numberOfRuns: 3,
    },
    assert:
{
      assertions:
{
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 1 }],
        'categories:best-practices': ['warn', { minScore: 0.9 }],
        'categories:seo': ['warn', { minScore: 0.9 }],
        'categories:pwa': ['off'],
        'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 4000 }],
        'total-blocking-time': ['warn', { maxNumericValue: 200 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
      },
    },
    upload:
{
      target: 'temporary-redirect',
    },
  },
};

            

              
                Copy
              
            
          

Rozoberme si túto konfiguráciu:

• collect.url: Pole URL adries na auditovanie. Tento príklad audituje domovskú stránku a stránku 'o nás'. Mali by ste zahrnúť všetky kľúčové stránky vášho webu, zohľadňujúc rôzne prípady použitia. Napríklad e-shop by mohol zahŕňať domovskú stránku, stránky so zoznamom produktov, stránky s detailmi produktov a proces nákupu.
• collect.startServerCommand: Príkaz na spustenie vášho vývojového servera. Toto je nevyhnutné, ak Lighthouse CI potrebuje bežať oproti lokálnemu vývojovému prostrediu.
• collect.numberOfRuns: Počet spustení auditov Lighthouse pre každú URL. Viacnásobné spustenie auditov pomáha zmierniť odchýlky v sieťových podmienkach a iných faktoroch.
• assert.assertions: Súbor tvrdení na validáciu výsledkov auditu Lighthouse. Každé tvrdenie špecifikuje metriku alebo kategóriu a prahovú hodnotu. Ak prahová hodnota nie je splnená, build zlyhá. Tento príklad nastavuje prahové hodnoty pre kategórie výkonnosť, prístupnosť, osvedčené postupy a SEO. Taktiež nastavuje prahové hodnoty pre špecifické metriky ako First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT) a Cumulative Layout Shift (CLS).
• upload.target: Určuje, kam sa majú nahrať reporty Lighthouse. temporary-redirect nahrá reporty na dočasné úložisko a poskytne URL na ich prístup. Iné možnosti zahŕňajú použitie servera Lighthouse CI alebo riešení cloudového úložiska ako Google Cloud Storage alebo Amazon S3.

3. Integrácia s vaším CI/CD systémom

Ďalším krokom je integrácia Lighthouse CI do vášho CI/CD pipelineu. Tu je príklad, ako ho integrovať s GitHub Actions:

Vytvorte súbor .github/workflows/lighthouse.yml vo vašom repozitári:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install Dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |          npm run build
          lhci autorun

            

              
                Copy
              
            
          

Tento workflow vykonáva nasledujúce kroky:

• Načíta kód (checkout).
• Nastaví Node.js.
• Nainštaluje závislosti.
• Spustí Lighthouse CI. Tento krok najprv zbuildí aplikáciu (npm run build), potom spustí lhci autorun, ktorý vykoná audity Lighthouse a overí výsledky oproti nakonfigurovaným prahovým hodnotám.

Prispôsobte tento workflow vášmu špecifickému CI/CD systému a požiadavkám projektu. Napríklad, ak používate GitLab CI, nakonfigurovali by ste súbor .gitlab-ci.yml s podobnými krokmi.

4. Spustenie Lighthouse CI

Commitnite svoje zmeny a pushnite ich do vášho repozitára. CI/CD pipeline automaticky spustí Lighthouse CI. Ak niektoré z tvrdení zlyhá, build zlyhá, čo poskytne cennú spätnú väzbu vývojárom. Reporty Lighthouse CI budú dostupné na URL adrese poskytnutej systémom CI/CD.

Pokročilá konfigurácia a prispôsobenie

Lighthouse CI ponúka širokú škálu konfiguračných možností a prispôsobení. Tu sú niektoré pokročilé funkcie:

1. Použitie servera Lighthouse CI

Server Lighthouse CI poskytuje centralizovaný dashboard na sledovanie metrík výkonnosti v čase, správu projektov a spoluprácu na problémoch s výkonnosťou. Ak chcete použiť server Lighthouse CI, musíte nastaviť inštanciu a nakonfigurovať váš súbor lighthouserc.js na nahrávanie reportov na server.

Najprv nasadte server. K dispozícii sú rôzne možnosti nasadenia, vrátane Docker, Heroku a cloudových poskytovateľov ako AWS a Google Cloud. Podrobné pokyny na nasadenie servera nájdete v dokumentácii Lighthouse CI.

Keď je server spustený, aktualizujte váš súbor lighthouserc.js tak, aby odkazoval na server:

            module.exports = {
  ci:
{
    collect: {
      url: ['http://localhost:3000'],
      startServerCommand: 'npm start',
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
      },
    },
    upload:
{
      target: 'lhci',
      serverBaseUrl: 'YOUR_LHCI_SERVER_URL',
      token: 'YOUR_LHCI_SERVER_TOKEN',
    },
  },
};

            

              
                Copy
              
            
          

Nahraďte YOUR_LHCI_SERVER_URL URL adresou vášho servera Lighthouse CI a YOUR_LHCI_SERVER_TOKEN tokenom vygenerovaným serverom. Token autentifikuje váš CI pipeline so serverom.

2. Nastavenie rozpočtov výkonnosti

Rozpočty výkonnosti definujú prijateľné prahové hodnoty pre špecifické metriky. Lighthouse CI vám umožňuje nastaviť rozpočty výkonnosti a zlyhať buildy, ak sú tieto rozpočty prekročené. Pomáha to predchádzať regresiám výkonnosti a zabezpečuje, že vaša webová stránka zostane v prijateľných výkonnostných limitoch.

Rozpočty výkonnosti môžete definovať vo vašom súbore lighthouserc.js pomocou vlastnosti assert.assertions. Napríklad, ak chcete nastaviť rozpočet výkonnosti pre First Contentful Paint (FCP), môžete pridať nasledujúce tvrdenie:

            'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
            

              
                Copy
              
            
          

Toto tvrdenie spôsobí zlyhanie buildu, ak je FCP väčšie ako 2500 milisekúnd.

3. Prispôsobenie konfigurácie Lighthouse

Lighthouse CI vám umožňuje prispôsobiť konfiguráciu Lighthouse tak, aby vyhovovala vašim špecifickým potrebám. Môžete konfigurovať rôzne nastavenia Lighthouse, ako napríklad:

• onlyAudits: Špecifikujte zoznam auditov, ktoré sa majú spustiť.
• skipAudits: Špecifikujte zoznam auditov, ktoré sa majú preskočiť.
• throttling: Nakonfigurujte nastavenia obmedzenia siete na simuláciu rôznych sieťových podmienok.
• formFactor: Špecifikujte form factor (desktop alebo mobil), ktorý sa má emulovať.
• screenEmulation: Nakonfigurujte nastavenia emulácie obrazovky.

Na prispôsobenie konfigurácie Lighthouse môžete použiť flag --config-path pri príkaze lhci autorun, ktorý bude odkazovať na vlastný konfiguračný súbor Lighthouse. Úplný zoznam konfiguračných možností nájdete v dokumentácii Lighthouse.

4. Auditovanie stránok vyžadujúcich autentifikáciu

Auditovanie stránok vyžadujúcich autentifikáciu si vyžaduje trochu iný prístup. Musíte poskytnúť Lighthouse CI spôsob, ako sa autentifikovať pred spustením auditov. To sa dá dosiahnuť pomocou cookies alebo skriptovaním prihlasovacieho procesu.

Jedným bežným prístupom je použitie flagu --extra-headers na odovzdanie autentifikačných cookies do Lighthouse CI. Cookies môžete získať z vývojárskych nástrojov vášho prehliadača po prihlásení na webovú stránku.

Alternatívne môžete použiť skript Puppeteer na automatizáciu prihlasovacieho procesu a následné spustenie auditov Lighthouse na autentifikovaných stránkach. Tento prístup poskytuje väčšiu flexibilitu a umožňuje vám riešiť zložité scenáre autentifikácie.Osvedčené postupy pre testovanie výkonnosti frontendu s Lighthouse CI

Aby ste maximalizovali výhody Lighthouse CI, dodržiavajte tieto osvedčené postupy:

• Spúšťajte Lighthouse CI pravidelne: Integrujte Lighthouse CI do vášho CI/CD pipelineu, aby sa audity spúšťali automaticky pri každom commite alebo pull requeste. Tým sa zabezpečí, že regresie výkonnosti budú odhalené včas a rýchlo riešené.
• Nastavte realistické rozpočty výkonnosti: Definujte rozpočty výkonnosti, ktoré sú náročné, ale dosiahnuteľné. Začnite s konzervatívnymi rozpočtami a postupne ich sprísňujte, ako sa výkonnosť vašej webovej stránky zlepšuje. Zvážte nastavenie rôznych rozpočtov pre rôzne typy stránok v závislosti od ich zložitosti a dôležitosti.
• Zamerajte sa na kľúčové metriky: Uprednostnite kľúčové metriky výkonnosti, ktoré majú najväčší vplyv na používateľskú skúsenosť a obchodné výsledky. Core Web Vitals od Google (LCP, FID a CLS) sú dobrým východiskovým bodom.
• Skúmajte a riešte problémy s výkonnosťou: Keď Lighthouse CI identifikuje problémy s výkonnosťou, dôkladne ich preskúmajte a implementujte vhodné riešenia. Použite reporty Lighthouse na identifikáciu hlavných príčin problémov a uprednostnite najvplyvnejšie opravy.
• Monitorujte výkonnosť v čase: Sledujte metriky výkonnosti v priebehu času, aby ste identifikovali trendy a vzorce. Použite server Lighthouse CI alebo iné monitorovacie nástroje na vizualizáciu údajov o výkonnosti a identifikáciu oblastí na zlepšenie.
• Vzdelávajte svoj tím: Uistite sa, že váš tím rozumie dôležitosti výkonnosti frontendu a ako efektívne používať Lighthouse CI. Poskytnite školenia a zdroje, ktoré im pomôžu zlepšiť ich zručnosti a znalosti.
• Zvážte globálne sieťové podmienky: Pri nastavovaní rozpočtov výkonnosti zvážte sieťové podmienky v rôznych častiach sveta. Používatelia v oblastiach s pomalším internetovým pripojením môžu mať inú skúsenosť ako používatelia v oblastiach s rýchlejším pripojením. Použite nástroje na simuláciu rôznych sieťových podmienok počas testovania.
• Optimalizujte obrázky: Optimalizácia obrázkov je kľúčovým aspektom výkonnosti frontendu. Používajte nástroje ako ImageOptim, TinyPNG alebo online konvertory na kompresiu a optimalizáciu obrázkov bez straty kvality. Používajte moderné formáty obrázkov ako WebP, ktoré ponúkajú lepšiu kompresiu a kvalitu ako tradičné formáty JPEG a PNG. Implementujte lenivé načítavanie (lazy loading) pre obrázky, ktoré nie sú okamžite viditeľné vo viewporte.
• Minifikujte a komprimujte kód: Minifikujte váš HTML, CSS a JavaScript kód na zmenšenie veľkosti súborov. Používajte nástroje ako UglifyJS, Terser alebo online minifikátory. Povoľte Gzip alebo Brotli kompresiu na vašom serveri na ďalšie zmenšenie veľkosti prenášaných súborov.
• Využívajte cache prehliadača: Nakonfigurujte váš server tak, aby nastavil vhodné cache hlavičky pre statické zdroje ako obrázky, CSS a JavaScript súbory. To umožní prehliadačom ukladať tieto zdroje do vyrovnávacej pamäte a vyhnúť sa ich opakovanému sťahovaniu.

Záver

Integrácia Lighthouse CI do vášho vývojového workflow je kľúčovým krokom k budovaniu vysoko výkonných, prístupných a SEO-friendly webových stránok. Automatizáciou testovania výkonnosti frontendu a sledovaním výkonnosti v čase môžete včas identifikovať a riešiť problémy s výkonnosťou, zlepšiť používateľskú skúsenosť a dosiahnuť lepšie obchodné výsledky. Osvojte si Lighthouse CI a urobte z neustáleho zlepšovania výkonnosti kľúčovú hodnotu vo vašom vývojovom procese. Pamätajte, že výkonnosť webovej stránky nie je jednorazová záležitosť, ale nepretržitý proces, ktorý si vyžaduje neustálu pozornosť a optimalizáciu. Zvážte kultúrne a regionálne faktory, aby ste zabezpečili bezproblémovú skúsenosť pre všetkých vašich používateľov bez ohľadu na ich polohu alebo zariadenie. Dodržiavaním osvedčených postupov uvedených v tomto článku môžete zabezpečiť, že vaša webová stránka poskytne rýchly, spoľahlivý a príjemný zážitok používateľom po celom svete.