Uzziniet, kā ieviest Frontend Lighthouse CI nepārtrauktai veiktspējas uzraudzībai, nodrošinot optimālu ātrumu un lietotāja pieredzi jūsu tīmekļa lietojumprogrammām.
Frontend Lighthouse CI: Tīmekļa lietojumprogrammu nepārtraukta veiktspējas uzraudzība
Mūsdienu straujajā digitālajā vidē vietnes veiktspēja ir vissvarīgākā. Lēni ielādējoša vai slikti optimizēta vietne var radīt neapmierinātus lietotājus, samazinātu iesaisti un galu galā negatīvi ietekmēt jūsu biznesu. Tieši šeit noder Lighthouse CI. Šī rokasgrāmata palīdzēs jums ieviest Lighthouse CI nepārtrauktai veiktspējas uzraudzībai, ļaujot jums proaktīvi identificēt un risināt veiktspējas problēmas, pirms tās ietekmē jūsu lietotājus.
Kas ir Lighthouse CI?
Lighthouse CI ir atvērtā koda, automatizēts veiktspējas testēšanas rīks, kas nemanāmi integrējas jūsu nepārtrauktās integrācijas un nepārtrauktās piegādes (CI/CD) konveijerā. Tas izmanto Google Lighthouse auditēšanas rīku, lai sniegtu praktiski pielietojamu ieskatu jūsu vietnes veiktspējā, pieejamībā, SEO un labākajās praksēs. Iekļaujot Lighthouse CI savā darbplūsmā, jūs varat nepārtraukti uzraudzīt savas vietnes veiktspēju, izsekot regresijām un nodrošināt, ka katra koda izmaiņa veicina labāku lietotāja pieredzi. Lighthouse CI nav saistīts ar vienu konkrētu mākoņpakalpojumu sniedzēju un to var izmantot ar dažādām konfigurācijām. Piemēram, to var palaist Docker konteinerī tādos pakalpojumos kā Github Actions, Jenkins, CircleCI un daudzos citos.
Kāpēc izmantot Lighthouse CI?
Lighthouse CI ieviešana piedāvā daudz priekšrocību:
- Agrīna veiktspējas regresiju atklāšana: Identificējiet veiktspējas problēmas, ko radījušas jaunas koda izmaiņas, pirms tās nonāk produkcijā.
- Uzlabota vietnes veiktspēja: Iegūstiet praktiski pielietojamu ieskatu, kā optimizēt savu vietni ātrumam, pieejamībai un SEO.
- Uzlabota lietotāja pieredze: Nodrošiniet ātrāku un lietotājam draudzīgāku vietni, kas notur apmeklētāju iesaisti.
- Samazināts atlēcienu līmenis: Optimizējiet ielādes laikus, lai samazinātu lietotāju neapmierinātību un novērstu viņu aiziešanu no jūsu vietnes.
- Palielināti konversijas rādītāji: Ātrāka vietne parasti noved pie augstākiem konversijas rādītājiem un uzlabotiem biznesa rezultātiem.
- Automatizēta veiktspējas testēšana: Integrējiet veiktspējas testēšanu savā CI/CD konveijerā nepārtrauktai uzraudzībai.
- Uz datiem balstīta lēmumu pieņemšana: Balstiet savus optimizācijas centienus uz konkrētiem veiktspējas rādītājiem un ieskatiem.
- Ilgtermiņa veiktspējas izsekošana: Uzraugiet savas vietnes veiktspēju laika gaitā, lai identificētu tendences un novērtētu savu optimizāciju ietekmi.
Lighthouse CI galvenās funkcijas
- Automatizēti auditi: Automātiski palaiž Lighthouse auditus kā daļu no jūsu CI/CD procesa.
- Veiktspējas budžeti: Iestatiet veiktspējas budžetus, lai nodrošinātu, ka jūsu vietne nepārsniedz pieņemamos veiktspējas sliekšņus.
- Regresiju izsekošana: Izseko veiktspējas regresijas laika gaitā, ļaujot jums identificēt koda izmaiņas, kas tās izraisīja.
- Praktiski pielietojami ieskati: Sniedz detalizētus pārskatus ar praktiskiem ieteikumiem, kā uzlabot jūsu vietnes veiktspēju.
- Pielāgojama konfigurācija: Konfigurējiet Lighthouse CI atbilstoši savām specifiskajām vajadzībām un prasībām.
- Integrācija ar CI/CD rīkiem: Nemanāmi integrējas ar populāriem CI/CD rīkiem, piemēram, Jenkins, CircleCI, GitHub Actions un GitLab CI.
- Atvērtais kods: Lighthouse CI ir atvērtā koda projekts, kas nozīmē, ka to var bez maksas lietot un modificēt.
Lighthouse CI iestatīšana: Soli pa solim rokasgrāmata
Šeit ir visaptveroša rokasgrāmata, kā iestatīt Lighthouse CI savam projektam:
1. Instalējiet Lighthouse CI CLI
Vispirms jums ir jāinstalē Lighthouse CI komandrindas saskarne (CLI) globāli, izmantojot npm vai yarn:
npm install -g @lhci/cli
yarn global add @lhci/cli
2. Konfigurējiet Lighthouse CI
Izveidojiet lighthouserc.js failu sava projekta saknes direktorijā, lai konfigurētu Lighthouse CI. Šis fails definē auditējamos URL, apgalvojumu noteikumus un citas konfigurācijas opcijas.
Šeit ir pamata piemērs lighthouserc.js failam:
module.exports = {
ci:
{
collect: {
url: ['http://localhost:3000', 'http://localhost:3000/about']
},
assert: {
preset: 'lighthouse:recommended'
},
upload: {
target: 'temporary-public-storage'
},
},
};
Paskaidrojums:
collect.url: Norāda URL, kurus auditēs Lighthouse. Šajā piemērā mēs auditējam mājaslapu un "par mums" lapu vietnei, kas darbojas uzlocalhost:3000. Neaizmirstiet aizstāt šo ar URL, kas ir attiecināmi uz *jūsu* projektu, kas varētu ietvert testēšanas vides.assert.preset: Izmantolighthouse:recommendedpriekšiestatījumu, kas piemēro iepriekš definētu apgalvojumu kopumu, balstoties uz Lighthouse ieteikumiem. Tas ir labs sākumpunkts, bet jūs varat pielāgot šos apgalvojumus pēc nepieciešamības.upload.target: Konfigurē, kur tiks augšupielādēti Lighthouse CI rezultāti.temporary-public-storageir noderīgs testēšanai un izstrādei, bet produkcijas vidēm jūs parasti vēlēsieties izmantot noturīgāku uzglabāšanas risinājumu (apskatīts vēlāk).
3. Integrējiet Lighthouse CI savā CI/CD konveijerā
Nākamais solis ir integrēt Lighthouse CI savā CI/CD konveijerā. Precīzi soļi atšķirsies atkarībā no jūsu CI/CD nodrošinātāja, bet vispārējais process ietver skripta pievienošanu jūsu CI/CD konfigurācijai, kas palaiž Lighthouse CI komandas.
Piemērs, izmantojot GitHub Actions:
Izveidojiet failu ar nosaukumu .github/workflows/lighthouse-ci.yml savā repozitorijā ar šādu saturu:
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
Paskaidrojums:
on.push.branches: Aktivizē darbplūsmu, veicot "push" uzmainzaru.on.pull_request: Aktivizē darbplūsmu, veicot "pull request".jobs.lighthouse.runs-on: Norāda operētājsistēmu, ko izmantot darbam (šajā gadījumā Ubuntu).steps: Definē soļus, kas jāizpilda darbā:actions/checkout@v3: Izgūst repozitoriju.actions/setup-node@v3: Iestata Node.js.npm ci: Instalē atkarības.Run Lighthouse CI: Palaiž Lighthouse CI komandas:npm install -g @lhci/cli@0.11.x: Globāli instalē Lighthouse CI CLI. *Svarīgi*: Vienmēr ieteicams fiksēt konkrētu versiju.lhci autorun: Palaiž Lighthouse CI "autorun" režīmā, kas automātiski savāc auditus, pārbauda veiktspējas budžetus un augšupielādē rezultātus.
Svarīgi apsvērumi CI/CD integrācijai:
- Servera startēšana: Pirms
lhci autorunpalaišanas pārliecinieties, ka jūsu tīmekļa serveris darbojas (piemēram,npm start). Jums varētu būt nepieciešams pievienot soli savā CI/CD konfigurācijā, lai startētu serveri fonā. - Datu bāzes migrācijas: Ja jūsu lietojumprogramma ir atkarīga no datu bāzes, pārliecinieties, ka datu bāzes migrācijas tiek veiktas kā daļa no jūsu CI/CD procesa *pirms* Lighthouse CI palaišanas.
- Vides mainīgie: Ja jūsu lietojumprogrammai ir nepieciešami vides mainīgie, pārliecinieties, ka tie ir pareizi konfigurēti jūsu CI/CD vidē.
4. Palaidiet Lighthouse CI
Tagad, ikreiz, kad jūs veicat izmaiņas main zarā vai izveidojat "pull request", Lighthouse CI darbplūsma tiks palaista automātiski. Rezultāti būs pieejami GitHub Actions saskarnē.
5. Apskatiet Lighthouse CI rezultātus
Lighthouse CI rezultāti tiks augšupielādēti vietā, kas norādīta jūsu lighthouserc.js failā (piemēram, temporary-public-storage). Jūs varat piekļūt šiem rezultātiem, sekojot saitei, kas sniegta CI/CD izvades datos. Šie rezultāti sniedz detalizētu informāciju par jūsu vietnes veiktspēju, pieejamību, SEO un labākajām praksēm.
Apgalvojumu un veiktspējas budžetu konfigurēšana
Lighthouse CI ļauj jums konfigurēt apgalvojumus un veiktspējas budžetus, lai nodrošinātu, ka jūsu vietne atbilst jūsu veiktspējas mērķiem. Apgalvojumi ir noteikumi, kas pārbauda konkrētus veiktspējas rādītājus (piemēram, First Contentful Paint, Largest Contentful Paint) pret iepriekš definētiem sliekšņiem. Veiktspējas budžeti definē pieņemamās robežas dažādiem veiktspējas rādītājiem.
Šeit ir piemērs, kā konfigurēt apgalvojumus savā lighthouserc.js failā:
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'
},
}
};
Paskaidrojums:
first-contentful-paint: Iestata brīdinājuma slieksni First Contentful Paint (FCP) rādītājam uz 2000ms.largest-contentful-paint: Iestata brīdinājuma slieksni Largest Contentful Paint (LCP) rādītājam uz 2500ms.cumulative-layout-shift: Iestata brīdinājuma slieksni Cumulative Layout Shift (CLS) rādītājam uz 0.1.total-blocking-time: Iestata brīdinājuma slieksni Total Blocking Time (TBT) rādītājam uz 500ms.categories:performance: Iestata brīdinājuma slieksni kopējam Veiktspējas kategorijas rādītājam uz 0.9.categories:accessibility: Iestata kļūdas slieksni kopējam Pieejamības kategorijas rādītājam uz 0.8.
Apgalvojumu līmeņi:
off: Atspējo apgalvojumu.warn: Parāda brīdinājumu, ja apgalvojums neizdodas.error: Izgāž Lighthouse CI izpildi, ja apgalvojums neizdodas.
Apgalvojumu pielāgošana:
Jūs varat pielāgot apgalvojumus atbilstoši savām specifiskajām vajadzībām. Piemēram, jūs varētu vēlēties iestatīt stingrākus sliekšņus kritiskiem veiktspējas rādītājiem vai atspējot apgalvojumus, kas nav attiecināmi uz jūsu lietojumprogrammu.
Lighthouse CI augšupielādes mērķa izvēle
upload.target opcija jūsu lighthouserc.js failā norāda, kur tiks augšupielādēti Lighthouse CI rezultāti. temporary-public-storage mērķis ir ērts testēšanai un izstrādei, bet tas nav piemērots produkcijas vidēm, jo dati nav noturīgi.
Šeit ir dažas alternatīvas augšupielādes mērķiem:
- Lighthouse CI serveris: Ieteicamā pieeja produkcijas vidēm ir izmantot Lighthouse CI serveri. Lighthouse CI serveris nodrošina noturīgu uzglabāšanas risinājumu jūsu Lighthouse CI rezultātiem, kā arī lietotāja saskarni datu apskatei un analīzei. To var izvietot dažādos mākoņpakalpojumu sniedzējos vai uzturēt uz savas infrastruktūras.
- Google Cloud Storage: Jūs varat augšupielādēt savus Lighthouse CI rezultātus Google Cloud Storage krātuvē. Tas ir izmaksu ziņā efektīvs un mērogojams risinājums jūsu datu glabāšanai.
- Amazon S3: Līdzīgi kā Google Cloud Storage, jūs varat augšupielādēt savus Lighthouse CI rezultātus Amazon S3 krātuvē.
Lighthouse CI servera iestatīšana:
Lighthouse CI servera iestatīšana ietver šādus soļus:
- Instalējiet Lighthouse CI serveri: Jūs varat instalēt Lighthouse CI serveri, izmantojot npm vai yarn:
- Konfigurējiet datu bāzi: Lighthouse CI serverim ir nepieciešama datu bāze, lai uzglabātu savus datus. Jūs varat izmantot dažādas datu bāzes, tostarp PostgreSQL, MySQL un SQLite. Konfigurējiet datu bāzes savienojuma iestatījumus
.envfailā. - Startējiet Lighthouse CI serveri: Startējiet Lighthouse CI serveri, izmantojot
lhci serverkomandu. - Konfigurējiet Lighthouse CI CLI, lai izmantotu serveri: Atjauniniet savu
lighthouserc.jsfailu, lai izmantotu Lighthouse CI serveri kā augšupielādes mērķi:
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'
},
}
};
Aizstājiet http://your-lhci-server.com ar sava Lighthouse CI servera URL un YOUR_LHCI_TOKEN ar sava projekta piekļuves atslēgu.
Labākās prakses Lighthouse CI lietošanai
Lai maksimāli izmantotu Lighthouse CI, ievērojiet šīs labākās prakses:
- Palaidiet Lighthouse CI pie katras koda izmaiņas: Integrējiet Lighthouse CI savā CI/CD konveijerā, lai palaistu auditus pie katras koda izmaiņas. Tas palīdzēs jums agri atklāt veiktspējas regresijas.
- Iestatiet veiktspējas budžetus: Definējiet veiktspējas budžetus, lai nodrošinātu, ka jūsu vietne nepārsniedz pieņemamos veiktspējas sliekšņus.
- Uzraugiet veiktspējas tendences: Izsekojiet savas vietnes veiktspēju laika gaitā, lai identificētu tendences un novērtētu savu optimizāciju ietekmi.
- Prioritizējiet optimizācijas centienus: Vispirms koncentrējieties uz vissvarīgāko veiktspējas rādītāju optimizāciju.
- Izmantojiet reālās pasaules datus: Izmantojiet reālās pasaules datus, lai informētu savus optimizācijas centienus. Piemēram, varat izmantot Google Analytics, lai identificētu lapas, kuras jūsu lietotāji apmeklē visbiežāk.
- Testējiet uz reālām ierīcēm: Testējiet savu vietni uz reālām ierīcēm, lai nodrošinātu, ka tā labi darbojas reālās pasaules apstākļos.
- Regulāri pārskatiet Lighthouse CI rezultātus: Pārliecinieties, ka regulāri pārskatāt Lighthouse CI rezultātus un veicat darbības, lai risinātu visas identificētās veiktspējas problēmas.
- Optimizējiet attēlus: Optimizējiet savus attēlus, lai samazinātu to faila izmēru, nezaudējot kvalitāti. Šim nolūkam noderīgi ir tādi rīki kā ImageOptim (macOS), TinyPNG un ImageKit.
- Minimizējiet CSS un JavaScript: Minimizējiet savus CSS un JavaScript failus, lai samazinātu to izmēru. Ar to var palīdzēt tādi rīki kā UglifyJS un CSSNano.
- Izmantojiet pārlūka kešatmiņu: Izmantojiet pārlūka kešatmiņu, lai samazinātu pieprasījumu skaitu, ko jūsu vietne veic serverim.
- Izmantojiet satura piegādes tīklu (CDN): Izmantojiet CDN, lai izplatītu savas vietnes saturu uz serveriem visā pasaulē. Tas var uzlabot ielādes laikus lietotājiem dažādās ģeogrāfiskajās vietās. Populāri CDN ir tādi pakalpojumi kā Cloudflare un Amazon CloudFront.
- Atlieciet ārpus ekrāna esošo attēlu ielādi: Ieviesiet "slinko ielādi" (lazy loading) attēliem, kas nav uzreiz redzami ekrānā. Tas var ievērojami uzlabot sākotnējo lapas ielādes laiku. Vienkāršai slinkajai ielādei var izmantot atribūtu
loading="lazy". - Likvidējiet renderēšanu bloķējošos resursus: Identificējiet un likvidējiet resursus, kas bloķē jūsu lapas renderēšanu. Tas bieži ietver kritiskā CSS iekļaušanu (inlining) un nekritiskā CSS un JavaScript atlikšanu.
- Samaziniet JavaScript izpildes laiku: Profilējiet savu JavaScript kodu, lai identificētu un optimizētu lēni strādājošas funkcijas. Tehnikas, piemēram, koda sadalīšana (code splitting) un liekā koda izņemšana (tree shaking), var palīdzēt samazināt lejupielādējamā un izpildāmā JavaScript apjomu.
Paplašinātas Lighthouse CI tehnikas
Kad esat apguvis Lighthouse CI pamatus, varat izpētīt dažas paplašinātas tehnikas, lai vēl vairāk uzlabotu savu veiktspējas uzraudzību:
- Pielāgoti Lighthouse auditi: Jūs varat izveidot pielāgotus Lighthouse auditus, lai testētu specifiskas veiktspējas problēmas, kas ir svarīgas jūsu lietojumprogrammai.
- Headless Chrome konfigurācija: Konfigurējiet Headless Chrome, lai izmantotu specifiskas ierīču emulācijas vai tīkla ātruma ierobežošanas iestatījumus.
- Integrācija ar uzraudzības rīkiem: Integrējiet Lighthouse CI ar saviem esošajiem uzraudzības rīkiem (piemēram, New Relic, Datadog), lai iegūtu visaptverošāku priekšstatu par savas vietnes veiktspēju.
- Vizuālās regresijas testēšana: Apvienojiet Lighthouse CI ar vizuālās regresijas testēšanas rīkiem, lai atklātu vizuālas izmaiņas, kas var ietekmēt veiktspēju.
Lighthouse CI globālai auditorijai: Apsvērumi starptautiskām vietnēm
Lietojot Lighthouse CI vietnēm, kas paredzētas globālai auditorijai, ņemiet vērā sekojošo:
- Testējiet no vairākām vietām: Servera atbildes laiki var ievērojami atšķirties atkarībā no lietotāja atrašanās vietas. Izmantojiet CDN (satura piegādes tīklu) un apsveriet iespēju palaist Lighthouse CI auditus no dažādiem ģeogrāfiskiem reģioniem, lai iegūtu precīzāku priekšstatu par veiktspēju jūsu starptautiskajiem lietotājiem. Daži CI/CD nodrošinātāji piedāvā iespējas norādīt izpildītāja ģeogrāfisko atrašanās vietu.
- Ņemiet vērā tīkla apstākļus: Tīkla ātrums un latentums visā pasaulē ir ļoti atšķirīgs. Simulējiet dažādus tīkla apstākļus savos Lighthouse CI auditos, lai saprastu, kā jūsu vietne darbojas dažādos ierobežojumos. Lighthouse ļauj ierobežot tīkla savienojumu, simulējot lēnākus savienojumus, piemēram, 3G.
- Satura lokalizācija: Pārliecinieties, ka jūsu lokalizētais saturs ir pareizi optimizēts. Tas ietver attēlu optimizāciju dažādām valodām un rakstzīmju kopām, kā arī pareizu kodējumu, lai izvairītos no attēlošanas problēmām.
- Fontu ielāde: Optimizējiet fontu ielādi dažādām valodām. Apsveriet iespēju izmantot font-display: swap, lai novērstu teksta neredzamību fontu ielādes laikā.
- Trešo pušu skripti: Esiet uzmanīgi ar trešo pušu skriptiem, jo tie var ievērojami ietekmēt veiktspēju, īpaši lietotājiem reģionos ar lēnākiem tīkla savienojumiem. Regulāri auditējiet trešo pušu skriptu veiktspēju un apsveriet iespēju izmantot asinhronu ielādi vai pašmitināt kritiskos skriptus.
- Mobilā optimizācija: Mobilā lietošana ir izplatīta daudzās pasaules daļās. Pārliecinieties, ka jūsu vietne ir optimizēta mobilajām ierīcēm un ka jūsu Lighthouse CI auditi ietver specifiskus testus mobilajām ierīcēm.
Biežāko Lighthouse CI problēmu novēršana
Šeit ir dažas biežāk sastopamās problēmas, ar kurām jūs varētu saskarties, lietojot Lighthouse CI, un kā tās novērst:
- Lighthouse CI neizdodas ar "Timeout" kļūdu: Tas var notikt, ja jūsu vietnes ielāde aizņem pārāk ilgu laiku vai ja Lighthouse CI nevar izveidot savienojumu ar jūsu vietni. Mēģiniet palielināt taimauta vērtību savā
lighthouserc.jsfailā vai pārbaudiet savas vietnes servera žurnālus, lai atrastu kļūdas. - Lighthouse CI ziņo par nekonsekventiem rezultātiem: Lighthouse rezultāti var nedaudz atšķirties starp izpildēm tīkla apstākļu vai citu faktoru dēļ. Palaidiet vairākus auditus, lai iegūtu stabilāku vidējo rādītāju.
- Lighthouse CI neizdodas augšupielādēt rezultātus: Pārbaudiet savu
upload.targetkonfigurāciju un pārliecinieties, ka jūsu Lighthouse CI serveris darbojas un ir pieejams. Tāpat pārbaudiet, vai esat konfigurējis pareizo piekļuves atslēgu. - Lighthouse CI ziņo par negaidītām veiktspējas regresijām: Izpētiet koda izmaiņas, kas tika veiktas pirms regresijas atklāšanas. Izmantojiet Lighthouse CI pārskatus, lai identificētu konkrētos veiktspējas rādītājus, kas ir pasliktinājušies, un koncentrējiet savus optimizācijas centienus uz šīm jomām.
Noslēgums
Frontend Lighthouse CI ir spēcīgs rīks tīmekļa lietojumprogrammu nepārtrauktai veiktspējas uzraudzībai. Integrējot Lighthouse CI savā CI/CD konveijerā, jūs varat proaktīvi identificēt un risināt veiktspējas problēmas, nodrošinot, ka jūsu vietne sniedz optimālu lietotāja pieredzi. Atcerieties pielāgot savu iestatījumu, apgalvojumu noteikumus un testēšanas vietas globālai auditorijai, lai radītu vislabāko iespējamo pieredzi lietotājiem visā pasaulē.
Ievērojot šajā rokasgrāmatā izklāstītos soļus un labākās prakses, jūs varat ievērojami uzlabot savas vietnes veiktspēju, samazināt atlēcienu līmeni, palielināt konversijas rādītājus un galu galā sasniegt savus biznesa mērķus. Sāciet ieviest Lighthouse CI jau šodien un atraisiet pilnu savu tīmekļa lietojumprogrammu potenciālu.