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.
Note: Om du använder Siteground som din hosting provider för WordPress, kan du använda det gratis SiteGround Optimizer plugin som har liknande lazy loaded funktioner.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dick Sijtsma says
Hi there,
during the process of lazyloading (I’m using WP Rocket) there is a short time a placeholder showing for the images. In my situation (Google Chrome) this placeholder has a purple color. Is there a way to influence this color? Or is this a browsersetting?
Thanks!
WPBeginner Support says
You would want to check with WP Rocket for their up to date method for modifying their placeholder.
Administratör
Dick Sijtsma says
Thanks!
But it was Theme related. I found a setting for background color of the image (in Elementor). This color was shown during the lazy-load. So now i know how to change that color. Thanks.
Jiří Vaněk says
Do you have experience with how Lazy Load affects user experience and other Google metrics? Not everyone recommends lazy loading precisely because it can appear unnatural on a website in the long run.
WPBeginner Support says
It would depend on how it is implemented for how it affects the user experience and Google metrics.
Administratör
Jiří Vaněk says
Thank you, I asked because I had lazy load on my website. What surprised me was the fact that PageSpeed Insights flagged it as an issue. I received a recommendation to turn off lazy load. That’s why I was confused. Many people recommend it to speed up a website, but it didn’t work correctly for me, and Google advised me to disable this feature. Anyway, you’re probably right that it depends a lot on the website’s configuration. It caused problems for me. Thank you for your time and response.
Kunj Bihari says
WordPress already provide ”lazyload” so Why we have to use any lazyload plugin?
Suzanne says
Well, this plugin is awesome. My site speed score just went from an embarrassing 42 to a respectable 72!
WPBeginner Support says
Awesome! Glad the plugin could help your site
Administratör
Piotr says
Is that possible to creates a group of photos that will get lazy-loaded?
Example: I have 30 photos and I want to lazy load first 10, when user keeps scrolling- I download another 10 and so on..
daus says
can i combine BJ Lazy Load and photon jetpack?
Naveen says
My site was having many issues and I have learned a lot here which has helped me to grow my blog.
Many Thanks
Franklin says
Thanks for sharing this. I didn’t even think of getting a plugin for lazy images, and I probably will be getting this later.
Alun Price says
I’d love to implement a lazy loader on my website but I’ve heard that they can negatively impact on SEO – is this true????
Dr.Amrita Basu says
Thank you for this. Helped me make a much-needed change quickly .Have downloaded and adjusted the plugin settings
Fahad Khan says
i HAVE JETPACK AS WELL AS CLOUDFLARE APPLIED ON MY WEBSITE, DO I STILL NEED THIS PLUGIN ?
Nagarjun says
Thanks for the advice! Bj Lazy Load works like a charm!
Luke Cavanagh says
Rocket Lazy Load also works very well.