Hur man enkelt lazy loadar images i WordPress (2 sätt)

Ingen vill vänta på att en långsam sida ska laddas, som när ett blogginlägg innehåller massor av bilder. Även om de ser fantastiska ut kan det vara frustrerande för dina besökare att vänta på att få se dem.

Det är där latladdning kan hjälpa till. Det är ett smart trick som innebär att bilder bara laddas när de behövs. Istället för att ladda alla bilder på en sida på en gång väntar din webbplats tills en besökare scrollar ner till den plats där en bild ska visas.

Det innebär snabbare laddningstider för sidorna, nöjdare besökare och till och med en boost för din webbplats SEO.

Det bästa är att det är enklare än du tror att lägga till lazy loading på din WordPress-webbplats. I den här artikeln guidar vi dig genom processen så att du kan njuta av en snabbare och mer effektiv webbplats.

Varför lazy loaded images i WordPress?

Lazy loading WordPress-bilder kan snabba upp din webbplats och ge en bättre användarupplevelse.

Ingen gillar långsamma websites. Faktum är att en studie av website-prestanda visade att en fördröjning på 1 sekund i sidans laddningstid leder till 7% färre konverteringar, 11% färre pages och en 16% minskning av kundnöjdheten.

Search engines som Google gillar inte heller webbplatser som hämtar långsamt. Det är därför som snabbare webbplatser rankas högre i sökresultaten.

Imagely är det element som tar längst tid att ladda på din WordPress site jämfört med andra webbelement. Om du addar många images till dina artiklar ökar varje image laddningstiden för din page.

Ett sätt att hantera den här situationen är att använda en CDN-tjänst som gillar BunnyCDN. Ett CDN låter användare ladda ner images från en web server som är close to dem och minskar hastigheten för att hämta hem websites.

Dina images kommer dock fortfarande att hämtas och påverka den totala laddningstiden för page. För att komma förbi denna issue kan du fördröja laddningen av images genom att implementera lazy loaded på din website.

Hur fungerar lazy loading av images?

Istället för att ladda all your images på en gång, lazy loading downloads only the images visible on the user’s screen. Alla andra images ersätts med en placeholder-bild eller ett tomt utrymme.

När en användare rullar ner på sidan hämtar your website images som är synliga i webbläsarens area.

Lazy loaded kan vara mycket fördelaktigt för din WordPress blogg:

• Det minskar den första tiden för att hämta en page så att användarna ser din site snabbare.
• Den sparar bandbredd genom att bara leverera images som hosteds, vilket kan save you money on WordPress webbhotell kostnader.

När WordPress 5.5 släpptes add to lazy loading som en standard funktion.

Men om du vill customize hur dina images lazy loaded och även lazy loaded bakgrundsbilder, då måste du använda en WordPress plugin.

Låt oss ta en titt på hur man lazy loaded images i WordPress med hjälp av två olika tillägg. Du kan använda snabblänkarna under för att hoppa direkt till den metod du vill använda:

Metod 1: Lazy Load Images i WordPress med WP Rocket

Vi rekommenderar att du använder WP Rocket plugin för att lazy loaded images i WordPress. Det är det bästa pluginet för caching i WordPress på marknaden som låter dig enkelt aktivera lazy loading av images.

Notis: Det är ett mycket kraftfullt tillägg som hjälper dig att optimera hastigheten på din page utan att behöva känna till komplexa tekniska termer eller konfigurera expertinställningar.

Direkt från boxen kommer alla deras rekommenderade standardinställningar för caching att göra din WordPress website mycket snabbare.

Det första du behöver göra är att installera och aktivera WP Rocket plugin. För mer details, you can see our guide on how to install a WordPress plugin.

För att aktivera lazy loading av images behöver du bara kontrollera några boxar. Du kan även aktivera lazy loaded för videoklipp, vilket kommer att förbättra hastigheten på din site ännu mer.

Allt du behöver göra är att gå till Settings ” WP Rocket i din WordPress dashboard och clicka på tabben ’Media’. Sedan kan du rulla till ”LazyLoad”-sektionen och kontrollera boxarna bredvid ”Aktivera för images” och ”Aktivera för iframes och videoklipp”.

Mer detaljer finns i vår guide om hur du installerar och konfigurerar WP Rocket på rätt sätt i WordPress.

Metod 2: Lazy loaded images i WordPress med Optimole

Den här metoden använder det gratis tillägget Optimole. Det är ett av de bästa WordPress-pluginsen för bildkomprimering som låter dig enkelt aktivera lazy loading av bilder.

Om du får över 5 000 besökare per månad behöver du premiumversionen av Optimole. För mer detaljer, se vår kompletta Optimole review.

Först måste du installera och aktivera Optimole plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

När du aktiveras kommer du att se en vy där du ombeds registrera dig för en API key. Du kan också hitta den här vyn genom att navigera till Optimole i admin menu.

Du måste se till att den email address som anges är korrekt och sedan clicka på knappen ”Create & connect your account”. Alternativt, om du är en befintlig användare, klickar du bara på knappen ”Jag har redan en API key”.

Du kan behöva vänta några sekunder medan pluginet ansluter till Optimole. Efter det kommer pluginet automatiskt att börja optimera dina images så att dina besökare nu ser de bästa bilderna för sina devices.

Medan det händer kan du clicka på tabben ”Settings” för att konfigurera lazy load.

Här måste du se till att inställningen ”Scale images and & Lazy load” är aktiverad. Detta kommer att generera images baserat på din besökares storlek på vy och förbättra hastigheten på hämtar.

Klicka sedan på alternativet ”Advanced” i menyn och välj ”Lazyload”. På den här vyn finns det några olika settings som låter dig customize hur dina images ska lazy loaded.

Först kan du justera inställningen ”Exclude first number of images from lazyload”. Detta kommer att stoppa bilder högst upp i dina inlägg eller pages från lazy loading, så att images above the fold alltid kommer att visas.

You can set this to 0 if you want every image to lazy loaded.

Det finns några andra avancerade inställningar för lazy loaded i Optimole som du kan kontrollera. Dessa inställningar är aktiverade som standard.

Den första är inställningen ”Scale Images”. Detta kommer att skala images till besökarens storlek på vyn och göra att din page laddas snabbare.

Efter det kommer du att se inställningen ”Enable lazyload for background images”. Detta kommer att lazy loada dina bakgrundsbilder, som kan vara de största bilderna på din website.

En annan inställning är lazy loading av inbäddade videoklipp och iframes. Om du har mycket embeded video content, då kommer du att vilja lämna den här inställningen på. Den kommer att hämta en placeholder image istället för videoklippet. När du klickar på placeholderen laddas hela videoklippet.

Du kan fortsätta att customize dessa settings och se vad som fungerar bäst för din website och dina images.

Innan du lämnar plugin-inställningarna, se till att du klickar på knappen ”Save changes” längst ner på sidan.

Bonustips för att optimera dina images i WordPress

Även om lazy loading hjälper till att förbättra webbplatsens laddningshastighet finns det några andra sätt att optimera dina WordPress images för bästa möjliga prestanda.

Vi rekommenderar till exempel att du komprimerar dina images innan du uppladdar dem till din website med ett verktyg som TinyPNG eller JPEGmini. Alternativt kan du använda ett automatiserat plugin för komprimering av images som Optimole eller EWWW Image Optimizer.

Det är också viktigt att välja rätt WordPress bildstorlek och filformat för dina images. JPEG är bäst för foton eller bilder med många färger, PNG är lämplig för enkla eller transparenta bilder, och GIF är endast för animerade bilder.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lazy loadar bilder i WordPress. Du kanske också vill se vår handledning på om hur du enkelt optimerar bilder för webben utan att förlora kvalitet och våra expertval av de bästa filuppladdningspluginsen för WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.