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

Att implementera lazy load för bilder i WordPress är ett litet steg som kan göra en enorm skillnad för din webbplats. Det är en nyckelpraxis för alla högpresterande webbplatser idag.

Denna enda teknik hjälper direkt till med två saker som varje webbplatsägare vill ha. En bättre upplevelse för besökare och en fin skjuts i sökmotorrankningarna.

För dina besökare innebär det att dina sidor känns exceptionellt snabba och responsiva. De ser ditt innehåll nästan omedelbart, vilket håller dem engagerade.

Sökmotorer som Google märker också denna hastighet. De tenderar att gynna snabbare webbplatser, vilket kan hjälpa ditt innehåll att upptäckas av fler människor.

Vi vill hjälpa dig att få dessa fördelar direkt. Här är två enkla metoder för att få lazy loading att fungera på din webbplats idag.

Varför lazy loadar bilder i WordPress?

Lazy loading 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, som är byggd specifikt för bilder. En CDN låter användare ladda ner bilder från en webbserver som ligger 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.

Lazy loading 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 bara leverera bilder som visas, vilket kan spara pengar på WordPress-värdkostnader.

Lanseringen av WordPress 5.5 lade till lazy loading som en standardfunktion.

Men om du vill anpassa hur dina bilder laddas med lazy load och även ladda bakgrundsbilder med lazy load, då behöver du använda ett WordPress-tillägg.

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:

1. Lazy Load-bilder i WordPress med WP Rocket (rekommenderas)
2. Lazy Load-bilder i WordPress med Optimole (gratis)
3. Vanliga frågor om lazy loading av bilder
4. Bonustips för att optimera dina WordPress-bilder

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

Vi rekommenderar att använda WP Rocket-pluginet för att lazy load-bilder i WordPress. Det är det bästa WordPress-cache-pluginet på marknaden som låter dig enkelt aktivera lazy loading 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 standardinställningar för cachning 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

Den här metoden använder det kostnadsfria pluginet Optimole. Det är ett av de bästa pluginen för komprimering av WordPress-bilder 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. Mer information finns i vår fullständiga Optimole-recension.

Först måste du installera och aktivera Optimole-pluginet. Mer information finns i 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 det första antalet bilder från lazyload'. Detta kommer att stoppa bilder högst upp på dina inlägg eller sidor från att laddas långsamt, så att bilder ovanför vecket alltid visas.

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.

Efter det ser du inställningen 'Aktivera lazyload för bakgrundsbilder'. Detta kommer att lazy-ladda dina bakgrundsbilder, som kan vara de största bilderna på din webbplats.

En annan inställning är lazy loading för inbäddade videor och iframes. Om du har mycket inbäddat videoinnehåll, vill du lämna denna inställning på. Den laddar 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.

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 lazy loading för bilder en standardfunktion. Denna inbyggda funktion gäller dock inte för saker som bakgrundsbilder eller videor. För mer kontroll och för att säkerställa att all din media laddas med lazy loading, rekommenderar vi att du använder ett dedikerat plugin som WP Rocket eller Optimole.

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

Absolut. Lazy loading 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 lazy loading kan ge din webbplats ett bra lyft 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 prestandatillägget på marknaden, och det inkluderar en kraftfull och enkel lazy load-funktion med bara ett par klick. Om du letar efter ett utmärkt gratisalternativ är Optimole ett utmärkt val som också erbjuder robusta lazy loading-alternativ.

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.

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 WordPress-bildstorlek och filformat för dina bilder. JPEG är bäst för foton eller bilder med många färger, PNG är lämpligt 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 loader bilder i WordPress. Du kanske också vill se vår handledning om hur du enkelt optimerar bilder för webben utan att förlora kvalitet och våra experters val av bästa filuppladdningstillägg för WordPress.

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