Frontend Academy · Oppitunti

Automatisoidut Lighthouse-tarkistukset

Lisää Lighthouse CI GitHub Action, määritä suorituskyvyn ja saavutettavuuden pistemääräkynnykset ja estä yhdistämiset, jotka heikentävät Core Web Vitals -arvoja.

Oppitunti 4/414 vaihetta

Automatisoidut Lighthouse-tarkistukset on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Miksi Lighthouse automatisoidaan?

Manuaaliset Lighthouse-ajot havaitsevat suorituskykyregressiot myöhään — yleensä vasta sen jälkeen, kun oikea käyttäjä valittaa. Automatisoitu Lighthouse CI suoritetaan jokaisen PR:n yhteydessä, epäonnistuttaa buildit, joissa keskeiset mittarit heikkenevät, ja seuraa tuloksia ajan mittaan. Käsitelkää suorituskykyä testisarjan tavoin.

Lighthouse CI

Googlen avoimen lähdekoodin Lighthouse CI (lhci) -työkalukokonaisuus suorittaa Lighthousen useita kertoja, laskee mediaanin, vertaa tuloksia kynnysarvoihin ja lataa tulokset.

npm install -D @lhci/cli

# Run locally:
npx lhci autorun

lighthouserc.json — määritys

Määrittäkää testattavat URL-osoitteet, ajojen määrä ja tarkistukset.

// lighthouserc.json
{
  "ci": {
    "collect": {
      "url": [
        "http://localhost:3000",
        "http://localhost:3000/blog",
        "http://localhost:3000/pricing"
      ],
      "numberOfRuns": 5,
      "startServerCommand": "npm run start"
    },
    "assert": {
      "assertions": {
        "categories:performance":   ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "categories:seo":            ["warn", { "minScore": 0.9 }],
        "largest-contentful-paint":  ["error", { "maxNumericValue": 2500 }],
        "total-blocking-time":       ["error", { "maxNumericValue": 200 }],
        "cumulative-layout-shift":   ["error", { "maxNumericValue": 0.1 }]
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

GitHub Actions -integraatio

Virallinen treosh/lighthouse-ci-action suorittaa lhci:n jokaisen PR:n yhteydessä ja julkaisee tilatarkistuksen.

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]
jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20', cache: 'npm' }
      - run: npm ci && npm run build
      - uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: ./lighthouserc.json
          uploadArtifacts: true
          temporaryPublicStorage: true

Useiden ajojen mediaani

Lighthouse-pisteet vaihtelevat ajojen välillä ajoituksen aiheuttaman vaihtelun vuoksi. numberOfRuns: 5 laskee mediaanin, joka on riittävän vakaa vertailtavaksi kynnysarvoihin. Alle kolme ajoa tuottaa helposti epävakaita tuloksia.

Suorituskykybudjetit

Pisteiden lisäksi määrittäkää tiukat budjetit resurssien koolle ja lukumäärälle. Build epäonnistuu, jos budjetit ylittyvät.

// budget.json
[
  {
    "resourceSizes": [
      { "resourceType": "script", "budget": 300 },
      { "resourceType": "image", "budget": 100 }
    ],
    "resourceCounts": [
      { "resourceType": "third-party", "budget": 10 }
    ]
  }
]

// lighthouserc.json:
"collect": {
  "settings": { "budgetsPath": "./budget.json" }
}

Lighthouse CI -palvelin

Ylläpitäkää LHCI-palvelinta itse, jotta voitte säilyttää historiatiedot, tarkastella trendikaavioita ja verrata haaroja ajan mittaan. Voitte myös käyttää väliaikaista julkista tallennustilaa yksittäisten PR-tulosten tallentamiseen.

Autentikoitujen sivujen testaaminen

Käyttäkää Puppeteer-skriptejä kirjautumiseen ennen Lighthouse-ajojen suorittamista.

// lighthouserc.json
"collect": {
  "puppeteerScript": "./lighthouse-login.js",
  "url": ["http://localhost:3000/dashboard"]
}

// lighthouse-login.js
module.exports = async (browser, context) => {
  const page = await browser.newPage();
  await page.goto('http://localhost:3000/login');
  await page.fill('#email', 'test@example.com');
  await page.fill('#password', 'test123');
  await page.click('button[type=submit]');
  await page.waitForNavigation();
};

Slack- ja Discord-ilmoitukset

Välittäkää LHCI-tulokset tiimin keskustelukanavaan — suorituskyvyn heikkeneminen ansaitsee saman huomion kuin testien epäonnistuminen.

Mobiili ja työpöytä

Lighthouse käyttää oletuksena mobiiliasetuksia (hidas 4G ja keskitason suoritin). Käyttäkää työpöytää varten asetusta preset: 'desktop'. Useimpien tuotantosovellusten kannattaa auditoida molemmat — käyttäkää CI:ssä erillisiä töitä.

Kynnysarvojen säätäminen

Aloittakaa nykyisistä pisteistä lähtötasona. Älkää hylätkö PR:iä ensimmäisenä päivänä — kirjatkaa tulokset ja varoittakaa ensin. Kun tiimi on tottunut työnkulkuun, kiristäkää kynnysarvoja asteittain.

Lighthousen lisäksi

Lighthouse tarjoaa laboratorioympäristön dataa. Yhdistäkää se todellisten käyttäjien seurantaan (RUM): web-vitals npm -paketti ja oma analytiikkanne tai SpeedCuren ja Calibren kaltaiset palvelut antavat todellisen kuvan suorituskyvyn kehityksestä.

Pikatarkistus

Miksi Lighthouse CI laskee yleensä useiden ajojen, esimerkiksi viiden ajon, mediaanin yhden ajon sijaan?

Vastaa interaktiivisessa oppitunnissa

Kertaus: automatisoitu Lighthouse

lhci autorun integroituu CI:hin. Määrittäkää lighthouserc.json-tiedostossa URL-osoitteet, ajojen määrä (vähintään 5), kategorioiden ja mittareiden tarkistukset sekä suorituskykybudjetit. Käyttäkää treosh/lighthouse-ci-actionia GitHubissa. Ylläpitäkää LHCI-palvelinta itse trendien seuraamista varten. Käyttäkää Puppeteer-skriptejä autentikoitujen sivujen testaamiseen. Auditoikaa mobiili- ja työpöytäversiot. Aloittakaa varoituksista ja kiristäkää kynnysarvoja ajan mittaan. Yhdistäkää tulokset RUM-dataan kokonaiskuvan saamiseksi.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 41
Oppitunnit: 163

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Automatisoidut Lighthouse-tarkistukset” ilmainen?

Kyllä – oppitunnin ”Automatisoidut Lighthouse-tarkistukset” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Automatisoidut Lighthouse-tarkistukset”?

Lisää Lighthouse CI GitHub Action, määritä suorituskyvyn ja saavutettavuuden pistemääräkynnykset ja estä yhdistämiset, jotka heikentävät Core Web Vitals -arvoja. Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Automatisoidut Lighthouse-tarkistukset”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?

Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

GitHub Actions frontendille: lint, test ja build
Käyttöönotto Vercelissä, Netlifyssa ja Cloudflare Pagesissa
Ympäristömuuttujat CI:ssä
Automatisoidut Lighthouse-tarkistukset

← Takaisin: Frontend Academy