Springende layouts verhelpen: de meest voorkomende oorzaken
Een springend layout is de fout die bezoekers het sterkst voelen en ontwikkelaars het zeldzaamst zien – omdat er op een snelle machine met een gevulde cache niets springt. Zes oorzaken dekken vrijwel alle gevallen af.
Het belangrijkste kort
- Zes oorzaken dekken vrijwel alle gevallen af – afbeeldingen zonder afmetingen, later ladende lettertypen, ingesloten inhoud van derden, achteraf getoonde meldingen, laat geladen CSS en dynamisch ingevoegde inhoud.
- De waarde wordt op de eigen machine geregeld te gunstig gemeten: snelle verbinding, gevulde cache, andere schermgrootte.
- De doeltreffendste losse maatregel is elk beeld en elk ingesloten element vaste afmetingen of een beeldverhouding mee te geven.
- Een meldingsbalk die na het laden verschijnt en inhoud omlaag duwt, is de op één na vaakst voorkomende oorzaak – en de makkelijkst te verhelpen.
De zes oorzaken
1. Afbeeldingen zonder afmetingen
Zonder width en height weet de browser niet hoeveel ruimte er moet worden gereserveerd – de tekst schuift zodra het beeld binnenkomt.
Oplossing: beide attributen instellen en in het CSS height: auto toevoegen, zodat de schaling behouden blijft.
2. Later ladende lettertypen
De tekst verschijnt eerst in het vervangende lettertype en springt bij de wissel, omdat beide een andere breedte hebben.
Oplossing: lettertype vooraf laden, font-display: swap, en het vervangende lettertype in zijn maten gelijktrekken met het doellettertype.
3. Ingesloten inhoud van derden
Video's, kaarten en beoordelingsblokken komen binnen zonder bekende hoogte en duwen bij aankomst alles omlaag.
Oplossing: een plaatshouder met een vaste beeldverhouding vooraf plaatsen waarin de inhoud wordt geladen.
4. Achteraf getoonde meldingen
Een toestemmingsbanner of een actiebalk die na het laden bovenaan verschijnt en de hele pagina omlaag duwt.
Oplossing: vanaf het begin ruimte reserveren, of overlappend tonen in plaats van inschuivend.
5. Laat geladen CSS
Wordt het stylesheet pas na de eerste opbouw van kracht, dan wordt de pagina eerst ongestileerd en daarna gestileerd weergegeven.
Oplossing: de regels die voor het zichtbare gedeelte nodig zijn vroeg uitleveren – volledig, niet in delen.
6. Dynamisch ingevoegde inhoud
Een melding, een lijst of een blok dat JavaScript na het laden boven bestaande inhoud invoegt.
Oplossing: onder het zichtbare gedeelte invoegen of ruimte reserveren.
Wist je dat?
Oorzaak vijf is de verraderlijkste, omdat ze lokaal vrijwel nooit optreedt: op een snelle verbinding komt het stylesheet vóór de eerste opbouw aan, en springt er niets. Op een trage verbinding komt het erna – en bouwt de hele pagina zich twee keer op.
Een deel van het CSS vroeg uitleveren volstaat daarbij niet: ontbreekt daarin een regel die het zichtbare gedeelte betreft, dan springt precies dat element. Ofwel volledig voor het zichtbare gedeelte, ofwel helemaal niet – halve oplossingen zijn hier slechter dan geen.
Goed meten
| Meetweg | Wat hij toont | Valkuil |
|---|---|---|
| Eigen machine, ontwikkelaarsgereedschap | grove aanwijzingen | te snel, cache gevuld |
| Laboratoriumtest in het toetsgereedschap | reproduceerbare waarde | één omstandigheid, niet de werkelijkheid |
| Veldgegevens van echte bezoekers | wat er werkelijk gebeurt | vraagt genoeg verkeer |
| Mobiel met afgeknepen verbinding | de eerlijkste losse test | moet je bewust instellen |
Een geval dat bijblijft: een pagina had lokaal een onberispelijke waarde en in het toetsgereedschap een zeer slechte. De oorzaak was een gedeeltelijk vooraf uitgeleverd stylesheet – drie regels voor blokken in het zichtbare gedeelte ontbraken erin.
Lokaal viel dat nooit op, omdat het volledige bestand sneller aankwam dan de eerste opbouw. Onder afgeknepen verbinding kwam het erna, en sprongen er drie blokken. De les: bij springende layouts is de lokale indruk geen tegenbewijs, maar slechts een ander scenario – en meestal het onrealistischere.
De volgorde bij het verhelpen
- Alle afbeeldingen nalopen.
widthenheightingesteld, in het CSSheight: auto. Meestal de helft van het probleem. - Ingesloten inhoud van derden inkaderen. Plaatshouder met een vaste beeldverhouding.
- Getoonde meldingen nalopen. Overlappend in plaats van inschuivend.
- Het laden van lettertypen nalopen. Vooraf laden, vervangend lettertype gelijktrekken.
- De CSS-uitlevering nalopen. Volledig voor het zichtbare gedeelte.
- Opnieuw meten – afgeknepen. En wel na elke afzonderlijke stap, anders weet je niet wat er heeft gewerkt.
Help me springende layouts op onze pagina te vinden en te verhelpen. Gegevens: - Gemeten waarde voor layoutverschuiving: [waarde, gereedschap, mobiel of desktop] - Elementen die volgens de meting verschuiven: [lijst, indien bekend] - Afbeeldingen met width/height-attributen? [ja / nee / deels] - Hoe wordt CSS uitgeleverd? [extern bestand / vooraf ingesloten / deels vooraf] - Ingesloten inhoud van derden: [video's, kaarten, beoordelingen, chat] - Wordt er na het laden iets getoond? [banner, melding, actiebalk] - Hoe worden lettertypen geladen? [opgave] Opdrachten: 1. Deel elk verschuivend element in bij een van de zes oorzaken: afbeeldingen zonder afmetingen, later ladende lettertypen, ingesloten inhoud van derden, achteraf getoonde meldingen, laat geladen CSS, dynamisch ingevoegde inhoud. 2. Noem per oorzaak de concrete oplossing met codevoorbeeld. 3. Als CSS slechts deels vooraf wordt uitgeleverd: leg uit waarom dat slechter kan zijn dan helemaal niet, en wat er moet worden nagelopen. 4. Geef me een volgorde naar werking per inspanning. 5. Zeg me hoe ik na elke stap zou moeten meten, zodat ik weet wat er heeft gewerkt. Verzin geen meetwaarden.
Conclusie
Zes oorzaken, en de eerste – afbeeldingen zonder afmetingen – maakt meestal de helft uit. Ze is in een half uur verholpen en werkt meteen.
Het moeilijkere deel is het meten: wie lokaal toetst, meet een scenario dat vrijwel geen bezoeker meemaakt. Afgeknepen meten, na elke stap afzonderlijk – anders verhelp je drie dingen en weet je niet welk daarvan heeft gewerkt.
Veelgestelde vragen
Waarom springt de inhoud tijdens het laden van een pagina?
Meestal door een van zes oorzaken: afbeeldingen zonder afmetingen, later ladende lettertypen met een andere breedte, ingesloten inhoud van derden zonder bekende hoogte, achteraf getoonde meldingsbalken, CSS dat pas laat van kracht wordt, en door JavaScript ingevoegde inhoud boven het zichtbare gedeelte.
Wat is de doeltreffendste losse maatregel?
Elk beeld width en height meegeven en in het CSS height: auto toevoegen. De browser reserveert dan van meet af aan de juiste ruimte, terwijl de schaling behouden blijft. Die maatregel maakt in de praktijk vaak de helft van het probleem uit.
Waarom is de waarde lokaal beter dan in het toetsgereedschap?
Omdat op de eigen machine de verbinding snel en de cache gevuld is: stylesheets, lettertypen en afbeeldingen komen vóór de eerste pagina-opbouw aan, en er springt niets. Onder realistische omstandigheden komen ze erna – daarom moet er afgeknepen worden gemeten.
Kan gedeeltelijk vooraf uitgeleverd CSS schaden?
Ja. Ontbreekt in het vooraf uitgeleverde deel een regel die een blok in het zichtbare gedeelte betreft, dan springt precies dat element zodra het volledige stylesheet binnenkomt. Ofwel volledig voor het zichtbare gedeelte, ofwel helemaal niet – halve oplossingen zijn hier slechter dan geen.
Hoe verhelp je springende toestemmingsbanners?
Door ze overlappend te tonen in plaats van inschuivend – dus over de inhoud te laten liggen zonder die omlaag te duwen. Als alternatief kan de ruimte vanaf het begin worden gereserveerd. Deze oorzaak is een van de meest voorkomende en tegelijk de makkelijkst te verhelpen.
Marketing die zichzelf opzet
De bèta van de Studio Engine is open. Reserveer je plek en denk vanaf het begin mee.
Deelnemen aan de bèta →