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

Ingen gillar en långsam webbplats. Om dina sidor tar för lång tid att ladda, kommer besökare att lämna innan de ens ser ditt innehåll.

Bilder är ofta huvudorsaken till långsam laddningshastighet. De tar upp mest bandbredd, vilket sänker din prestanda och dina sökrankningar.

Vi har optimerat hundratals webbplatser för hastighet, och lazy loading är en av de mest effektiva snabba vinster vi rekommenderar. Det hindrar bilder från att laddas förrän användaren faktiskt scrollar ner för att se dem.

I den här guiden visar vi dig hur du enkelt kan lazy load-ladda bilder i WordPress för att omedelbart öka din webbplatshastighet.

Varför lazy loadar bilder i WordPress?

Lat laddning av WordPress-bilder kan snabba upp din webbplats och erbjuda en bättre användarupplevelse.

Ingen gillar långsamma webbplatser. Faktum är att en studie om webbplatsens prestanda visade att en fördröjning på 1 sekund i sidladdningstiden leder till 7 % färre konverteringar, 11 % färre sidvisningar och en minskning av kundnöjdheten med 16 %.

Sökmotorer som Google gillar inte heller långsamt laddande webbplatser. Det är därför snabbare webbplatser rankas högre i sökresultaten.

Bilder tar mest tid att ladda på din WordPress-webbplats jämfört med andra webbningredienser. Om du lägger till många bilder i dina artiklar, ökar varje bild din sidladdningstid.

Ett sätt att hantera denna situation är att använda en CDN-tjänst som BunnyCDN, eller ett enklare alternativ som Envira CDN. En CDN låter användare ladda ner bilder från en webbserver som är närmast dem och minskar webbplatsens laddningstider.

Dina bilder kommer dock fortfarande att laddas och påverka den totala laddningstiden för sidan. För att komma förbi detta problem kan du fördröja bildladdningen genom att implementera lazy load på din webbplats.

Hur fungerar lazy loading av bilder?

Istället för att ladda alla dina bilder samtidigt laddar lazy loading bara ner de bilder som syns på användarens skärm. Den ersätter alla andra bilder med en platshållarbild eller ett tomt utrymme.

När en användare scrollar ner på sidan laddar din webbplats bilder som är synliga i webbläsarens visningsområde.

Lat laddning kan vara mycket fördelaktigt för din WordPress-blogg:

• Det minskar den initiala laddningstiden för webbsidan så att användarna ser din webbplats snabbare.
• Det sparar bandbredd genom att endast leverera bilder som visas, vilket kan spara pengar på WordPress-värdkostnader.

Vad är inbyggd lazy loading i WordPress?

Sedan WordPress 5.5 inkluderar plattformen 'inbyggd lazy loading' som standard. Detta innebär att WordPress automatiskt lägger till HTML-attributet loading="lazy" till dina img-taggar.

Detta talar om för moderna webbläsare (som Chrome, Firefox och Safari) att fördröja laddningen av bilden tills användaren scrollar nära den.

Om WordPress gör detta automatiskt, varför behöver jag ett plugin?

Medan inbyggd lat laddning är en bra början, är den inte perfekt. Den förlitar sig helt på besökarens webbläsare för att bestämma när en bild ska laddas. Dedikerade plugins som WP Rocket erbjuder bättre prestanda eftersom de:

• Lazy loadar bakgrundsbilder (vilket inbyggd WordPress inte kan göra).
• Lazy loadar iframes och videor specifikt.
• Använder avancerade skript som laddar bilder snabbare än standardbeteendet i webbläsaren.

Låt oss titta på hur man lazy loadar bilder i WordPress med hjälp av två olika plugins. Du kan använda snabblänkarna nedan för att hoppa direkt till den metod du vill använda:

Metod 1: Lazy Load-bilder i WordPress med WP Rocket

Vi rekommenderar att använda pluginet WP Rocket för lat laddning av bilder i WordPress. Det är det bästa WordPress-cachepluginet på marknaden som låter dig enkelt aktivera lat laddning av bilder.

Bortsett från det är det här ett mycket kraftfullt plugin som hjälper dig att optimera din sidhastighet utan att behöva känna till komplexa tekniska termer eller konfigurera experinställningar.

Direkt ur lådan kommer alla deras rekommenderade standardinställningar för cache att avsevärt snabba upp din WordPress-webbplats.

Det första du behöver göra är att installera och aktivera pluginet WP Rocket. För mer information kan du se vår guide om hur man installerar ett WordPress-plugin.

För att aktivera lazy loading av bilder behöver du bara kryssa i några rutor. Du kan till och med aktivera lazy loading för videor, vilket kommer att förbättra din webbplatshastighet ännu mer.

Allt du behöver göra är att gå till Inställningar » WP Rocket i din WordPress-instrumentpanel och klicka på fliken 'Media'. Sedan kan du scrolla till avsnittet 'LazyLoad' och markera rutorna bredvid 'Aktivera för bilder' och 'Aktivera för iframes och videor'.

För mer information, se vår guide om hur man korrekt installerar och konfigurerar WP Rocket i WordPress.

Metod 2: Lazy load-bilder i WordPress med Optimole

Denna metod använder det kostnadsfria pluginet Optimole. Det är ett av de bästa WordPress-bildkomprimeringspluginsen som låter dig enkelt aktivera lat laddning av bilder.

Om din trafik överstiger gränserna för gratisplanen, behöver du premiumversionen av Optimole. För mer information, se vår kompletta Optimole-recension.

Först måste du installera och aktivera Optimole-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Vid aktivering ser du en skärm som ber dig att registrera dig för en API-nyckel. Du kan också hitta den här skärmen genom att navigera till Optimole i adminmenyn.

Du måste se till att e-postadressen som anges är korrekt och klicka sedan på knappen ‘Skapa & anslut ditt konto’. Alternativt, om du redan är en befintlig användare, klickar du bara på knappen ‘Jag har redan en API-nyckel’.

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

Medan det händer kan du klicka på fliken 'Inställningar' för att konfigurera lazy load.

Här måste du se till att inställningen 'Skala bilder och & Lazy load' är aktiverad. Detta kommer att generera bilder baserat på besökarens skärmstorlek och förbättra laddningshastigheterna.

Klicka sedan på menyalternativet 'Avancerat' och välj 'Lazyload'. På den här skärmen finns det några olika inställningar som låter dig anpassa hur dina bilder laddas med lazy load.

Först kan du justera inställningen 'Exkludera första antalet bilder från lazyload'.

Detta stoppar bilder högst upp på dina inlägg eller sidor från att laddas lat. Detta säkerställer att bilder ovanför vecket laddas omedelbart, vilket förbättrar din Largest Contentful Paint (LCP)-poäng för bättre SEO.

Du kan ställa in detta till 0 om du vill att varje bild ska laddas med lazy loading.

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

Den första är inställningen 'Skala bilder'. Detta skalar bilder till besökarens skärmstorlek och gör att din sida laddas snabbare.

Därefter ser du inställningen 'Aktivera lat laddning för bakgrundsbilder'. Detta kommer att ladda dina bakgrundsbilder lat, vilket kan vara de största bilderna på din webbplats.

En annan inställning är lat laddning av inbäddade videor och iframes. Om du har mycket inbäddat videoinnehåll, vill du lämna denna inställning på. Den kommer att ladda en platshållarbild istället för videon. När platshållaren klickas, laddas hela videon.

Du kan fortsätta att anpassa dessa inställningar och se vad som fungerar bäst för din webbplats och dina bilder.

Innan du avslutar plugininställningarna, se till att klicka på knappen 'Spara ändringar' längst ner på sidan.

Felsökning av vanliga lazy load-problem

Ibland kan aktivering av lazy load göra att bilder försvinner eller ser suddiga ut.

Här är vanliga lösningar:

1. Bilder visas inte

Detta händer ofta om du har två lazy load-plugins aktiva samtidigt (t.ex. WP Rocket och ditt temas inbyggda lazy load). Se till att bara använda en metod för att undvika konflikter.

2. Bilder ovanför vecket visas sent

Om din logotyp eller headerbild dyker upp efter resten av sidan kan det skada din användarupplevelse. Som nämnts i metoderna ovan bör du exkludera de första 2-3 bilderna på din sida från lazy loading för att åtgärda detta.

3. Layoutförskjutning (CLS)

Om ditt innehåll ‘hoppar’ när en bild laddas, skadar det din SEO-poäng. För att förhindra detta, se till att alla dina bilder har definierade attribut för width och height. WordPress gör detta automatiskt, men vissa teman kan åsidosätta det.

Vanliga frågor om lazy loading av bilder

Vi vet att du kanske fortfarande har några frågor om lazy loading i WordPress. Här är svaren på några av de vanligaste vi får.

1. Laddar WordPress automatiskt bilder med lazy load?

Ja, sedan lanseringen av WordPress 5.5 är grundläggande lat laddning för bilder en standardfunktion. Denna inbyggda funktion är dock begränsad och gäller inte bakgrundsbilder, iframes eller videor. För att säkerställa att all din media är optimerad rekommenderar vi att du använder ett dedikerat plugin som WP Rocket eller Optimole.

2. Är lazy loading bra för SEO?

Absolut. Lat laddning förbättrar avsevärt din sidladdningshastighet, vilket är en nyckelfaktor för användarupplevelsen. Sökmotorer som Google gynnar snabbare webbplatser, så att förbättra din hastighet med lat laddning kan ge din webbplats en bra skjuts i sökrankingen.

3. Vilket är det bästa lazy load-pluginet för WordPress?

För allsidig prestanda och enkel användning rekommenderar vi WP Rocket. Det är det bästa prestanda-pluginet på marknaden, och det inkluderar en kraftfull och enkel funktion för lat laddning med bara ett par klick. Om du letar efter ett utmärkt gratisalternativ är Optimole ett utmärkt val som också erbjuder robusta alternativ för lat laddning.

4. Kan man lazy load:a videor i WordPress?

Ja, det kan du och du bör! Detta är ett fantastiskt sätt att förbättra hastigheten på sidor som innehåller mycket inbäddat videoinnehåll. Både WP Rocket och Optimole låter dig enkelt aktivera lazy loading för dina videor, vilket ersätter dem med en platshållarbild tills en användare klickar för att spela upp.

5. Ska du lazy load-bilder ovanför vecket?

Det är generellt bästa praxis att undanta bilder högst upp på din sida (ovanför vecket) från lazy loading. Detta säkerställer att det första dina besökare ser laddas omedelbart, vilket skapar ett bra första intryck. Plugins som Optimole låter dig enkelt undanta de första bilderna från att laddas med lazy load av denna anledning.

6. Hur inaktiverar jag inbyggd lazy loading i WordPress?

Om du föredrar att använda ett specifikt plugin och vill säkerställa att WordPress inbyggda lat laddning inte stör, kan du inaktivera det genom att lägga till ett enkelt kodavsnitt i din temas functions.php-fil eller använda ett kodavsnitt-plugin som WPCode.

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Bonustips för att optimera dina WordPress-bilder

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

Vi rekommenderar till exempel att komprimera dina bilder innan du laddar upp dem till din webbplats med ett verktyg som TinyPNG eller JPEGmini. Alternativt kan du använda ett automatiserat plugin för bildkomprimering som Optimole eller EWWW Image Optimizer.

Det är också viktigt att välja rätt filformat. Medan JPEG och PNG är vanliga, rekommenderar vi starkt att använda nästa generations format som WebP. Dessa filtyper erbjuder överlägsen komprimering och kvalitet, vilket hjälper din webbplats att laddas betydligt snabbare.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lat laddar bilder i WordPress. Du kanske också vill se vår handledning om hur du enkelt optimerar bilder för webben utan kvalitetsförlust och våra experters val av de bästa filuppladdningsplugins för WordPress.

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.