Förinläst LCP-bild
Silktide kontrollerar om huvudbilden på sidan – det största som besökarna ser när sidan läses in – skulle kunna visas tidigare om webbläsaren instruerades att hämta den tidigare. Sidor känns inlästa när det största innehållet visas, så just den här bilden avgör ofta hur snabb hela sidan upplevs.
Tidpunkten då bilden visas mäts som Largest Contentful Paint (LCP), ett av Googles .
Varför detta är viktigt
Webbläsare hämtar filer ungefär i den ordning de upptäcker dem, och huvudbilden upptäcks ofta sent – gömd bakom stilmallar och skript, refererad från eller infogad av ett skript. Resultatet blir en sida som snabbt bygger upp sin struktur och sedan lämnar ett tomrum där det viktigaste innehållet borde finnas.
Eftersom besökare bedömer hastigheten utifrån när huvudinnehållet visas och Google väger in LCP i sökrankningen, är det en av de mest värdefulla hastighetsåtgärderna du kan göra att instruera webbläsaren att prioritera just den här filen.
Så åtgärdar du problemet
- Förladda bilden så att webbläsaren hämtar den direkt när sidan börjar läsas in:
<!-- I <head>: hämta huvudbilden direkt -->
<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">
- Om bilden är ett vanligt
<img>-element kan du i stället lägga tillfetchpriority="high"direkt på det. - Använd aldrig för den här bilden –
loading="lazy"på huvudbilden fördröjer precis det som borde komma först. - Använd helst ett vanligt
<img>-element i stället för en bakgrundsbild i CSS för huvudbilden, så att webbläsaren kan upptäcka den tidigt på egen hand.
Så testar Silktide detta
- Läs in sidan i en riktig webbläsare med den enhetstyp, anslutningshastighet och testplats som har konfigurerats för dina hastighetstester.
- Identifiera det största synliga innehållselementet medan sidan läses in. Om det är en bild kontrollerar vi när webbläsaren upptäckte och hämtade den.
- Om bilden skulle visas tidigare genom att hämtas tidigare rapporterar vi det med den uppskattade tidsbesparingen.
Felsökning
Huvudbilden ändras mellan sidor eller enheter
Förladdningsinstruktioner gäller per sida, och vilket element som är ”störst” kan skilja sig mellan layouter för datorer och mobiler. Mallogik kan generera rätt förladdning för varje sida, och attributen media och imagesrcset för instruktionen hanterar responsiva varianter.
Jag förladdade bilden, men problemet kvarstår
URL:en för förladdningen måste exakt matcha det som sidan till slut renderar – en annan storleksvariant eller en URL som skrivits om av ett räknas inte. Kontrollera också att instruktionen finns direkt i sidans -huvud, och inte läggs till senare av ett skript, eftersom det motverkar syftet.