Hitta bilderna som blockerar första renderingen

Prestanda- och SEO-team använder det när första renderingen dröjer och bilder utanför skärmen kan hålla sidan tillbaka.

Hitta bilderna som blockerar första renderingen. Dina uppgifter stannar lokalt medan resultatet är lätt att kontrollera och återanvända.

Så använder du

Klistra in HTML-koden för sidan du vill granska.
Kör granskningen för att hitta bilder som finns i den första renderingen.
Granska de bilder som inte borde laddas omedelbart.
Lägg till lazy loading för bilder som ligger utanför den initiala vyn.

Exempel

En SEO-specialist märker att en startsida tar för lång tid att visa sitt huvudinnehåll. De klistrar in HTML, kör granskningen och upptäcker att sidfotsbilder laddas tidigt. Dessa bilder byts till lazy loading innan sidan testas igen. De ser också till att huvudbilden förblir prioriterad så att den första vyn inte försämras.

Indata

<img src="hero.jpg" alt="Hero">
<img src="icon.png" alt="Icon">

Gränser och format

Granskningen läser HTML-koden du anger, inte ett livebesök på sidan.
Bilder som injiceras av JavaScript eller laddas via CSS kanske inte upptäcks alla.
Lazy loading är inte lämpligt för bilder som syns på den första skärmen.
Kontrollera mobilt beteende igen efter att du ändrat markeringen.
Rapporten bör uppdateras efter varje ändring av markeringen.

Var bearbetningen sker

Den inklistrade HTML-koden undersöks i din webbläsare. Ingen extern begäran görs och den granskade sidan hämtas inte av verktyget. Rapporten stannar lokalt tills du lämnar sidan.

Vanliga frågor

Besöker verktyget min webbplats?

Nej, det laddar inte din sida från en webbadress. Du kopierar HTML-koden till inmatningen själv. Granskningen omfattar därför bara markeringen du anger och kör inte sidans skript.

Vilka bilder bör lazy-loadas?

Fokusera på bilder längre ner på sidan som inte behövs för den första vyn. Sidhuvudsbilder eller huvudproduktbilden behöver ofta laddas omedelbart. Kontrollera resultatet på en riktig skärm.

Varför saknas en bild i rapporten?

Den kan läggas till av JavaScript, användas som CSS-bakgrund eller laddas av en tredjepartskomponent. Granskningen ser bara HTML-koden du klistrar in. Använd webbläsarens utvecklarverktyg för att få en komplett bild.

Behöver jag testa om på mobil efter att ha lagt till lazy loading?

Ja, det är klokt. Verktyget granskar HTML i webbläsaren och gör ingen live-visning, så det visar inte hur sidan faktiskt beter sig på en mobil. Efter ändringen bör du kontrollera bilder i första vyn och längre ner. Lazy loading passar inte för bilder som är synliga direkt. Uppdatera också rapporten efter varje ändring i markupen.

Måste jag köra granskningen igen efter ändringar i HTML?

Ja. Rapporten bygger på HTML-koden du klistrar in, så den bör uppdateras efter varje markupändring. Verktyget gör ingen extern begäran och hämtar inte sidan live. Om du ändrar vilka bilder som lazy-loadas kan nya bilder hamna i första vyn eller längre ner. Kör därför granskningen igen och kontrollera på mobil.