Õppige, kuidas rakendada Frontend Lighthouse CI-d pidevaks jõudluse jälgimiseks, tagades oma veebirakendustele optimaalse kiiruse ja kasutajakogemuse.
Frontend Lighthouse CI: Veebirakenduste pidev jõudluse jälgimine
Tänapäeva kiire tempoga digitaalsel maastikul on veebilehe jõudlus ülioluline. Aeglaselt laadiv või halvasti optimeeritud veebisait võib põhjustada kasutajate frustratsiooni, vähendada kaasatust ja lõppkokkuvõttes avaldada negatiivset mõju teie äritegevusele. Siin tulebki appi Lighthouse CI. See juhend aitab teil rakendada Lighthouse CI-d pidevaks jõudluse jälgimiseks, võimaldades teil ennetavalt tuvastada ja lahendada jõudluse kitsaskohti enne, kui need teie kasutajaid mõjutama hakkavad.
Mis on Lighthouse CI?
Lighthouse CI on avatud lähtekoodiga, automatiseeritud jõudlustestimise tööriist, mis integreerub sujuvalt teie pideva integratsiooni ja pideva tarnimise (CI/CD) torujuhtmesse. See kasutab Google'i Lighthouse'i auditeerimisvahendit, et pakkuda praktilisi teadmisi teie veebisaidi jõudluse, ligipääsetavuse, SEO ja parimate praktikate kohta. Lisades Lighthouse CI oma töövoogu, saate pidevalt jälgida oma veebisaidi jõudlust, tuvastada regressioone ja tagada, et iga koodimuudatus aitab kaasa paremale kasutajakogemusele. Lighthouse CI ei ole seotud ühegi konkreetse pilveteenuse pakkujaga ja seda saab kasutada erinevate seadistustega. Näiteks võib see töötada Docker-konteineris sellistes teenustes nagu Github Actions, Jenkins, CircleCI ja paljud teised.
Miks kasutada Lighthouse CI-d?
Lighthouse CI rakendamine pakub mitmeid eeliseid:
- Jõudluse regressioonide varajane avastamine: Tuvastage uute koodimuudatustega kaasnevad jõudlusprobleemid enne, kui need tootmiskeskkonda jõuavad.
- Parem veebilehe jõudlus: Saage praktilisi soovitusi, kuidas optimeerida oma veebisaiti kiiruse, ligipääsetavuse ja SEO osas.
- Parem kasutajakogemus: Pakkuge kiiremat ja kasutajasõbralikumat veebisaiti, mis hoiab külastajad kaasatuna.
- Vähendatud põrkemäär: Optimeerige laadimisaegu, et vähendada kasutajate frustratsiooni ja vältida nende lahkumist teie saidilt.
- Suurenenud konversioonimäärad: Kiirem veebisait toob tavaliselt kaasa kõrgemad konversioonimäärad ja paremad äritulemused.
- Automatiseeritud jõudlustestimine: Integreerige jõudlustestimine oma CI/CD torujuhtmesse pidevaks jälgimiseks.
- Andmepõhine otsuste tegemine: Rajage oma optimeerimispüüdlused konkreetsetele jõudlusnäitajatele ja ülevaadetele.
- Pikaajaline jõudluse jälgimine: Jälgige oma veebisaidi jõudlust aja jooksul, et tuvastada trende ja mõõta oma optimeerimiste mõju.
Lighthouse CI põhifunktsioonid
- Automatiseeritud auditid: Käivitab Lighthouse'i auditid automaatselt osana teie CI/CD protsessist.
- Jõudluseelarved: Seadistage jõudluseelarved, et tagada teie veebisaidi püsimine aktsepteeritavates jõudluspiirides.
- Regressioonide jälgimine: Jälgib jõudluse regressioone aja jooksul, võimaldades teil tuvastada neid põhjustanud koodimuudatusi.
- Praktilised soovitused: Pakub üksikasjalikke aruandeid koos praktiliste soovitustega, kuidas oma veebisaidi jõudlust parandada.
- Kohandatav seadistus: Seadistage Lighthouse CI vastavalt oma konkreetsetele vajadustele ja nõuetele.
- Integreerimine CI/CD tööriistadega: Integreerub sujuvalt populaarsete CI/CD tööriistadega nagu Jenkins, CircleCI, GitHub Actions ja GitLab CI.
- Avatud lähtekoodiga: Lighthouse CI on avatud lähtekoodiga projekt, mis tähendab, et selle kasutamine ja muutmine on tasuta.
Lighthouse CI seadistamine: samm-sammuline juhend
Siin on põhjalik juhend Lighthouse CI seadistamiseks teie projekti jaoks:
1. Paigaldage Lighthouse CI CLI
Esmalt peate paigaldama Lighthouse CI käsurea liidese (CLI) globaalselt, kasutades npm-i või yarn-i:
npm install -g @lhci/cli
yarn global add @lhci/cli
2. Seadistage Lighthouse CI
Looge oma projekti juurkataloogi fail nimega lighthouserc.js, et seadistada Lighthouse CI. See fail määratleb auditeeritavad URL-id, kontrollireeglid ja muud seadistusvalikud.
Siin on lighthouserc.js faili põhinäide:
module.exports = {
ci:
{
collect: {
url: ['http://localhost:3000', 'http://localhost:3000/about']
},
assert: {
preset: 'lighthouse:recommended'
},
upload: {
target: 'temporary-public-storage'
},
},
};
Selgitus:
collect.url: Määrab URL-id, mida Lighthouse auditeerib. Selles näites auditeerime kodulehte ja "meist" lehte veebisaidil, mis töötab aadressillocalhost:3000. Ärge unustage asendada see *oma* projekti jaoks oluliste URL-idega, mis võivad hõlmata ka testkeskkondi.assert.preset: Kasutablighthouse:recommendedeelseadistust, mis rakendab eelmääratletud kontrollireeglite kogumit, tuginedes Lighthouse'i soovitustele. See on hea lähtepunkt, kuid saate neid reegleid vastavalt vajadusele kohandada.upload.target: Määrab, kuhu Lighthouse CI tulemused üles laaditakse.temporary-public-storageon kasulik testimiseks ja arendamiseks, kuid tootmiskeskkondade jaoks soovite tavaliselt kasutada püsivamat salvestuslahendust (mida käsitletakse hiljem).
3. Integreerige Lighthouse CI oma CI/CD torujuhtmesse
Järgmine samm on Lighthouse CI integreerimine oma CI/CD torujuhtmesse. Täpsed sammud sõltuvad teie CI/CD pakkujast, kuid üldine protsess hõlmab skripti lisamist oma CI/CD konfiguratsiooni, mis käivitab Lighthouse CI käsud.
Näide GitHub Actionsi kasutamisega:
Looge oma repositooriumi fail nimega .github/workflows/lighthouse-ci.yml järgmise sisuga:
name: Lighthouse CI
on:
push:
branches: [main]
pull_request:
jobs:
lighthouse:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: '16.x'
- name: Install dependencies
run: npm ci
- name: Run Lighthouse CI
run: |
npm install -g @lhci/cli@0.11.x
lhci autorun
Selgitus:
on.push.branches: Käivitab töövoomainharule tehtud tõugete (push) korral.on.pull_request: Käivitab töövoo pull-request'ide korral.jobs.lighthouse.runs-on: Määrab töö jaoks kasutatava operatsioonisüsteemi (antud juhul Ubuntu).steps: Määratleb töös täidetavad sammud:actions/checkout@v3: Laeb alla repositooriumi koodi.actions/setup-node@v3: Seadistab Node.js-i.npm ci: Paigaldab sõltuvused.Run Lighthouse CI: Käivitab Lighthouse CI käsud:npm install -g @lhci/cli@0.11.x: Paigaldab Lighthouse CI CLI globaalselt. *Oluline*: Alati on soovitatav lukustada konkreetne versioon.lhci autorun: Käivitab Lighthouse CI "autorun" režiimis, mis kogub automaatselt auditid, kontrollib jõudluseelarveid ja laeb tulemused üles.
Olulised kaalutlused CI/CD integratsioonil:
- Serveri käivitamine: Enne
lhci autorunkäivitamist veenduge, et teie veebiserver töötab (ntnpm start). Võimalik, et peate oma CI/CD konfiguratsiooni lisama sammu serveri taustal käivitamiseks. - Andmebaasi migratsioonid: Kui teie rakendus sõltub andmebaasist, veenduge, et andmebaasi migratsioonid käivitatakse teie CI/CD protsessi osana *enne* Lighthouse CI käivitamist.
- Keskkonnamuutujad: Kui teie rakendus vajab keskkonnamuutujaid, veenduge, et need on teie CI/CD keskkonnas õigesti seadistatud.
4. Käivitage Lighthouse CI
Nüüd, iga kord, kui teete muudatusi main harusse või loote pull-request'i, käivitub Lighthouse CI töövoog automaatselt. Tulemused on saadaval GitHub Actionsi liideses.
5. Vaadake Lighthouse CI tulemusi
Lighthouse CI tulemused laaditakse üles teie lighthouserc.js failis määratud asukohta (nt temporary-public-storage). Nendele tulemustele pääsete juurde, järgides CI/CD väljundis olevat linki. Need tulemused pakuvad üksikasjalikku teavet teie veebisaidi jõudluse, ligipääsetavuse, SEO ja parimate praktikate kohta.
Kontrollireeglite ja jõudluseelarvete seadistamine
Lighthouse CI võimaldab teil seadistada kontrollireegleid ja jõudluseelarveid, et tagada teie veebisaidi vastavus teie jõudluseesmärkidele. Kontrollireeglid on reeglid, mis kontrollivad konkreetseid jõudlusnäitajaid (nt First Contentful Paint, Largest Contentful Paint) eelmääratletud künniste suhtes. Jõudluseelarved määratlevad aktsepteeritavad piirid erinevatele jõudlusnäitajatele.
Siin on näide, kuidas seadistada kontrollireegleid oma lighthouserc.js failis:
module.exports = {
ci: {
collect: {
url: ['http://localhost:3000']
},
assert: {
assertions: {
'first-contentful-paint': ['warn', { maxNumericValue: 2000 }],
'largest-contentful-paint': ['warn', { maxNumericValue: 2500 }],
'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
'total-blocking-time': ['warn', { maxNumericValue: 500 }],
'categories:performance': ['warn', { minScore: 0.9 }],
'categories:accessibility': ['error', { minScore: 0.8 }],
}
},
upload: {
target: 'temporary-public-storage'
},
}
};
Selgitus:
first-contentful-paint: Määrab hoiatuse künnise First Contentful Paint (FCP) jaoks 2000 ms juures.largest-contentful-paint: Määrab hoiatuse künnise Largest Contentful Paint (LCP) jaoks 2500 ms juures.cumulative-layout-shift: Määrab hoiatuse künnise Cumulative Layout Shift (CLS) jaoks 0.1 juures.total-blocking-time: Määrab hoiatuse künnise Total Blocking Time (TBT) jaoks 500 ms juures.categories:performance: Määrab hoiatuse künnise üldise Jõudluse kategooria skoori jaoks 0.9 juures.categories:accessibility: Määrab vea künnise üldise Ligipääsetavuse kategooria skoori jaoks 0.8 juures.
Kontrollireeglite tasemed:
off: Lülitab kontrollireegli välja.warn: Kuvab hoiatuse, kui kontrollireegel ebaõnnestub.error: Ebaõnnestab Lighthouse CI käivitamise, kui kontrollireegel ebaõnnestub.
Kontrollireeglite kohandamine:
Saate kohandada kontrollireegleid vastavalt oma konkreetsetele vajadustele. Näiteks võite seada rangemad künnised kriitiliste jõudlusnäitajate jaoks või lülitada välja reeglid, mis ei ole teie rakenduse jaoks olulised.
Lighthouse CI üleslaadimise sihtkoha valimine
Valik upload.target teie lighthouserc.js failis määrab, kuhu Lighthouse CI tulemused üles laaditakse. temporary-public-storage sihtkoht on mugav testimiseks ja arendamiseks, kuid see ei sobi tootmiskeskkondadesse, kuna andmed ei ole püsivad.
Siin on mõned alternatiivsed üleslaadimise sihtkohad:
- Lighthouse CI server: Soovitatav lähenemine tootmiskeskkondadele on kasutada Lighthouse CI serverit. Lighthouse CI server pakub püsivat salvestuslahendust teie Lighthouse CI tulemustele ning kasutajaliidest andmete vaatamiseks ja analüüsimiseks. Seda saab paigaldada erinevatesse pilveteenustesse või majutada omaenda infrastruktuuris.
- Google Cloud Storage: Saate oma Lighthouse CI tulemused üles laadida Google Cloud Storage'i ämbrisse (bucket). See on kulutõhus ja skaleeritav lahendus andmete salvestamiseks.
- Amazon S3: Sarnaselt Google Cloud Storage'iga saate oma Lighthouse CI tulemused üles laadida Amazon S3 ämbrisse.
Lighthouse CI serveri seadistamine:
Lighthouse CI serveri seadistamine hõlmab järgmisi samme:
- Paigaldage Lighthouse CI server: Saate paigaldada Lighthouse CI serveri, kasutades npm-i või yarn-i:
- Seadistage andmebaas: Lighthouse CI server vajab andmete salvestamiseks andmebaasi. Saate kasutada erinevaid andmebaase, sealhulgas PostgreSQL, MySQL ja SQLite. Seadistage andmebaasi ühenduse sätted
.envfailis. - Käivitage Lighthouse CI server: Käivitage Lighthouse CI server käsuga
lhci server. - Seadistage Lighthouse CI CLI serverit kasutama: Värskendage oma
lighthouserc.jsfaili, et kasutada Lighthouse CI serverit üleslaadimise sihtkohana:
npm install -g @lhci/server
yarn global add @lhci/server
module.exports = {
ci: {
collect: {
url: ['http://localhost:3000']
},
assert: {
preset: 'lighthouse:recommended'
},
upload: {
target: 'lhci',
serverBaseUrl: 'http://your-lhci-server.com',
token: 'YOUR_LHCI_TOKEN'
},
}
};
Asendage http://your-lhci-server.com oma Lighthouse CI serveri URL-iga ja YOUR_LHCI_TOKEN oma projekti juurdepääsutõendiga (access token).
Lighthouse CI kasutamise parimad praktikad
Et Lighthouse CI-st maksimumi võtta, järgige neid parimaid praktikaid:
- Käivitage Lighthouse CI iga koodimuudatusega: Integreerige Lighthouse CI oma CI/CD torujuhtmesse, et käivitada auditid iga koodimuudatuse korral. See aitab teil jõudluse regressioone varakult tabada.
- Määrake jõudluseelarved: Määratlege jõudluseelarved, et tagada teie veebisaidi püsimine aktsepteeritavates jõudluspiirides.
- Jälgige jõudlustrende: Jälgige oma veebisaidi jõudlust aja jooksul, et tuvastada trende ja mõõta oma optimeerimiste mõju.
- Prioritiseerige optimeerimistöid: Keskenduge esmalt kõige kriitilisemate jõudlusnäitajate optimeerimisele.
- Kasutage reaalseid andmeid: Kasutage oma optimeerimispüüdluste teavitamiseks reaalseid andmeid. Näiteks saate kasutada Google Analyticsit, et tuvastada lehti, mida teie kasutajad kõige sagedamini külastavad.
- Testige reaalsetel seadmetel: Testige oma veebisaiti reaalsetel seadmetel, et tagada selle hea toimimine reaalsetes tingimustes.
- Vaadake regulaarselt üle Lighthouse CI tulemused: Vaadake regulaarselt üle Lighthouse CI tulemused ja võtke meetmeid tuvastatud jõudlusprobleemide lahendamiseks.
- Optimeerige pilte: Optimeerige oma pilte, et vähendada nende faili suurust kvaliteeti ohverdamata. Selleks on kasulikud tööriistad nagu ImageOptim (macOS), TinyPNG ja ImageKit.
- Minifitseerige CSS ja JavaScript: Minifitseerige oma CSS- ja JavaScripti-failid, et vähendada nende suurust. Selleks võivad abiks olla tööriistad nagu UglifyJS ja CSSNano.
- Kasutage brauseri vahemälu: Kasutage brauseri vahemälu, et vähendada päringute arvu, mida teie veebisait serverile teeb.
- Kasutage sisuedastusvõrku (CDN): Kasutage CDN-i, et jaotada oma veebisaidi sisu serveritele üle maailma. See võib parandada laadimisaegu kasutajatele erinevates geograafilistes asukohtades. Populaarsed CDN-id on näiteks Cloudflare ja Amazon CloudFront.
- Rakendage laisklaadimist ekraanivälistele piltidele: Rakendage laisklaadimist (lazy loading) piltidele, mis ei ole ekraanil kohe nähtavad. See võib oluliselt parandada lehe esialgset laadimisaega. Lihtsaks laisklaadimiseks saab kasutada atribuuti
loading="lazy". - Eemaldage renderdamist blokeerivad ressursid: Tuvastage ja eemaldage ressursid, mis blokeerivad teie lehe renderdamist. See hõlmab sageli kriitilise CSS-i lisamist otse HTML-i (inlining) ning mittekriitilise CSS-i ja JavaScripti edasilükkamist.
- Vähendage JavaScripti täitmisaega: Profileerige oma JavaScripti koodi, et tuvastada ja optimeerida aeglaselt töötavaid funktsioone. Tehnikad nagu koodi jagamine (code splitting) ja puu raputamine (tree shaking) võivad aidata vähendada allalaaditava ja täidetava JavaScripti hulka.
Lighthouse CI edasijõudnute tehnikad
Kui olete Lighthouse CI põhitõdedega tuttav, võite uurida mõningaid edasijõudnute tehnikaid oma jõudluse jälgimise edasiseks täiustamiseks:
- Kohandatud Lighthouse'i auditid: Saate luua kohandatud Lighthouse'i auditeid, et testida konkreetseid jõudlusprobleeme, mis on teie rakenduse jaoks olulised.
- Headless Chrome'i seadistamine: Seadistage Headless Chrome kasutama konkreetseid seadme emulatsioone või võrgu piiramise sätteid.
- Integreerimine seirevahenditega: Integreerige Lighthouse CI oma olemasolevate seirevahenditega (nt New Relic, Datadog), et saada oma veebisaidi jõudlusest terviklikum ülevaade.
- Visuaalse regressiooni testimine: Kombineerige Lighthouse CI visuaalse regressiooni testimise tööriistadega, et tuvastada visuaalseid muutusi, mis võivad jõudlust mõjutada.
Lighthouse CI globaalsele publikule: kaalutlused rahvusvahelistele veebisaitidele
Kui kasutate Lighthouse CI-d veebisaitide jaoks, mis on suunatud globaalsele publikule, arvestage järgmisega:
- Testige mitmest asukohast: Serveri vastuseajad võivad olenevalt kasutaja asukohast märkimisväärselt erineda. Kasutage CDN-i (sisuedastusvõrku) ja kaaluge Lighthouse CI auditite käivitamist erinevatest geograafilistest piirkondadest, et saada täpsem pilt jõudlusest oma rahvusvahelistele kasutajatele. Mõned CI/CD pakkujad pakuvad võimalusi käivitaja geograafilise asukoha määramiseks.
- Arvestage võrgutingimustega: Võrgukiirused ja latentsus varieeruvad üle maailma laialdaselt. Simuleerige oma Lighthouse CI auditite ajal erinevaid võrgutingimusi, et mõista, kuidas teie veebisait erinevates piirangutes toimib. Lighthouse võimaldab võrguühendust piirata, simuleerides aeglasemaid ühendusi nagu 3G.
- Sisu lokaliseerimine: Veenduge, et teie lokaliseeritud sisu on korralikult optimeeritud. See hõlmab piltide optimeerimist erinevatele keeltele ja märgistikele ning korrektset kodeeringut kuvamisprobleemide vältimiseks.
- Fontide laadimine: Optimeerige fontide laadimist erinevate keelte jaoks. Kaaluge
font-display: swapkasutamist, et vältida teksti nähtamatuks jäämist fontide laadimise ajal. - Kolmandate osapoolte skriptid: Olge teadlik kolmandate osapoolte skriptidest, kuna need võivad jõudlust oluliselt mõjutada, eriti aeglasema võrguühendusega piirkondade kasutajate jaoks. Auditeerige regulaarselt kolmandate osapoolte skriptide jõudlust ja kaaluge asünkroonset laadimist või kriitiliste skriptide ise majutamist.
- Mobiilile optimeerimine: Mobiilikasutus on paljudes maailma osades levinud. Veenduge, et teie veebisait on optimeeritud mobiilseadmetele ja et teie Lighthouse CI auditid sisaldavad mobiilispetsiifilisi teste.
Levinud Lighthouse CI probleemide tõrkeotsing
Siin on mõned levinud probleemid, millega võite Lighthouse CI kasutamisel kokku puutuda, ja kuidas neid lahendada:
- Lighthouse CI ebaõnnestub "Timeout" veaga: See võib juhtuda, kui teie veebisaidi laadimine võtab liiga kaua aega või kui Lighthouse CI ei saa teie veebisaidiga ühendust. Proovige suurendada ajalõpu väärtust oma
lighthouserc.jsfailis või kontrollige oma veebisaidi serveri logisid vigade osas. - Lighthouse CI annab ebaühtlaseid tulemusi: Lighthouse'i tulemused võivad käivitamiste vahel veidi erineda võrgutingimuste või muude tegurite tõttu. Käivitage mitu auditit, et saada stabiilsem keskmine.
- Lighthouse CI ei suuda tulemusi üles laadida: Kontrollige oma
upload.targetseadistust ja veenduge, et teie Lighthouse CI server töötab ja on kättesaadav. Samuti veenduge, et teil on konfigureeritud õige juurdepääsutõend. - Lighthouse CI teatab ootamatutest jõudluse regressioonidest: Uurige koodimuudatusi, mis tehti enne regressiooni avastamist. Kasutage Lighthouse CI aruandeid, et tuvastada konkreetsed jõudlusnäitajad, mis on halvenenud, ja keskenduge oma optimeerimispüüdlustes nendele valdkondadele.
Kokkuvõte
Frontend Lighthouse CI on võimas tööriist veebirakenduste pidevaks jõudluse jälgimiseks. Integreerides Lighthouse CI oma CI/CD torujuhtmesse, saate ennetavalt tuvastada ja lahendada jõudlusprobleeme, tagades, et teie veebisait pakub optimaalset kasutajakogemust. Ärge unustage kohandada oma seadistust, kontrollireegleid ja testimise asukohti globaalsele publikule, et luua parim võimalik kogemus kasutajatele üle maailma.
Järgides selles juhendis toodud samme ja parimaid praktikaid, saate oluliselt parandada oma veebisaidi jõudlust, vähendada põrkemäärasid, suurendada konversioonimäärasid ja lõppkokkuvõttes saavutada oma ärieesmärke. Alustage Lighthouse CI rakendamisega juba täna ja avage oma veebirakenduste täielik potentsiaal.