Modul 6

Kap 6.4 - Prestanda och enkel felsökning

En snabb sida är lättare att använda, särskilt på mobil och långsamma nät.

Mål

  • Hitta tunga filer med Network-panelen.
  • Förstå vanliga orsaker till långsam laddning.
  • Använda Lighthouse som stöd, inte som facit.
  • Felsöka saknade filer och fel sökväg.

Network-panelen

Network-panelen visar vilka filer sidan laddar, hur stora de är och om någon fil saknas. En röd 404 betyder ofta fel sökväg eller fel filnamn.

Öppna utvecklarverktygen

Med utvecklarverktygen menas verktygen som öppnas när du väljer Inspektera i Chrome. De kallas också DevTools. Det är webbläsarens verktyg för att undersöka hur en sida är byggd, vilka filer som laddas och vilka fel som finns.

En enkel väg är att högerklicka på sidan och välja Inspektera. Du kan också öppna samma verktyg med F12 eller Ctrl + Shift + I. På Mac fungerar oftast Cmd + Option + I.

När verktygen öppnas ser du flera flikar. I det här kapitlet använder du framför allt Elements, Console, Network, Lighthouse och mobilvyn.

Guide: hitta saknade filer med Network

  1. Öppna sidan i webbläsaren.
  2. Öppna utvecklarverktygen.
  3. Gå till fliken Network.
  4. Ladda om sidan med Cmd + R eller Ctrl + R.
  5. Titta i kolumnen Status. En fil med 404 hittades inte.
  6. Klicka på filen och kontrollera sökvägen. Jämför med mappnamn, filnamn, stora och små bokstäver och filändelse.

Om bilden heter bild.webp men HTML-koden säger Bild.webp kan det fungera lokalt på vissa datorer men gå sönder på en webbserver. Var noggrann med exakt samma namn.

Guide: hitta stora filer med Network

  1. Öppna fliken Network.
  2. Ladda om sidan.
  3. Klicka på kolumnen Size för att sortera efter filstorlek.
  4. Leta efter stora bilder, videor, ljudfiler eller externa inbäddningar.
  5. Klicka på en fil och kontrollera filtyp, storlek och laddningstid.

Om en bild är mycket större än den behöver vara kan du gå tillbaka till kapitel 6.2 och ändra pixelstorlek, komprimera bilden eller välja ett bättre format.

Guide: testa utan cache

Webbläsaren sparar ofta filer i cache. Det gör sidan snabbare, men kan också göra felsökning förvirrande eftersom du ibland ser en gammal version av en fil.

  1. Öppna utvecklarverktygen.
  2. Gå till Network.
  3. Kryssa i Disable cache.
  4. Låt utvecklarverktygen vara öppna.
  5. Ladda om sidan.

Nu hämtar webbläsaren filerna på nytt medan DevTools är öppet. Det är användbart när du har ändrat CSS, bilder eller JavaScript men sidan verkar visa gammalt innehåll.

Vanliga prestandaproblem

  • För stora bilder.
  • För många externa inbäddningar.
  • JavaScript som laddas i onödan.
  • Filer som saknas och ger 404.

Lighthouse

Lighthouse kan ge tips om prestanda, tillgänglighet och bästa praxis. Använd resultatet som en startpunkt för felsökning och kontrollera själv vad som faktiskt påverkar sidan.

Guide: kör Lighthouse

  1. Öppna utvecklarverktygen.
  2. Gå till fliken Lighthouse. Om du inte ser den kan den ligga bakom fler-flikar-menyn.
  3. Välj vilka kategorier du vill testa, till exempel Performance, Accessibility och Best Practices.
  4. Välj om sidan ska testas som mobil eller desktop.
  5. Klicka på Analyze page load eller motsvarande knapp.
  6. Läs rapporten, men ändra inte allt på en gång. Välj ett konkret problem och testa igen efter ändringen.

Lighthouse kan ge olika resultat från gång till gång. Det beror bland annat på datorn, nätverket, cache och vilka externa tjänster sidan laddar.

Guide: kontrollera Console

  1. Öppna utvecklarverktygen.
  2. Gå till fliken Console.
  3. Ladda om sidan.
  4. Leta efter röda felmeddelanden.
  5. Läs filnamn och radnummer om de visas.

Vanliga fel i Console är att en JavaScript-fil saknas, att ett element inte hittas eller att koden körs innan sidan har laddats klart.

Guide: kontrollera HTML och CSS med Elements

  1. Högerklicka på något på sidan och välj Inspektera.
  2. Fliken Elements öppnas och markerar HTML-elementet.
  3. Titta på HTML-strukturen till vänster.
  4. Titta på CSS-reglerna till höger.
  5. Testa att slå av och på CSS-regler för att se vad som påverkar layouten.

Elements är bra när något ligger fel, har fel färg, inte får rätt bredd eller påverkas av en CSS-regel du inte väntade dig.

Guide: testa mobilvy

  1. Öppna utvecklarverktygen.
  2. Klicka på ikonen för mobil/surfplatta, eller tryck Cmd + Shift + M på Mac och Ctrl + Shift + M på Windows.
  3. Välj en smal bredd eller dra i sidans kanter.
  4. Kontrollera att text, bilder, video, navigation och formulär fortfarande fungerar.
  5. Testa också bred desktopvy igen efteråt.

En sida kan se bra ut på din skärm men ändå vara svår att använda på mobil. Testa därför både smal och bred vy.

Felsök i ordning

  1. Kontrollera konsolen för fel.
  2. Kontrollera Network för saknade eller stora filer.
  3. Testa sidan i smal och bred viewport.
  4. Ändra en sak i taget och testa igen.

Exempel på felsökning

Om en bild inte visas kan du felsöka så här:

  1. Inspektera bilden i Elements och läs vad som står i src.
  2. Öppna Network och ladda om sidan.
  3. Leta efter bildfilen. Om status är 404 hittas inte filen.
  4. Kontrollera om filen ligger i rätt mapp.
  5. Kontrollera om filnamnet, filändelsen och stora/små bokstäver stämmer.
  6. Ändra en sak, ladda om och kontrollera igen.

Checklista innan publicering

  • Inga röda fel i Console.
  • Inga saknade filer med status 404 i Network.
  • Bilder och media har rimlig filstorlek.
  • Sidan fungerar i mobilvy.
  • Lighthouse ger inga problem du enkelt kan åtgärda.
  • Du har testat efter att cache är avstängd eller efter en hård omladdning.