Testiranje performansi frontenda: Integracija Lighthouse CI-ja za kontinuirano poboljšanje

U današnjem digitalnom okruženju, performanse web stranice su od presudne važnosti. Spora vremena učitavanja, problemi s pristupačnošću i loš SEO mogu značajno utjecati na korisničko iskustvo i, posljedično, na poslovne rezultate. Testiranje performansi frontenda postalo je ključan dio modernog životnog ciklusa razvoja softvera, osiguravajući da su web stranice i web aplikacije brze, pouzdane i jednostavne za korištenje za globalnu publiku. Ovaj članak bavi se integracijom Lighthouse CI-ja, moćnog alata otvorenog koda, u vaš cjevovod za kontinuiranu integraciju (CI) kako biste automatizirali testiranje performansi frontenda i potaknuli kontinuirano poboljšanje.

Zašto je testiranje performansi frontenda važno?

Prije nego što zaronimo u Lighthouse CI, shvatimo zašto je testiranje performansi frontenda ključno:

• Korisničko iskustvo: Brza i responzivna web stranica pruža bolje korisničko iskustvo, što dovodi do povećanog angažmana i smanjenih stopa napuštanja stranice. Zamislite potencijalnog kupca u Tokiju, Japan, koji pokušava kupiti proizvod na sporo učitavajućoj e-commerce stranici. Vjerojatno će napustiti stranicu i potražiti alternative.
• SEO rangiranje: Tražilice poput Googlea uzimaju u obzir brzinu i performanse web stranice kao faktore rangiranja. Brže web stranice obično se rangiraju više u rezultatima pretraživanja, privlačeći više organskog prometa. Googleova inicijativa Core Web Vitals naglašava važnost faktora kao što su Largest Contentful Paint (LCP), First Input Delay (FID) i Cumulative Layout Shift (CLS) za SEO.
• Pristupačnost: Poboljšanja performansi često dovode do bolje pristupačnosti za korisnike s invaliditetom. Optimizirani kod i slike mogu poboljšati iskustvo korisnicima koji se oslanjaju na čitače zaslona ili onima s ograničenom propusnošću interneta.
• Stope konverzije: Brža web stranica može izravno utjecati na stope konverzije. Studije su pokazale da čak i jedna sekunda kašnjenja u vremenu učitavanja stranice može dovesti do značajnog smanjenja konverzija. Zamislite korisnika u Mumbaiju, Indija, koji pokušava rezervirati let. Spor proces rezervacije mogao bi ga navesti da odustane od kupnje i odabere konkurenta.
• Optimizacija resursa: Testiranje performansi pomaže identificirati područja gdje se resursi mogu optimizirati, što dovodi do ušteda u smislu poslužiteljske infrastrukture i korištenja propusnosti.

Predstavljamo Lighthouse CI

Lighthouse CI je automatizirani alat otvorenog koda dizajniran za besprijekornu integraciju s vašim CI/CD cjevovodom. Pokreće Lighthouse, popularan alat za reviziju koji je razvio Google, i pruža uvide u performanse, pristupačnost, SEO, najbolje prakse i usklađenost s Progressive Web App (PWA) vaše web stranice. Lighthouse CI vam pomaže:

• Automatizirati revizije performansi: Pokrenite Lighthouse revizije automatski sa svakim commitom ili pull requestom.
• Pratiti performanse tijekom vremena: Pratite metrike performansi tijekom vremena i rano identificirajte regresije.
• Postaviti proračune performansi: Definirajte proračune performansi i oborite buildove ako su prekoračeni.
• Integrirati se s CI/CD sustavima: Integrirajte se s popularnim CI/CD sustavima kao što su GitHub Actions, GitLab CI, CircleCI i Jenkins.
• Surađivati na problemima s performansama: Dijelite Lighthouse izvješća i surađujte sa svojim timom na rješavanju problema s performansama.

Postavljanje Lighthouse CI-ja

Evo korak-po-korak vodiča za postavljanje Lighthouse CI-ja u vašem projektu:

1. Instalacija Lighthouse CI-ja

Instalirajte Lighthouse CI CLI globalno koristeći npm ili yarn:

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

              
                Copy
              
            
          

2. Konfiguracija Lighthouse CI-ja

Kreirajte lighthouserc.js datoteku u korijenskom direktoriju vašeg projekta kako biste konfigurirali Lighthouse CI. Evo primjera konfiguracije:

            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
              
            
          

Razložimo ovu konfiguraciju:

• collect.url: Niz URL-ova za provjeru. Ovaj primjer provjerava početnu stranicu i stranicu 'o nama'. Trebali biste uključiti sve ključne stranice vaše web stranice, uzimajući u obzir različite slučajeve korištenja. Na primjer, e-commerce stranica mogla bi uključivati početnu stranicu, stranice s popisom proizvoda, stranice s detaljima proizvoda i proces naplate.
• collect.startServerCommand: Naredba za pokretanje vašeg razvojnog poslužitelja. Ovo je potrebno ako Lighthouse CI treba raditi na lokalnom razvojnom okruženju.
• collect.numberOfRuns: Broj puta koliko će se Lighthouse revizije pokrenuti za svaki URL. Pokretanje više revizija pomaže u ublažavanju varijacija u mrežnim uvjetima i drugim faktorima.
• assert.assertions: Skup tvrdnji za provjeru rezultata Lighthouse revizije. Svaka tvrdnja specificira metriku ili kategoriju i prag. Ako prag nije zadovoljen, build će propasti. Ovaj primjer postavlja pragove za kategorije performansi, pristupačnosti, najboljih praksi i SEO-a. Također postavlja pragove za specifične metrike kao što su First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT) i Cumulative Layout Shift (CLS).
• upload.target: Određuje gdje će se Lighthouse izvješća učitati. temporary-redirect učitava izvješća na privremenu lokaciju za pohranu i pruža URL za pristup. Druge opcije uključuju korištenje Lighthouse CI poslužitelja ili rješenja za pohranu u oblaku kao što su Google Cloud Storage ili Amazon S3.

3. Integracija s vašim CI/CD sustavom

Sljedeći korak je integracija Lighthouse CI-ja u vaš CI/CD cjevovod. Evo primjera kako ga integrirati s GitHub Actions:

Kreirajte .github/workflows/lighthouse.yml datoteku u vašem repozitoriju:

            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
              
            
          

Ovaj tijek rada obavlja sljedeće korake:

• Preuzima kod.
• Postavlja Node.js.
• Instalira ovisnosti.
• Pokreće Lighthouse CI. Ovaj korak prvo izgrađuje aplikaciju (npm run build), a zatim pokreće lhci autorun, koji izvršava Lighthouse revizije i provjerava rezultate prema konfiguriranim pragovima.

Prilagodite ovaj tijek rada vašem specifičnom CI/CD sustavu i zahtjevima projekta. Na primjer, ako koristite GitLab CI, konfigurirali biste .gitlab-ci.yml datoteku sa sličnim koracima.

4. Pokretanje Lighthouse CI-ja

Commitajte svoje promjene i gurnite ih u svoj repozitorij. CI/CD cjevovod će automatski pokrenuti Lighthouse CI. Ako bilo koja od tvrdnji ne uspije, build će propasti, pružajući vrijedne povratne informacije programerima. Lighthouse CI izvješća bit će dostupna na URL-u koji pruža CI/CD sustav.

Napredna konfiguracija i prilagodba

Lighthouse CI nudi širok raspon konfiguracijskih opcija i mogućnosti prilagodbe. Evo nekih naprednih značajki:

1. Korištenje Lighthouse CI poslužitelja

Lighthouse CI poslužitelj pruža centraliziranu nadzornu ploču za praćenje metrika performansi tijekom vremena, upravljanje projektima i suradnju na problemima s performansama. Da biste koristili Lighthouse CI poslužitelj, morate postaviti instancu i konfigurirati svoju lighthouserc.js datoteku da učitava izvješća na poslužitelj.

Prvo, implementirajte poslužitelj. Dostupne su različite opcije implementacije, uključujući Docker, Heroku i pružatelje usluga u oblaku kao što su AWS i Google Cloud. Pogledajte dokumentaciju Lighthouse CI-ja za detaljne upute o implementaciji poslužitelja.

Kada poslužitelj radi, ažurirajte svoju lighthouserc.js datoteku da pokazuje na poslužitelj:

            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
              
            
          

Zamijenite YOUR_LHCI_SERVER_URL s URL-om vašeg Lighthouse CI poslužitelja i YOUR_LHCI_SERVER_TOKEN s tokenom generiranim od strane poslužitelja. Token autentificira vaš CI cjevovod s poslužiteljem.

2. Postavljanje proračuna performansi

Proračuni performansi definiraju prihvatljive pragove za specifične metrike. Lighthouse CI vam omogućuje postavljanje proračuna performansi i obaranje buildova ako su ti proračuni prekoračeni. To pomaže u sprječavanju regresija performansi i osigurava da vaša web stranica ostane unutar prihvatljivih granica performansi.

Možete definirati proračune performansi u vašoj lighthouserc.js datoteci koristeći svojstvo assert.assertions. Na primjer, da biste postavili proračun performansi za First Contentful Paint (FCP), možete dodati sljedeću tvrdnju:

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

              
                Copy
              
            
          

Ova tvrdnja će oboriti build ako je FCP veći od 2500 milisekundi.

3. Prilagodba Lighthouse konfiguracije

Lighthouse CI vam omogućuje prilagodbu Lighthouse konfiguracije kako bi odgovarala vašim specifičnim potrebama. Možete konfigurirati različite Lighthouse postavke, kao što su:

• onlyAudits: Navedite popis revizija koje treba pokrenuti.
• skipAudits: Navedite popis revizija koje treba preskočiti.
• throttling: Konfigurirajte postavke mrežnog ograničavanja kako biste simulirali različite mrežne uvjete.
• formFactor: Odredite faktor oblika (desktop ili mobilni) za emulaciju.
• screenEmulation: Konfigurirajte postavke emulacije zaslona.

Da biste prilagodili Lighthouse konfiguraciju, možete proslijediti zastavicu --config-path naredbi lhci autorun, pokazujući na prilagođenu Lighthouse konfiguracijsku datoteku. Pogledajte Lighthouse dokumentaciju za potpuni popis konfiguracijskih opcija.

4. Provjera autentificiranih stranica

Provjera autentificiranih stranica zahtijeva malo drugačiji pristup. Morate pružiti Lighthouse CI-ju način za autentifikaciju prije pokretanja revizija. To se može postići korištenjem kolačića ili skriptiranjem procesa prijave.

Jedan uobičajeni pristup je korištenje zastavice --extra-headers za prosljeđivanje autentifikacijskih kolačića Lighthouse CI-ju. Kolačiće možete dobiti iz alata za razvojne programere vašeg preglednika nakon prijave na web stranicu.

Alternativno, možete koristiti Puppeteer skriptu za automatizaciju procesa prijave, a zatim pokrenuti Lighthouse revizije na autentificiranim stranicama. Ovaj pristup pruža veću fleksibilnost i omogućuje vam rješavanje složenih scenarija autentifikacije.Najbolje prakse za testiranje performansi frontenda s Lighthouse CI-jem

Da biste maksimalno iskoristili prednosti Lighthouse CI-ja, slijedite ove najbolje prakse:

• Redovito pokrećite Lighthouse CI: Integrirajte Lighthouse CI u svoj CI/CD cjevovod kako biste automatski pokretali revizije sa svakim commitom ili pull requestom. To osigurava da se regresije performansi rano otkriju i brzo riješe.
• Postavite realne proračune performansi: Definirajte proračune performansi koji su izazovni, ali dostižni. Počnite s konzervativnim proračunima i postupno ih pooštravajte kako se performanse vaše web stranice poboljšavaju. Razmislite o postavljanju različitih proračuna za različite vrste stranica, ovisno o njihovoj složenosti i važnosti.
• Fokusirajte se na ključne metrike: Prioritizirajte ključne metrike performansi koje imaju najveći utjecaj na korisničko iskustvo i poslovne rezultate. Googleovi Core Web Vitals (LCP, FID i CLS) su dobra polazna točka.
• Istražite i riješite probleme s performansama: Kada Lighthouse CI identificira probleme s performansama, temeljito ih istražite i implementirajte odgovarajuća rješenja. Koristite Lighthouse izvješća za identifikaciju uzroka problema i prioritizirajte najutjecajnije popravke.
• Pratite performanse tijekom vremena: Pratite metrike performansi tijekom vremena kako biste identificirali trendove i obrasce. Koristite Lighthouse CI poslužitelj ili druge alate za praćenje kako biste vizualizirali podatke o performansama i identificirali područja za poboljšanje.
• Educirajte svoj tim: Osigurajte da vaš tim razumije važnost performansi frontenda i kako učinkovito koristiti Lighthouse CI. Pružite obuku i resurse kako bi poboljšali svoje vještine i znanje.
• Uzmite u obzir globalne mrežne uvjete: Prilikom postavljanja proračuna performansi, uzmite u obzir mrežne uvjete u različitim dijelovima svijeta. Korisnici u područjima sa sporijim brzinama interneta mogu imati drugačije iskustvo od korisnika u područjima s bržim brzinama. Koristite alate za simulaciju različitih mrežnih uvjeta tijekom testiranja.
• Optimizirajte slike: Optimizacija slika ključan je aspekt performansi frontenda. Koristite alate kao što su ImageOptim, TinyPNG ili online pretvarači za komprimiranje i optimizaciju slika bez gubitka kvalitete. Koristite moderne formate slika poput WebP-a, koji nude bolju kompresiju i kvalitetu od tradicionalnih formata poput JPEG-a i PNG-a. Implementirajte lijeno učitavanje (lazy loading) za slike koje nisu odmah vidljive u prikazu.
• Minificirajte i komprimirajte kod: Minificirajte svoj HTML, CSS i JavaScript kod kako biste smanjili veličine datoteka. Koristite alate kao što su UglifyJS, Terser ili online minifikatori. Omogućite Gzip ili Brotli kompresiju na svom poslužitelju kako biste dodatno smanjili veličinu prenesenih datoteka.
• Iskoristite predmemoriranje preglednika (browser caching): Konfigurirajte svoj poslužitelj da postavi odgovarajuće zaglavlja predmemorije za statičke resurse poput slika, CSS i JavaScript datoteka. To omogućuje preglednicima da predmemoriraju te resurse i izbjegnu njihovo ponovno preuzimanje.

Zaključak

Integracija Lighthouse CI-ja u vaš razvojni proces ključan je korak prema izgradnji visoko performansnih, pristupačnih i SEO-prijateljskih web stranica. Automatizacijom testiranja performansi frontenda i praćenjem performansi tijekom vremena, možete rano identificirati i riješiti probleme s performansama, poboljšati korisničko iskustvo i potaknuti poslovne rezultate. Prihvatite Lighthouse CI i učinite kontinuirano poboljšanje performansi temeljnom vrijednošću u vašem razvojnom procesu. Zapamtite da performanse web stranice nisu jednokratni napor, već kontinuirani proces koji zahtijeva stalnu pažnju i optimizaciju. Uzmite u obzir kulturne i regionalne čimbenike kako biste osigurali besprijekorno iskustvo za sve svoje korisnike, bez obzira na njihovu lokaciju ili uređaj. Slijedeći najbolje prakse navedene u ovom članku, možete osigurati da vaša web stranica pruža brzo, pouzdano i ugodno iskustvo korisnicima diljem svijeta.