Lazy Indlæser billeder: Komplet guide plus 3 måder at implementere det på

Lazy Indlæser billeder: Komplet guide plus 3 måder at implementere det på

Lazy Indlæser billeder: Komplet guide plus 3 måder at implementere det på
СОДЕРЖАНИЕ
02 июня 2020

Lazy Indlæser billeder: Komplet guide


Efterhånden som funktionalitet og interaktivitet stiger på nettet, har der været en konstant stigning i websidestørrelse i de sidste par år. Fra begyndelsen af ​​2018, den gennemsnitlige sidestørrelse på internettet stod på over 2 MB! Hvordan kan man bekæmpe dette? En lille ting, der hedder dovne indladningsbilleder, er en af ​​de bedre løsninger.

I denne vejledning gennemgår vi alle de forviklinger med doven indlæser billeder, og tale over tre forskellige måder at implementere det på.

Lad os starte med indholdsfortegnelsen over hvad der skal komme:

  • Hvorfor doven ladning betyder noget?
  • Hvad er doven belastning?
  • Fordele ved doven belastning
  • Hvad skal man overveje, når doven indlæses billeder
  • Valgmulighed 1: Implementere doven belastning fra bunden (begyndervenlig: ⭐ / 5)
  • Valgmulighed 2: Brug et JavaScript-plugin (begyndervenlig: ⭐⭐ / 5)
  • Valgmulighed 3: Brug et WordPress-plugin (begyndervenlig: ⭐⭐⭐⭐⭐ / 5)
  • Konklusion

Hvorfor doven ladning betyder noget?

Den enorme nyttelast på en webside består primært af billeder, scripts, stilark, skrifttyper og videoer. Imidlertid tager billeder over 60% af størrelsen på en typisk webside. Billeder er også kritiske for designet til en webside, så det er ikke som om du kan slippe af med dem.

Uden optimering henter brugerens webbrowser alle ressourcerne, før en side gengives fuldstændigt. Dette fører til øgede belastningstider, som kan trække folk væk. WooCommerce estimeret at et websted med e-handel for hver 100ms forbedring af siderne kan øge indtægterne med 1%.

I et sådant scenarie giver det meget mening at gøre, hvad det tager for at optimere dine belastningstider. Og da billeder er den primære bidragyder til størrelsen på websider, er det en god ide at starte med dem. Det er her, doven ladning kommer i spil.

Hvad er doven belastning?

For at forstå, hvordan doven indlæsning fungerer, er her en hurtig animeret GIF, der demonstrerer, hvordan billeder gengives på CodeinWP.

Lazy Indlæser billeder DemoLazy loading demonstration på CodeinWP

Når siden indlæses, downloades ikke alle billederne med det samme. Når du ruller ned til et billede, ser du først en sløret version af det, og det faktiske billede begynder at indlæses i baggrunden. Dette sløret billede er en lavdefinitionsversion af det endelige billede i en brøkdel af størrelsen. Dette fænomen med udsættelse af download og gengivelse af billedet, indtil en bruger ruller over det, er netop det, der kaldes doven indlæsning.

Selvom "doven" er generelt forbundet negativt, doven indlæsning er faktisk en god praksis og fører til sænkning af sideindlæsningstider ved at optimere dit websted generelt.

Bemærk. I dette indlæg ser vi på processen med doven indlæsning af billeder, men doven indlæsning er ikke begrænset til blot billeder – du kan bruge den samme idé, når du gengiver andre ressourcer som videoer, kommentarer (der er en hel del om, hvordan man gør det i dette indlæg) og endda skrifttyper.

Fordele ved doven belastning

Da indlæsningstid for en webside er en vigtig bidragyder til opgivelse, kan dovne indlæsning af billeder betydeligt føre til en opløftning af brugere, der forbliver på siden, indtil den indlæses, hvilket i sidste ende kan føre til højere salg eller konverteringer.

Den anden markante fordel ved doven indlæsning af billeder er sænkede serverregninger. Du serverer kun de billeder, som seeren ruller gennem, og gemmer på båndbredde for dele af siden, der ikke blev vist. Da billeder udgør en dominerende del af sidevægten, kan dette føre til potentielt lavere serveromkostninger.

Indlæsning af alle billederne foran er potentielt skadelig for dine læsere. Hvis brugeren har en ubegrænset dataplan for internettet, skal det sandsynligvis ikke have noget at gøre. På planer med begrænsede data gemmer du imidlertid din seers data ved doven at indlæse billeder.

Hvad skal man overveje, når doven indlæses billeder

Nu hvor du har besluttet at implementere doven indlæsning på dit websted på den rigtige måde, lad os gå over et par centrale overvejelser om, hvordan vi får det til.

Identificer de billeder, du vil dovne belastning

Ikke alle billeder er ideelle til doven indlæsning. For eksempel ønsker du ikke at dovne indlæse dem, der er integrerede i strukturen i dit design og skal indlæses for at gengive alt korrekt.

Kun de billeder, der er slukket for skærmen og ikke bidrager til sidens struktur, skal overvejes til doven indlæsning. Dette er typisk billeder i  elementer, der vises i kroppen.

Vælg dine billedpladsholdere

Den næste ting at overveje er det mellembillede eller farve, der skal vises, når billedet indlæses, når en seer har rullet over det. Billedindlæsningstid afhænger af, hvor stort billedet er, og kan endda tage op til et par sekunder. Derfor skal du overveje, hvad du foretrækker at bruge i belastningstiden.

Der er to retninger, som udviklere normalt tager i denne forbindelse:

  • Brug den dominerende farve på billedet som baggrund
  • Brug en version af lav kvalitet af billedet

pladsopholder med lav opløsningEt eksempel på lavkvalitetsversioner af billeder som pladsholdere til doven indlæsning

Det rigtige valg her afhænger af designet på dit websted, og hvad du foretrækker at blive vist for brugeren, når han venter på, at billedet skal indlæses.

Selvom en teknik er at indlæse billeder, så snart de kommer ind i visningsporten, kan du overveje at tilføje en buffertid før det finder sted – så brugeren aldrig ser pladsholderen.

Pas på at ændre sidestrukturen, når du indlæser billeder

Før et billede indlæses, vises det muligvis med 0 px-dimensioner. Dette er ikke ideelt til at bevare din designstruktur.

Dette kan let ændre layoutet på siden og tekstens placering. En enkel løsning er at tilføje de rigtige dimensioner til billedet med det samme – dette sikrer, at billedelementets størrelse forbliver den samme efter belastning.

Med ovenstående betragtninger ude af vejen, lad os nu se på, hvordan vi rent faktisk kan implementere doven indlæsning på et WordPress-sted.

Valgmulighed 1: Implementere doven belastning fra bunden

Lad os først se, hvordan vi gør dette uden at bruge nogen plugins. Denne mulighed anbefales til dem af jer, der er trygge med JavaScript. Ideelt skal følgende skridt tages:

  1. Undgå indlæsning af billede under sideindlæsning: Når du specificerer billedets URL eller sti i src-attributten for  tag, vil billedet blive downloadet af browseren under sideindlæsning. For at forhindre browseren i at downloade billedet, skal du angive placeringen af ​​billedet i data-src-attributten til  tag i stedet.
  2. Registrer eventshåndteringsfunktioner i JavaScript for at se efter elementer på to begivenheder: indlæsning og rulle.
  3. Når et element kommer ind i visningsporten, skal du indlæse datasrc-elementets værdi i src-elementet, hvilket udløser browseren til at indlæse billedet.

En enkel implementering af denne proces er blevet forklaret af Robin Osborne og demoen er tilgængelig på CodePen.

Valgmulighed 1.1: Brug krydsovervågnings-API’en

Kryds observatør API hjælper med at identificere DOM-elementer, der er i visningsporten på et givet tidspunkt. Dette er en renere måde at implementere doven belastning på uden at skrive eventshåndteringsfunktioner. Antallet af kodelinjer til implementering af doven belastning falder også markant. Browserkompatibilitet er dog stadig et problem.

Google Developers Blog forklarer implementeringen af ​​krydsobservatør-API gennem denne CodePen-demo.

Valgmulighed 2: Brug et JavaScript-plugin

De to muligheder diskuteret ovenfor har brug for kendskab til JavaScript på mellemniveau. Hvis du leder efter en lettere implementering af doven indlæsning uden at bruge et tungt plugin, der lægger belastning på serveren, kan du prøve det almindelige JavaScript-plugin, Blazy.

Det bLazy bibliotek ved en størrelse på mindre end 2 KB lægger ingen ekstra belastning på nyttelasten, mens du let kan håndtere doffe indlæsning af billeder.

For at bruge bLazy-biblioteket skal du initialisere  elementer med følgende attributter:

  • klasse: indstil klassen for alle  tags til b-doven
  • src: link til pladsholderbilledet
  • data-src: link til det billede, der skal indlæses
  • data-src-small: link til billedet, der skal indlæses på skærme, der er mindre end 420 pixels brede

Du er nødt til at initialisere bLazy-biblioteket i bare et par kodelinjer, og alle dine billeder gengives gennem doven indlæsning.

; (funktion () {
// Initialiser
var bLazy = ny Blazy ();
}) ();

En CodePen-demo er tilgængelig her.

Valgmulighed 3: Brug et WordPress-plugin

Der er et par muligheder derude, der kan give dig doven belastning. Især:

Alle disse plugins håndterer doven indlæsning automatisk for dig. Hver leveres også med nogle gode sidefunktioner.

For eksempel indlæser Lazy Load af WP Rocket også YouTube-videoer og erstatter dem med et miniaturebillede.

Optimole, bortset fra at være den nyeste tilføjelse til ThemeIsle-familien, giver dig også bunnsolid billedoptimering (som testet her) med ganske avancerede funktioner i den henseende. For eksempel giver det dig dynamisk ændring af størrelse baseret på brugerens skærmstørrelse.


Billedoptimering & Lazy Load af Optimole Billedoptimering & Lazy Load af Optimole

Forfatter (e): Optimole

Nuværende version: 2.3.1

Sidst opdateret: 21. april 2020

optimole-wp.zip


96% Ratings


50.000 + Installationer


WP 4.7 + Kræver

Som med de fleste plugins, skal du installere plugin og aktivere funktionen i plugins kontrolpanel for at få doven indlæsning:

Optimole til Lazy Indlæser billeder

Konklusion

Dette indlæg udforskede behovet og fordelene ved doven indlæsning af billeder. Vi diskuterede også tre forskellige måder at implementere doven indlæsning på et WordPress-websted:

  • Hvis du har mellemfærdighed inden for JavaScript, kan du implementere doven indlæsning fra bunden
  • Hvis du kender noget programmering, men ikke ønsker nogen plugins, et let JavaScript-bibliotek, er bLazy en mulighed
  • Hvis du gerne vil have en enkelt-klik-løsning til doven indlæsning af billeder på dit websted, skal du gå efter et plugin som Optimole

Hvad synes du om doven lastning? Har du prøvet at bruge det til at forbedre ydelsen på dit websted?

Glem ikke at deltage i vores nedbrudskursus om at fremskynde dit WordPress-sted. Med nogle enkle rettelser kan du reducere din indlæsningstid med endda 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector