Juokingi nuotraukų įkėlimas: išsamus vadovas plius 3 būdai jį įgyvendinti

Juokingi nuotraukų įkėlimas: išsamus vadovas


Didėjant žiniatinklio funkcionalumui ir interaktyvumui, per pastaruosius kelerius metus nuolat didėjo tinklalapio dydis. Nuo 2018 m. Pradžios, vidutinis puslapio dydis internete sudarė daugiau nei 2 MB! Kaip su tuo kovoti? Vienas iš geresnių sprendimų yra šiek tiek vadinamas tingus nuotraukų įkėlimas.

Šiame vadove mes einame per visos tinginių krovimo vaizdų painiavos, ir kalbėkite apie tris skirtingus jo įgyvendinimo būdus.

Pradėkime nuo turinio, kas bus:

  • Kodėl tingus krovimas??
  • Kas yra tingus krovimas?
  • Juokingo krovimo pranašumai
  • Į ką atsižvelgti tinginiui įkeliant vaizdus
  • 1 variantas: pradėkite tingų pakrovimą nuo nulio (tinka pradedančiajam: ⭐ / 5)
  • 2 variantas: naudokite „JavaScript“ papildinį (tinka pradedančiajam: ⭐⭐ / 5)
  • 3 variantas: naudokite „WordPress“ papildinį (tinka pradedančiajam: ⭐⭐⭐⭐⭐ / 5)
  • Išvada

Kodėl tingus krovimas??

Didžiulį tinklalapio naudingumą pirmiausia sudaro vaizdai, scenarijai, stiliaus lentelės, šriftai ir vaizdo įrašai. Tačiau vaizdai užima daugiau kaip 60% tipiško tinklalapio dydžio. Vaizdai taip pat yra labai svarbūs kuriant tinklalapį, todėl nėra taip, kad galite jų atsikratyti.

Prieš optimizuodamas puslapį, naudotojo žiniatinklio naršyklė atsisiunčia visus išteklius prieš visiškai atverčiant puslapį. Dėl to pailgėja krovimo laikas, o tai žmones gali atitraukti. Apskaičiuota „WooCommerce“ kad už kiekvieną 100 ms puslapio spartos pagerėjimą el. prekybos svetainė gali padidinti pajamas 1%.

Panašiame scenarijuje daryti daug ką reikia norint optimizuoti krovimo laiką. Kadangi vaizdai yra svarbiausias veiksnys, lemiantis tinklalapio dydį, pradėti nuo jų yra gera idėja. Būtent čia pradedamas tingus krovimas.

Kas yra tingus krovimas?

Norėdami suprasti, kaip veikia tingus krovimas, čia yra greitas animacinis GIF, parodantis, kaip vaizdai pateikiami „CodeinWP“.

Tingus įkeliamas vaizdų demonstravimasJuokinga pakrovimo demonstracija „CodeinWP“

Kai puslapis įkeliamas, visi vaizdai neatsisiunčiami iš karto. Slinkdami žemyn iki vaizdo, pirmiausia pamatysite neryškią jo versiją, o tikrasis vaizdas pradedamas krauti fone. Šis neryškus vaizdas yra mažos raiškos galutinio vaizdo versija, atitinkanti dalį jo dydžio. Šis atvaizdo atsisiuntimo ir pateikimo atidėjimo reiškinys, kol vartotojas pereina prie jo, yra būtent tai, kas vadinama tinginiu įkėlimu.

Nors "tingus" paprastai yra susijęs su neigiamai, tingus krovimas iš tikrųjų yra gera praktika ir dėl to sumažėja puslapio įkėlimo laikas, optimizuojant jūsų svetainę.

Pastaba. Šiame įraše apžvelgiame tinginio nuotraukų įkėlimo procesą, tačiau tingus įkėlimas neapsiriboja vien vaizdais – tą pačią idėją galite naudoti teikdami bet kokius kitus išteklius, pavyzdžiui, vaizdo įrašus, komentarus (čia yra visas skyrius, kaip tai padaryti) į šis įrašas) ir net šriftus.

Juokingo krovimo pranašumai

Kadangi tinklalapio įkėlimo laikas labai prisideda prie atsisakymo, tingus nuotraukų įkėlimas gali smarkiai paskatinti vartotojus, kurie lieka puslapyje, kol jis įkeliamas, o tai galiausiai gali sukelti didesnį pardavimą ar konversijas.

Kitas reikšmingas tingių nuotraukų įkėlimo pranašumas yra mažesnės sąskaitos už serverius. Jūs pateikiate tik tuos vaizdus, ​​kuriuos žiūri žiūrovas, ir sutaupote praleistą puslapio dalių pralaidumą. Kadangi vaizdai sudaro dominuojančią puslapio svorio dalį, dėl to serverio išlaidos gali sumažėti.

Visų vaizdų įkėlimas iš anksto gali pakenkti ir jūsų skaitytojams. Jei vartotojas naudojasi neribotu žiniatinklio duomenų planu, greičiausiai tai neturėtų reikšmės. Tačiau planuose, kurių duomenų kiekis yra ribotas, jūs išsaugote savo žiūrovo duomenis tingiai įkeldami vaizdus.

Į ką atsižvelgti tinginiui įkeliant vaizdus

Dabar, kai jūs nusprendėte tinkamai atlikti tingų įkėlimą į savo svetainę, apžvelkime kelis pagrindinius svarstymus, kaip tai padaryti..

Nurodykite vaizdus, ​​kuriuos norite tingiai įkelti

Ne visi vaizdai yra idealūs tingiam įkelti. Pvz., Nenorėtumėte tingėti įkelti tų, kurie yra neatsiejami jūsų dizaino struktūros ir turi būti įkelti, kad viskas būtų teisinga..

Jei norite tingiai įkelti, turėtų būti atsižvelgiama tik į vaizdus, ​​kurie yra ne ekrane ir neprisideda prie puslapio struktūros. Paprastai tai yra vaizdai  elementai, kurie atsiranda puslapio tekste.

Pasirinkite vaizdų vietos žymeklius

Kitas dalykas, į kurį reikia atkreipti dėmesį, yra tarpinis vaizdas arba spalva, kuri turėtų būti rodoma įkeliant atvaizdą, kai žiūrovas perlenks jį. Vaizdo įkėlimo laikas priklauso nuo to, kiek jis didelis, ir gali trukti iki kelių sekundžių. Todėl turite apsvarstyti, ką norėtumėte naudoti per krovimo laiką.

Yra dvi kryptys, kurių kūrėjai paprastai atsižvelgia į tai:

  • Naudokite dominuojančią vaizdo spalvą kaip foną
  • Naudokite žemos kokybės vaizdo versiją

vietos rezervuaras, turintis mažai vietosŽemos kokybės vaizdų variantai, naudojami kaip tingus krovimas

Čia tinkamas pasirinkimas priklauso nuo jūsų svetainės dizaino ir to, ką norėtumėte parodyti vartotojui laukiant, kol paveikslėlis bus įkeltas..

Nors vienas iš būdų yra įkelti vaizdus, ​​kai tik jie įeina į peržiūros prievadą, galbūt norėsite apsvarstyti galimybę įtraukti buferio laiką prieš tai įvykstant – kad vartotojas niekada nematytų vietos žymeklio..

Atsargiai pakeiskite puslapio struktūrą įkeldami vaizdus

Prieš įkeliant vaizdą, jis gali būti rodomas naudojant 0 pikselių matmenis. Tai nėra idealu norint išlaikyti jūsų dizaino struktūrą.

Tai gali lengvai pakeisti puslapio išdėstymą ir teksto padėtį. Paprastas sprendimas yra iškart pridėti teisingus paveikslėlio matmenis – taip užtikrinama, kad įkeliant vaizdo elementą, dydis išliks toks pats.

Nepaisydami aukščiau pateiktų svarstymų, dabar pažvelkime, kaip iš tikrųjų galime įgyvendinti tingų įkėlimą į „WordPress“ svetainę.

1 variantas: pradėkite tingų pakrovimą nuo nulio

Pirmiausia pažvelkime, kaip tai padaryti nenaudojant jokių papildinių. Ši parinktis rekomenduojama tiems, kuriems patinka „JavaScript“. Idealiu atveju reikia atlikti šiuos veiksmus:

  1. Neleisti įkelti vaizdo įkeliant puslapį: Kai „Src“ atribute nurodote vaizdo URL arba kelią  žymą, vaizdą atsisiųs naršyklė įkeliant puslapį. Norėdami neleisti naršyklei atsisiųsti vaizdo, turite nurodyti vaizdo vietą duomenų atribute data-src.  vietoj žymės.
  2. Užregistruokite įvykių tvarkyklės funkcijas „JavaScript“, kad patikrintumėte, ar nėra dviejų įvykių elementų: pakrovimo ir slinkties.
  3. Kai elementas patenka į peržiūros prievadą, įkelkite „data-src“ elemento vertę į „src“ elementą, kuris suaktyvina naršyklę įkelti vaizdą.

Paprastas šio proceso įgyvendinimas buvo paaiškintas Robinas Osbornas ir demonstracinę versiją galima įsigyti „CodePen“.

1.1 parinktis: naudokitės sankryžos stebėtojo API

Susikirtimo stebėtojų API padeda identifikuoti DOM elementus, kurie bet kuriuo metu yra rodinio prievade. Tai yra švaresnis būdas įgyvendinti tingų krūvį, nerašant įvykių tvarkytojo funkcijų. Labai sumažėja ir kodo eilučių skaičius, norint įgyvendinti tingų krūvį. Tačiau naršyklių suderinamumas tebėra problema.

„Google“ kūrėjų tinklaraštis paaiškina sankryžos stebėtojo API įgyvendinimą per šią „CodePen“ demonstracinę versiją.

2 variantas: naudokite „JavaScript“ papildinį

Dvi aukščiau aptartos galimybės reikalauja vidutinio lygio „JavaScript“ žinių. Jei ieškote lengvesnio tinginio įkėlimo, nenaudodami sunkaus įskiepio, kuris kelia apkrovą į serverį, galite išbandyti paprastą „JavaScript“ papildinį., bLazy.

 „bLazy“ biblioteka mažesnis nei 2 KB, nekelia papildomos apkrovos naudingam kroviniui, tuo pačiu leisdamas lengvai tvarkyti tinginius įkeltus vaizdus.

Norėdami naudotis „bLazy“ biblioteka, turite pradėti  elementai su šiais požymiais:

  • klasė: nustatykite visų klasę  žymės b-tingus
  • src: nuoroda į vietos žymeklio vaizdą
  • data-src: nuoroda į paveikslėlį, kurį norite įkelti
  • „data-src-small“: nuoroda į vaizdą, kad jis būtų įkeltas mažesnio nei 420 pikselių pločio ekranuose

Turite inicijuoti „bLazy“ biblioteką tik keliomis kodo eilutėmis ir visi jūsų vaizdai bus pateikiami tingiai įkeliant..

;(funkcija() {
// Inicijuokite
var bLazy = naujas Blazy ();
}) ();

Galima „CodePen“ demonstracinė versija čia.

3 variantas: naudokite „WordPress“ papildinį

Yra keletas variantų, kurie gali suteikti tinginį pakraunant. Visų pirma:

Visi šie papildiniai automatiškai atliks tingų krovimą. Kiekvienas iš jų taip pat turi keletą malonių šalutinių savybių.

Pavyzdžiui, „Lazy Load by WP Rocket“ tingus įkelia „YouTube“ vaizdo įrašus ir juos pakeičia miniatiūra.

„Optimole“ ne tik yra naujausias „ThemeIsle“ šeimos papildymas, bet ir suteikia optimalų vaizdo optimizavimą (kaip čia išbandyta), turinčių gana pažangių funkcijų šiuo atžvilgiu. Pvz., Suteikia dinamišką dydžio keitimą atsižvelgiant į vartotojo ekrano dydį.


Vaizdo optimizavimas ir tingus įkėlimas „Optimole“ Vaizdo optimizavimas & Lazy Load by Optimole

Autorius (-ai): Optimole

Dabartinė versija: 2.3.1

Paskutinį kartą atnaujinta: 2020 m. Balandžio 21 d

optimole-wp.zip


96% reitingai


50 000 ir daugiau įdiegimų


WP 4.7 + reikalinga

Kaip ir daugumoje papildinių, norėdami tingiai įkelti, tiesiog įdiekite papildinį ir įgalinkite funkciją papildinio valdymo skydelyje:

„Optimole“ tingiems įkeliant vaizdus

Išvada

Šiame įraše buvo nagrinėjamas tingių nuotraukų įkėlimo poreikis ir nauda. Taip pat aptarėme tris skirtingus tinginio įkėlimo „WordPress“ svetainėje įgyvendinimo būdus:

  • Jei turite vidutinį „JavaScript“ žinių lygį, galite tingiai pakrauti nuo nulio
  • Jei žinote šiek tiek programavimo, bet nenorite jokių papildinių, lengvos „Java“ bibliotekos, „bLazy“ yra galimybė
  • Jei norėtumėte vieno paspaudimo sprendimo, kaip tingiai įkelti vaizdus į savo svetainę, turėtumėte ieškoti papildinio, pavyzdžiui, „Optimole“

Ką manote apie tingų krovimą? Ar bandėte jį naudoti norėdami pagerinti savo svetainės našumą?

Nepamirškite prisijungti prie avarijos kurso, kaip pagreitinti jūsų „WordPress“ svetainę. Taikydami keletą paprastų pataisų galite sumažinti įkrovimo laiką net 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