Prestanda och enkel felsökning

Mål

Efter kapitlet ska du kunna...

• hitta tunga och saknade filer i Network
• förstå vanliga orsaker till långsam laddning
• använda Lighthouse som stöd
• felsöka fel sökväg och filnamn

Varför?

En snabb sida hjälper fler

• Mobiltelefoner kan ha långsammare uppkoppling.
• Stora filer tar tid och använder mer data.
• Saknade filer gör att innehåll eller funktioner försvinner.

DevTools

Webbläsarens utvecklarverktyg

DevTools låter dig undersöka hur sidan är byggd, vilka filer som laddas och vilka fel som finns.

Öppna DevTools

Tre sätt på Mac

• Högerklicka på sidan och välj Inspektera.
• Tryck F12.
• Tryck ⌘ Command + ⌥ Option + I.

Olika flikar

Varje verktyg svarar på en fråga

Network

Se vad sidan hämtar

Status visar om filen hittades. Size visar filstorleken.

Network i Chrome

Så ser ett riktigt 404-fel ut

Interaktiv Network-panel

Ladda sidan och sortera filerna

Klicka på ”Ladda om sidan” för att visa filerna.

Statuskoder

200 och 404 betyder olika saker

När en fil ger 404

Kontrollera namnet exakt

<img src="images/Bild.webp" alt="...">

Men filen heter:

images/bild.webp

Bild.webp och bild.webp kan räknas som olika filnamn på webbservern.

Felsök sökvägen

Kontrollera fyra saker

1. Rätt mapp
2. Rätt filnamn
3. Rätt stora och små bokstäver
4. Rätt filändelse

Stora filer

Sortera kolumnen Size

1. Öppna Network.
2. Ladda om sidan.
3. Klicka på Size.
4. Undersök de största filerna först.

Bilder, video, ljud och externa inbäddningar är ofta stora.

Cache

Webbläsaren sparar filer

Det gör sidan snabbare men kan visa en gammal version under felsökning.

Testa utan cache

Hämta filerna på nytt

1. Öppna DevTools och Network.
2. Markera Disable cache.
3. Låt DevTools vara öppet.
4. Ladda om sidan.

På Mac kan du även göra en hård omladdning med ⌘ + ⇧ + R.

Vanliga problem

Fyra saker att leta efter

Lighthouse

Ett automatiskt test

Lighthouse kan ge tips inom:

Välj mobil eller desktop och kör analysen.

Inte ett facit

Använd Lighthouse som stöd

• Resultatet kan variera mellan körningar.
• Dator, nätverk, cache och externa tjänster påverkar.
• Välj ett konkret problem.
• Ändra, testa och kör analysen igen.

Console

Leta efter röda fel

1. Öppna Console.
2. Ladda om sidan.
3. Läs felmeddelandet.
4. Kontrollera filnamn och radnummer.

Vanliga orsaker är saknad JavaScript-fil, saknat element eller kod som körs för tidigt.

Elements

Undersök HTML och CSS

1. Högerklicka på elementet och välj Inspektera.
2. Läs HTML-strukturen till vänster.
3. Läs CSS-reglerna till höger.
4. Slå av en CSS-regel och se vad som ändras.

Mobilvy

Testa smalt och brett

Öppna mobilvyn på Mac med:

⌘ Command + ⇧ Shift + M

• Kontrollera text, bilder och navigation.
• Kontrollera video och formulär.
• Testa även bred desktopvy igen.

Felsök i ordning

En kontrollerad arbetsgång

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

Exempel: bilden syns inte

Följ felet steg för steg

Viktig vana

Ändra en sak i taget

Före publicering

Kontrollera sidan

• Inga röda fel i Console.
• Inga 404-filer i Network.
• Rimliga filstorlekar.
• Fungerande mobilvy.
• Lighthouse-problem är granskade.
• Testat utan cache eller med hård omladdning.

Sammanfattning

Kom ihåg

• Network visar filer, storlek och status.
• 404 betyder att filen inte hittades.
• Console visar fel i JavaScript.
• Elements hjälper med HTML och CSS.
• Lighthouse ger tips, inte ett slutgiltigt facit.
• Ändra en sak i taget och testa igen.