Frontend veiktspējas testēšana: Lighthouse CI integrēšana nepārtrauktiem uzlabojumiem

Mūsdienu digitālajā vidē vietnes veiktspēja ir vissvarīgākā. Lēns ielādes laiks, pieejamības problēmas un slikts SEO var būtiski ietekmēt lietotāja pieredzi un, līdz ar to, biznesa rezultātus. Frontend veiktspējas testēšana ir kļuvusi par būtisku daļu no mūsdienu programmatūras izstrādes dzīves cikla, nodrošinot, ka vietnes un tīmekļa lietojumprogrammas ir ātras, uzticamas un lietotājam draudzīgas globālai auditorijai. Šis raksts iedziļinās Lighthouse CI, jaudīga atvērtā koda rīka, integrēšanā jūsu nepārtrauktās integrācijas (CI) konveijerī, lai automatizētu frontend veiktspējas testēšanu un veicinātu nepārtrauktus uzlabojumus.

Kāpēc frontend veiktspējas testēšana ir svarīga?

Pirms iedziļināmies Lighthouse CI, sapratīsim, kāpēc frontend veiktspējas testēšana ir izšķiroša:

• Lietotāja pieredze: Ātra un atsaucīga vietne nodrošina labāku lietotāja pieredzi, kas noved pie lielākas iesaistes un samazinātiem atlēcienu rādītājiem. Iedomājieties potenciālo klientu Tokijā, Japānā, kurš mēģina iegādāties produktu lēni ielādējošā e-komercijas vietnē. Visticamāk, viņš pametīs vietni un meklēs alternatīvas.
• SEO rangs: Meklētājprogrammas, piemēram, Google, uzskata vietnes ātrumu un veiktspēju par ranga faktoriem. Ātrākas vietnes parasti ieņem augstākas vietas meklēšanas rezultātos, piesaistot vairāk organiskās datplūsmas. Google Core Web Vitals iniciatīva uzsver tādu faktoru kā Largest Contentful Paint (LCP), First Input Delay (FID) un Cumulative Layout Shift (CLS) nozīmi SEO.
• Pieejamība: Veiktspējas uzlabojumi bieži vien nodrošina labāku pieejamību lietotājiem ar invaliditāti. Optimizēts kods un attēli var uzlabot pieredzi lietotājiem, kas paļaujas uz ekrāna lasītājiem, vai tiem, kam ir ierobežots joslas platums.
• Konversijas rādītāji: Ātrāka vietne var tieši ietekmēt konversijas rādītājus. Pētījumi ir parādījuši, ka pat vienas sekundes aizkavēšanās lapas ielādes laikā var izraisīt būtisku konversiju samazināšanos. Padomājiet par lietotāju Mumbajā, Indijā, kurš mēģina rezervēt lidojumu. Lēns rezervēšanas process varētu likt viņam atteikties no pirkuma un izvēlēties konkurentu.
• Resursu optimizācija: Veiktspējas testēšana palīdz identificēt jomas, kurās var optimizēt resursus, tādējādi ietaupot izmaksas servera infrastruktūras un joslas platuma izmantošanas ziņā.

Iepazīstinām ar Lighthouse CI

Lighthouse CI ir atvērtā koda, automatizēts rīks, kas paredzēts nevainojamai integrācijai ar jūsu CI/CD konveijeru. Tas palaiž Lighthouse, populāru Google izstrādātu auditēšanas rīku, un sniedz ieskatu jūsu vietnes veiktspējā, pieejamībā, SEO, labākajās praksēs un Progresīvās tīmekļa lietotnes (PWA) atbilstībā. Lighthouse CI jums palīdz:

• Automatizēt veiktspējas auditus: Palaidiet Lighthouse auditus automātiski ar katru 'commit' vai 'pull request'.
• Sekot līdzi veiktspējai laika gaitā: Pārraugiet veiktspējas metriku laika gaitā un agrīni identificējiet regresijas.
• Iestatīt veiktspējas budžetus: Definējiet veiktspējas budžetus un neizlaidiet 'build', ja tie tiek pārsniegti.
• Integrēt ar CI/CD sistēmām: Integrējiet ar populārām CI/CD sistēmām, piemēram, GitHub Actions, GitLab CI, CircleCI un Jenkins.
• Sadarboties veiktspējas problēmu risināšanā: Dalieties ar Lighthouse pārskatiem un sadarbojieties ar savu komandu, lai atrisinātu veiktspējas problēmas.

Lighthouse CI iestatīšana

Šeit ir soli pa solim ceļvedis, kā iestatīt Lighthouse CI savā projektā:

1. Instalējiet Lighthouse CI

Instalējiet Lighthouse CI CLI globāli, izmantojot npm vai yarn:

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

              
                Copy
              
            
          

2. Konfigurējiet Lighthouse CI

Izveidojiet lighthouserc.js failu sava projekta saknes direktorijā, lai konfigurētu Lighthouse CI. Šeit ir konfigurācijas piemērs:

            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
              
            
          

Aplūkosim šo konfigurāciju sīkāk:

• collect.url: Auditu veicamo URL masīvs. Šis piemērs auditē sākumlapu un 'par' lapu. Jums vajadzētu iekļaut visas savas vietnes kritiskās lapas, ņemot vērā dažādus lietošanas gadījumus. Piemēram, e-komercijas vietne varētu ietvert sākumlapu, produktu saraksta lapas, produktu detalizētās lapas un norēķinu procesu.
• collect.startServerCommand: Komanda, lai palaistu jūsu izstrādes serveri. Tas ir nepieciešams, ja Lighthouse CI ir jādarbojas pret vietējo izstrādes vidi.
• collect.numberOfRuns: Cik reižu veikt Lighthouse auditus katram URL. Vairāku auditu veikšana palīdz mazināt tīkla apstākļu un citu faktoru svārstības.
• assert.assertions: Apgalvojumu kopums, lai apstiprinātu Lighthouse audita rezultātus. Katrs apgalvojums norāda metriku vai kategoriju un slieksni. Ja slieksnis nav sasniegts, 'build' neizdosies. Šis piemērs iestata sliekšņus veiktspējas, pieejamības, labāko prakšu un SEO kategorijām. Tas arī iestata sliekšņus konkrētām metrikām, piemēram, First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT) un Cumulative Layout Shift (CLS).
• upload.target: Norāda, kur augšupielādēt Lighthouse pārskatus. temporary-redirect augšupielādē pārskatus pagaidu glabāšanas vietā un nodrošina URL, lai tiem piekļūtu. Citas iespējas ietver Lighthouse CI servera vai mākoņglabāšanas risinājumu, piemēram, Google Cloud Storage vai Amazon S3, izmantošanu.

3. Integrējiet ar savu CI/CD sistēmu

Nākamais solis ir integrēt Lighthouse CI jūsu CI/CD konveijerī. Šeit ir piemērs, kā to integrēt ar GitHub Actions:

Izveidojiet .github/workflows/lighthouse.yml failu savā repozitorijā:

            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
              
            
          

Šī darbplūsma veic šādas darbības:

• Pārbauda kodu.
• Iestata Node.js.
• Instalē atkarības.
• Palaiž Lighthouse CI. Šis solis vispirms izveido lietojumprogrammu (npm run build), pēc tam palaiž lhci autorun, kas izpilda Lighthouse auditus un pārbauda rezultātus atbilstoši konfigurētajiem sliekšņiem.

Pielāgojiet šo darbplūsmu savai konkrētajai CI/CD sistēmai un projekta prasībām. Piemēram, ja izmantojat GitLab CI, jūs konfigurētu .gitlab-ci.yml failu ar līdzīgiem soļiem.

4. Palaidiet Lighthouse CI

Veiciet izmaiņu 'commit' un nosūtiet tās uz savu repozitoriju. CI/CD konveijers automātiski palaidīs Lighthouse CI. Ja kāds no apgalvojumiem neizdosies, 'build' neizdosies, sniedzot vērtīgu atgriezenisko saiti izstrādātājiem. Lighthouse CI pārskati būs pieejami URL, ko nodrošina CI/CD sistēma.

Papildu konfigurācija un pielāgošana

Lighthouse CI piedāvā plašu konfigurācijas iespēju un pielāgošanas iespēju klāstu. Šeit ir dažas papildu funkcijas:

1. Lighthouse CI servera izmantošana

Lighthouse CI serveris nodrošina centralizētu informācijas paneli veiktspējas metrikas izsekošanai laika gaitā, projektu pārvaldībai un sadarbībai veiktspējas problēmu risināšanā. Lai izmantotu Lighthouse CI serveri, jums ir jāiestata instance un jākonfigurē jūsu lighthouserc.js fails, lai augšupielādētu pārskatus uz serveri.

Vispirms izvietojiet serveri. Ir pieejamas dažādas izvietošanas iespējas, tostarp Docker, Heroku un mākoņpakalpojumu sniedzēji, piemēram, AWS un Google Cloud. Sīkākas instrukcijas par servera izvietošanu meklējiet Lighthouse CI dokumentācijā.

Kad serveris darbojas, atjauniniet savu lighthouserc.js failu, lai norādītu uz serveri:

            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
              
            
          

Aizstājiet YOUR_LHCI_SERVER_URL ar sava Lighthouse CI servera URL un YOUR_LHCI_SERVER_TOKEN ar servera ģenerētu marķieri. Marķieris autentificē jūsu CI konveijeru ar serveri.

2. Veiktspējas budžetu iestatīšana

Veiktspējas budžeti nosaka pieņemamus sliekšņus konkrētām metrikām. Lighthouse CI ļauj iestatīt veiktspējas budžetus un neizlaist 'build', ja šie budžeti tiek pārsniegti. Tas palīdz novērst veiktspējas regresijas un nodrošina, ka jūsu vietne paliek pieņemamās veiktspējas robežās.

Jūs varat definēt veiktspējas budžetus savā lighthouserc.js failā, izmantojot assert.assertions īpašību. Piemēram, lai iestatītu veiktspējas budžetu First Contentful Paint (FCP), varat pievienot šādu apgalvojumu:

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

              
                Copy
              
            
          

Šis apgalvojums neizlaidīs 'build', ja FCP ir lielāks par 2500 milisekundēm.

3. Lighthouse konfigurācijas pielāgošana

Lighthouse CI ļauj pielāgot Lighthouse konfigurāciju atbilstoši jūsu īpašajām vajadzībām. Jūs varat konfigurēt dažādus Lighthouse iestatījumus, piemēram:

• onlyAudits: Norādiet veicamo auditu sarakstu.
• skipAudits: Norādiet izlaižamo auditu sarakstu.
• throttling: Konfigurējiet tīkla droselēšanas iestatījumus, lai simulētu dažādus tīkla apstākļus.
• formFactor: Norādiet emulējamo formas faktoru (galddators vai mobilais).
• screenEmulation: Konfigurējiet ekrāna emulācijas iestatījumus.

Lai pielāgotu Lighthouse konfigurāciju, varat nodot --config-path karogu komandai lhci autorun, norādot uz pielāgotu Lighthouse konfigurācijas failu. Pilnu konfigurācijas opciju sarakstu meklējiet Lighthouse dokumentācijā.

4. Autentificētu lapu auditēšana

Autentificētu lapu auditēšana prasa nedaudz atšķirīgu pieeju. Jums ir jānodrošina Lighthouse CI ar veidu, kā autentificēties pirms auditu veikšanas. To var panākt, izmantojot sīkfailus vai skriptējot pieteikšanās procesu.

Viena izplatīta pieeja ir izmantot --extra-headers karogu, lai nodotu autentifikācijas sīkfailus Lighthouse CI. Jūs varat iegūt sīkfailus no pārlūkprogrammas izstrādātāja rīkiem pēc pieteikšanās vietnē.

Alternatīvi, jūs varat izmantot Puppeteer skriptu, lai automatizētu pieteikšanās procesu un pēc tam veiktu Lighthouse auditus autentificētajās lapās. Šī pieeja nodrošina lielāku elastību un ļauj apstrādāt sarežģītus autentifikācijas scenārijus.Labākās prakses frontend veiktspējas testēšanai ar Lighthouse CI

Lai maksimāli izmantotu Lighthouse CI priekšrocības, ievērojiet šīs labākās prakses:

• Regulāri palaidiet Lighthouse CI: Integrējiet Lighthouse CI savā CI/CD konveijerī, lai automātiski veiktu auditus ar katru 'commit' vai 'pull request'. Tas nodrošina, ka veiktspējas regresijas tiek atklātas agri un ātri novērstas.
• Iestatiet reālistiskus veiktspējas budžetus: Definējiet veiktspējas budžetus, kas ir izaicinoši, bet sasniedzami. Sāciet ar konservatīviem budžetiem un pakāpeniski tos pastipriniet, uzlabojoties jūsu vietnes veiktspējai. Apsveriet iespēju iestatīt dažādus budžetus dažādiem lapu veidiem, atkarībā no to sarežģītības un nozīmīguma.
• Koncentrējieties uz galvenajām metrikām: Prioritizējiet galvenās veiktspējas metrikas, kurām ir vislielākā ietekme uz lietotāja pieredzi un biznesa rezultātiem. Google Core Web Vitals (LCP, FID un CLS) ir labs sākumpunkts.
• Izpētiet un risiniet veiktspējas problēmas: Kad Lighthouse CI identificē veiktspējas problēmas, rūpīgi izpētiet tās un īstenojiet atbilstošus risinājumus. Izmantojiet Lighthouse pārskatus, lai identificētu problēmu cēloņus un prioritizētu visefektīvākos labojumus.
• Pārraugiet veiktspēju laika gaitā: Sekojiet līdzi veiktspējas metrikām laika gaitā, lai identificētu tendences un modeļus. Izmantojiet Lighthouse CI serveri vai citus pārraudzības rīkus, lai vizualizētu veiktspējas datus un identificētu uzlabojumu jomas.
• Izglītojiet savu komandu: Nodrošiniet, ka jūsu komanda saprot frontend veiktspējas nozīmi un to, kā efektīvi izmantot Lighthouse CI. Nodrošiniet apmācību un resursus, lai palīdzētu viņiem uzlabot savas prasmes un zināšanas.
• Apsveriet globālos tīkla apstākļus: Iestatot veiktspējas budžetus, ņemiet vērā tīkla apstākļus dažādās pasaules daļās. Lietotājiem reģionos ar lēnāku interneta ātrumu var būt atšķirīga pieredze nekā lietotājiem reģionos ar ātrāku ātrumu. Izmantojiet rīkus, lai testēšanas laikā simulētu dažādus tīkla apstākļus.
• Optimizējiet attēlus: Attēlu optimizācija ir kritisks frontend veiktspējas aspekts. Izmantojiet tādus rīkus kā ImageOptim, TinyPNG vai tiešsaistes pārveidotājus, lai saspiestu un optimizētu attēlus, nezaudējot kvalitāti. Izmantojiet mūsdienīgus attēlu formātus, piemēram, WebP, kas piedāvā labāku saspiešanu un kvalitāti nekā tradicionālie formāti, piemēram, JPEG un PNG. Ieviesiet 'lazy loading' attēliem, kas nav uzreiz redzami skata logā.
• Minimizējiet un saspiediet kodu: Minimizējiet savu HTML, CSS un JavaScript kodu, lai samazinātu failu izmērus. Izmantojiet tādus rīkus kā UglifyJS, Terser vai tiešsaistes minimizētājus. Iespējojiet Gzip vai Brotli saspiešanu savā serverī, lai vēl vairāk samazinātu pārsūtīto failu izmēru.
• Izmantojiet pārlūkprogrammas kešatmiņu: Konfigurējiet savu serveri, lai iestatītu atbilstošas kešatmiņas galvenes statiskiem aktīviem, piemēram, attēliem, CSS un JavaScript failiem. Tas ļauj pārlūkprogrammām kešot šos aktīvus un izvairīties no to atkārtotas lejupielādes.

Noslēgums

Lighthouse CI integrēšana jūsu izstrādes darbplūsmā ir būtisks solis ceļā uz augstas veiktspējas, pieejamu un SEO draudzīgu vietņu izveidi. Automatizējot frontend veiktspējas testēšanu un sekojot līdzi veiktspējai laika gaitā, jūs varat agri identificēt un novērst veiktspējas problēmas, uzlabot lietotāja pieredzi un veicināt biznesa rezultātus. Pieņemiet Lighthouse CI un padariet nepārtrauktu veiktspējas uzlabošanu par galveno vērtību savā izstrādes procesā. Atcerieties, ka vietnes veiktspēja nav vienreizējs pasākums, bet gan nepārtraukts process, kas prasa pastāvīgu uzmanību un optimizāciju. Apsveriet kultūras un reģionālos faktorus, lai nodrošinātu nevainojamu pieredzi visiem lietotājiem neatkarīgi no viņu atrašanās vietas vai ierīces. Ievērojot šajā rakstā izklāstītās labākās prakses, jūs varat nodrošināt, ka jūsu vietne sniedz ātru, uzticamu un patīkamu pieredzi lietotājiem visā pasaulē.