Sådan udskyder du billeder uden for skærmen i WordPress

Vi ved alle, at hastighed er meget vigtig for SEO og konvertering. At gøre et websted hurtigt kan hjælpe det websted med at rangere højere på Google. Og det kan også gøre dine læsere glade. Hvem kan ikke lide en hurtig hjemmeside?

Men når du forsøger at optimere en hjemmeside til hastighed, kan det være tidskrævende med så mange ting at gøre. Jeg prøver som regel nu og da at teste min hjemmeside og sikre mig, at den ikke fungerer dårligt. Man ved aldrig, hvad der er nyt derude. I SEO-verdenen ændrer tingene sig meget ofte.

Hvis du har tjekket din hjemmeside igennem hastighedstestværktøjer ligesom Google PageSpeed ​​Insight eller Web.dev, er en af ​​de advarsler, du muligvis får, at "udskyde billeder uden for skærmen."

I denne artikel vil jeg forklare, hvad det betyder, fortælle dig, hvordan du løser det, og anbefale plugins, du kan bruge til at rette det.

Du skal dog vide, at hvorfor udskydelse af billeder uden for skærmen kan øge din mobilhastighed, er de vigtigste faktorer, der påvirker din hastighed, din hosting og dit tema. Her på BloggingTools bruger vi Cloudways fordi det er den hurtigste WordPress-hosting. Hvis du ikke har råd til Cloudways, er Bluehost eller Hostinger gode muligheder. Til tema bruger vi det hurtigste WordPress-tema kendt som GeneratePress.

Hvad betyder defer offscreen-billeder?

At udskyde billeder uden for skærmen betyder at forsinke indlæsningen af ​​billeder, der endnu ikke er synlige for brugeren. Dette vil få browseren til at fokusere på kun at indlæse det nødvendige og i sidste ende gøre hjemmesiden hurtigere.

Hvis du har mange billeder på dine indlæg eller hjemmeside, når en bruger besøger dit websted, begynder browseren straks at indlæse alt. Hvis billederne er mange, kan det tage lang tid at gengive siden til brugeren.

Men når du udskyder billeder uden for skærmen, indlæses billederne kun, når brugeren ruller til dem.

Bemærk, at det ikke kun er billeder, du kan udskyde, men de fleste af dine webstedsaktiver kan også udskydes, indtil de er nødvendige.

Sådan udskyder du billeder uden for skærmen i WordPress

Du kan udskyde billeder uden for skærmen ved at lade billeder indlæse. Doven indlæsning vil sikre, at billeder kun indlæses, når de er nødvendige. Dette vil igen gøre hjemmesiden hurtigere.

Når du først er i stand til at doven indlæse billeder og andre aktiver, der forhindrer din side i at indlæse hurtigt. "Defer offscreen-billederne" fra Google PageSpeed ​​Insight og andre testværktøjer forsvinder.

Følg disse trin for at udskyde billeder uden for skærmen i WordPress:

1. Installer et Lazy loading plugin

Der er mange doven indlæsnings-plugins, der er tilgængelige gratis i WordPress-plugin-mappen. Du kan gå til Plugin, tilføje nyt og derefter skrive lazy loading. Installer alle med gode anmeldelser.

Men du behøver ikke installere noget plugin, hvis du allerede har plugins, der kan klare doven indlæsning. De fleste caching-plugins har doven indlæsning. Tjek dit caching-plugin for dovne indlæsningsmuligheder. Billedoptimeringsplugins har for det meste mulighed for doven indlæsning.

Også hvis du bruger Jetpack og autoptimerer, har de dovne indlæsningsmuligheder.

2. Aktiver dovne indlæsningsmuligheder

Når du har installeret plugin'et, skal du sikre dig, at du aktiverer muligheden for lazy loading. Hvis du har et cache-plugin med en lazy loading-funktion, skal du sørge for at aktivere denne mulighed.

3. Ryd din cache.

Når doven indlæsning er aktiveret, skal du rydde din cache, og det er alt!

Du kan teste dit websted igen, advarslen burde være væk!

Defer offscreen billeder WordPress plugin

Defer off-screen billeder plugins er de samme som lazy loading plugins. Her er nogle nedenfor:

1. jetpack

jetpack er et af de mest populære WordPress-plugins med over 5 millioner aktive installationer. Hvis du allerede har Jetpack installeret, behøver du ikke installere et ekstra plugin for doven indlæsning.

Du skal blot aktivere doven indlæsning i Jetpack. For at aktivere skal du gå til Jetpack-indstillinger og derefter rulle ned under ydeevnefanen og aktivere doven indlæsning.

2. Autooptimer

Autoptimize er et meget populært performance plugin. Hvis du bruger Autoptimize, er der ingen grund til at installere et lazy loading plugin, da Autoptimize har samme funktion.

Gå til Autoptimize-indstillinger, klik derefter på fanen billeder og aktiver Lazy loading.

3. WP Rocket

WP Rocket er det mest populære premium WordPress caching plugin. Hvis du bruger WP Rocket, behøver du ikke noget andet plugin, de har lazy loading aktiveret.

Gå til WP Rocket-indstillinger og klik derefter på medier, derfra kan du aktivere doven indlæsning.

4. LiteSpeed ​​Cache

Hvis du bruger LiteSpeed ​​Cache plugin, Den har en doven indlæsningsfunktion. For at aktivere skal du blot navigere til mediesektionen, og der kan du aktivere doven indlæsning.

5. a3 Lazy Load

Hvis du bare har brug for et plugin til Lazy loading alene så a3 Lazy Load er et godt plugin til det. Du skal blot gå til plugin > tilføje nyt. Søg efter a3 Lazy Load. Installer og aktiver. Gå derefter til plugin-indstillinger og aktiver doven indlæsning.

Generelt kommer nogle temaer, nogle cache-plugins og nogle billedoptimeringsplugins med en lazy loading-funktion.

Ofte stillede spørgsmål (FAQ)