Kuidas optimeerida piltide laadimist oma veebisaidile

Pilte täis veebisait võib olla tohutu kitsaskoht veebisaidi toimimisel. Nii optimeerisin pildi laadimise parema kasutajakogemuse saavutamiseks.

Ilusaid pilte täis veebisait on suurepärane ja kõik, kuid see võib olla lehe laadimisel tohutu kitsaskoht. Näen sageli veebisaite, mis laadivad mitu megabaiti väärtuses pilte lihtsalt selleks, et nende kodulehel oleks liugur. Kujutage ennast aeglasel 3G-mobiilsideühendusel, mis laadib seda veebisaiti. Selle laadimine võtab aega ja tulemuseks on see, et kasutajad lahkuvad teie veebisaidilt. Hea viis selle testimiseks oma praegusel veebisaidil on Chrome Devtoolsis võrguklappide valimine.

Probleem

Probleem on selles, et sageli laaditakse saididokument juba piltide laadimise ajal. Selle tulemuseks on lehel tühjad jaotised, kuhu pilt aeglaselt laeb. Pole see, mida soovite.

Allpool toodud näites lõin lihtsa veebisaidi, mis sisaldab 4,8 MB taustpilti. Nagu näete, laaditakse DOM 1,14 sekundiga. Nii et põhimõtteliselt näeb kasutaja sisu 1,14 sekundi pärast. Päris hea 3G-võrgu jaoks. Taustpildi laadimine võtab aga 27,32 sekundit, kui kasutaja näeb piltide osi laadimas. Kasutaja võib-olla on juba teie veebisaidilt lahkunud.

Kiire 3G-mobiilsidevõrgu kaudu halvasti optimeeritud veebisait, mille taustpilt on 4,8 MB

Näib, et selle tõttu ei vähene mitte ainult teie kasutajakogemus. 2010. aastal teatas Google, et nende järjestamise algoritmis on oluline lehe kiirus. Ma loodan, et see on aastatega muutunud üha olulisemaks teguriks. Näib, et Google investeerib palju sellesse, et arendajad saaksid oma konverentsidel lehe toimivusest teada.

Lahendus

Kuidas me sellest probleemist üle saame? Noh, esimene asi, mida me teha saame, on taustpildi tihendamine, kasutades Internetis mitmesuguseid tööriistu. See on lihtne võit ja vähendab laadimisaega umbes kümne sekundini. See tundub tohutu samm, kuid kümme sekundit on ikka liiga palju.

Järgmine samm oleks nn kohahoidja pildi laadimine enne algse pildi tegelikku laadimist. See “kohahoidja” on algse pildi madala eraldusvõimega variant. Selle pildi loomisel oleme vähendanud pildi eraldusvõimet 7372x4392 pikslilt 20x11 pikslile. Selle tulemuseks on pildi suurus 4,8 MB kuni 900 baiti.

Selle suuruse vähenemise tulemuseks on laadimisaeg 10 sekundi asemel 550 millisekundit. Kuid nüüd on meie taustaks madala eraldusvõimega hägune pilt. See sobib suurepäraselt lehe laadimise esimesteks sekunditeks, kuid soovime pakkuda kasutajale meie originaalse taustpildi suurepäraseid kogemusi.

Selleks tahame esmalt laadida madala eraldusvõimega pildi ja juba praegu kõrgresolutsiooniga pildi asünkroonseks taustal laadida. Kui kõrge eraldusvõimega pilt on laaditud, tahame madala eraldusvõime muuta suure eraldusvõimega kujutisega.

Selle saavutamiseks kasutasin järgmist JavaScripti, mille laadisin enne korpuse silti. Nii ei blokeeri meie skript meie lehe sisu.

(() => {
  'kasuta rangelt';
  // leht on laaditud
  const objektid = document.getElementsByClassName ('asyncImage');
  Array.from (objektid) .map ((item) => {
    // Alusta pildi laadimist
    const img = uus pilt ();
    img.src = item.dataset.src;
    // Kui pilt on laaditud, asendage HTML-i element src
    img.onload = () => {
      item.classList.remove ('asyncImage');
      tagasi item.nodeName === 'IMG'?
        item.src = item.dataset.src:
        item.style.backgroundImage = `url ($ {item.dataset.src})`;
    };
  });
}) ();

Javascripti funktsioon skannib DOM-i mis tahes 'asyncImage' klassi jaoks. Pärast seda laadib see kõik pildid, mis on nende elementide atribuudis data-src ette nähtud. Kui pilt on laaditud, asendab see kas pildi sildi allika või mitte IMG-elemendi taustpildi.

...

või

Ilus maastiku päikesetõus

Kuna skript eemaldab elemendi klassi pärast pildi muutmist, võime soovi korral teha mõned vingeid CSS-i üleminekuid. Näiteks lihtsustatud sisse-välja üleminek, mille tulemusel pilt pärast väljavahetamist tuhmub.

Järeldus

Mida me siis tegime? Parandasime oma kasutajakogemust, muutsime veebisaidi laadimise kiiremaks, tegime selle kiire ühenduseta kasutajatele hõlpsamini kättesaadavaks ja parandasime võib-olla ka meie paremusjärjestust Google'is. See on nii väikese muudatuse jaoks suur edasiminek.

Uus olukord, kus laadime esmalt madala eraldusvõimega pildi ja asendame selle algse kujutisega

Nagu näete, laadime kohatäite pildi 570ms-is. Pärast selle laadimist näeb kasutaja algse pildi hägustunud madala eraldusvõimega versiooni. Kui algne pilt on laaditud, asendab see madala eraldusvõimega pildi.

Meil pole enam imelikke kujutise renderdamisega seotud probleeme ja anname kasutajale kiire esimese värvi.

Vaadake toimivat näidet siit

Laiskade piltide laadimine

Kui soovite oma piltide laadimisprotsessi veelgi parandada, võiksite kaaluda piltide laiska laadimist.

Laisk laadimine on tehnika, mille puhul ei laadita pilte, mis ei asu otse kasutaja vaateaknas. Kui pilt on vaadepordi piiri lähedal, laaditakse see pilt.

Selle eeliseks on lehe alglaadimisel laaditud vähem baiti. Sageli pole kõik pildid vajalikud kasutaja vaateaknas kuvamiseks. Kui kasutaja hakkab kerima, vajame üha rohkem sisu, kuhu saab laadida. Hea viis selle käitumise rakendamiseks on heita pilk ristmike vaatlejale.

Loodan, et teile meeldis selle artikli lugemine ja olete põnevil seda täiustust rakendanud :). Mõni plaksutamine tähendaks palju.