Laisk piltide laadimine: täielik juhend pluss 3 viisi selle rakendamiseks

Laisk piltide laadimine: täielik juhend


Kuna funktsionaalsus ja interaktiivsus veebis suurenevad, on viimaste aastate jooksul pidevalt suurenenud veebilehtede suurus. 2018. aasta alguse seisuga, keskmine lehe suurus Internetis oli üle 2 MB! Kuidas sellega võidelda? Üks paremaid lahendusi on pilt, mida nimetatakse laiskade piltide laadimiseks.

Selles juhendis käime läbi kõik keerukad laiskade piltide laadimine, ja rääkige selle rakendamise kolmest erinevast viisist.

Alustame järgmise sisukorraga:

  • Miks laisk laadimine on oluline?
  • Mis on laisk laadimine?
  • Laisa laadimise eelised
  • Mida arvestada piltide laisa laadimisega
  • 1. võimalus: rakendage laisalt laadimist nullist (algajasõbralik: ⭐ / 5)
  • 2. võimalus: kasutage JavaScripti pistikprogrammi (algajasõbralik: ⭐⭐ / 5)
  • 3. võimalus: kasutage WordPressi pistikprogrammi (algajasõbralik: ⭐⭐⭐⭐⭐ / 5)
  • Järeldus

Miks laisk laadimine on oluline?

Veebilehe tohutu kasulik koormus koosneb peamiselt piltidest, skriptidest, stiililehtedest, fondidest ja videotest. Kuid piltide osakaal tüüpilise veebilehe suurusest on üle 60%. Pildid on kriitilise tähtsusega ka veebilehe kujundamisel, nii et pole nii, et saate neist lahti saada.

Ilma optimeerimiseta laadib kasutaja veebibrauser enne lehe täielikuks renderdamist alla kõik ressursid. See toob kaasa pikema laadimisaja, mis võib inimesi eemale juhtida. WooCommerce hinnanguliselt et e-kaubanduse veebisait võib iga 100 millimeetri leheküljekiiruse täiustamise korral tulusid suurendada 1%.

Niisuguse stsenaariumi korral on koormusaegade optimeerimiseks kõik vajalik teha mõistlik. Ja kuna veebilehtede suuruse suurendajad on peamiselt pildid, on nendest alustamine hea mõte. Siin tuleb mängu laisk laadimine.

Mis on laisk laadimine?

Et mõista, kuidas laisk laadimine töötab, on siin kiire animeeritud GIF, mis näitab, kuidas pilte CodeinWP-s renderdatakse.

Laisk piltide laadimise demoLaisk laadimismonstratsioon CodeinWP-s

Lehe laadimisel ei laadita kõiki pilte kohe alla. Kujutisele allapoole kerimisel näete kõigepealt selle hägust versiooni ja tegelik pilt hakkab taustal laadima. See hägune pilt on lõpppildi madala täpsusega versioon, murdosa sellest. See nähtus, mis seisneb pildi allalaadimise ja renderdamise edasilükkamises, kuni kasutaja selle üle kerib, on täpselt see, mida nimetatakse laisaks laadimiseks.

Kuigi "laisk" seostatakse üldiselt negatiivselt, laisk laadimine on tegelikult hea tava ja vähendab lehe laadimisaega, optimeerides teie saiti üldiselt.

Märge. Selles postituses vaatleme piltide laiska laadimise protsessi, kuid laisk laadimine ei piirdu pelgalt piltidega – saate sama ideed kasutada muude ressursside, näiteks videote, kommentaaride renderdamisel (seal on terve jaotis, kuidas seda teha) sisse see postitus) ja isegi fonte.

Laisa laadimise eelised

Kuna veebilehe laadimisaeg on loobumisest suur osa, võib laiskade piltide laadimine märkimisväärselt kaasa tuua kasutajaid, kes püsivad lehel kuni laadimiseni, mis võib lõppkokkuvõttes põhjustada suuremat müüki või konversioone.

Piltide laisa laadimise teine ​​oluline eelis on serveriarvete alandamine. Esitate ainult neid pilte, mida vaataja sirvib, ja säästate ribalaiust nende lehtede osade jaoks, mida ei vaadatud. Kuna pildid moodustavad lehe kaalu domineeriva osa, võib see põhjustada serverikulude vähenemise.

Kõigi piltide ette laadimine on kahjulik ka teie lugejatele. Kui kasutajal on veebi jaoks piiramatu andmeplaan, ei tohiks see arvatavasti olla oluline. Piiratud andmetega plaanides salvestate aga oma vaataja andmed piltide laiska laadimisega.

Mida arvestada piltide laisa laadimisega

Nüüd, kui olete otsustanud oma veebisaidile laiska laadimise õigel viisil rakendada, lubage meil minna mõne peamise kaalutlusega, kuidas seda teha.

Tuvastage pildid, mida soovite laisalt laadida

Kõik pildid pole ideaalsed laisa laadimise jaoks. Näiteks ei soovi te laisalt laadida neid, mis on teie disaini ülesehituses lahutamatud ja mida tuleb kõik õigesti kuvada,.

Laisade laadimiste puhul tuleks arvestada ainult piltidega, mis pole ekraanil ja mis ei aita lehe struktuuri. Tavaliselt on need pildid  elemendid, mis ilmuvad lehe põhiosas.

Valige pildi kohahoidjad

Järgmine asi, mida tuleks arvestada, on vahepealne pilt või värv, mida peaks kuvama pildi laadimisel, kui vaataja on selle üle kerinud. Kujutise laadimisaeg sõltub sellest, kui suur pilt on, ja võib võtta isegi kuni paar sekundit. Seetõttu peate kaaluma, mida eelistaksite laadimise ajal kasutada.

On kaks suunda, mida arendajad selles osas tavaliselt võtavad:

  • Kasutage taustana pildi domineerivat värvi
  • Kasutage pildi madala kvaliteediga versiooni

madala resistentsusega kohahoidjaNäide piltide madala kvaliteediga versioonidest laisklaadimise kohahoidjatena

Õige valik sõltub teie saidi kujundusest ja sellest, mida soovite pildi laadimise ootamisel kasutajale näidata.

Ehkki üks viis on piltide laadimine kohe, kui nad vaatepordisse sisenevad, võiksite kaaluda puhveraja lisamist enne seda – nii et kasutaja ei näeks kunagi kohahoidjat.

Hoiduge piltide laadimisel lehe struktuuri muutmisest

Enne pildi laadimist võidakse seda kuvada mõõtmetega 0 pikslit. See pole ideaalne kujundusstruktuuri säilitamiseks.

See võib hõlpsalt muuta lehe paigutust ja teksti asukohta. Lihtne lahendus on lisada kujutisele kohe õiged mõõtmed – see tagab, et pildielemendi suurus jääb pärast laadimist samaks.

Vaatamata ülaltoodud kaalutlustele vaatame nüüd, kuidas saaksime WordPressi saidil laiska laadimist tegelikult rakendada.

1. võimalus: rakendage laisalt laadimist nullist

Vaatame kõigepealt, kuidas seda teha ilma pistikprogramme kasutamata. See valik on soovitatav neile, kes tunnevad JavaScripti kasutamist. Ideaalis on vaja võtta järgmised sammud:

  1. Takistage pildi laadimist lehe laadimise ajal: kui määrate pildi URL-i või tee atribuudis src  sildi, laadib brauser pildi alla lehe laadimise ajal. Brauseri pildi allalaadimise takistamiseks peate määrama pildi asukoha atribuudis data-src pildi asukoha  sildi asemel.
  2. Registreeri sündmuste käitleja funktsioonid JavaScriptis, et kontrollida elemente kahel sündmusel: laadimine ja kerimine.
  3. Kui element satub vaateporti, laadige data-src elemendi väärtus src-elemendisse, mis käivitab brauseri pildi laadimiseks.

Selle protsessi lihtsat rakendamist on selgitanud Robin Osborne ja demo on saadaval saidil CodePen.

Valik 1.1: kasutage ristmiku vaatleja API-t

Ristmiku vaatleja API aitab tuvastada DOM-i elemente, mis on vaatenurgas igal ajahetkel. See on puhtam viis laiska koormuse rakendamiseks ilma sündmusekäitleja funktsioone kirjutamata. Laisa koormuse rakendamiseks kasutatavate koodiridade arv väheneb ka märkimisväärselt. Brauseri ühilduvus on endiselt probleem.

Google’i arendajate ajaveeb selgitab ristmike vaatleja API rakendamist läbi see CodePeni demo.

2. võimalus: kasutage JavaScripti pistikprogrammi

Kaks eespool käsitletud võimalust vajavad JavaScripti tundmist keskmisel tasemel. Kui otsite laiska laadimise hõlpsamat rakendamist ilma rasket pistikprogrammi kasutamata, mis laadib serverisse koormuse, võite proovida tavalist JavaScripti pistikprogrammi, bLazy.

 bLazy raamatukogu alla 2 kB suurune koormus ei lisa lisakoormust, võimaldades samal ajal hõlpsalt piltide laadimisega hakkama saada.

BLazy teegi kasutamiseks peate selle lähtestama  järgmiste atribuutidega elemendid:

  • klass: määrake kõigi klass  sildid b-laiskadele
  • src: link kohatäite kujutisele
  • data-src: link pildi juurde laadimiseks
  • data-src-small: link pildi juurde laadimiseks ekraanidel, mille laius on alla 420 piksli

Peate lähtestama bLazy teegi vaid mõne koodiridaga ja kõik teie pildid renderdatakse laisalt laadides.

; (funktsioon () {
// Initsialiseerige
var bLazy = uus Blazy ();
}) ();

Saadaval on CodePeni demo siin.

3. võimalus: kasutage WordPressi pistikprogrammi

Seal on paar võimalust, mis võivad teile laisa laadimise anda. Kõige olulisem:

Kõik need pistikprogrammid tegelevad teie jaoks automaatselt laisa laadimisega. Igal neist on ka mõned toredad kõrvalomadused.

Näiteks WP Rocketi Lazy Load laadib laisalt ka YouTube’i videod ja asendab need pisipildiga.

Optimole pakub lisaks ThemeIsle tooteperekonna uusimale lisandusele ka optimaalse pildi optimeerimise (nagu siin testitud), millel on selles osas üsna arenenud funktsioonid. Näiteks annab see dünaamilise suuruse muutmise vastavalt kasutaja ekraani suurusele.


Kujutise optimeerimine ja laisklaadimine Optimole poolt Kujutise optimeerimine & Lazy Load by Optimole

Autor (id): Optimole

Praegune versioon: 2.3.1

Viimati värskendatud: 21. aprillil 2020

optimole-wp.zip


96% hinnangud


50 000 + installida


WP 4.7 + Nõuab

Nagu enamiku pistikprogrammide korral, laadige laiska laadimise korral lihtsalt pistikprogramm sisse ja lubage funktsioon pistikprogrammi juhtpaneelil.

Optimole piltide laisa laadimise jaoks

Järeldus

Selles postituses uuriti piltide laisa laadimise vajadust ja eeliseid. Arutasime ka kolme erinevat viisi, kuidas WordPressi veebisaidil laiska laadimist rakendada:

  • Kui teil on JavaScripti keskmine oskus, saate laiska laadimist nullist rakendada
  • Kui teate mõnda programmeerimist, kuid ei soovi pistikprogramme, siis kerge JavaScripti teeki, on bLazy võimalus
  • Kui soovite oma veebisaidile piltide laiska laadimiseks ühe klõpsuga lahendust, peaksite otsima pistikprogrammi, näiteks Optimole

Mida arvate laisast laadimisest? Kas olete proovinud seda kasutada oma veebisaidi toimivuse parandamiseks?

Ärge unustage liituda meie WordPressi saidi kiirendamise kursusega. Mõne lihtsa parandusega saate laadimisaega vähendada isegi 50–80%:

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