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.

Med lanseringen av WordPress 5.5 blev latladdning en del av kärnversionen och det är mycket enkelt att implementera denna teknik.

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

Två plugins som påskyndar leveransen av denna webbsida avsevärt är 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.

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.

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. 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. Webbläsaren väljer och återger den minsta möjliga versionen baserat på vilken storlek bilden kommer att ha på skärmen. A3 Lazy Load lämnar standardmässigt WordPress-beteende intakt och resultatet är att det levereras en mycket mindre bildfil.

4. Lazy Load

Det andra alternativet ä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.

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

Native Lazy Loading

Over the past few years, there’s been a push to integrate lazy loading functionality directly into web browsers. At this time, native lazy loading is available in Chromium-based browsers like Chrome and Brave, as well as Firefox.

Native lazy loading is great for site performance because it doesn’t rely on inline Javascript code or external scripts. To add native lazy loading to your site, simply add a loading=lazy attribute to the images and iframes you want to lazy load.

Google Native Lazyload plugin.

Google Native Lazyload plugin.

Google has developed the Native Lazyload plugin to help make this process easier. After activating the plugin, WordPress will automatically insert the loading attribute into your img and iframe tags.

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

Med omfattande stöd för latladdning i webbläsare vid horisonten, rekommenderar vi att du använder ett plugin som Googles Native Lazy Load för att ställa in latladdning för din webbplats.

Med Chrome- och Firefox-stöd och Safari-stöd i framtiden bör webbläsarinbyggd latladdning vara allt du behöver för att latladda dina bilder och iframes. Men om du letar efter ett JavaScript-baserat alternativ som även riktar sig till äldre webbläsare, är a3 Lazy Load ett bra alternativ.

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!


If you enjoyed this article, then you’ll love Kinsta’s WordPress hosting platform. Turbocharge your website and get 24/7 support from our veteran WordPress team. Our Google Cloud powered infrastructure focuses on scalability, performance, and security. Let us show you the Kinsta difference! Kolla in våra paket