Den genomsnittliga webbsidan väger 3719 kb där bilder och videor utgör nästan 78% av den totala vikten enligt HTTP Archive. Det är en hel del byte för en webbplatsbesökares webbläsare att ladda ner och rendera, och trenderna pekar alla på större webbsidor och ökad användning av bilder i framtiden. WordPress leder fighten när det gäller att dela media och införliva mediefiler i webbdesign. Med WordPress är det enkelt att integrera bilder och videoklipp i inlägg, sidor och till och med i bakgrunden av temat.

Men alla dessa tunga resurser gör att ladda en webbsida en kostsam upplevelse för användare som måste vänta på att stora filer ska laddas ner – inklusive filer som inte är initialt synliga – innan de kan titta på en webbsida. Det är där WordPress latladdning kommer in i bilden.

Vad är latladdning och hur fungerar det?

Latladdning är en optimeringsteknik som laddar synligt innehåll men försenar nedladdning och rendering av innehåll som visas längre ner. Det är precis den sortens saker som Google blir upphetsade över, och det är en teknik som du bör överväga om dina inlägg och sidor innehåller många inbäddade videor och högupplösta bilder.

Latladdning fungerar så här:

Slutresultatet är att bilderna inte laddas ner eller videor laddas tills de faktiskt behövs. Detta kan ge en betydande ökning i prestanda för webbplatser som innehåller en hel del högupplösta bilder och inbäddade videor.

Latlastning kan ha en djupgående inverkan på sidhastighet om du använder en hel del bilder. 🚀Click to Tweet

WordPress latladdning

Som med så många andra webbplatsprestandaproblem, när det gäller WordPress latladdning, finns det ett plugin du kan använda för att åtgärda problemet. Det finns faktiskt många gratis plugins tillgängliga i WordPress pluginkatalog som kan användas för att latladda bilder och videor. Efter att ha övervägt några dussin plugins och testa flera av dem har vi identifierat fem plugins som ger en mätbar förbättring av webbplatsens prestanda. Om du är redo att genomföra latladdning, börja med att överväga dessa fem alternativ.

Saktar bilder och videor verkligen ner webbplatser?

Först av allt, innan du laddar upp några bilder till WordPress, se till att du optimerar dem.

Vi behöver en baslinje så att vi kan se effekterna av att lägga till bilder och videor. Det är ingen poäng med att lösa ett problem om det inte finns några problem att börja med. För att testa saker och ting har jag satt upp en standard WordPress-installation på ett Kinsta-hostingkonto. TwentySixteen är det aktiva temat och inga optimeringsplugins eller tekniker som cachning har implementerats.

Så här betygsätter Pingdom webbplatshastighetstest webbplatsen innan du lägger till några bilder eller videor.

Hastighetstest utan bilder eller videoklipp

Hastighetstest utan bilder eller videoklipp

Som du kan se är sidan väldigt lätt på knappt 155 kb och laddas på mindre än en halv sekund. Svårt att hitta fel med dessa poäng. Vad händer om vi laddar upp en sida med stora bildfiler och inbäddade YouTube-videor?

Hastighetstest utan latladdningsplugin

Hastighetstest utan latladdningsplugin

Sidstorleken har ökat till 1.7 MB och sidladdningstiden har nästan tredubblats till strax under 1.3 sekunder. TwentySixteen är ett välskrivet lätt tema, så även med ett halvt dussin bilder och YouTube-videor tillagt, är denna webbplats fortfarande ganska lätt och laddar blixtsnabbt. Vi kan dock se att lägga till bilder och videor har gjort sidstorleken mycket större och saktat ner sidladdningshastigheten avsevärt.

Förbättra sidladdningshastighet med latladdningsplugins

Fyra plugins som påskyndar leveransen av denna webbsida avsevärt är BJ Lazy Load, Lazy Load XT, a3 Lazy Load och Lazy Load. Låt oss titta på hur var och en av dessa presterade. Flera ytterligare plugins testades också men gav inte en mätbar förbättring av webbplatsens prestanda. När du provar latladdningsplugins, var noga med att göra ett före och efter-test för att se till att de producerar de resultat du letar efter.

1. BJ Lazy Load

BJ Lazy Load är ett mycket populärt plugin. Det är aktivt på mer än 70,000 WordPress webbplatser och är betygsatt med 4.1 av 5 stjärnor på styrkan av mer än 60 recensioner totalt.

BJ Lazy Load-plugin

BJ Lazy Load-plugin

Installationen och konfigurationen är enkel. Bara hitta pluginet med hjälp av den inbyggda WordPressplugins-installeraren, installera det, och aktivera det. Vid aktivering läggs ett nytt menyalternativ till vid Inställningar > BJ Lazy Load. Alla latladdningsalternativ väljs som standard, och du vill förmodligen lämna inställningarna som de är, om du inte stöter på problem på din webbplats frontend efter att du har aktiverat pluginet.

Ett alternativ som tillhandahålls av detta plugin och inget av de andra två är möjligheten att lägga till en URL för en bild att använda som en platshållare för latladdade bilder och videor tills den faktiska bilden och videoresurserna hämtas. Självklart, om du använder det här alternativet bör du använda en mycket liten fil och inte en högupplöst bild.

För det lättaste möjliga fotavtrycket och ett sömlöst resultat rekommenderar jag att du skapar en solid färgbild av samma färg som din webbplatsbakgrund och sparar den i PNG-format.

Du kan också ange en HTML-klass som kommer att uteslutas från latladdning. Du kan sedan tillämpa den klassen på alla bilder eller videoklipp som du vill utesluta från latladdning. Slutligen kan du ange hur nära en bild eller video borde komma visningsområdet innan den hämtas och renderas.

Låt oss se hur snabbt vår sida laddas med BJ Lazy Load konfigurerat.

Hastighetstest med BJ Lazy Load plugin

Hastighetstest med BJ Lazy Load plugin

Det där är helt enkelt lustigt snabbt. Webbplatsen testades ett halvt dussin gånger vid flera gånger under hela dagen, och laddningstiderna var konsekvent mellan 300 och 400 millisekunder.

Detta blixtsnabba testresultat är inte en avvikare.

Medan sidan laddas chockerande snabbt med detta plugin installerad, har storleken på sidan faktiskt ökat. Vad är det som pågår där? I teorin, med latladdning aktiverad, bör sidstorleken minska eftersom inte alla bilder laddas ner med den ursprungliga sidladdningen.

Efter en undersökning av situationen är det här vad jag hittade.

Hastighetstest med BJ Lazy Load plugin

WordPress standardbeteende är att presentera en rad filstorlekar till webbläsaren med hjälp av srcset-attributet för img-elementet som används för att bädda in bilden. Webbläsaren tittar igenom listan över tillgängliga storlekar och laddar den minsta versionen av bilden som fyller det tillgängliga utrymmet.

Detta innebär att om du laddar upp en riktigt stor bildfil kommer WordPress automatiskt att erbjuda flera mindre versioner av den bilden till dina besökare. Din besökares webbläsare kommer att ta den minsta lämpliga bilden baserat på storleken av pixelytan som bilden kan uppta.

Hur ändrar BJ Lazy Load WordPress beteende?

BJ Lazy Load åsidosätter WordPress standardbeteende. Attributet srcset har ersatts med ett data-lazy-srcset-attribut som fungerar tillsammans med plugin-skriptet. Slutresultatet är dock att i stället för att ladda ner en version av bilden i reducerad storlek, är det bilden i full upplösning som laddas ner och renderas.

Det här är inte idealiskt, men så länge du optimerar bildfiler innan du laddar upp dem till WordPress – något jag inte gjorde – så ser du inte samma problem.

Sidladdning med BJ Lazy Load

Sidladdning med BJ Lazy Load

Ögontestet – ladda bara webbplatsen och se vad som händer – visar att om du använder BJ Lazy Load och din webbplats har en icke-vit bakgrundsfärg måste du lägga till någon form av platshållarbild. Standardbeteendet utan någon platshållarbild är att rendera en vit platshållar-gif i stället för bilden.

2. Lazy Load XT

Lazy Load XT presterade väl i våra tester och är ett annat bra WordPress latladdningsplugin värt att överväga. Med något mer än 4,000 aktiva installationer är detta plugin inte lika populärt som BJ Lazy Load. Men det fångade mitt öga med sitt imponerande 4,9 av 5-stjärniga betyg. Endast en av de 22 publicerade recensionerna är lägre än 5 stjärnor.

Lazy Load XT-plugin

Lazy Load XT-plugin

Efter aktivering konfigureras pluginet genom att navigera till menyn som finns i Inställningar > Lazy Load XT. Du kommer snabbt att märka att detta plugin gör mer än bara latladda bilder och videor. Du kan också använda detta plugin för att minifiera JS och CSS-filer, ladda JavaScript och CSS-bibliotek med Cloudflare CDN, och flytta skript till webbplatsens sidfot.

Det finns en hel del ytterligare alternativ som du kan använda för att finjustera webbplatsens prestanda. Men eftersom vi bara testar latladdning vid denna tidpunkt lämnade jag standardinställningarna ifred, utan att röra till att minifiera eller flytta CSS och JavaScript, rensade serverns cacheminne och körde testsidan genom Pingdoms Webbplatshastighetstest.

Hastighetstest med Lazy Load XT

Hastighetstest med Lazy Load XT

Sidan är fortfarande 2 MB och sidladdningstiden är inte riktigt så snabb som den var med BJ Lazy Load, men vi har fortfarande uppnått en 50% minskning av sidladdningstiden jämfört med den tid som krävs för att ladda sidan utan latladdning.

En snabb titt på filträdet i testresultaten visar att samma sak händer med Lazy Load XT aktiverad som vi såg med BJ Lazy Load. I stället för att ladda en optimerad version av bilden, är det en högupplöst version av bilden som hämtas och renderas med pluginet aktiverat.

Medan pluginet inte producerar riktigt samma hastighetsökning som BJ Lazy Load, är ögontestet till förmån för Lazy Load XT. Till skillnad från BJ Lazy Load är platshållaren som används av Lazy Load XT transparent. Som ett resultat finns det inga fula tomma vita rutor medan bilderna och videoklippen laddas och du behöver inte oroa dig över att skapa och ladda upp en platshållarbild.

3. a3 Lazy Load

a3 Lazy Load är ett annat populärt WordPress latladdningsalternativ i arkivet. Detta plugin är aktivt på mer än 50 000 WordPress-webbplatser och har förtjänat ett mycket starkt betyg på 4,7 av 5 stjärnor och har fått nästan 40 användarrecensioner.

A3 Lazy Load plugin

A3 Lazy Load plugin

Att aktivera pluginet lägger till en inställningsmeny vid Inställningar > a3 Lazy Load. För teständamål lämnade jag standardinställningarna ifred med ett undantag. Jag använde alternativet Ladda bakgrundsfärg för att matcha platshållarfärgen till färgen på webbsidans bakgrund. Med den ändringen, och standardinställningarna, presterade webbplatsen mycket bra.

Hastighetstest med A3 Lazy Load-plugin

Hastighetstest med A3 Lazy Load-plugin

Vi är tillbaka på en sidladdningstid under en halv sekund. Det är anmärkningsvärt med tanke på antalet bilder och videor som ingår på denna webbsida.

Kämpar du med driftstopp och WordPress-problem? Kinsta är hosting-lösningen som är utformad för att spara tid! Kolla in våra funktioner

Jämförelse av testresultat

Utan tvekan kommer du att märka att sidstorleken och antalet förfrågningar har minskat avsevärt. Vad skapar den dramatiska skillnad? Pingdom ger en ögonblicksbild av innehållsstorlek, och en snabb jämförelse ger svaret. Först och främst, så här ser innehållsstorleken ut med a3 Lazy Load aktiverat.

Innehållsstorlek med A3 Lazy Load-pluginet

Innehållsstorlek med A3 Lazy Load-pluginet

Bildfotavtrycket är litet, på drygt 150 kb. Både BJ Lazy Load och Lazy Load XT producerade en sidstorlek på 2,0 MB. Så här ser innehållsskärmdumpen ut med en total nyttolast på 2.0 MB.

Innehållsstorlek med Lazy Load XT-pluginet

Innehållsstorlek med Lazy Load XT-pluginet

Skriptet, HTML, CSS och andra innehållsstorlekar är nästan identiska. Bildstorleken är dock 1,86 MB – i princip storleken på den högupplösta versionen av den allra första bilden på sidan — istället för bara 150 kb. Så, vad är det som händer här? Som jag nämnde tidigare levererar WordPress automatiskt en mängd olika bildstorlekar och webbläsaren väljer och renderar den minsta möjliga versionen baserat på storleken där bilden ska renderas på skärmen.

Både BJ Lazy Load och Lazy Load XT åsidosätter detta beteende och levererar bilden med full upplösning. A3 Lazy Load lämnar dock WordPress standardbeteende ifred, och resultatet är att en mycket mindre bildfil levereras.

Trots sidstorleksskillnaden, laddar webbplatsen snabbare med BJ Lazy Load aktiverad än med a3 Lazy Load aktiverad. Webbplatsen testades flera gånger med varje plugin installerat för att säkerställa att resultaten som visas här inte var ovanliga. Skillnaden handlar om antalet HTTP-förfrågningar som krävs för att ladda sidan. Vid första anblicken ser det ut som BJ Lazy Load kräver fler förfrågningar. Men om vi tittar på filträdet ser vi vad som verkligen händer.

Latladdning Data URIs

Latladdning Data URIs

Webbplatsfilen med BJ Lazy Load aktiverat innehåller cirka tjugo förfrågningar som börjar med data:image/gif. Det här är data URI snarare än HTTP-förfrågningar. I själva verket, talar de om för webbläsaren att skapa en gif lokalt snarare än att begära den gifen från en server. Som ett resultat behöver BJ Lazy Load bara 17 HTTP-förfrågningar för att bygga sidan jämfört med de 27 som krävs av a3 Lazy Load. Det förklarar varför sidan laddas blixtsnabbt.

Lazy Load XT använder en liknande taktik, men kräver fortfarande några fler förfrågningar än BJ Lazy Load, vilket förklarar varför det inte ger precis samma resultat.

4. Lazy Load

Och ett fjärde alternativ är Lazy Load, vilket är ett gratis plugin som skapats av gänget på WP Rocket. Det är för närvarande aktivt på över 10 000 installationer med 4 av 5 stjärnor i betyg. Om du letar efter ett enkelt WordPress Lazy Load-alternativ med en bra hastighet, är detta ett utmärkt val.

Lazy Load-pluginet av WP Rocket

Lazy Load-pluginet av WP Rocket

Detta plugin fungerar på miniatyrer, alla bilder i ett inlägg eller i en widgettext, avatarer och smileys. Den stora fördelen med detta plugin är att det inte finns något JavaScript-bibliotek som jQuery som används och skriptet väger mindre än 10 KB. Det finns inga alternativ att konfigurera, installera helt enkelt pluginet och latladdningen kommer helt enkelt att fungera.

5. Lazy Load for Videos

Om du bara är bekymrad över att latladda videor, rekommenderar vi också att kolla in Lazy Load for Videos-pluginet. Medan några av ovanstående plugins gör detta också, är detta en bra lösning för enbart videoinnehåll.

Lazy Load for Videos-pluginet

Lazy Load for Videos-pluginet

Latladdningens inverkan på SEO

Oavsett vilket plugin du kommer använda för WordPress latladdning, är det viktigt att du inte skadar din SEO. Det finns två saker du behöver dubbelkolla:

  1. Se till att Google fortfarande kan genomsöka dina latladdade bilder. Du kan enkelt kontrollera detta med verktyget ”Hämta som Google” under avsnittet ”Genomsökning” i Google Search Console. Om du fortfarande kan se dina bilder i källkoden är det troligt att allt är okej.
  2. Se till att du fortfarande använder alt-text på dina bilder eftersom detta är viktigt för Googles bildsökningsranking.

Sammanfattning och rekommendationer

Så vad kan vi lära oss av detta? Alla fyra av dessa alternativ gjorde ett bra jobb med att förbättra sidladdningshastigheten genom latladdning av bilder och videoklipp. Valet av vilken som är bäst handlar om personliga preferenser och hur du förbereder bilderna innan du laddar upp dem till din WordPress-webbplats.

Latladdning är bara en teknik som du kan använda för att optimera din WordPress-webbplats. Det har dock potential att ha en djupgående inverkan på webbplatsens hastighet om du använder många bilder och videoklipp. Ändå, när du har genomfört latladdning, finns det flera ytterligare tekniker som du kan överväga och genomföra för att leverera snabbast möjliga webbplats-prestanda. Missade vi några andra bra WordPress latladdningslösningar? Om så är fallet, låt oss veta nedan!


Om du tyckte om den här artikeln, då kommer du att älska Kinsta´s hosting-plattform. Effektivisera din hemsida och få support dygnet runt från vårt rutinerade team på WordPress. Vår Google Cloud-drivna infrastruktur fokuserar på auto-skalning, prestanda och säkerhet. Lås oss visa dig skillnaden med Kinsta! Kolla in våra paket