Sådan Lazy Load images + videoer i WordPress (og udskift YouTube iFrames med et eksempelbillede) for bedre GTmetrix-resultater

Hvad er den bedste måde at gøre det på doven indlæs billeder og videoer i WordPress?


Dette afhænger af, om du allerede bruger et cache-plugin, der understøtter doven indlæsning (WP Rocket, W3 Total Cache, Swift, LiteSpeed ​​Cache). Hvis din cache-plugin understøtter doven indlæsning af billeder og videoer, er det bedst at bruge det for at undgå at skulle installere et ekstra plugin. Men hvis dit cache-plugin ikke understøtter doven indlæsning, anbefaler jeg at bruge en der gør det (især WP Rocket), ellers har jeg angivet alternative doble indlæsnings-plugins nedenfor, som du kan installere individuelt.

Hvad er doven Loading?
Lat indlæsning betyder, at billeder og videoer kun indlæses, når brugerne ruller ned ad siden og faktisk ser dem. Dette resulterer i færre HTTP-anmodninger på siden, men hvis du har masser af billeder eller indlejrede videoer, kræver det konstant at indlæse dem, ruller du ned ad siden.

Hvad betyder det at erstatte YouTube Iframe med et eksempelbillede?
Hvis du integrerer videoer på dit WordPress-sted, indlæses dette kun den “fedt YouTube-afspiller”, når folk klikker på knappen Play. Med andre ord, det eneste, der indlæses oprindeligt, er et eksempelbillede.

Skulle du doge indlæse billeder og videoer?
Jeg dover ikke at indlæse billeder, fordi konstant indlæsning af billeder, når du ruller ned ad siden, kan være irriterende for brugerne. Imidlertid er alle mine billeder optimeret til 100% i GTmetrix. Jeg laver indlæse videoer og erstatter iframe med et eksempelbillede. Da det kan tage 2 sekunder at indlæse hver indlejret video (meget tungere end et billede), er fordelen ved dovne indlæsningsvideoer betydelig.

1. WP Rocket

WP Rocket er mit valg nr. 1 til doven indlæsning og var nr. 1 cache-plugin i Facebook-afstemninger.

Da den allerede har doven indlæsning indbygget, betyder det, at du ikke behøver at installere et ekstra plugin. Det er hele fordelen med WP Rocket; det leveres med flere funktioner end næsten enhver anden cache-plugin (hvilket resulterer i bedre belastningstider og GTmetrix-scoringer), dog mindre plugins på dit websted. WP Rocket har omfattende dokumentation om doven indlæsning og konfigurering af WP Rocket-indstillinger.

WP-raket

Sådan aktiveres doven belastning i WP-raket
Gå til Indstillinger for at aktivere doven indlæsning i WP Rocket > WP-raket > Medier > LazyLoad. Du kan aktivere det til billeder, iframes og videoer og erstatte YouTube iframes med et eksempelbillede.

Lazy Load Images WP Rocket

2. SG Optimizer

SiteGround introducerede doven lastning i deres store opdatering af SG Optimizer.

Naturligvis skal du være en SiteGround-kunde for at bruge dette plugin (hvilket jeg ville gøre til delt hosting i betragtning af at de blev bedømt som nr. 1-vært i over 20 Facebook-afstemninger). SG Optimizer kan sammenlignes med WP Rocket, men det har ikke med næsten lige så mange funktioner. Så hvis du bruger SiteGround til din vært, vil jeg stadig foretrække WP Rocket frem for deres SG Optimizer.

SiteGround SG Optimizer

Sådan aktiveres doven belastning i SG Optimizer
Gå til Indstillinger for at aktivere doven indlæsning i SG Optimizer > SG Optimizer > Standarder pr. Sted > Billedoptimering. Du kan dovne indlæse billeder, Gravatars, miniaturebilleder, lydhøre billeder og widgets. Hvis du har kommentarer til din blog, kan doven indlæsning af Gravatars hjælpe enormt.

SG Optimizer Lazy Loading

3. W3 samlet cache

Hvis du allerede bruger W3 Total Cache, har de også en mulighed for doven indlæsning.

W3 Total Cache blev betragtet som forladt i nogen tid, men udvikleren er siden begyndt at vedligeholde sin plugin. Jeg har en omfattende tutorial til konfiguration af W3 Total Cache-indstillinger.

W3 Total Cache-plugin

Sådan aktiveres Lazy Load i W3 Total Cache
Gå til Indstillinger for at aktivere indlæsning af indlæsning i W3 Total Cache > Generelle indstillinger > Brugererfaring > Lazy Loading. Slå dette til, og gå derefter til Brugeroplevelse > Lazy Loading. Vælg at behandle HTML-billedkoder, baggrundsbilleder, ekskludere ord og scriptindlejringsmetode.

W3 Total cache Lazy Loading

4. Litespeed-cache

Litepseed cache doven lastning vil også gøre jobbet (Litespeed er godt revideret cache-plugin).

LiteSpeed ​​Cache-plugin

Sådan aktiveres doven belastning i LiteSpeed-cache
Gå til LiteSpeed ​​Cache for at aktivere indlæsning af indlæsning i LiteSpeed-cache > Indstillinger > Medier > Medieindstillinger. Her kan du aktivere dovne belastningsbilleder, iframes, ekskludere billeder, automatisk anmode om optimering via cron job, inkludere Javascript bibliotek inline og skifte andre indstillinger.

Lazy Load Images Videoer Litespeed-cache

5. Hurtig ydelse

Hurtig ydelse er et andet cache-plugin, der understøtter doven indlæsning. Swift fik gode anmeldelser i WordPress Speed ​​Up Facebook Group, men anmeldelser på WordPress-pluginsiden handler kun om 4 stjerner. Jeg har ikke prøvet Swift Performance; Jeg er helt tilfreds med WP Rocket.

Swift Performance Lite-plugin

Sådan aktiveres doven belastning i hurtig ydeevne
Gå til Indstillinger for at aktivere indlæsning af indlæsning i Swift Performance > Medier > Lazy Load. Her har du mulighed for at doge indlæse billeder, ekskludere bestemte billeder og inline doge indlæsningsbilleder.

Lazy Load Images Hurtig ydelse

6. Autotimer

Autoptimering bruges ofte med værter som GoDaddy og WP Engine, hvor de har deres eget indbyggede cachesystem og blacklist cache-plugins. I dette tilfælde (da du vil passe på andre hastighedsoptimeringer), er Autoptimering som regel go-to plugin til det. En af dets mange funktioner er doven lastning, men det giver dig også mulighed for at optimere HTML-, CSS-, JavaScript- og Google-skrifttyper.

Autotimér plugin

Sådan aktiveres doven belastning i autoptimering
Gå til Indstillinger for at aktivere indlæsning af indlæsning i Autoptimering > Billeder > Lazy Load Images. Du har også muligheden for at bruge ShortPixels CDN, som til billedoptimering (dette er det plugin, jeg bruger).

Lazy Load Images Autoptimér

7. Smush

Smush er et billedeoptimeringsplugin der understøtter doven belastning. Det blev udviklet af WPMU, men jeg bruger personligt ShortPixel til tabsfri komprimering, da det er det eneste, jeg har brugt, der gør mine billeder 100% i GTmetrix (og jeg har testet mange billedoptimerings plugins).

Smush plugin

Sådan aktiveres Lazy Load In Smush
Gå til Smush for at aktivere indlæsning af indlæsning i Smush > instrumentbræt > Lazy Load. Du kan vælge, hvilke filtyper du vil have ladet ladet (.jpeg, png, .gif, .svg, iframe), og om du vil have det aktiveret til indhold, widgets, miniaturebilleder, Gravatars. Det har endda doven belastningsanimationsindstillinger.

Smush Lazy Load

8. Lazy Load By WP Rocket

Lazy Load By WP Rocket er godt, hvis du ikke bruger WP Rocket, men vil dovne indlæse billeder.

Lazy Load Plugin

Sådan aktiveres doven belastning i doven belastning af WP-raket
Gå til Indstillinger > LazyLoad. Du har mulighed for at dovne indlæse billeder, iframes & videoer, og erstatt YouTube-videoer med miniature. Der er ikke mange indstillinger, der skal konfigureres; Jeg ønsker personligt, at der var flere. Måske er det derfor, at dette doven load-plugin ikke har de bedste anmeldelser.

Lazy Load By WP Rocket

9. A3 Lazy Load

A3 Lazy Load understøtter doven indlæsning af både billeder og videoer.

a3 Lazy Load Plugin

Sådan aktiveres Lazy Load I A3 Lazy Load
Gå til indstillinger for at aktivere indlæsning af indlæsning i A3 Lazy Load > A3 Lazy Load. Du kan konfigurere indstillinger til doven indlæsning af billeder, videoer, iframes, Gravatars og vælge hvilke områder på dit websted, du vil have, at ladning skal anvendes (inklusive mobil). Der er også muligheder for at aktivere en doven indlæsningseffekt, indlæse baggrundsfarve og muligheden for at ekskludere webadresser og indlægstyper.

a3 Lazy Load-indstillinger

10. BJ Lazy Load

BJ Lazy Load ser ikke ud til at være godt vedligeholdt, så jeg vil sandsynligvis bruge et andet plugin.

BJ Lazy Load-plugin

Sådan aktiveres Lazy Load I BJ Lazy Load
Gå til Indstillinger for at aktivere indlæsning af indlæsning i BJ Lazy Load > BJ Lazy Load. Indstillingerne er relativt enkle og giver dig muligheden for doven indlæsning af billeder, iframes, Gravatars og udelukker doven indlæsning fra indhold, tekst widgets og post miniaturer. Der er også en mulighed for at inkludere et pladsholderbillede, visningstærskel og bruge et eksempel med lav opdatering når doven indlæses.

BJ Lazy Load Indstillinger

11. Lazy Load For images

Lazy Load For Images er godt, hvis du kun vil gøre det til billeder.

Lazy Load for Images-plugin

Sådan aktiveres doven indlæsning til billeder
Der er ingen indstillinger, der skal konfigureres i plugin Lazy Load For Images (det er automatisk).

12. Lazy Load For Videos

Lazy Load For Videos erstatter indlejrede videoer med et klikbare eksempelbillede.

Lazy Load for Videos Plugin

Sådan aktiveres doven belastning i doven belastning for videoer
Gå til Indstillinger for at aktivere indlæsning af ladning i Lazy Load For Videos > Lazy Load For Videos. Vælg kun at indlæse CSS / JS efter behov, tilpasse afspilningsknappen og anvende brugerdefineret CSS.

Lazy Load For Videos Plugin

13. Lazy Load For Kommentarer

Du kan dovne indlæse kommentarer vha Lazy Load For Kommentarer plugin.

Dette kan hjælpe med at fremsætte færre HTTP-anmodninger, hvis du har masser af kommentarer til din blog, især da Gravatars kan tage lang tid at indlæse mellem alle anmodninger fra tredjepart.

Lazy Load for Comments Plugin

Sådan aktiveres doven belastning i doven belastning til kommentarer
Gå til Indstillinger for at aktivere indlæsning af ladning i Lazy Load For Comments > Diskussion > Lazy Load Kommentarer. Det er den eneste indstillingskonfiguration for dette plugin, men det har gode anmeldelser.

Lazy Load Kommentarer

14. WP YouTube Lyte

WP YouTube Lyte er et af mine foretrukne (og bedst gennemgåede) plugins til dovne indlæsningsvideoer. Det blev oprettet af teamet hos Autoptimize, der har en tendens til at have gode plugin-anmeldelser rundt omkring.

WP YouTube Lyte-plugin

Sådan aktiveres doven belastning i WP YouTube Lyte
Gå til Indstillinger for at aktivere indlæsning af indlæsning i WP YouTube Lyte > WP YouTube Lyte. Grib din YouTube API-nøgle og indtast det i Autoptimering. Vælg din spillerstørrelse, om du vil inkludere links, afspillerposition, tving HD, fungere som normalt YouTube-link / iframes, og tilføj mikrodata. Cache-thumbnails lokalt kan ofte løse GTmetrix-fejl, når du integrerer YouTube-videoer.

YouTube-miniaturebilleder GTmetrix

Wp YouTube Lyte-indstillinger

Har du stadig brug for hjælp?

Jeg har en fantastisk video om WordPress-hastighedsoptimering:

Jeg har også tutorials til optimering af billeder, konfigurering af WP Rocket, reduktion af serverens responstid og mere. Jeg er i stand til at få 100% (eller nær) GTmetrix-scoringer på næsten alle mine indlæg ved hjælp af disse tip. Hvis du har spørgsmål, er du velkommen til at give mig en kommentar – glad for at hjælpe!

Ofte stillede spørgsmål

&# X2705; Hvilket plugin er bedst til doven indlæsning af billeder?

Hvis du allerede bruger et cache-plugin, der understøtter doven belastning (f.eks. WP Rocket, SG Optimizer, W3TC, Swift, LiteSpeed), er det bedst at prøve dette først. Ellers er Autoptimize eller Lazy Load-plugin fra WP Rocket gode lazy load plugins.

&# X2705; Hvad med doven indlæsning af videoer?

WP Rocket og nogle andre cache-plugins giver dig doven indlæsning af videoer og erstatter YouTube iframe med et eksempelbillede. Ellers fungerer WP YouTube Lyte.

&# X2705; Vil doven læsning skade brugeroplevelse?

Jeg dover ikke at indlæse billeder på dette websted, men jeg laver indlæste videoer, fordi de tager meget længere tid at indlæse. Lazy indlæsning af billeder kan være irriterende for brugerne og reduceret mit tilknyttede salg, så jeg deaktiverede det.

&# X2705; Hvad gør doven lastning?

Lat indlæsning fremskynder de første belastningstider ved at vente på at indlæse billeder og videoer, indtil brugerne ruller ned ad siden og faktisk ser dem.

&# X2705; Sådan deaktiveres doven belastning på bestemte sider?

De fleste plugins giver dig mulighed for at gøre dette. Hvis du f.eks. Bruger WP Rocket, og du redigerer en side eller et indlæg, vil du se en mulighed i dit dashboard til at deaktivere (eller aktivere) doven belastning på det bestemte stykke indhold.

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