Layoutforskyvninger
Silktide følger med på siden mens den lastes inn, og måler hvor mye layouten hopper rundt. Slik identifiseres de spesifikke delene av siden som flytter på seg. En stabil side vises én gang og blir værende på plass; en ustabil side forskyver seg etter hvert som bilder, skrifter og innebygde elementer lastes inn.
Målingen er Cumulative Layout Shift (CLS), en av Googles . Den summerer alle uventede bevegelser under innlastingen: 0,1 eller lavere regnes som bra, og 0,25 eller høyere regnes som dårlig.
Hvorfor dette er viktig
Layoutforskyvninger fører til reelle feil. En besøkende skal trykke på en lenke, innholdet hopper i siste øyeblikk, og de trykker på noe annet – noen ganger en annonse, andre ganger «Kjøp» i stedet for «Avbryt». Teksten den besøkende leser, hopper bort under dem. Det får et nettsted til å virke ødelagt og upålitelig på en måte besøkende legger merke til umiddelbart, selv om de ikke kan sette ord på det.
Google bruker også Core Web Vitals, inkludert denne, som et signal for rangering i søk. En ustabil side kan derfor koste både synlighet og tillit.
Slik løser du det
Silktide viser hvilke elementer som ble forskjøvet; løsningen er å reservere plassen deres før de lastes inn.
- Gi hvert bilde og hver video en eksplisitt bredde og høyde (eller et CSS-formatforhold), slik at nettleseren reserverer riktig plass før filen kommer – se Eksplisitte bildestørrelser.
- Reserver plass til annonser, innebygde elementer og annet innhold som lastes inn sent, med en beholder med fast størrelse, selv om den noen ganger er delvis tom.
- Sett aldri inn nytt innhold over det den besøkende allerede leser, med mindre det skjer som svar på en handling de selv har utført.
- Last inn egendefinerte skrifter på en måte som unngår synlig omflytting av tekst – se Synlig tekst under innlasting.
Slik tester Silktide dette
- Last inn siden i en ekte nettleser ved å bruke enhetstypen, tilkoblingshastigheten og teststedet som er konfigurert for hastighetstestene dine.
- Registrer alle uventede layoutbevegelser mens siden lastes inn, og summer dem til sidens Cumulative Layout Shift-poengsum.
- Rapporter hvert element som ble forskjøvet, med elementets og dets individuelle bidrag til totalen.
- Gi siden en vurdering basert på totalpoengsummen, etter den offentlige skalaen for denne målingen: 0,1 eller lavere er bra, 0,25 eller høyere er dårlig.
Feilsøking
Jeg ser ikke at siden flytter på seg
Forskyvninger skjer ofte i de første øyeblikkene av innlastingen, før du begynner å lese, eller bare på tregere tilkoblinger der filer kommer frem over lengre tid. Nettleseren din kan også ha bufret bildene og skriftene på siden, slik at ingenting trenger å lastes inn sent. Elementene som listes opp av kontrollen, viser imidlertid nøyaktig hva som flyttet på seg, selv om det bare var et øyeblikk.
Poengsummen min er annerledes enn i andre verktøy
CLS avhenger av enheten, tilkoblingshastigheten og hvor lenge målingen varer. Silktide måler en kontrollert sideinnlasting med de konfigurerte innstillingene for hastighetstesten din. Verktøy som er basert på reelle besøksdata (eller som fortsetter å måle mens brukere ruller og samhandler), kan derfor med rette rapportere andre verdier for den samme siden.
Les mer
- Sidehastighet og Core Web Vitals – rammeverk for prioritering av CLS og de andre vitals-målingene
- Cumulative Layout Shift (web.dev)
- Optimaliser Cumulative Layout Shift (web.dev)
- Eksplisitte bildestørrelser
- Synlig tekst under innlasting
- Web Vitals