Hur man skjuter upp bilder utanför skärmen i WordPress

Vi vet alla att hastighet är mycket viktigt för SEO och konvertering. Att göra en webbplats snabb kan hjälpa den att rankas högre på Google. Och det kan också göra dina läsare glada. Vem gillar inte en snabb hemsida?

Men när man försöker optimera en webbplats för hastighet kan det vara tidskrävande med så många saker att göra. Jag brukar försöka då och då att testa min hemsida och se till att den inte fungerar dåligt. Man vet aldrig vad som är nytt där ute. I SEO-världen förändras saker väldigt ofta.

Om du har kollat ​​din hemsida igenom verktyg för hastighetstestning som Google PageSpeed ​​Insight eller Web.dev, en av varningarna du kan få är att "skjuta upp bilder utanför skärmen."

I den här artikeln kommer jag att förklara vad det betyder, berätta hur du fixar det och rekommendera plugins som du kan använda för att fixa det.

Du bör dock veta att varför att skjuta upp bilder utanför skärmen kan öka din mobilhastighet, de viktigaste faktorerna som påverkar din hastighet är ditt webbhotell och ditt tema. Här på BloggingTools använder vi Cloudways eftersom det är det snabbaste WordPress-hotellet. Om du inte har råd med Cloudways är Bluehost eller Hostinger bra alternativ. För tema använder vi det snabbaste WordPress-temat som kallas GeneratePress.

Vad betyder defer offscreen-bilder?

Att skjuta upp bilder utanför skärmen innebär att fördröja inläsningen av bilder som inte är synliga för användaren ännu. Detta gör att webbläsaren fokuserar på att bara ladda det som är nödvändigt och i slutändan göra webbplatsen snabbare.

Om du har många bilder på dina inlägg eller hemsida, när en användare besöker din webbplats, börjar webbläsaren genast ladda allt. Om bilderna är många kan det ta mycket tid att rendera sidan till användaren.

Men när du skjuter upp bilder utanför skärmen kommer bilderna bara att laddas när användaren rullar till dem.

Observera att det inte bara är bilder som du kan skjuta upp, utan de flesta av dina webbplatstillgångar kan också skjutas upp tills de behövs.

Hur man skjuter upp bilder utanför skärmen i WordPress

Du kan skjuta upp bilder utanför skärmen genom att ladda bilder på lata håll. Lat loading säkerställer att bilder bara laddas när de behövs. Detta kommer i sin tur att göra webbplatsen snabbare.

När du väl kan ladda bilder och andra tillgångar som hindrar din sida från att laddas snabbt. "Defer offscreen-bilderna" från Google PageSpeed ​​Insight och andra testverktyg försvinner.

Följ dessa steg för att skjuta upp bilder utanför skärmen i WordPress:

1. Installera ett plugin för Lazy loading

Det finns många lazy loading plugins som är tillgängliga gratis i WordPress plugin katalogen. Du kan gå till Plugin, lägg till nytt och skriv sedan lazy loading. Installera vem som helst med bra recensioner.

Men du behöver inte installera något plugin om du redan har plugins som klarar av lazy loading. De flesta caching-plugins har lat laddning. Kontrollera din caching-plugin för lata laddningsalternativ. Bildoptimeringsplugins har oftast lata laddningsalternativ.

Även om du använder Jetpack och autooptimerar, har de lata laddningsalternativ.

2. Aktivera lata laddningsalternativ

När du har installerat plugin, se till att du aktiverar lazy loading alternativet. Om du har ett cache-plugin med en lazy loading-funktion, se till att du aktiverar det alternativet.

3. Rensa cacheminnet.

När lazy loading har aktiverats, rensa din cache och det är allt!

Du kan testa din sida igen, varningen borde vara borta!

Defer offscreen bilder WordPress plugin

Defer off-screen bilder plugins är samma som lazy loading plugins. Här är några nedan:

1. Jetpack

jetpack är en av de mest populära WordPress-plugins med över 5 miljoner aktiva installationer. Om du redan har Jetpack installerat behöver du inte installera ett extra plugin för lat laddning.

Aktivera helt enkelt lazy loading i Jetpack. För att aktivera gå till Jetpack-inställningar och sedan under prestandafliken, scrolla ner och aktivera lazy loading.

2. Autooptimera

Autoptimize är ett mycket populärt prestandaplugin. Om du använder Autoptimize, finns det inget behov av att installera en lazy loading plugin eftersom Autoptimize har samma funktion.

Gå till Autoptimize-inställningar och klicka sedan på fliken bilder och aktivera Lazy loading.

3. WP Rocket

WP Rocket är den mest populära premium WordPress-cache-plugin. Om du använder WP Rocket behöver du inget annat plugin, de har lazy loading aktiverat.

Gå till WP Rocket-inställningar och klicka sedan på media, därifrån kan du aktivera lazy loading.

4. LiteSpeed ​​​​Cache

Om du använder LiteSpeed ​​Cache-plugin, Den har en lata laddningsfunktion. För att aktivera, navigera helt enkelt till mediasektionen och där kan du aktivera lazy loading.

5. a3 Lat last

Om du bara behöver ett plugin för Lazy loading ensam då a3 Lazy Load är ett bra plugin för det. Gå bara till plugin> lägg till nytt. Sök efter a3 Lazy Load. Installera och aktivera. Gå sedan till plugin-inställningarna och aktivera lazy loading.

I allmänhet kommer vissa teman, vissa cache-plugins och vissa bildoptimeringsplugin med lazy loading-funktion.

Vanliga frågor (FAQ)