Hur man laddar in bilder + videor i WordPress (och ersätter YouTube iFrames med en förhandsvisningsbild) för bättre GTmetrix-resultat

Vad är det bästa sättet att göra lata bilder och videor i WordPress?


Detta beror på om du redan använder ett cache-plugin som stöder lat laddning (WP Rocket, W3 Total Cache, Swift, LiteSpeed ​​Cache). Om din cache-plugin stöder lata laddning av bilder och videor, är det bäst att använda det för att undvika att behöva installera ett extra plugin. Men om din cache-plugin inte stöder lat laddning rekommenderar jag att du använder en som gör det (speciellt WP Rocket), annars listade jag alternativa plugins för lata laddningar nedan kan du installera individuellt.

Vad är lat Laddar?
Lat laddning innebär att bilder och videor laddas bara när användare rullar ner på sidan och faktiskt ser dem. Detta resulterar i färre HTTP-förfrågningar på sidan, men om du har massor av bilder eller inbäddade videor, krävs det att du ständigt laddar dem så rullar du ner på sidan.

Vad betyder det att ersätta YouTube Iframe med en förhandsvisningsbild?
Om du bädda in videor på din WordPress-webbplats laddas bara den “feta YouTube-spelaren” när människor klickar på knappen Spela. Med andra ord, det enda som laddas initialt är en förhandsgranskning.

Skulle du lata ladda bilder och videor?
Jag lata inte ladda bilder för att ständigt ladda bilder när du bläddrar ner på sidan kan vara irriterande för användare. Men alla mina bilder är optimerade till 100% i GTmetrix. Jag gör lata videor och ersätter iframe med en förhandsvisningsbild. Eftersom varje inbäddad video kan ta två sekunder att ladda (mycket tyngre än en bild) är fördelen med lata laddningsvideor betydande.

1. WP Rocket

WP Rocket är mitt nummer 1 för lat laddning och var cache-plugin nr 1 i Facebook-undersökningar.

Eftersom det redan har lat inladdning innebär detta att du inte behöver installera ett extra plugin. Det är hela fördelen med WP Rocket; den har fler funktioner än nästan någon annan cache-plugin (vilket resulterar i bättre belastningstider och GTmetrix-poäng), men mindre plugins på din webbplats. WP Rocket har omfattande dokumentation för lat laddning och konfigurera WP Rocket-inställningar.

WP-raket

Hur man aktiverar lat last i WP-raket
Gå till Inställningar för att aktivera lat laddning i WP Rocket > WP-raket > Media > LazyLoad. Du kan aktivera den för bilder, iframes och videor och ersätta YouTube iframes med en förhandsvisningsbild.

Lazy Load Images WP Rocket

2. SG Optimizer

Siteground introducerade lat laddning i sin stora uppdatering av SG Optimizer.

Naturligtvis måste du vara en SiteGround-kund för att använda detta plugin (vilket jag skulle göra för delad webbhotell med tanke på att de rankades som värd nr 1 i över 20 Facebook-omröstningar). SG Optimizer är jämförbar med WP Rocket, men det har inte med nästan lika många funktioner. Så om du använder SiteGround för din värd skulle jag fortfarande gilla WP Rocket framför deras SG Optimizer.

SiteGround SG Optimizer

Hur man aktiverar lat laddning i SG Optimizer
Gå till Inställningar för att aktivera lat laddning i SG Optimizer > SG Optimizer > Standard per standard > Bildoptimering. Du kan lata ladda bilder, Gravatars, miniatyrbilder, responsiva bilder och widgets. Om du har kommentarer på din blogg kan lata laddning av Gravatars hjälpa enormt.

SG Optimizer Lazy Loading

3. W3 Total Cache

Om du redan använder W3 Total Cache har de också en lat laddningsalternativ.

W3 Total Cache ansågs övergivna under en tid, men utvecklaren har sedan börjat underhålla sin plugin. Jag har en omfattande handledning för att konfigurera W3 Total Cache-inställningarna.

W3 Total Cache-plugin

Hur man aktiverar Lazy Load i W3 Total Cache
Gå till Inställningar för att aktivera lastning i W3 Total Cache > Allmänna Inställningar > Användarupplevelse > Lazy Loading. Slå på detta och gå sedan till User Experience > Lazy Loading. Välj att bearbeta HTML-bildtaggar, bakgrundsbilder, utesluta ord och skriptbäddsmetod.

W3 Total cache Lazy Loading

4. Litespeed-cache

Litepseed-cache lat laddning kommer också att göra jobbet (Litespeed är väl granskad cache-plugin).

LiteSpeed ​​Cache-plugin

Hur man aktiverar lat laddning i LiteSpeed-cache
Gå till LiteSpeed ​​Cache för att aktivera lastning i LiteSpeed ​​Cache > inställningar > Media > Mediainställningar. Här kan du aktivera lata laddningsbilder, iframes, utesluta bilder, automatiskt begära optimering via cron-jobb, inkludera Javascript-biblioteket inline och växla andra inställningar.

Lazy Load Images Videor Litespeed Cache

5. Snabb prestanda

Snabb prestanda är ett annat cache-plugin som stöder lat laddning. Swift fick fantastiska recensioner i WordPress Speed ​​Up Facebook Group, men recensioner på plugin-sidan för WordPress handlar bara om fyra stjärnor. Jag har inte provat Swift Performance; Jag är helt nöjd med WP Rocket.

Swift Performance Lite-plugin

Hur man aktiverar lat laddning i snabba prestanda
Gå till Inställningar för att aktivera lastning i Swift Performance > Media > Lazy Load. Här har du möjlighet att lata ladda bilder, utesluta vissa bilder och inline lata laddningsbilder.

Lazy Load Images Snabb prestanda

6. Autoptimera

Autoptimize används ofta med värdar som GoDaddy och WP Engine, där de har sitt eget inbyggda cachesystem och svartlista cache-pluginprogram. I det här fallet (eftersom du vill ta hand om andra hastighetsoptimeringar) är Autoptimize vanligtvis go-to-plugin för det. En av dess många funktioner är lat laddning, men det låter dig också optimera HTML-, CSS-, JavaScript- och Google-teckensnitt.

Autoptimera plugin

Hur man aktiverar lat laddning automatiskt
Gå till Inställningar för att aktivera lastning av lastning i Autoptimera > Bilder > Lazy Load Images. Du har också möjlighet att använda ShortPixels CDN som för bildoptimering (det här är plugin som jag använder).

Lazy Load Images Autoptimera

7. Smush

Smush är en bildoptimeringsplugin som stöder lat laddning. Det har utvecklats av WPMU, men jag använder personligen ShortPixel för förlustfri komprimering eftersom det är den enda jag har använt som gör mina bilder 100% i GTmetrix (och jag har testat många bildoptimeringsplugins).

Smush plugin

Hur man aktiverar lat laddning i smush
Gå till Smush om du vill aktivera lastning i Smush > instrumentbräda > Lazy Load. Du kan välja vilka filtyper du vill ha laddat (.jpeg, png, .gif, .svg, iframe) och om du vill ha det aktiverat för innehåll, widgets, miniatyrer, Gravatars. Det har till och med lata animeringsinställningar.

Smush Lazy Load

8. Lazy Load By WP Rocket

Lazy Load By WP Rocket är bra om du inte använder WP Rocket men vill lata bilder.

Lazy Load Plugin

Hur man aktiverar Lazy Load in Lazy Load by WP Rocket
Gå till Inställningar > LazyLoad. Du har möjlighet att lata ladda bilder, iframes & videor och ersätt YouTube-videor med miniatyrbild. Det finns inte många inställningar att konfigurera; Jag önskar personligen att det fanns fler. Det är kanske därför det här lata laddningsprogrammet inte har de bästa recensionerna.

Lazy Load By WP Rocket

9. A3 Lazy Load

A3 Lazy Load stöder lat laddning av både bilder och videor.

a3 Lazy Load Plugin

Hur man aktiverar lat last i A3 lat last
Gå till inställningar för att aktivera lastning i A3 Lazy Load > A3 Lazy Load. Du kan konfigurera inställningar för lata laddning av bilder, videor, iframes, Gravatars och välja vilka områden på din webbplats du vill ha lat laddning att använda (inklusive mobil). Det finns också alternativ för att aktivera en lat laddningseffekt, ladda bakgrundsfärg och möjligheten att utesluta webbadresser och inläggstyper.

a3 Lazy Load-inställningar

10. BJ Lazy Load

BJ Lazy Load verkar inte vara väl underhållen, så jag skulle förmodligen använda ett annat plugin.

BJ Lazy Load plugin

Hur man aktiverar lat last i BJ Lazy Load
Gå till Inställningar för att aktivera lastning i BJ Lazy Load > BJ Lazy Load. Inställningarna är relativt enkla och ger dig möjlighet att lata ladda bilder, iframes, Gravatars och utesluta lat laddning från innehåll, textwidgets och posta miniatyrer. Det finns också ett alternativ att inkludera en platshållarbild, visningströskel och använda en förhandsvisningsbild med låg upplösning vid lat laddning.

BJ Lazy Load Settings

11. Lat laddning för bilder

Lazy Load For Images är bra om du bara vill göra det för bilder.

Lazy Load for Images-plugin

Hur man aktiverar lat inmatning för bilder
Det finns inga inställningar att konfigurera i plugin Lazy Load For Images (det är automatiskt).

12. Lat laddning för videor

Lazy Load For Videos ersätter inbäddade videor med en klickbar förhandsgranskning.

Lazy Load for Videos Plugin

Hur man aktiverar lat last i lat last för videor
Gå till Inställningar om du vill aktivera lastning i Lazy Load For Videos > Lazy Load For Videos. Välj att bara ladda CSS / JS vid behov, anpassa uppspelningsknappen och tillämpa anpassad CSS.

Lazy Load For Videos Plugin

13. Lat laddning för kommentarer

Du kan lata ladda kommentarer med hjälp av Lat laddning för kommentarer plugin.

Detta kan hjälpa till att göra färre HTTP-förfrågningar om du har massor av kommentarer på din blogg, särskilt eftersom Gravatars kan ta lång tid att ladda mellan alla begäranden från tredje part.

Lazy Load for Comments Plugin

Hur man aktiverar lat ladd i lat ladd för kommentarer
Gå till Inställningar för att aktivera lastning i Lazy Load For Comments > Diskussion > Lazy Load Kommentarer. Det är den enda inställningskonfigurationen för detta plugin, men det har bra recensioner.

Lazy Load Kommentarer

14. WP YouTube Lyte

WP YouTube Lyte är ett av mina favorit (och bäst granskade) plugins för lata laddningsfilmer. Det skapades av teamet på Autoptimize som tenderar att ha bra plugin-recensioner överallt.

WP YouTube Lyte-plugin

Hur man aktiverar lat laddning i WP YouTube Lyte
Gå till Inställningar om du vill aktivera lastning i WP YouTube Lyte > WP YouTube Lyte. Ta din YouTube API-nyckel och ange det i Autoptimera. Välj din spelarstorlek, om du vill inkludera länkar, spelarens position, tvinga HD, fungera som normal YouTube-länk / iframes och lägg till mikrodata. Att lagra miniatyrbilder lokalt kan ofta fixa GTmetrix-fel när du bäddar in YouTube-videor.

YouTube-miniatyrbilder GTmetrix

Wp YouTube Lyte-inställningar

Behöver du fortfarande hjälp?

Jag har en bra video om WordPress-hastighetsoptimering:

Jag har också tutorials för att optimera bilder, konfigurera WP Rocket, minska serverns svarstider och mer. Jag kan få 100% (eller nära) GTmetrix-poäng på nästan alla mina inlägg med dessa tips. Om du har frågor, skicka gärna en kommentar – glad att hjälpa!

Vanliga frågor

&# X2705; Vilket plugin är bäst för att ladda bilder?

Om du redan använder ett cache-plugin som stöder lat laddning (t.ex. WP Rocket, SG Optimizer, W3TC, Swift, LiteSpeed) är det bäst att prova detta först. Annars är Autoptimize eller Lazy Load-plugin från WP Rocket goda late-plugins.

&# X2705; Vad sägs om lata laddningsfilmer?

WP Rocket och några andra cache-insticksprogram låter dig lata ladda videor och ersätta YouTube iframe med en förhandsvisningsbild. Annars fungerar WP YouTube Lyte.

&# X2705; Kommer lat laddning skadad användarupplevelse?

Jag latar inte att ladda bilder på den här webbplatsen, men jag laddar videor för lata laddningar eftersom de tar mycket längre tid att ladda. Lazy laddar bilder kan vara irriterande för användare och minska min affiliate-försäljning, så jag inaktiverade det.

&# X2705; Vad gör lat laddning?

Lat laddning påskyndar initiala laddningstider genom att vänta på att ladda bilder och videoklipp tills användare rullar ner på sidan och faktiskt ser dem.

&# X2705; Hur du deaktiverar lata belastningar på specifika sidor?

De flesta plugins låter dig göra det. Om du till exempel använder WP Rocket och du redigerar en sida eller ett inlägg, ser du ett alternativ i instrumentpanelen för att inaktivera (eller aktivera) lat belastning på det specifika innehållet.

Skål,
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map