Frontend našumo testavimas: „Lighthouse CI“ integravimas nuolatiniam tobulinimui

Šiuolaikiniame skaitmeniniame pasaulyje svetainės našumas yra svarbiausias. Lėtas įkėlimo laikas, prieinamumo problemos ir prastas SEO gali ženkliai paveikti vartotojo patirtį ir, atitinkamai, verslo rezultatus. Frontend našumo testavimas tapo esmine modernaus programinės įrangos kūrimo ciklo dalimi, užtikrinančia, kad svetainės ir interneto programos būtų greitos, patikimos ir patogios naudoti pasaulinei auditorijai. Šiame straipsnyje gilinamasi į „Lighthouse CI“, galingo atvirojo kodo įrankio, integravimą į jūsų nuolatinės integracijos (CI) procesą, siekiant automatizuoti frontend našumo testavimą ir skatinti nuolatinį tobulėjimą.

Kodėl frontend našumo testavimas yra svarbus?

Prieš pradedant gilintis į „Lighthouse CI“, supraskime, kodėl frontend našumo testavimas yra itin svarbus:

• Vartotojo patirtis: Greita ir jautriai reaguojanti svetainė suteikia geresnę vartotojo patirtį, didina įsitraukimą ir mažina atmetimo rodiklius. Įsivaizduokite potencialų klientą Tokijuje, Japonijoje, bandantį įsigyti prekę lėtai kraunamoje el. prekybos svetainėje. Tikėtina, kad jis paliks svetainę ir ieškos alternatyvų.
• SEO reitingas: Paieškos sistemos, tokios kaip „Google“, svetainės greitį ir našumą laiko reitingavimo veiksniais. Greitesnės svetainės paprastai užima aukštesnes vietas paieškos rezultatuose, pritraukdamos daugiau organinio srauto. „Google“ „Core Web Vitals“ iniciatyva pabrėžia tokių veiksnių kaip didžiausio turinio elemento atvaizdavimas (LCP), pirmojo įvesties delsa (FID) ir bendras išdėstymo poslinkis (CLS) svarbą SEO.
• Prieinamumas: Našumo patobulinimai dažnai lemia geresnį prieinamumą vartotojams su negalia. Optimizuotas kodas ir vaizdai gali pagerinti patirtį vartotojams, naudojantiems ekrano skaitytuvus arba turintiems ribotą interneto pralaidumą.
• Konversijų rodikliai: Greitesnė svetainė gali tiesiogiai paveikti konversijų rodiklius. Tyrimai parodė, kad net vienos sekundės puslapio įkėlimo laiko vėlavimas gali lemti reikšmingą konversijų sumažėjimą. Pagalvokite apie vartotoją Mumbajuje, Indijoje, bandantį užsakyti skrydį. Lėtas užsakymo procesas gali priversti jį atsisakyti pirkimo ir pasirinkti konkurentą.
• Išteklių optimizavimas: Našumo testavimas padeda nustatyti sritis, kuriose galima optimizuoti išteklius, o tai leidžia sutaupyti lėšų serverių infrastruktūrai ir pralaidumo naudojimui.

Pristatome „Lighthouse CI“

„Lighthouse CI“ yra atvirojo kodo, automatizuotas įrankis, sukurtas sklandžiai integruotis į jūsų CI/CD procesą. Jis naudoja „Lighthouse“, populiarų „Google“ sukurtą audito įrankį, ir teikia įžvalgas apie jūsų svetainės našumą, prieinamumą, SEO, geriausias praktikas ir progresyviųjų žiniatinklio programų (PWA) atitiktį. „Lighthouse CI“ padeda jums:

• Automatizuoti našumo auditus: Vykdykite „Lighthouse“ auditus automatiškai su kiekvienu „commit“ ar „pull request“.
• Stebėti našumą laikui bėgant: Stebėkite našumo metrikas laikui bėgant ir anksti nustatykite regresijas.
• Nustatyti našumo biudžetus: Apibrėžkite našumo biudžetus ir nutraukite kūrimo procesą (build), jei jie viršijami.
• Integruoti su CI/CD sistemomis: Integruokite su populiariomis CI/CD sistemomis, tokiomis kaip „GitHub Actions“, „GitLab CI“, „CircleCI“ ir „Jenkins“.
• Bendradarbiauti sprendžiant našumo problemas: Dalykitės „Lighthouse“ ataskaitomis ir bendradarbiaukite su savo komanda sprendžiant našumo problemas.

„Lighthouse CI“ diegimas

Štai žingsnis po žingsnio vadovas, kaip įdiegti „Lighthouse CI“ savo projekte:

1. Įdiekite „Lighthouse CI“

Įdiekite „Lighthouse CI CLI“ globaliai naudodami npm arba yarn:

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

              
                Copy
              
            
          

2. Konfigūruokite „Lighthouse CI“

Sukurkite lighthouserc.js failą savo projekto pagrindiniame kataloge, kad sukonfigūruotumėte „Lighthouse CI“. Štai pavyzdinė konfigūracija:

            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
              
            
          

Išnagrinėkime šią konfigūraciją:

• collect.url: URL adresų, kuriuos reikia audituoti, masyvas. Šiame pavyzdyje audituojamas pagrindinis ir „apie“ puslapiai. Turėtumėte įtraukti visus svarbiausius savo svetainės puslapius, atsižvelgiant į skirtingus naudojimo atvejus. Pavyzdžiui, el. prekybos svetainė galėtų įtraukti pagrindinį puslapį, produktų sąrašo puslapius, produkto detalės puslapius ir atsiskaitymo procesą.
• collect.startServerCommand: Komanda, skirta paleisti jūsų kūrimo serverį. Tai būtina, jei „Lighthouse CI“ reikia veikti su vietine kūrimo aplinka.
• collect.numberOfRuns: Kiek kartų vykdyti „Lighthouse“ auditus kiekvienam URL. Kelių auditų vykdymas padeda sumažinti tinklo sąlygų ir kitų veiksnių svyravimus.
• assert.assertions: Tvirtinimų rinkinys, skirtas patvirtinti „Lighthouse“ audito rezultatus. Kiekvienas tvirtinimas nurodo metriką ar kategoriją ir ribą. Jei riba nepasiekiama, kūrimo procesas (build) bus nutrauktas. Šiame pavyzdyje nustatomos ribos našumo, prieinamumo, geriausių praktikų ir SEO kategorijoms. Taip pat nustatomos ribos konkrečioms metrikoms, tokioms kaip pirmojo turinio elemento atvaizdavimas (FCP), didžiausio turinio elemento atvaizdavimas (LCP), bendras blokuojantis laikas (TBT) ir bendras išdėstymo poslinkis (CLS).
• upload.target: Nurodo, kur įkelti „Lighthouse“ ataskaitas. temporary-redirect įkelia ataskaitas į laikiną saugyklą ir pateikia URL adresą joms pasiekti. Kitos parinktys apima „Lighthouse CI“ serverio arba debesijos saugyklų, tokių kaip „Google Cloud Storage“ ar „Amazon S3“, naudojimą.

3. Integruokite su savo CI/CD sistema

Kitas žingsnis – integruoti „Lighthouse CI“ į savo CI/CD procesą. Štai pavyzdys, kaip tai padaryti su „GitHub Actions“:

Sukurkite .github/workflows/lighthouse.yml failą savo repozitorijoje:

            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
              
            
          

Šis darbo srautas atlieka šiuos veiksmus:

• Paima kodą (checks out the code).
• Nustato Node.js.
• Įdiegia priklausomybes.
• Paleidžia „Lighthouse CI“. Šis žingsnis pirmiausia sukuria programą (npm run build), tada paleidžia lhci autorun, kuris vykdo „Lighthouse“ auditus ir patvirtina rezultatus pagal sukonfigūruotas ribas.

Pritaikykite šį darbo srautą savo konkrečiai CI/CD sistemai ir projekto reikalavimams. Pavyzdžiui, jei naudojate „GitLab CI“, sukonfigūruotumėte .gitlab-ci.yml failą su panašiais veiksmais.

4. Paleiskite „Lighthouse CI“

Įkelkite (commit) savo pakeitimus ir nusiųskite (push) juos į savo repozitoriją. CI/CD procesas automatiškai paleis „Lighthouse CI“. Jei kuris nors iš tvirtinimų nepavyks, kūrimo procesas (build) bus nutrauktas, suteikdamas vertingą grįžtamąjį ryšį kūrėjams. „Lighthouse CI“ ataskaitos bus pasiekiamos CI/CD sistemos pateiktu URL adresu.

Išplėstinė konfigūracija ir pritaikymas

„Lighthouse CI“ siūlo platų konfigūracijos parinkčių ir pritaikymo galimybių spektrą. Štai keletas pažangių funkcijų:

1. „Lighthouse CI“ serverio naudojimas

„Lighthouse CI“ serveris suteikia centralizuotą valdymo skydelį, skirtą stebėti našumo metrikas laikui bėgant, valdyti projektus ir bendradarbiauti sprendžiant našumo problemas. Norėdami naudoti „Lighthouse CI“ serverį, turite įdiegti jo egzempliorių ir sukonfigūruoti savo lighthouserc.js failą, kad ataskaitos būtų įkeliamos į serverį.

Pirmiausia, įdiekite serverį. Yra įvairių diegimo parinkčių, įskaitant „Docker“, „Heroku“ ir debesijos paslaugų teikėjus, tokius kaip AWS ir „Google Cloud“. Išsamesnių instrukcijų apie serverio diegimą ieškokite „Lighthouse CI“ dokumentacijoje.

Kai serveris veiks, atnaujinkite savo lighthouserc.js failą, kad jis nurodytų į 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
              
            
          

Pakeiskite YOUR_LHCI_SERVER_URL savo „Lighthouse CI“ serverio URL adresu ir YOUR_LHCI_SERVER_TOKEN serverio sugeneruotu prieigos raktu. Prieigos raktas autentifikuoja jūsų CI procesą serveryje.

2. Našumo biudžetų nustatymas

Našumo biudžetai apibrėžia priimtinas ribas konkrečioms metrikoms. „Lighthouse CI“ leidžia nustatyti našumo biudžetus ir nutraukti kūrimo procesą (build), jei tie biudžetai viršijami. Tai padeda išvengti našumo regresijų ir užtikrina, kad jūsų svetainė neviršytų priimtinų našumo ribų.

Galite apibrėžti našumo biudžetus savo lighthouserc.js faile naudodami assert.assertions savybę. Pavyzdžiui, norėdami nustatyti našumo biudžetą pirmojo turinio elemento atvaizdavimui (FCP), galite pridėti šį tvirtinimą:

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

              
                Copy
              
            
          

Šis tvirtinimas nutrauks kūrimo procesą, jei FCP bus didesnis nei 2500 milisekundžių.

3. „Lighthouse“ konfigūracijos pritaikymas

„Lighthouse CI“ leidžia pritaikyti „Lighthouse“ konfigūraciją pagal jūsų specifinius poreikius. Galite konfigūruoti įvairius „Lighthouse“ nustatymus, tokius kaip:

• onlyAudits: Nurodykite auditų, kuriuos reikia vykdyti, sąrašą.
• skipAudits: Nurodykite auditų, kuriuos reikia praleisti, sąrašą.
• throttling: Konfigūruokite tinklo lėtinimo nustatymus, kad imituotumėte skirtingas tinklo sąlygas.
• formFactor: Nurodykite emuliuojamą formos faktorių (stalinis kompiuteris ar mobilusis).
• screenEmulation: Konfigūruokite ekrano emuliacijos nustatymus.

Norėdami pritaikyti „Lighthouse“ konfigūraciją, galite perduoti --config-path vėliavėlę lhci autorun komandai, nurodydami pasirinktinį „Lighthouse“ konfigūracijos failą. Išsamų konfigūracijos parinkčių sąrašą rasite „Lighthouse“ dokumentacijoje.

4. Autentifikuotų puslapių auditavimas

Autentifikuotų puslapių auditavimas reikalauja šiek tiek kitokio požiūrio. Turite suteikti „Lighthouse CI“ būdą autentifikuotis prieš vykdant auditus. Tai galima pasiekti naudojant slapukus (cookies) arba scenarijų, kuris automatizuoja prisijungimo procesą.

Vienas iš populiarių būdų yra naudoti --extra-headers vėliavėlę, kad perduotumėte autentifikacijos slapukus „Lighthouse CI“. Slapukus galite gauti iš savo naršyklės kūrėjo įrankių, prisijungę prie svetainės.

Arba galite naudoti „Puppeteer“ scenarijų, kad automatizuotumėte prisijungimo procesą ir tada vykdytumėte „Lighthouse“ auditus autentifikuotuose puslapiuose. Šis požiūris suteikia daugiau lankstumo ir leidžia tvarkyti sudėtingus autentifikacijos scenarijus.Geriausios praktikos atliekant frontend našumo testavimą su „Lighthouse CI“

Norėdami maksimaliai išnaudoti „Lighthouse CI“ privalumus, laikykitės šių geriausių praktikų:

• Reguliariai vykdykite „Lighthouse CI“: Integruokite „Lighthouse CI“ į savo CI/CD procesą, kad auditai būtų vykdomi automatiškai su kiekvienu „commit“ ar „pull request“. Tai užtikrina, kad našumo regresijos būtų aptiktos anksti ir greitai ištaisytos.
• Nustatykite realistiškus našumo biudžetus: Apibrėžkite našumo biudžetus, kurie yra sudėtingi, bet pasiekiami. Pradėkite nuo konservatyvių biudžetų ir palaipsniui juos griežtinkite, gerėjant jūsų svetainės našumui. Apsvarstykite galimybę nustatyti skirtingus biudžetus skirtingų tipų puslapiams, atsižvelgiant į jų sudėtingumą ir svarbą.
• Sutelkite dėmesį į pagrindines metrikas: Teikite pirmenybę pagrindinėms našumo metrikoms, kurios daro didžiausią įtaką vartotojo patirčiai ir verslo rezultatams. „Google“ „Core Web Vitals“ (LCP, FID ir CLS) yra geras atspirties taškas.
• Tirkite ir spręskite našumo problemas: Kai „Lighthouse CI“ nustato našumo problemas, nuodugniai jas ištirkite ir įgyvendinkite tinkamus sprendimus. Naudokite „Lighthouse“ ataskaitas, kad nustatytumėte problemų priežastis ir teiktumėte pirmenybę svarbiausiems pataisymams.
• Stebėkite našumą laikui bėgant: Stebėkite našumo metrikas laikui bėgant, kad nustatytumėte tendencijas ir modelius. Naudokite „Lighthouse CI“ serverį ar kitus stebėjimo įrankius, kad vizualizuotumėte našumo duomenis ir nustatytumėte tobulinimo sritis.
• Švieskite savo komandą: Užtikrinkite, kad jūsų komanda suprastų frontend našumo svarbą ir kaip efektyviai naudoti „Lighthouse CI“. Suteikite mokymus ir išteklius, kurie padėtų jiems tobulinti savo įgūdžius ir žinias.
• Atsižvelkite į pasaulines tinklo sąlygas: Nustatydami našumo biudžetus, atsižvelkite į tinklo sąlygas skirtingose pasaulio dalyse. Vartotojai regionuose su lėtesniu interneto ryšiu gali turėti kitokią patirtį nei vartotojai regionuose su greitesniu ryšiu. Naudokite įrankius, kad testavimo metu imituotumėte skirtingas tinklo sąlygas.
• Optimizuokite vaizdus: Vaizdų optimizavimas yra kritinis frontend našumo aspektas. Naudokite įrankius, tokius kaip „ImageOptim“, „TinyPNG“ ar internetinius konverterius, kad suspaustumėte ir optimizuotumėte vaizdus neprarandant kokybės. Naudokite modernius vaizdų formatus, tokius kaip WebP, kurie siūlo geresnį suspaudimą ir kokybę nei tradiciniai formatai, tokie kaip JPEG ir PNG. Įdiekite atidėtąjį įkėlimą (lazy loading) vaizdams, kurie nėra iš karto matomi naršyklės lange.
• Sumažinkite ir suspauskite kodą: Sumažinkite savo HTML, CSS ir JavaScript kodo dydį. Naudokite įrankius, tokius kaip „UglifyJS“, „Terser“ ar internetinius minifikatorius. Įjunkite Gzip arba Brotli suspaudimą savo serveryje, kad dar labiau sumažintumėte perduodamų failų dydį.
• Išnaudokite naršyklės podėlį (caching): Konfigūruokite savo serverį, kad jis nustatytų tinkamas podėlio antraštes statiniams ištekliams, tokiems kaip vaizdai, CSS ir JavaScript failai. Tai leidžia naršyklėms išsaugoti šiuos išteklius podėlyje ir vengti jų pakartotinio atsisiuntimo.

Išvada

„Lighthouse CI“ integravimas į jūsų kūrimo procesą yra esminis žingsnis kuriant našias, prieinamas ir SEO draugiškas svetaines. Automatizuodami frontend našumo testavimą ir stebėdami našumą laikui bėgant, galite anksti nustatyti ir išspręsti našumo problemas, pagerinti vartotojo patirtį ir siekti geresnių verslo rezultatų. Priimkite „Lighthouse CI“ ir paverskite nuolatinį našumo tobulinimą pagrindine savo kūrimo proceso vertybe. Atminkite, kad svetainės našumas nėra vienkartinis darbas, o nuolatinis procesas, reikalaujantis nuolatinio dėmesio ir optimizavimo. Atsižvelkite į kultūrinius ir regioninius veiksnius, kad užtikrintumėte sklandžią patirtį visiems savo vartotojams, nepriklausomai nuo jų buvimo vietos ar įrenginio. Laikydamiesi šiame straipsnyje pateiktų geriausių praktikų, galite užtikrinti, kad jūsų svetainė suteiks greitą, patikimą ir malonią patirtį vartotojams visame pasaulyje.