Layoutforskydninger
Silktide overvåger din side, mens den indlæses, og måler, hvor meget layoutet springer rundt, samt identificerer de specifikke dele af siden, der flytter sig. En stabil side vises én gang og bliver stående; en ustabil side forskyder sig, når billeder, skrifttyper og indlejret indhold indlæses.
Målingen er Cumulative Layout Shift (CLS), en af Googles . Den lægger alle uventede bevægelser under indlæsningen sammen: 0,1 eller mindre betragtes som godt, og 0,25 eller mere betragtes som dårligt.
Hvorfor dette er vigtigt
Layoutforskydninger fører til reelle fejl. En besøgende er ved at trykke på et link, indholdet springer i sidste øjeblik, og de trykker på noget andet – nogle gange en annonce, andre gange "Køb" i stedet for "Annuller". Tekst, som den besøgende læser, springer væk under dem. Det får et website til at føles ødelagt og utroværdigt på en måde, som besøgende straks bemærker, selv hvis de ikke kan sætte ord på det.
Google bruger også Core Web Vitals, herunder denne, som et signal til søgerangering, så en ustabil side kan koste både synlighed og goodwill.
Sådan løser du det
Silktide viser, hvilke elementer der forskød sig; løsningen er at reservere plads til dem, før de indlæses.
- Giv hvert billede og hver video en eksplicit bredde og højde (eller et CSS-højde-bredde-forhold), så browseren reserverer den rigtige plads, før filen ankommer – se Eksplicitte billedstørrelser.
- Reservér plads til annoncer, indlejret indhold og andet indhold, der indlæses sent, med en beholder i fast størrelse, også selv om den nogle gange er delvist tom.
- Indsæt aldrig nyt indhold over det, den besøgende allerede læser, medmindre det sker som reaktion på deres egen handling.
- Indlæs brugerdefinerede skrifttyper på en måde, der undgår synlig ombrydning af tekst – se Synlig tekst under indlæsning.
Sådan tester Silktide dette
- Indlæs siden i en rigtig browser ved hjælp af den enhedstype, forbindelseshastighed og testplacering, der er konfigureret til dine hastighedstests.
- Registrér hver uventet layoutbevægelse, mens siden indlæses, og læg dem sammen til sidens Cumulative Layout Shift-score.
- Rapportér hvert element, der forskød sig, med dets og dets individuelle bidrag til totalen.
- Bedøm siden ud fra dens samlede score på den offentlige skala for denne måling: 0,1 eller mindre er godt, og 0,25 eller mere er dårligt.
Fejlfinding
Jeg kan ikke se siden flytte sig
Forskydninger sker ofte i de første øjeblikke af indlæsningen, før du begynder at læse, eller kun på langsommere forbindelser, hvor filer ankommer spredt over tid. Din browser kan også have sidens billeder og skrifttyper i cachen, så intet behøver at ankomme sent. De elementer, der er angivet af tjekket, viser præcist, hvad der flyttede sig, uanset hvor kortvarigt det var.
Min score er anderledes end i andre værktøjer
CLS afhænger af enhed, forbindelseshastighed og, hvor langt målingen strækker sig. Silktide måler en kontrolleret sideindlæsning med dine konfigurerede indstillinger for hastighedstest; værktøjer baseret på data fra rigtige besøgende (eller som fortsætter med at måle, mens brugere scroller og interagerer) kan med rette rapportere forskellige værdier for den samme side.
Få mere at vide
- Sidehastighed og Core Web Vitals - prioriteringsramme for CLS og de øvrige målepunkter
- Cumulative Layout Shift (web.dev)
- Optimer Cumulative Layout Shift (web.dev)
- Eksplicitte billedstørrelser
- Synlig tekst under indlæsning
- Web Vitals