Laiska lataa kuvia: Complete Guide Plus 3 tapaa toteuttaa se

Laiska lataa kuvia: Complete Guide Plus 3 tapaa toteuttaa se

Laiska lataa kuvia: Complete Guide Plus 3 tapaa toteuttaa se
СОДЕРЖАНИЕ
02 июня 2020

Laiska lataa kuvia: täydellinen opas


Kun toimivuus ja interaktiivisuus lisääntyvät verkossa, verkkosivujen koko on kasvanut tasaisesti viime vuosina. Vuodesta 2018 lähtien, keskimääräinen sivukoko Internetissä oli yli 2 Mt! Kuinka taistella tätä vastaan? Pieni jotain, jota kutsutaan laiskaa kuvien lataamista, on yksi parempia ratkaisuja.

Tässä oppaassa käydään läpi kaikki hienovaraiset laiskojen kuvien lataaminen, ja puhua kolmesta erilaisesta tavasta toteuttaa se.

Aloitetaan sisällöllä tulevista asioista:

  • Miksi laiska lastaus on tärkeää?
  • Mikä on laiska lastaus?
  • Laiskan lataamisen edut
  • Mitä pitää ottaa huomioon laiskaa kuvan lataamista varten
  • Vaihtoehto 1: Suorita laiska lataus tyhjästä (aloittelijaystävällinen: ⭐ / 5)
  • Vaihtoehto 2: Käytä JavaScript-laajennusta (aloittelijaystävällinen: ⭐⭐ / 5)
  • Vaihtoehto 3: Käytä WordPress-laajennusta (aloittelijaystävällinen: ⭐⭐⭐⭐⭐ / 5)
  • johtopäätös

Miksi laiska lastaus on tärkeää?

Verkkosivun valtava hyötykuorma koostuu pääasiassa kuvista, skripteistä, tyylitaulukoista, kirjasimista ja videoista. Kuvien koko on kuitenkin yli 60% tyypillisen verkkosivun koosta. Kuvat ovat myös kriittisiä verkkosivun suunnittelulle, joten et voi päästä eroon niistä.

Ilman optimointia käyttäjän verkkoselain lataa kaikki resurssit ennen sivun kokonaan tekemistä. Tämä johtaa pidentyneisiin latausaikoihin, jotka voivat vetää ihmiset pois. WooCommerce arvioidaan että jokaista 100 millisivua sivunopeuden parannuksesta verkkokauppasivusto voi kasvattaa tuloja yhdellä prosentilla.

Tällaisessa tilanteessa on paljon järkeä tehdä kaikki tarvittava aika latausaikojen optimoimiseksi. Ja koska kuvat ovat ensisijainen tekijä verkkosivujen koosta, niiden aloittaminen on hyvä idea. Täällä laiska lastaus tulee peliin.

Mikä on laiska lastaus?

Ymmärtääksesi kuinka laiska lataus toimii, tässä on nopea animoitu GIF, joka osoittaa kuinka kuvat esitetään CodeinWP: llä.

Laiska lataa kuvia esittelyLaiska latauksen esittely CodeinWP: llä

Kun sivu latautuu, kaikkia kuvia ei ladata heti. Kun vierität kuvan kohdalle, näet ensin sumennetun version siitä, ja todellinen kuva alkaa latautua taustalle. Tämä epäselvä kuva on loppukuvan matalan tarkkuuden versio, murto-osa koosta. Tämä kuvan lataamisen ja esittämisen lykkääminen siihen asti, kunnes käyttäjä vierittää sitä, on juuri niin kutsuttu laiska lataus.

Siitä huolimatta "laiska" liittyy yleensä negatiivisesti, laiska lataus on itse asiassa hyvä käytäntö ja johtaa sivujen latausaikojen lyhentämiseen optimoimalla sivustosi yleisesti.

Merkintä. Tässä viestissä tarkastelemme laiskojen kuvien lataamisprosessia, mutta laiska lataus ei rajoitu pelkästään kuviin – voit käyttää samaa ajatusta tarjoamalla muita resursseja, kuten videoita, kommentteja (siellä on kokonainen osio kuinka tehdä tämä sisään Tämä postaus) ja jopa fontit.

Laiskan lataamisen edut

Koska verkkosivun latausaika on tärkeä tekijä hylkäämisessä, laiska kuvien lataaminen voi merkittävästi johtaa käyttäjien kohoamiseen, jotka pysyvät sivulla, kunnes se latautuu, mikä voi lopulta johtaa suurempaan myyntiin tai tulokseen.

Toinen huomattava etu laiskojen kuvien lataamisesta on alennetut palvelinlaskut. Tarjoat vain niitä kuvia, joita katsoja vierittää, ja säästät kaistanleveyttä sivuille, joita ei ole katsottu. Koska kuvat muodostavat hallitsevan osan sivun painosta, tämä voi johtaa potentiaalisesti alhaisempiin palvelinkustannuksiin.

Kaikkien kuvien lataaminen etuosaan voi olla haitallista myös lukijoillesi. Jos käyttäjällä on rajoittamaton verkkosuunnitelma, sillä ei todennäköisesti pitäisi olla merkitystä. Tallennat kuitenkin katsojasi tietoja suunnitelmilla, joilla on rajoitettua tietoa lataamalla kuvia laiskoilla.

Mitä pitää ottaa huomioon laiskaa kuvan lataamista varten

Nyt kun olet päättänyt toteuttaa laiska lataamisen verkkosivustollesi oikealla tavalla, siirrytään seuraavaksi muutamiin tärkeimpiin näkökohtiin sen tekemiseksi..

Tunnista kuvat, jotka haluat laiskoittaa

Kaikki kuvat eivät ole ihanteellisia laiskoille latauksille. Esimerkiksi, et halua laiskaa lataamasta niitä, jotka ovat olennaisia ​​suunnittelun rakenteelle ja jotka on ladattava, jotta kaikki saadaan oikein.

Vain kuvat, jotka ovat ruudun ulkopuolella ja eivät vaikuta sivun rakenteeseen, tulee ottaa huomioon laiskaa latausta varten. Tyypillisesti nämä ovat kuvia  elementit, jotka näkyvät sivun rungossa.

Valitse kuvapaikannimet

Seuraava huomioitava asia on välikuva tai väri, joka tulisi näyttää, kun kuvaa ladataan, kun katsoja on vierittänyt sitä. Kuvan latausaika riippuu kuvan koosta, ja se voi kestää jopa muutaman sekunnin. Siksi sinun on pohdittava, mitä mieluummin käytettäisiin latausaikana.

On olemassa kaksi suuntaa, jotka kehittäjät yleensä ottavat tässä suhteessa:

  • Käytä kuvan hallitsevaa väriä taustana
  • Käytä kuvan heikkolaatuista versiota

matalaresoluutioinen paikkamerkkiEsimerkki heikkolaatuisista kuvien versioista laiskoittamisen paikkamerkkeinä

Tässä oikea valinta riippuu sivustosi suunnittelusta ja siitä, mitä mieluummin näytetään käyttäjälle odotettaessa kuvan latautumista..

Vaikka yksi tekniikka on kuvien lataaminen heti, kun ne saapuvat näkymäporttiin, kannattaa ehkä harkita puskuriajan lisäämistä ennen sitä – jotta käyttäjä ei koskaan näe paikkamerkkiä.

Varo sivurakenteen muuttamista, kun lataat kuvia

Ennen kuvan lataamista se voidaan näyttää käyttämällä 0 px mittoja. Tämä ei ole ihanteellinen suunnittelurakenteen ylläpitämiseen.

Tämä voi helposti muuttaa sivun asettelua ja tekstin sijaintia. Yksinkertainen ratkaisu on lisätä oikeat mitat kuvaan heti – tämä varmistaa, että kuvaelementin koko pysyy samana latauksen jälkeen.

Edellä esitetyt näkökohdat ovat poissa käytöstä. Katsotaan nyt, kuinka voimme tosiasiallisesti toteuttaa laiskojen lataamisen WordPress-sivustolle.

Vaihtoehto 1: Suorita laiska lataus tyhjästä

Katsotaanpa ensin, kuinka tämä tehdään ilman mitään laajennuksia. Tätä vaihtoehtoa suositellaan JavaScriptin käyttäjille. Ihannetapauksessa seuraavat toimenpiteet on suoritettava:

  1. Estä kuvan lataamista sivun latauksen aikana: Kun määrität kuvan URL-osoitteen tai polun src-määritteessä  tunniste, selain lataa kuvan sivun latauksen aikana. Jotta selain ei lataa kuvaa, sinun on määritettävä kuvan sijainti data-src-määritteessä  tunniste sen sijaan.
  2. Rekisteröi tapahtumakäsittelijän toiminnot JavaScript-ohjelmassa tarkistaaksesi kahden tapahtuman elementit: lataaminen ja vieritys.
  3. Kun elementti tulee näkyviin näkymäporttiin, lataa data-src-elementin arvo src-elementtiin, joka laukaisee selaimen lataamaan kuvan.

Prosessi on selitetty yksinkertaisella tavalla Robin Osborne ja demo on saatavilla CodePenissä.

Vaihtoehto 1.1: Käytä leikkauksen tarkkailijaliittymää

Risteysten tarkkailijaliittymä auttaa tunnistamaan DOM-elementit, jotka ovat näkymäportissa milloin tahansa. Tämä on puhtaampi tapa toteuttaa laiska kuorma kirjoittamatta tapahtumakäsittelijän toimintoja. Koodirivien lukumäärä laiskakuormituksen toteuttamiseksi laskee myös huomattavasti. Selaimen yhteensopivuus on kuitenkin edelleen ongelma.

Google-kehittäjien blogi selittää risteysten tarkkailijaliittymän toteuttamisen kautta tämä CodePen-demo.

Vaihtoehto 2: Käytä JavaScript-laajennusta

Kaksi edellä käsiteltyä vaihtoehtoa tarvitsevat keskitason Java-tietämystä. Jos etsit laiskaa lataamista helpommin käyttämättä raskasta laajennusta, joka lataa kuorman palvelimelle, voit kokeilla tavallista JavaScriptin laajennusta, BLAZY.

 bLazy-kirjasto alle 2 kt: n koko ei lisää ylimääräistä kuormaa hyötykuormaan, samalla kun pystyt käsittelemään laiskoja kuvia helposti.

BLazy-kirjaston käyttäminen on suoritettava alustamalla  elementtejä, joilla on seuraavat määritteet:

  • luokka: aseta kaikkien luokka  merkitsee b-laiskaa
  • src: linkki paikkamerkkikuvaan
  • data-src: linkki ladattavaan kuvaan
  • data-src-pieni: linkki kuvaan ladattavaksi näytöille, joiden leveys on alle 420 pikseliä

Sinun on alustettava bLazy-kirjasto vain muutamalla koodirivillä, ja kaikki kuvat näytetään laiskaa latausta käyttämällä..

; (toiminto () {
// Alusta
var bLazy = uusi Blazy ();
}) ();

CodePen-demo on saatavana tässä.

Vaihtoehto 3: Käytä WordPress-laajennusta

On olemassa pari vaihtoehtoa, jotka voivat antaa sinulle laiskaa lastausta. Varsinkin:

Kaikki nämä laajennukset käsittelevät laiskaa lataamista automaattisesti. Jokaisessa on myös mukavia sivuominaisuuksia.

Esimerkiksi WP Rocketin Lazy Load lataa myös laiska YouTube-videoita ja korvaa ne pienoiskuvilla.

Optimole tarjoaa uusimman lisäyksen ThemeIsle-perheeseen, mutta tarjoaa myös optimaalisen kuvan optimoinnin (kuten täällä testattu), joilla on melko edistyneet ominaisuudet tässä suhteessa. Esimerkiksi, se antaa sinulle dynaamisen koon koon käyttäjän näytön koon perusteella.


Kuvan optimointi ja Lazy Load by Optimole Kuvan optimointi & Lazy Load kirjoittanut Optimole

Tekijä (t): Optimole

Nykyinen versio: 2.3.1

Viimeksi päivitetty: 21. huhtikuuta 2020

optimole-wp.zip


96% Arviot


50000 + asennukset


WP 4.7 + vaaditaan

Kuten useimpien lisäosien kohdalla, laiskaa lataamista varten asenna vain laajennus ja ota ominaisuus käyttöön laajennuksen ohjauspaneelissa:

Optimole laiskakuvien lataamiseen

johtopäätös

Tässä viestissä tutkittiin laiskojen kuvien lataamisen tarpeita ja etuja. Keskustelemme myös kolmesta erilaisesta tavasta laiskaa lataamista WordPress-verkkosivustolle:

  • Jos sinulla on keskitason Java-taito, voit laiska ladata tyhjästä
  • Jos tiedät ohjelmointia, mutta et halua lisäosia, kevyt JavaScript-kirjasto, bLazy on vaihtoehto
  • Jos haluat yhden napsautuksen ratkaisun laiskojen kuvien lataamiseen verkkosivustollesi, sinun kannattaa etsiä laajennus, kuten Optimole

Mitä luulet laiskoista lastaamisesta? Oletko yrittänyt käyttää sitä verkkosivustosi suorituskyvyn parantamiseksi?

Älä unohda liittyä kaatumiskurssillemme WordPress-sivustosi nopeuttamiseksi. Joillakin yksinkertaisilla korjauksilla voit vähentää latausaikaa jopa 50–80%:

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