Frontend-suorituskykytestaus: Lighthouse CI:n integrointi jatkuvaan parantamiseen

Nykypäivän digitaalisessa maailmassa verkkosivuston suorituskyky on ensiarvoisen tärkeää. Hitaat latausajat, saavutettavuusongelmat ja huono hakukoneoptimointi (SEO) voivat merkittävästi vaikuttaa käyttäjäkokemukseen ja sitä kautta liiketoiminnan tuloksiin. Frontend-suorituskykytestauksesta on tullut olennainen osa modernia ohjelmistokehityksen elinkaarta, jolla varmistetaan, että verkkosivustot ja -sovellukset ovat nopeita, luotettavia ja käyttäjäystävällisiä globaalille yleisölle. Tässä artikkelissa syvennytään Lighthouse CI:n, tehokkaan avoimen lähdekoodin työkalun, integrointiin jatkuvan integraation (CI) putkeen frontend-suorituskykytestauksen automatisoimiseksi ja jatkuvan parantamisen edistämiseksi.

Miksi frontend-suorituskykytestaus on tärkeää?

Ennen kuin sukellamme Lighthouse CI:hin, ymmärretään, miksi frontend-suorituskykytestaus on ratkaisevan tärkeää:

• Käyttäjäkokemus: Nopea ja reagoiva verkkosivusto tarjoaa paremman käyttäjäkokemuksen, mikä johtaa korkeampaan sitoutumiseen ja pienempiin poistumisprosentteihin. Kuvittele potentiaalinen asiakas Tokiossa, Japanissa, yrittämässä ostaa tuotetta hitaasti latautuvasta verkkokaupasta. Hän todennäköisesti hylkää sivuston ja etsii vaihtoehtoja.
• SEO-sijoitus: Googlen kaltaiset hakukoneet pitävät verkkosivuston nopeutta ja suorituskykyä sijoitustekijöinä. Nopeammat verkkosivustot sijoittuvat yleensä korkeammalle hakutuloksissa, mikä tuo enemmän orgaanista liikennettä. Googlen Core Web Vitals -aloite korostaa tekijöiden, kuten Largest Contentful Paint (LCP), First Input Delay (FID) ja Cumulative Layout Shift (CLS), merkitystä SEO:n kannalta.
• Saavutettavuus: Suorituskyvyn parannukset johtavat usein parempaan saavutettavuuteen vammaisille käyttäjille. Optimoitu koodi ja kuvat voivat parantaa kokemusta ruudunlukijoita käyttäville tai niille, joilla on rajoitettu kaistanleveys.
• Konversioprosentit: Nopeampi verkkosivusto voi vaikuttaa suoraan konversioprosentteihin. Tutkimukset ovat osoittaneet, että jopa yhden sekunnin viive sivun latausajassa voi johtaa merkittävään konversioiden laskuun. Ajattele käyttäjää Mumbaissa, Intiassa, yrittämässä varata lentoa. Hidas varausprosessi voi johtaa siihen, että hän hylkää oston ja valitsee kilpailijan.
• Resurssien optimointi: Suorituskykytestaus auttaa tunnistamaan alueita, joilla resursseja voidaan optimoida, mikä johtaa kustannussäästöihin palvelininfrastruktuurin ja kaistanleveyden käytön osalta.

Esittelyssä Lighthouse CI

Lighthouse CI on avoimen lähdekoodin automaatiotyökalu, joka on suunniteltu integroitumaan saumattomasti CI/CD-putkeesi. Se ajaa Lighthousea, suosittua Googlen kehittämää auditointityökalua, ja tarjoaa näkemyksiä verkkosivustosi suorituskyvystä, saavutettavuudesta, SEO:sta, parhaista käytännöistä ja Progressive Web App (PWA) -yhteensopivuudesta. Lighthouse CI auttaa sinua:

• Automaattiset suorituskykyauditoinnit: Aja Lighthouse-auditoinnit automaattisesti jokaisen commitin tai pull-requestin yhteydessä.
• Suorituskyvyn seuranta ajan mittaan: Seuraa suorituskykymittareita ajan mittaan ja tunnista regressiot varhaisessa vaiheessa.
• Suorituskykybudjettien asettaminen: Määrittele suorituskykybudjetit ja epäonnistuta buildit, jos ne ylittyvät.
• Integrointi CI/CD-järjestelmiin: Integroi suosittuihin CI/CD-järjestelmiin, kuten GitHub Actions, GitLab CI, CircleCI ja Jenkins.
• Yhteistyö suorituskykyongelmissa: Jaa Lighthouse-raportteja ja tee yhteistyötä tiimisi kanssa suorituskykyongelmien ratkaisemiseksi.

Lighthouse CI:n käyttöönotto

Tässä on vaiheittainen opas Lighthouse CI:n käyttöönottoon projektissasi:

1. Asenna Lighthouse CI

Asenna Lighthouse CI CLI globaalisti käyttämällä npm:ää tai yarnia:

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

              
                Copy
              
            
          

2. Konfiguroi Lighthouse CI

Luo lighthouserc.js-tiedosto projektisi juurihakemistoon Lighthouse CI:n konfiguroimiseksi. Tässä on esimerkkikonfiguraatio:

            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
              
            
          

Käydään läpi tämä konfiguraatio:

• collect.url: Taulukko auditoitavista URL-osoitteista. Tämä esimerkki auditoi etusivun ja "tietoa meistä" -sivun. Sinun tulisi sisällyttää kaikki verkkosivustosi kriittiset sivut, ottaen huomioon eri käyttötapaukset. Esimerkiksi verkkokauppa saattaisi sisällyttää etusivun, tuotelistaussivut, tuotetietosivut ja kassaprosessin.
• collect.startServerCommand: Komento, jolla käynnistetään kehityspalvelin. Tämä on välttämätöntä, jos Lighthouse CI:n on ajettava paikallista kehitysympäristöä vasten.
• collect.numberOfRuns: Lighthouse-auditointien ajokertojen määrä kutakin URL-osoitetta kohti. Useiden auditointien suorittaminen auttaa vähentämään verkkoyhteyden olosuhteiden ja muiden tekijöiden vaihtelua.
• assert.assertions: Joukko väittämiä (assertions), joilla validoidaan Lighthouse-auditointien tulokset. Jokainen väittämä määrittää mittarin tai kategorian ja kynnysarvon. Jos kynnysarvo ei täyty, build epäonnistuu. Tämä esimerkki asettaa kynnysarvot suorituskyvylle, saavutettavuudelle, parhaille käytännöille ja SEO-kategorioille. Se asettaa myös kynnysarvot tietyille mittareille, kuten First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT) ja Cumulative Layout Shift (CLS).
• upload.target: Määrittää, minne Lighthouse-raportit ladataan. temporary-redirect lataa raportit väliaikaiseen tallennuspaikkaan ja tarjoaa URL-osoitteen niiden tarkastelemiseksi. Muita vaihtoehtoja ovat Lighthouse CI -palvelimen käyttö tai pilvitallennusratkaisut, kuten Google Cloud Storage tai Amazon S3.

3. Integroi CI/CD-järjestelmääsi

Seuraava vaihe on integroida Lighthouse CI CI/CD-putkeesi. Tässä on esimerkki siitä, miten se integroidaan GitHub Actionsin kanssa:

Luo tiedosto .github/workflows/lighthouse.yml repositorioosi:

            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
              
            
          

Tämä työnkulku suorittaa seuraavat vaiheet:

• Noutaa koodin (checks out).
• Asettaa Node.js:n.
• Asentaa riippuvuudet.
• Ajaa Lighthouse CI:n. Tämä vaihe ensin buildaa sovelluksen (npm run build), ja ajaa sitten komennon lhci autorun, joka suorittaa Lighthouse-auditoinnit ja vertaa tuloksia määritettyihin kynnysarvoihin.

Mukauta tämä työnkulku omaan CI/CD-järjestelmääsi ja projektisi vaatimuksiin sopivaksi. Jos käytät esimerkiksi GitLab CI:tä, konfiguroisit .gitlab-ci.yml-tiedoston vastaavilla vaiheilla.

4. Aja Lighthouse CI

Committaa muutoksesi ja pushaa ne repositorioosi. CI/CD-putki ajaa Lighthouse CI:n automaattisesti. Jos jokin väittämistä epäonnistuu, build epäonnistuu, mikä antaa arvokasta palautetta kehittäjille. Lighthouse CI -raportit ovat saatavilla CI/CD-järjestelmän tarjoamassa URL-osoitteessa.

Edistynyt konfigurointi ja mukauttaminen

Lighthouse CI tarjoaa laajan valikoiman konfigurointivaihtoehtoja ja mukautusmahdollisuuksia. Tässä on joitakin edistyneitä ominaisuuksia:

1. Lighthouse CI -palvelimen käyttö

Lighthouse CI -palvelin tarjoaa keskitetyn kojelaudan suorituskykymittareiden seuraamiseen ajan mittaan, projektien hallintaan ja yhteistyöhön suorituskykyongelmien parissa. Käyttääksesi Lighthouse CI -palvelinta sinun on asennettava instanssi ja konfiguroitava lighthouserc.js-tiedostosi lataamaan raportit palvelimelle.

Ensin, ota palvelin käyttöön (deploy). Saatavilla on useita käyttöönotto-vaihtoehtoja, kuten Docker, Heroku ja pilvipalveluntarjoajat kuten AWS ja Google Cloud. Katso Lighthouse CI:n dokumentaatiosta yksityiskohtaiset ohjeet palvelimen käyttöönottoon.

Kun palvelin on käynnissä, päivitä lighthouserc.js-tiedostosi osoittamaan palvelimeen:

            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
              
            
          

Korvaa YOUR_LHCI_SERVER_URL Lighthouse CI -palvelimesi URL-osoitteella ja YOUR_LHCI_SERVER_TOKEN palvelimen generoimalla tunnisteella (token). Tunniste todentaa CI-putkesi palvelimelle.

2. Suorituskykybudjettien asettaminen

Suorituskykybudjetit määrittelevät hyväksyttävät kynnysarvot tietyille mittareille. Lighthouse CI mahdollistaa suorituskykybudjettien asettamisen ja buildien epäonnistumisen, jos budjetit ylittyvät. Tämä auttaa estämään suorituskyvyn heikkenemistä ja varmistaa, että verkkosivustosi pysyy hyväksyttävissä suorituskykyrajoissa.

Voit määritellä suorituskykybudjetit lighthouserc.js-tiedostossasi käyttämällä assert.assertions-ominaisuutta. Esimerkiksi asettaaksesi suorituskykybudjetin First Contentful Paint (FCP) -mittarille, voit lisätä seuraavan väittämän:

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

              
                Copy
              
            
          

Tämä väittämä epäonnistuttaa buildin, jos FCP on suurempi kuin 2500 millisekuntia.

3. Lighthousen konfiguraation mukauttaminen

Lighthouse CI mahdollistaa Lighthousen konfiguraation mukauttamisen omiin tarpeisiisi sopivaksi. Voit konfiguroida useita Lighthousen asetuksia, kuten:

• onlyAudits: Määritä lista suoritettavista auditoinneista.
• skipAudits: Määritä lista ohitettavista auditoinneista.
• throttling: Konfiguroi verkon rajoitusasetukset (throttling) simuloidaksesi erilaisia verkkoyhteysolosuhteita.
• formFactor: Määritä emuloitava laitemuoto (desktop tai mobile).
• screenEmulation: Konfiguroi näytön emulointiasetukset.

Mukauttaaksesi Lighthousen konfiguraatiota voit antaa --config-path-lipun lhci autorun -komennolle, joka osoittaa mukautettuun Lighthousen konfiguraatiotiedostoon. Katso Lighthousen dokumentaatiosta täydellinen lista konfigurointivaihtoehdoista.

4. Autentikoitujen sivujen auditointi

Autentikoitujen sivujen auditointi vaatii hieman erilaista lähestymistapaa. Sinun on annettava Lighthouse CI:lle tapa autentikoitua ennen auditointien suorittamista. Tämä voidaan saavuttaa käyttämällä evästeitä tai skriptaamalla sisäänkirjautumisprosessi.

Yksi yleinen lähestymistapa on käyttää --extra-headers-lippua autentikointievästeiden välittämiseksi Lighthouse CI:lle. Voit saada evästeet selaimesi kehittäjätyökaluista kirjauduttuasi sisään verkkosivustolle.

Vaihtoehtoisesti voit käyttää Puppeteer-skriptiä automatisoimaan sisäänkirjautumisprosessin ja ajamaan sitten Lighthouse-auditoinnit autentikoiduilla sivuilla. Tämä lähestymistapa tarjoaa enemmän joustavuutta ja mahdollistaa monimutkaisten autentikointiskenaarioiden käsittelyn.Parhaat käytännöt frontend-suorituskykytestauksessa Lighthouse CI:n kanssa

Maksimoidaksesi Lighthouse CI:n hyödyt, noudata näitä parhaita käytäntöjä:

• Aja Lighthouse CI säännöllisesti: Integroi Lighthouse CI CI/CD-putkeesi suorittamaan auditoinnit automaattisesti jokaisen commitin tai pull-requestin yhteydessä. Tämä varmistaa, että suorituskyvyn heikkenemiset havaitaan varhaisessa vaiheessa ja korjataan nopeasti.
• Aseta realistiset suorituskykybudjetit: Määrittele suorituskykybudjetit, jotka ovat haastavia, mutta saavutettavissa. Aloita konservatiivisilla budjeteilla ja kiristä niitä vähitellen verkkosivustosi suorituskyvyn parantuessa. Harkitse erilaisten budjettien asettamista eri sivuille niiden monimutkaisuudesta ja tärkeydestä riippuen.
• Keskity avainmittareihin: Priorisoi ne suorituskyvyn avainmittarit, joilla on suurin vaikutus käyttäjäkokemukseen ja liiketoiminnan tuloksiin. Googlen Core Web Vitals (LCP, FID ja CLS) ovat hyvä lähtökohta.
• Tutki ja korjaa suorituskykyongelmat: Kun Lighthouse CI tunnistaa suorituskykyongelmia, tutki ne perusteellisesti ja toteuta asianmukaiset ratkaisut. Käytä Lighthouse-raportteja ongelmien perimmäisten syiden tunnistamiseen ja priorisoi vaikuttavimmat korjaukset.
• Seuraa suorituskykyä ajan mittaan: Seuraa suorituskykymittareita ajan mittaan tunnistaaksesi trendejä ja malleja. Käytä Lighthouse CI -palvelinta tai muita seurantatyökaluja suorituskykytietojen visualisointiin ja parannuskohteiden tunnistamiseen.
• Kouluta tiimisi: Varmista, että tiimisi ymmärtää frontend-suorituskyvyn tärkeyden ja kuinka käyttää Lighthouse CI:tä tehokkaasti. Tarjoa koulutusta ja resursseja auttaaksesi heitä parantamaan taitojaan ja tietojaan.
• Ota huomioon globaalit verkko-olosuhteet: Kun asetat suorituskykybudjetteja, ota huomioon verkko-olosuhteet eri puolilla maailmaa. Käyttäjillä alueilla, joilla on hitaammat internetyhteydet, voi olla erilainen kokemus kuin käyttäjillä nopeampien yhteyksien alueilla. Käytä työkaluja simuloidaksesi erilaisia verkko-olosuhteita testauksen aikana.
• Optimoi kuvat: Kuvien optimointi on kriittinen osa frontend-suorituskykyä. Käytä työkaluja, kuten ImageOptim, TinyPNG, tai verkkopohjaisia muuntimia kuvien pakkaamiseen ja optimointiin laadun kärsimättä. Käytä moderneja kuvamuotoja, kuten WebP, jotka tarjoavat paremman pakkauksen ja laadun kuin perinteiset muodot, kuten JPEG ja PNG. Toteuta "lazy loading" (viivästetty lataus) kuville, jotka eivät ole heti näkyvissä näkymässä.
• Pienennä ja pakkaa koodi: Pienennä (minify) HTML-, CSS- ja JavaScript-koodisi pienentääksesi tiedostokokoja. Käytä työkaluja, kuten UglifyJS, Terser, tai verkkopohjaisia pienentäjiä. Ota käyttöön Gzip- tai Brotli-pakkaus palvelimellasi pienentääksesi siirrettyjen tiedostojen kokoa entisestään.
• Hyödynnä selaimen välimuistia: Konfiguroi palvelimesi asettamaan asianmukaiset välimuistiotsakkeet staattisille resursseille, kuten kuville, CSS- ja JavaScript-tiedostoille. Tämä mahdollistaa selainten tallentavan nämä resurssit välimuistiin ja välttämään niiden lataamista toistuvasti.

Yhteenveto

Lighthouse CI:n integroiminen kehitystyönkulkuusi on ratkaiseva askel kohti suorituskykyisten, saavutettavien ja SEO-ystävällisten verkkosivustojen rakentamista. Automatisoimalla frontend-suorituskykytestauksen ja seuraamalla suorituskykyä ajan mittaan voit tunnistaa ja korjata suorituskykyongelmat varhaisessa vaiheessa, parantaa käyttäjäkokemusta ja edistää liiketoiminnan tuloksia. Ota Lighthouse CI käyttöön ja tee jatkuvasta suorituskyvyn parantamisesta keskeinen arvo kehitysprosessissasi. Muista, että verkkosivuston suorituskyky ei ole kertaluonteinen ponnistus, vaan jatkuva prosessi, joka vaatii jatkuvaa huomiota ja optimointia. Ota huomioon kulttuuriset ja alueelliset tekijät varmistaaksesi saumattoman kokemuksen kaikille käyttäjillesi heidän sijainnistaan tai laitteestaan riippumatta. Noudattamalla tässä artikkelissa esitettyjä parhaita käytäntöjä voit varmistaa, että verkkosivustosi tarjoaa nopean, luotettavan ja nautinnollisen kokemuksen käyttäjille maailmanlaajuisesti.