Kunne du tænke dig at lære at implementere lazy loading i WordPress?
Hvis dit WordPress-websted er stærkt afhængigt af visuelt indhold, skal du muligvis tilføje Lazy Loading-funktionalitet til det. Denne WordPress-funktion hjælper med at forbedre et websteds sidehastighed og ydeevne, hvilket gør det afgørende for din SEO-indsats.
Denne artikel vil undersøge, hvordan Lazy Loading fungerer såvel som dets fordele og ulemper. Du vil også lære, hvordan du implementerer det på din hjemmeside og hvordan du optimerer brugen af det for de bedste resultater.
Uden videre, inviterer vi dig til at konsultere vores liste over WordPress-temaer. Men før, hvis du aldrig har installeret WordPress-opdagelse Sådan installeres en WordPress blog 7 trin et Hvordan at finde, installere og aktivere et WordPress tema på din blog
Så tilbage til, hvorfor vi er her.
Hvad er Lazy Loading?
Det er en funktion, der tillader en hjemmeside kun at indlæse billeder, der er synlige for brugeren. Det hjælper webstedet med at opretholde hurtig indlæsningshastighed ved ikke at uploade billeder uden for viewporten.
Hvordan fungerer WordPress Lazy Loading?
Når en bruger besøger et WordPress-websted, downloader deres browser alle billederne på websiden på én gang. For sider med mange billeder i høj opløsning kan denne proces reducere indlæsningstiden betydeligt, hvilket kan skade dit websteds ydeevne.
Tilføjelse af en Lazy Loading til dit websted beder den om kun at downloade billeder, der er synlige på brugerens skærm. Resten af mediefilerne erstattes med et pladsholderbillede og indlæses først, når brugeren ruller ned på websiden.
Fordele og ulemper ved WordPress Lazy Loading
Hvis du stadig spekulerer på, om du skal implementere doven billedindlæsning i WordPress, her er fordele og ulemper ved funktionen:
Fordele:
- Reducerer brugen af båndbredde, reducerer hostingomkostninger.
- Forbedrer hastigheden på webstedet og forbedrer derved de besøgendes browsingoplevelse.
- Forbedrer mobiloplevelsen.
- Forbedrer indsatsen SEO, hvilket øger placeringen af dit websted på søgemaskiner.
Imod:
- Forårsager indholdsbuffring, hvilket påvirker indlæsningshastigheden.
- Sænker hurtig rulning.
Sådan tilføjer du doven indlæsning til dit WordPress-websted: 3 metoder
Der er tre måder at implementere doven indlæsning på dit WordPress-websted. Vi anbefaler, at du vælger den metode, der passer bedst til din situation.
1. Opgrader til WordPress 5.4 eller nyere
WordPress 5.4 og nyere understøtter som standard doven indlæsning. Opdatering af din WordPress til den seneste version vil automatisk understøtte doven indlæsning.
Selvom dette er den nemmeste metode, tillader den dig ikke at konfigurere, hvilke billeder der skal indlæses dovent. Derfor kan din hjemmeside misbruge funktionen, hvilket viser de førnævnte ulemper.
En anden faktor at overveje er den forskellige karakter af Lazy Loading-funktionen i hver version af WordPress. For nylig udgav WordPress en ny version af WordPress, der implementerer forbedringer for at løse problemer med dårlige brede indholdsresultater fra ældre versioner.
Det betyder, at hjemmesider, der kører på ældre versioner af WordPress, ikke får de samme fordele som dem, der kører WordPress 5.9, som er den nyeste version.
2. Aktiver native lazy loading gennem browseren
Populære browsere som Chrome, Firefox og Opera understøtter doven indlæsning. Du skal blot tilføje attributten til målrettede billeder og videoer for at aktivere det automatisk.
I native WordPress lazy loading understøtter loading-attributten disse tre værdier:
- Auto : Udløser doven indlæsning som standard, hvilket svarer til ikke at inkludere en indlæsningsattribut.
- Lazy : Fordeler indlæsningen af ressourcer, indtil hver når den angivne afstand fra visningsporten.
- Ivrig : Indlæser alle ressourcer, så snart siden indlæses, uanset deres placering.
Her er et eksempel på brug:
<img src=”nom-image.png” loading=”lazy” alt=”alt attribute” width=”800″ height=”411″>Denne metode er fantastisk til dovent indlæsning af bestemte billeder, og giver hver enkelt en indlæsningsattribut, der dikterer, hvornår de vises i viewporten. Doven indlæsning af individuelle billeder kan dog tage et stykke tid, især hvis dit websted indeholder mange mediefiler.
3. Installer et WordPress-plugin
Da ikke alle browsere understøtter doven indlæsning af billeder og videoer, fungerer den anden metode muligvis ikke hele tiden. Du kan afhjælpe dette problem ved at installere et Lazy loading WordPress-plugin. Denne metode giver dig mere kontrol over, hvilke billeder du skal indlæse dovent uden kodning.
Her er bedste WordPress-plugins af doven indlæsning at vælge imellem, tilgængelig via biblioteket af WordPress plugins.
Forbedre din hjemmesides indlæsningshastighed
En af de gode ting ved dette WordPress-plugin er, at det understøtter alle billedtyper inklusive AVIF. Dette freemium lazy loading WordPress-plugin giver optimering og opdatering. billedets skala at tilpasse dem til besøgendes enheder, hvilket sikrer en brugeroplevelse optimal.
Når det registrerer et langsommere netværk, giver dette WordPress-plugin dig mulighed for at forringe billedkvaliteten. Desuden kan du spare lagerplads ved at gemme billeder i skybiblioteket i dette WordPress-plugin.
Dette gratis plugin giver dig mulighed for at optimere billeder til op til 5 månedlige besøg. Hvis du køber Pro-planen, kan du lade dig indlæse billeder for 000 månedlige aktive besøgende og mere. Billeder for begge planer serveres gennem AWS Cloudfront CDN.
Downloade | demo | Web-hosting
smush
Smush er et populært billedoptimeringsplugin, der understøtter doven indlæsning. Den er kompatibel med WordPress-temaer populære, sidebyggere og mediebiblioteks-plugins. Desuden giver det dig mulighed for at gemme plugin-indstillinger i ubegrænsede konfigurationer og anvende dem med blot et par klik.
Andre nyttige funktioner er registrering af forkert billedstørrelse, understøttelse af multisite og billedkomprimeringsværktøjer. Opgradering til Smush Pro giver dig mulighed for at optimere store billeder uden størrelsesbegrænsninger, gemme originale billeder og få adgang til andre WPMU Pro-plugins. Priserne starter fra kl 5 $ / måned.
Downloade | demo | Web-hosting
a3 Lazy Load
a3 Lazy Load er et gratis mobilorienteret lazy loading plugin. Det er fuldt kompatibelt med WordPress 5.9 og en række populære værktøjer, herunder WebP og AMP plugins.
Udover at tilbyde grundlæggende lazy loading-funktionalitet giver a3 Lazy Load dig også mulighed for doven indlæsning af videoer, inklusive videoer indlejret i sider, indlæg, brugerdefinerede indlægstyper og widgets. Doven indlæsningseffekter og muligheden for at indlæse scripts fra sidehovedet eller sidefoden er også tilgængelige.
Andre bemærkelsesværdige funktioner som multisite-support, WebP-billedunderstøttelse og doven iframe-indlæsning – dette gælder for iframes, som WordPress-kernen ikke indlæser, såsom Google Maps og indlejrede medier.
Downloade | demo | Web-hosting
WordPress Lazy Loading Tips
Nøglen til at få mest muligt ud af doven lastning er at bruge det korrekt. Her er nogle tips til opsætning af doven indlæsning på dit WordPress-websted:
- Lad være med at indlæse header-billeder. Da billeder placeret øverst på siden er synlige ved indlæsning, har deres dovne indlæsning ingen fordel.
- Vælg de passende pladsholdere. Vi anbefaler at bruge en ensfarvet farve eller et billede af lav kvalitet som pladsholder til dine billeder.
- Tilføj buffertid til billedindlæsning. På denne måde er dine billeder klar lige før de går ind i visningsporten for besøgende, hvilket eliminerer enhver ventetid.
- Definer dimensionerne af billedbeholderne. Dette vil hjælpe dig med at undgå pludselige layoutændringer, som vil få din webside til at se pæn ud, når den indlæses.
- Implementer kun doven indlæsning på lange sider. Lange sider inkluderer dem, der tager mere end to omgange for at nå slutningen og har mere end fem billeder.
Doven indlæsning i WordPress giver dig mulighed for at give besøgende en bedre browsingoplevelse. Ud over at forbedre webstedshastigheden reducerer denne funktion også dit båndbreddeforbrug. Alt i alt hjælper det din SEO-indsats for bedre placeringer i søgemaskinens resultater.
Andre anbefalede ressourcer
Vi inviterer dig også til at konsultere nedenstående ressourcer for at komme videre i grebet og kontrollen af dit websted og blog.
- Sådan Fix Omdiriger fejl på WordPress
- Nogle plugins til at integrere Google-tjenester på din blog
- 5 WordPress-plugins til visning af underretninger
- Sådan oprettes brugerdefinerede skabeloner på WordPress
- Ved hjælp af forskellige baggrunde WordPress
Konklusion
Det er det for denne tutorial, der viser dig, hvordan du implementerer Lazy Loading på dit WordPress-websted. Vi håber, at denne artikel hjalp dig med at forstå, hvordan du får mest muligt ud af den doven indlæsningsfunktion på WordPress-websteder. Sørg for at bruge en WordPress hosting høj kvalitet for yderligere at forbedre ydeevnen på din hjemmeside.
Hvis du har nogen bekymringer eller forslag, så lad os vide det inden for kommentarer.
Du vil dog også kunne konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
En medarbejder, del denne artikel på dine forskellige sociale netværk.
...
