Åtgärda hoppande layouter: de vanligaste orsakerna

Q: Vad är den verksammaste enskilda åtgärden?

Att ge varje bild width och height och komplettera i CSS med height: auto . Webbläsaren reserverar då rätt plats från början, medan skalningen bevaras. Den åtgärden utgör i praktiken ofta hälften av problemet.

Det viktigaste

Sex orsaker täcker nästan alla fall – bilder utan mått, efterladdande typsnitt, inbäddat främmande innehåll, i efterhand invisade meddelanden, sent laddad CSS och dynamiskt infogat innehåll.
Värdet mäts regelbundet för bra på den egna datorn: snabb uppkoppling, fylld mellanlagring, annan skärmstorlek.
Den verksammaste enskilda åtgärden är att ge varje bild och varje inbäddat element fasta mått eller ett sidförhållande.
En meddelandebalk som dyker upp efter laddningen och skjuter innehåll nedåt är den näst vanligaste orsaken – och den lättaste att åtgärda.

De sex orsakerna

1. Bilder utan måttangivelser

Utan width och height vet webbläsaren inte hur mycket plats som ska reserveras – texten glider så snart bilden anländer.

Åtgärd: sätt båda attributen och komplettera i CSS med height: auto, så att skalningen bevaras.

2. Efterladdande typsnitt

Texten visas först i ersättningstypsnittet och hoppar vid bytet, eftersom båda löper olika brett.

Åtgärd: ladda typsnittet i förväg, font-display: swap, och anpassa ersättningstypsnittets mått till måltypsnittet.

3. Inbäddat främmande innehåll

Videor, kartor, omdömesmoduler kommer utan känd höjd och skjuter allt nedåt när de anländer.

Åtgärd: ange en platshållare med fast sidförhållande som innehållet laddas in i.

4. I efterhand invisade meddelanden

Ett samtyckesbanner eller en kampanjbalk som dyker upp överst efter laddningen och skjuter hela sidan nedåt.

Åtgärd: reservera plats från början, eller visa in överlagrat i stället för inskjutande.

5. Sent laddad CSS

Blir stilmallen verksam först efter den första uppbyggnaden visas sidan en gång oformgiven och sedan formgiven.

Åtgärd: leverera de regler som behövs för det synliga området tidigt – fullständigt, inte i delar.

6. Dynamiskt infogat innehåll

Ett meddelande, en lista eller ett parti som JavaScript infogar ovanför befintligt innehåll efter laddningen.

Åtgärd: infoga nedanför det synliga området eller reservera plats.

Visste du att…?

Orsak fem är den lömskaste, eftersom den nästan aldrig uppträder lokalt: på en snabb uppkoppling anländer stilmallen före den första uppbyggnaden, och ingenting hoppar. Vid en långsam uppkoppling anländer den efteråt – och hela sidan byggs upp två gånger.

Att leverera en del av CSS:en tidigt räcker då inte: saknas där en regel som berör det synliga området hoppar just det elementet. Antingen fullständigt för det synliga området eller inte alls – halva lösningar är här sämre än inga.

Att mäta rätt

Mätväg	Vad den visar	Fallgrop
Egen dator, utvecklarverktyg	grova ledtrådar	för snabb, mellanlagringen fylld
Laboratorietest i granskningsverktyget	reproducerbart värde	ett villkor, inte verkligheten
Fältdata från verkliga besökare	vad som faktiskt händer	kräver tillräckligt med trafik
Mobilt med strypt uppkoppling	det ärligaste enskilda testet	måste ställas in medvetet

Observera Ett bra lokalt värde säger ingenting. Den som friar på den grundvalen förbiser regelbundet just de fall som besökare faktiskt upplever – långsam uppkoppling, tom mellanlagring, liten skärm. Man mäter strypt eller inte alls.

Från praktiken

Ett fall som fastnar: en sida hade lokalt ett felfritt värde och i granskningsverktyget ett mycket dåligt. Orsaken var en delvis förhandslevererad stilmall – tre regler för partier i den synliga delen saknades i den.

Lokalt märktes det aldrig, eftersom den fullständiga filen anlände snabbare än den första uppbyggnaden. Under strypning anlände den efteråt, och tre partier hoppade. Lärdomen: vid hoppande layouter är det lokala intrycket inget motbevis, utan bara ett annat scenario – och oftast det mer orealistiska.

Ordningen vid åtgärdandet

Kontrollera alla bilder. width och height satta, i CSS height: auto. Oftast hälften av problemet.
Rama in inbäddat främmande innehåll. Platshållare med fast sidförhållande.
Kontrollera invisade meddelanden. Överlagrat i stället för inskjutande.
Kontrollera typsnittsladdningen. Ladda i förväg, anpassa ersättningstypsnittet.
Kontrollera CSS-leveransen. Fullständig för det synliga området.
Mät på nytt – strypt. Och det efter varje enskilt steg, annars vet man inte vad som verkade.

Prompt

Hjälp mig att hitta och åtgärda hoppande layouter på vår
sida.

Fakta:
- Uppmätt värde för layoutförskjutning: [Värde, verktyg,
  mobilt eller skrivbord]
- Element som enligt mätningen förskjuter: [Lista, om känd]
- Bilder med width/height-attribut? [ja / nej / delvis]
- Hur levereras CSS? [extern fil / inbäddad i förväg /
  delvis i förväg]
- Inbäddat främmande innehåll: [Videor, kartor, omdömen, chatt]
- Visas något in efter laddningen? [Banner, meddelande,
  kampanjbalk]
- Hur laddas typsnitt? [Uppgift]

Uppgifter:
1. Placera in varje förskjutande element under en av de sex orsakerna:
   bilder utan mått, efterladdande typsnitt, inbäddat
   främmande innehåll, i efterhand invisade meddelanden, sent
   laddad CSS, dynamiskt infogat innehåll.
2. Nämn per orsak den konkreta åtgärden med kodexempel.
3. Om CSS bara levereras delvis i förväg: förklara
   varför det kan vara sämre än inte alls, och vad som ska
   kontrolleras.
4. Ge mig en ordning efter verkan per insats.
5. Säg mig hur jag borde mäta efter varje steg, så att jag
   vet vad som verkade.

Hitta inte på mätvärden.

Slutsats

Sex orsaker, och den första – bilder utan måttangivelser – utgör oftast hälften. Den är åtgärdad på en halvtimme och verkar omedelbart.

Den svårare delen är mätandet: den som prövar lokalt mäter ett scenario som knappt någon besökare upplever. Mät strypt, efter varje steg för sig – annars åtgärdar man tre saker och vet inte vilken av dem som verkade.

Vanliga frågor

Varför hoppar innehållet när en sida laddas?

Oftast av en av sex orsaker: bilder utan måttangivelser, efterladdande typsnitt med annan teckenbredd, inbäddat främmande innehåll utan känd höjd, i efterhand invisade meddelandebalkar, CSS som blir verksam sent, och innehåll som infogas av JavaScript ovanför det synliga området.

Vad är den verksammaste enskilda åtgärden?

Att ge varje bild width och height och komplettera i CSS med height: auto. Webbläsaren reserverar då rätt plats från början, medan skalningen bevaras. Den åtgärden utgör i praktiken ofta hälften av problemet.

Varför är värdet bättre lokalt än i granskningsverktyget?

För att uppkopplingen på den egna datorn är snabb och mellanlagringen fylld: stilmallar, typsnitt och bilder anländer före den första sidbyggnaden, och ingenting hoppar. Under realistiska villkor anländer de efteråt – därför måste man mäta strypt.

Kan delvis förhandslevererad CSS skada?

Ja. Saknas i den förhandslevererade delen en regel som berör ett parti i den synliga delen hoppar just det elementet så snart den fullständiga stilmallen anländer. Antingen fullständigt för det synliga området eller inte alls – halva lösningar är här sämre än inga.

Hur åtgärdar man hoppande samtyckesbanner?

Genom att visa in dem överlagrat i stället för inskjutande – alltså att de ligger över innehållet utan att skjuta det nedåt. Alternativt går platsen att reservera från början. Den orsaken är en av de vanligaste och samtidigt den lättaste att åtgärda.