Esikülje jõudlustestimine: Lighthouse CI integreerimine pidevaks parendamiseks

Tänapäeva digitaalses maastikus on veebisaidi jõudlus ülimalt oluline. Aeglased laadimisajad, ligipääsetavuse probleemid ja kehv SEO võivad märkimisväärselt mõjutada kasutajakogemust ja seega ka äritulemusi. Esikülje jõudlustestimine on muutunud kaasaegse tarkvaraarenduse elutsükli oluliseks osaks, tagades, et veebisaidid ja veebirakendused on kiired, usaldusväärsed ja kasutajasõbralikud globaalsele publikule. See artikkel käsitleb Lighthouse CI, võimsa avatud lähtekoodiga tööriista, integreerimist teie pideva integratsiooni (CI) torustikku, et automatiseerida esikülje jõudlustestimist ja edendada pidevat parendamist.

Miks on esikülje jõudlustestimine oluline?

Enne Lighthouse CI-sse süvenemist mõistame, miks on esikülje jõudlustestimine ülioluline:

• Kasutajakogemus: Kiire ja reageeriv veebisait pakub paremat kasutajakogemust, mis viib suurema kaasamise ja väiksema põrkemäärani. Kujutage ette potentsiaalset klienti Tokyos, Jaapanis, kes üritab osta toodet aeglaselt laadivalt e-kaubanduse saidilt. Tõenäoliselt hülgavad nad saidi ja otsivad alternatiive.
• SEO paremusjärjestus: Otsingumootorid nagu Google arvestavad veebisaidi kiirust ja jõudlust järjestusfaktorina. Kiiremad veebisaidid kipuvad otsingutulemustes kõrgemale asetuma, tuues rohkem orgaanilist liiklust. Google'i Core Web Vitals algatus rõhutab selliste tegurite nagu suurima sisuga värvimine (LCP), esimese sisendi viivitus (FID) ja kumulatiivne paigutuse nihe (CLS) tähtsust SEO jaoks.
• Ligipääsetavus: Jõudluse parandamine toob sageli kaasa parema ligipääsetavuse puuetega kasutajatele. Optimeeritud kood ja pildid võivad parandada kogemust kasutajatele, kes toetuvad ekraanilugejatele või kellel on piiratud ribalaius.
• Konversioonimäärad: Kiirem veebisait võib otseselt mõjutada konversioonimäärasid. Uuringud on näidanud, et isegi ühesekundiline viivitus lehe laadimisajas võib kaasa tuua märkimisväärse konversioonide languse. Mõelge kasutajale Mumbais, Indias, kes üritab broneerida lendu. Aeglane broneerimisprotsess võib viia selleni, et nad hülgavad ostu ja valivad konkurendi.
• Ressursside optimeerimine: Jõudlustestimine aitab tuvastada valdkondi, kus ressursse saab optimeerida, mis toob kaasa kulude kokkuhoiu serveri infrastruktuuri ja ribalaiuse kasutuse osas.

Lighthouse CI tutvustus

Lighthouse CI on avatud lähtekoodiga automatiseeritud tööriist, mis on loodud sujuvaks integreerimiseks teie CI/CD torustikuga. See käivitab Lighthouse'i, Google'i poolt välja töötatud populaarse auditeerimisvahendi, ja annab ülevaate teie veebisaidi jõudlusest, ligipääsetavusest, SEO-st, parimatest tavadest ja progressiivse veebirakenduse (PWA) vastavusest. Lighthouse CI aitab teil:

• Automatiseerida jõudlusauditeid: Käivitage Lighthouse'i auditeid automaatselt iga commiti või pull-requestiga.
• Jälgida jõudlust aja jooksul: Jälgige jõudlusnäitajaid aja jooksul ja tuvastage regressioonid varakult.
• Määrata jõudluseelarveid: Määratlege jõudluseelarved ja laske ehitustel ebaõnnestuda, kui neid ületatakse.
• Integreerida CI/CD süsteemidega: Integreerige populaarsete CI/CD süsteemidega nagu GitHub Actions, GitLab CI, CircleCI ja Jenkins.
• Teha koostööd jõudlusprobleemide lahendamisel: Jagage Lighthouse'i aruandeid ja tehke oma meeskonnaga koostööd jõudlusprobleemide lahendamiseks.

Lighthouse CI seadistamine

Siin on samm-sammuline juhend Lighthouse CI seadistamiseks oma projektis:

1. Paigaldage Lighthouse CI

Paigaldage Lighthouse CI CLI globaalselt, kasutades npm-i või yarn-i:

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

              
                Copy
              
            
          

2. Konfigureerige Lighthouse CI

Looge oma projekti juurkataloogi fail lighthouserc.js Lighthouse CI konfigureerimiseks. Siin on näidiskonfiguratsioon:

            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
              
            
          

Vaatame selle konfiguratsiooni lähemalt:

• collect.url: URL-ide massiiv, mida auditeerida. See näide auditeerib avalehte ja 'about' lehte. Peaksite lisama kõik oma veebisaidi kriitilised lehed, arvestades erinevaid kasutusjuhtumeid. Näiteks e-kaubanduse sait võib sisaldada avalehte, tootekataloogi lehti, toote detailivaate lehti ja ostuprotsessi.
• collect.startServerCommand: Käsk teie arendusserveri käivitamiseks. See on vajalik, kui Lighthouse CI peab töötama kohaliku arenduskeskkonna vastu.
• collect.numberOfRuns: Mitu korda käivitada Lighthouse'i auditid iga URL-i kohta. Mitme auditi käivitamine aitab leevendada võrgutingimuste ja muude tegurite kõikumisi.
• assert.assertions: Kinnituste kogum Lighthouse'i audititulemuste valideerimiseks. Iga kinnitus määrab mõõdiku või kategooria ja lävendi. Kui lävendit ei täideta, ebaõnnestub ehitus. See näide seab lävendid jõudluse, ligipääsetavuse, parimate tavade ja SEO kategooriatele. See seab ka lävendid spetsiifilistele mõõdikutele nagu esimese sisuga värvimine (FCP), suurima sisuga värvimine (LCP), kogu blokeerimisaeg (TBT) ja kumulatiivne paigutuse nihe (CLS).
• upload.target: Määrab, kuhu Lighthouse'i aruanded üles laadida. temporary-redirect laadib aruanded ajutisse salvestuskohta ja annab nendele juurdepääsuks URL-i. Teised võimalused hõlmavad Lighthouse CI serveri või pilvesalvestuslahenduste, nagu Google Cloud Storage või Amazon S3, kasutamist.

3. Integreerige oma CI/CD süsteemiga

Järgmine samm on integreerida Lighthouse CI oma CI/CD torustikku. Siin on näide, kuidas seda integreerida GitHub Actionsiga:

Looge oma hoidlasse fail .github/workflows/lighthouse.yml:

            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
              
            
          

See töövoog teeb järgmised sammud:

• Tõmbab koodi alla (checks out the code).
• Seadistab Node.js-i.
• Paigaldab sõltuvused.
• Käivitab Lighthouse CI. See samm esmalt ehitab rakenduse (npm run build), seejärel käivitab lhci autorun, mis teostab Lighthouse'i auditid ja kontrollib tulemusi konfigureeritud lävendite suhtes.

Kohandage see töövoog oma spetsiifilise CI/CD süsteemi ja projekti nõuetega. Näiteks kui kasutate GitLab CI-d, konfigureeriksite sarnaste sammudega .gitlab-ci.yml faili.

4. Käivitage Lighthouse CI

Tehke oma muudatustele commit ja lükake need oma hoidlasse. CI/CD torustik käivitab Lighthouse CI automaatselt. Kui mõni kinnitus ebaõnnestub, ebaõnnestub ka ehitus, andes arendajatele väärtuslikku tagasisidet. Lighthouse CI aruanded on saadaval CI/CD süsteemi poolt pakutud URL-il.

Täpsem konfigureerimine ja kohandamine

Lighthouse CI pakub laia valikut konfigureerimisvõimalusi ja kohandamisvõimalusi. Siin on mõned täpsemad funktsioonid:

1. Lighthouse CI serveri kasutamine

Lighthouse CI server pakub tsentraliseeritud armatuurlauda jõudlusnäitajate jälgimiseks aja jooksul, projektide haldamiseks ja jõudlusprobleemide lahendamisel koostöö tegemiseks. Lighthouse CI serveri kasutamiseks peate seadistama eksemplari ja konfigureerima oma lighthouserc.js faili aruannete üleslaadimiseks serverisse.

Esmalt paigaldage server. Saadaval on mitmeid paigaldusvõimalusi, sealhulgas Docker, Heroku ja pilveteenuse pakkujad nagu AWS ja Google Cloud. Täpsemate juhiste saamiseks serveri paigaldamise kohta vaadake Lighthouse CI dokumentatsiooni.

Kui server töötab, värskendage oma lighthouserc.js faili, et see osutaks serverile:

            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
              
            
          

Asendage YOUR_LHCI_SERVER_URL oma Lighthouse CI serveri URL-iga ja YOUR_LHCI_SERVER_TOKEN serveri poolt genereeritud märgiga. Märk autentib teie CI torustiku serveriga.

2. Jõudluseelarvete seadmine

Jõudluseelarved määratlevad aktsepteeritavad lävendid konkreetsetele mõõdikutele. Lighthouse CI võimaldab teil seada jõudluseelarveid ja lasta ehitustel ebaõnnestuda, kui neid eelarveid ületatakse. See aitab vältida jõudluse regressioone ja tagab, et teie veebisait püsib aktsepteeritavates jõudluspiirides.

Saate määratleda jõudluseelarveid oma lighthouserc.js failis, kasutades assert.assertions omadust. Näiteks, et seada jõudluseelarve esimese sisuga värvimise (FCP) jaoks, saate lisada järgmise kinnituse:

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

              
                Copy
              
            
          

See kinnitus laseb ehitusel ebaõnnestuda, kui FCP on suurem kui 2500 millisekundit.

3. Lighthouse'i konfiguratsiooni kohandamine

Lighthouse CI võimaldab teil kohandada Lighthouse'i konfiguratsiooni vastavalt oma spetsiifilistele vajadustele. Saate konfigureerida mitmesuguseid Lighthouse'i seadeid, näiteks:

• onlyAudits: Määrake käivitatavate auditite loend.
• skipAudits: Määrake vahelejäänud auditite loend.
• throttling: Konfigureerige võrgu läbilaskevõime piiramise seadeid erinevate võrgutingimuste simuleerimiseks.
• formFactor: Määrake emuleeritav seadme tüüp (töölaud või mobiil).
• screenEmulation: Konfigureerige ekraani emuleerimise seadeid.

Lighthouse'i konfiguratsiooni kohandamiseks saate anda lhci autorun käsule --config-path lipu, mis osutab kohandatud Lighthouse'i konfiguratsioonifailile. Täieliku konfiguratsioonivõimaluste loendi leiate Lighthouse'i dokumentatsioonist.

4. Autenditud lehtede auditeerimine

Autenditud lehtede auditeerimine nõuab veidi teistsugust lähenemist. Peate andma Lighthouse CI-le võimaluse autentimiseks enne auditite käivitamist. Seda saab saavutada küpsiste abil või sisselogimisprotsessi skriptimisega.

Üks levinud lähenemine on kasutada --extra-headers lippu autentimisküpsiste edastamiseks Lighthouse CI-le. Küpsised saate oma brauseri arendaja tööriistadest pärast veebisaidile sisselogimist.

Alternatiivina saate kasutada Puppeteeri skripti sisselogimisprotsessi automatiseerimiseks ja seejärel käivitada Lighthouse'i auditid autenditud lehtedel. See lähenemine pakub rohkem paindlikkust ja võimaldab teil käsitleda keerulisi autentimisstsenaariume.Parimad tavad esikülje jõudlustestimiseks Lighthouse CI-ga

Lighthouse CI eeliste maksimeerimiseks järgige neid parimaid tavasid:

• Käivitage Lighthouse CI regulaarselt: Integreerige Lighthouse CI oma CI/CD torustikku, et käivitada auditeid automaatselt iga commiti või pull-requestiga. See tagab, et jõudluse regressioonid avastatakse varakult ja nendega tegeletakse kiiresti.
• Seadke realistlikud jõudluseelarved: Määratlege jõudluseelarved, mis on väljakutsuvad, kuid saavutatavad. Alustage konservatiivsete eelarvetega ja pingutage neid järk-järgult, kui teie veebisaidi jõudlus paraneb. Kaaluge erinevate eelarvete seadmist erinevat tüüpi lehtedele, sõltuvalt nende keerukusest ja olulisusest.
• Keskenduge põhimõõdikutele: Eelistage põhilisi jõudlusmõõdikuid, millel on suurim mõju kasutajakogemusele ja äritulemustele. Google'i Core Web Vitals (LCP, FID ja CLS) on hea lähtepunkt.
• Uurige ja lahendage jõudlusprobleeme: Kui Lighthouse CI tuvastab jõudlusprobleeme, uurige neid põhjalikult ja rakendage sobivaid lahendusi. Kasutage Lighthouse'i aruandeid probleemide algpõhjuste tuvastamiseks ja kõige mõjukamate paranduste prioritiseerimiseks.
• Jälgige jõudlust aja jooksul: Jälgige jõudlusnäitajaid aja jooksul, et tuvastada suundumusi ja mustreid. Kasutage Lighthouse CI serverit või muid seirevahendeid jõudlusandmete visualiseerimiseks ja parendusvaldkondade tuvastamiseks.
• Harige oma meeskonda: Veenduge, et teie meeskond mõistab esikülje jõudluse tähtsust ja kuidas Lighthouse CI-d tõhusalt kasutada. Pakkuge koolitusi ja ressursse, et aidata neil oma oskusi ja teadmisi parandada.
• Arvestage globaalsete võrgutingimustega: Jõudluseelarvete seadmisel arvestage võrgutingimustega erinevates maailma osades. Aeglasema internetiühendusega piirkondade kasutajatel võib olla teistsugune kogemus kui kiirema ühendusega piirkondade kasutajatel. Kasutage testimise ajal erinevate võrgutingimuste simuleerimiseks tööriistu.
• Optimeerige pilte: Piltide optimeerimine on esikülje jõudluse kriitiline aspekt. Kasutage piltide tihendamiseks ja optimeerimiseks ilma kvaliteeti kaotamata tööriistu nagu ImageOptim, TinyPNG või veebipõhiseid konvertereid. Kasutage kaasaegseid pildivorminguid nagu WebP, mis pakuvad paremat tihendamist ja kvaliteeti kui traditsioonilised vormingud nagu JPEG ja PNG. Rakendage laisklaadimist piltidele, mis ei ole kohe vaateaknas nähtavad.
• Minifitseerige ja tihendage koodi: Minifitseerige oma HTML-, CSS- ja JavaScript-koodi failimahtude vähendamiseks. Kasutage tööriistu nagu UglifyJS, Terser või veebipõhiseid minifitseerijaid. Lubage oma serveris Gzip- või Brotli-tihendus, et veelgi vähendada edastatavate failide suurust.
• Kasutage brauseri vahemälu: Konfigureerige oma server seadma sobivad vahemälu päised staatilistele varadele nagu pildid, CSS- ja JavaScript-failid. See võimaldab brauseritel neid varasid vahemällu salvestada ja vältida nende korduvat allalaadimist.

Kokkuvõte

Lighthouse CI integreerimine oma arendustöövoogu on oluline samm suure jõudlusega, ligipääsetavate ja SEO-sõbralike veebisaitide ehitamisel. Automatiseerides esikülje jõudlustestimist ja jälgides jõudlust aja jooksul, saate tuvastada ja lahendada jõudlusprobleeme varakult, parandada kasutajakogemust ja edendada äritulemusi. Võtke Lighthouse CI omaks ja muutke pidev jõudluse parandamine oma arendusprotsessi põhiväärtuseks. Pidage meeles, et veebisaidi jõudlus ei ole ühekordne pingutus, vaid pidev protsess, mis nõuab pidevat tähelepanu ja optimeerimist. Arvestage kultuuriliste ja piirkondlike teguritega, et tagada sujuv kogemus kõigile teie kasutajatele, olenemata nende asukohast või seadmest. Järgides selles artiklis toodud parimaid tavasid, saate tagada, et teie veebisait pakub kiiret, usaldusväärset ja nauditavat kogemust kasutajatele kogu maailmas.