Angiv eksplicitte billedstørrelser

Silktide tjekker, at billederne på din side angiver deres størrelse, så browseren kan reservere den rette mængde plads til hvert billede, før det downloades. Billeder uden en angivet størrelse får siden til at hoppe rundt, når de indlæses.

<!-- Problem: ingen størrelse, browseren reserverer ingen plads -->
<img src="hero.jpg" alt="Forårskollektion">

<!-- Løst: browseren reserverer straks et område på 1200x600 -->
<img src="hero.jpg" alt="Forårskollektion" width="1200" height="600">

Derfor er det vigtigt

Indtil en billedfil indlæses, har en browser ingen mulighed for at vide, hvor stort billedet bliver, medmindre siden angiver det. Uden den oplysning gengiver browseren siden uden et mellemrum og skubber derefter alt ned, når hvert billede indlæses – så tekst hopper midt i en sætning, og besøgende trykker på det forkerte, når målene flytter sig i sidste øjeblik.

Denne hoppen måles som layoutforskydning, der er en del af Googles , som også påvirker placeringen i søgeresultater. Billeder uden angivet størrelse er den mest almindelige årsag til det.

Sådan løser du det

Tilføj attributterne width og height til hvert billede og hver video, så de matcher filens faktiske proportioner. Browseren bruger dem til at reservere plads med det korrekte billedformat, selv når skalerer billedet responsivt.
For responsive billeder skal du beholde attributterne og lade CSS som f.eks. max-width: 100%; height: auto; stå for skaleringen – den reserverede plads skaleres med.
Hvis du ikke kan tilføje attributter, kan du i stedet reservere plads i CSS med egenskaben aspect-ratio på billedet eller dets beholder.
Tjek dit : De fleste indsætter automatisk dimensioner, når billeder tilføjes via editoren, så manglende størrelser stammer ofte fra håndskrevet , skabeloner eller indlejret indhold.

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.
Find hvert billede, der gengives uden en eksplicit størrelse – uden brugbare width/height-attributter og uden CSS, der fastsætter dets dimensioner.
Rapportér hvert billede uden angivet størrelse sammen med dets placering på siden.

Fejlfinding

Siden ser fin ud, når jeg indlæser den

Med cachelagrede billeder eller en hurtig forbindelse kan billeder indlæses så hurtigt, at intet synligt hopper. Besøgende på langsommere netværk ser den samme side blive opbygget lidt efter lidt. Reserveret plads koster intet, når billedet indlæses hurtigt, og forhindrer hoppet, når det ikke gør.

Vil faste størrelser ikke ødelægge mit responsive design?

Nej. Moderne browsere behandler attributterne width og height som billedets billedformat, ikke som en fast størrelse, så CSS stadig kan skalere billedet, så det passer til enhver skærm. Attributterne og CSS til fungerer sammen.