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?
- WordPress latladdning
- Förbättra sidladdningshastighet med latladdningsplugins
- Latladdningens inverkan på SEO
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:
- Webbläsaren bygger webbsidan DOM utan att ladda ner bilder och förinstallera videor.
- JavaScript används för att bestämma vilka bilder som ska hämtas och vilka videoklipp som ska laddas baserat på innehållet som ursprungligen är synligt när sidan laddas. Dessa bilder och videor laddas ner och visas på lämpligt sätt.
- Nedladdning och rendering av ytterligare videor fördröjs tills en besökare bläddrar ner på sidan och ytterligare innehåll kommer i sikte.
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.
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.
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?
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.
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.
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.
Bildfotavtrycket är litet, på drygt 150 kb. Så här ser innehållsskärmdumpen ut med en total nyttolast på 2.0 MB.
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.
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.
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 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.
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:
- 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.
- Se till att du fortfarande använder alt-text på dina bilder eftersom detta är viktigt för Googles bildsökningsranking.
Alt text is extremely helpful for Google Images — if you want your images to rank there. Even if you use lazy-loading, you know which image will be loaded, so get that information in there as early as possible & test what it renders as.
— Page indexing issues detected in johnmu.com (@JohnMu) September 4, 2018
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!
Jon är Chief Operating Officer på Kinsta och är dagligen involverad i Kinstas försäljning, kundservice och tekniska supportteam. Han är en familjefar. Så när han inte febrilt trycker på tangenterna på sin bärbara dator brukar han hjälpa ett av sina barn att fixa en cykel eller ställa in Netflix för ett otåligt förskolebarn.
Lämna ett svar