Kør jeres første audit

Velkommen til din første praktiske Lighthouse-auditering! I denne lektion lærer du, hvordan du kører en auditering på en hvilken som helst webside og forstår dens ydelsesscorer.

Lighthouse er et effektivt værktøj, der er udviklet af Google for at hjælpe udviklere med at forbedre kvaliteten af deres websider. Det kontrollerer ydelse, tilgængelighed, SEO og meget mere.

Google Lighthouse er indbygget direkte i udviklerværktøjerne i din Chrome-browser. Du behøver ikke installere noget ekstra!

• Åbn Chrome, og gå til en vilkårlig webside.
• Højreklik et vilkårligt sted på siden, og vælg "Inspect" (eller brug Ctrl+Shift+I / Cmd+Option+I).
• Det åbner panelet Developer Tools.

Når Developer Tools er åbnet, skal du gå til fanen Lighthouse. Her ser du muligheder for at konfigurere din auditering:

• Kategorier: Vælg, hvilke aspekter der skal kontrolleres (f.eks. Ydelse, Tilgængelighed).
• Enhed: Vælg "Mobile" eller "Desktop" for at simulere forskellige miljøer.
• Klik på "Analyze page load" for at starte!

Lighthouse-auditeringer dækker flere vigtige områder, så du får et komplet billede af dit websteds tilstand:

• Ydelse: Hvor hurtigt din side indlæses og reagerer.
• Tilgængelighed: Hvor brugervenlig din side er for personer med handicap.
• Bedste praksisser: Generelle anbefalinger til webudvikling.
• SEO: Hvor godt din side er optimeret til søgemaskiner.
• PWA: Kontrollerer standarder for Progressive Web App (hvis det er relevant).

Når du klikker på "Analyze page load", går Lighthouse i gang:

• Det indlæser din side i et simuleret, kontrolleret miljø.
• Det indsamler data om forskellige målepunkter som indlæsningstider, brugerinteraktioner og overholdelse af bedste praksisser.
• Disse data samles derefter i en omfattende rapport, som du kan se i DevTools-panelet.

Efter gennemgangen får du en samlet score for hver kategori, som normalt går fra 0 til 100. Jo højere, desto bedre!

Hver score er et gennemsnit af flere underliggende målinger. For eksempel kombinerer scoren for ydeevne målinger som First Contentful Paint (FCP) og Largest Contentful Paint (LCP).

Lighthouse bruger et farvekodet system til hurtigt at vise, hvordan din side klarer sig:

• 0-49 (rød): Dårlig ydeevne. Der er betydeligt plads til forbedring.
• 50-89 (orange): Gennemsnitlig ydeevne. God, men den kan blive bedre.
• 90-100 (grøn): Fremragende ydeevne. Din side klarer sig rigtig godt!

Stræb efter grønne scorer i alle kategorier for at give den bedst mulige brugeroplevelse.

Forestil dig, at du gennemgår et enkelt blogindlæg. Lighthouse kunne give dig en rapport som denne:

• Ydeevne: 75 (orange)
• Tilgængelighed: 98 (grøn)
• Bedste praksis: 90 (grøn)
• SEO: 85 (orange)

Rapporten fortæller dig, at din blog er tilgængelig og følger mange bedste praksisser, men at dens ydeevne og SEO kan forbedres lidt.

Husk disse tip for at få de mest nøjagtige og ensartede resultater fra Lighthouse:

• Brug inkognitotilstand: Det deaktiverer browserudvidelser, som kan forstyrre.
• Stabilt netværk: Sørg for, at du har en stabil internetforbindelse.
• Luk andre faner: Reducér aktivitet i baggrunden for at få tydeligere resultater.
• Kør flere gange: Ydeevnen kan variere en smule, så kør nogle få gennemgange og beregn gennemsnittet af scorerne.

Godt gået! Du har lært at køre din første Lighthouse-gennemgang og forstå dens scoringssystem.

• Du kan få adgang til Lighthouse via Chrome DevTools.
• Gennemgange omfatter ydeevne, tilgængelighed, bedste praksis, SEO og PWA.
• Scorerne er farvekodede: 0-49 (rød), 50-89 (orange), 90-100 (grøn).
• Brug inkognitotilstand og et stabilt netværk for at få nøjagtige resultater.

Derefter går vi mere i dybden med fortolkningen af disse rapporter og forståelsen af anbefalingerne!