Kuvien lataamisen optimointi verkkosivustollesi

Kuvia sisältävä verkkosivusto voi olla valtava pullonkaula verkkosivuston suorituskyvylle. Näin optimoin kuvan lataamisen paremman käyttökokemuksen saavuttamiseksi.

Sivusto on täynnä kauniita kuvia, ja se on hienoa, mutta se voi olla valtava pullonkaula sivun lataamiselle. Näen usein verkkosivustoja, jotka lataavat useita megatavua kuvia vain saadaksesi liukusäätimen kotisivulleen. Kuvittele itsesi hitaaseen 3G-matkapuhelinyhteyteen lataamassa kyseistä verkkosivustoa. Lataaminen kestää vuosia, ja tuloksena käyttäjät poistuvat verkkosivustostasi. Hyvä tapa testata tämä nykyisellä verkkosivustollasi on valitsemalla verkon kuristin Chrome Devtools -sovelluksessa.

Ongelma

Ongelmana on, että usein sivustoasiakirja on jo ladattu, kun kuvia vielä ladataan. Seurauksena on sivusi tyhjät kohdat, joihin kuva latautuu hitaasti. Ei haluamaasi.

Alla olevassa esimerkissä luin yksinkertaisen verkkosivuston, joka sisältää 4,8 Mt taustakuvan. Kuten näette, DOM ladataan 1,14 sekunnissa. Joten käytännössä käyttäjä näkee sisällön 1,14 sekunnin kuluttua. Melko hyvä 3G-verkkoon. Taustakuvan lataaminen vie kuitenkin 27,32 sekuntia, kun käyttäjä näkee ladattavien kuvien osia. Käyttäjä on ehkä jo poistunut verkkosivustoltasi tällä hetkellä.

Yksinkertainen huonosti optimoitu verkkosivusto, jonka taustakuva on 4,8 Mt nopean 3G-matkapuhelinverkon kautta

Näyttää siltä, ​​että tämän vuoksi ei vain käyttökokemuksesi heikkene. Vuonna 2010 Google totesi, että sivunopeus on tekijä heidän sijoitusalgoritmissaan. Odotan, että tästä on tullut yhä tärkeämpi tekijä vuosien mittaan. Näyttää siltä, ​​että Google investoi paljon siihen, että kehittäjät tietävät sivun tehokkuudesta konferensseissaan.

Ratkaisu

Joten miten voimme ratkaista tämän asian? Ensimmäinen asia, jonka voimme tehdä, on pakata taustakuva käyttämällä erilaisia ​​Internet-työkaluja. Tämä on helppo voitto ja lyhentää latausaikaa noin kymmeneen sekuntiin. Tämä vaikuttaa valtavalta askeleelta, mutta kymmenen sekuntia on aivan liian paljon.

Seuraava vaihe olisi ns. Paikkamerkkikuvan lataaminen ennen alkuperäisen kuvan lataamista. Tämä 'paikkamerkki' on alkuperäisen kuvan matalan resoluution variantti. Kun luot tätä kuvaa, olemme vähentäneet kuvan resoluutiota 7372x4392 pikselistä 20x11 pikseliin. Tästä seuraa kuvan koko 4,8 Mt - 900 tavua.

Tämä koon pienentyminen johtaa latausaikaan 550 millisekuntia 10 sekunnin sijasta. Mutta nyt taustana on matalan resoluution epäselvä kuva. Tämä sopii erinomaisesti sivun ensimmäisiin sekunteihin, mutta haluamme antaa käyttäjälle suuren kokemuksen alkuperäisestä taustakuvastamme.

Tätä varten haluamme ladata ensin matalan resoluution kuvan ja ladata korkean resoluution kuvan jo asynkronisesti taustalle. Kun korkearesoluutioinen kuva on ladattu, haluamme vaihtaa alhaisen resoluution korkearesoluutioisella kuvalla.

Tätä varten käytin seuraavaa JavaScriptiä, jonka latasin ennen päätykappaletagia. Tällä tavalla skriptimme ei estä sivumme sisältöä.

(() => {
  'käytä tiukasti';
  // Sivu on ladattu
  const Objects = document.getElementsByClassName ('asyncImage');
  Array.from (Objects) .map ((item) => {
    // Aloita kuvan lataus
    const img = uusi kuva ();
    img.src = item.dataset.src;
    // Kun kuva on ladattu, korvaa HTML-elementin src
    img.onload = () => {
      item.classList.remove (asyncImage ');
      palauta item.nodeName === 'IMG'?
        item.src = item.dataset.src:
        item.style.backgroundImage = `URL ($ {item.dataset.src})`;
    };
  });
}) ();

Javascript-toiminto tarkistaa DOM-luokan kaikille asyncImage-luokille. Sen jälkeen se lataa kaikki kuvat, jotka data-src-määrite sisältää nämä elementit. Kun kuva on ladattu, se korvaa joko kuvatunnisteen lähteen tai ei IMG-elementin taustakuvan.

...

tai

Kaunis maisema auringonnousu

Koska skripti poistaa elementin luokan kuvan muuttamisen jälkeen, voimme tehdä joitain mahtavia CSS-siirtymiä, jos haluamme. Esimerkiksi siirtyminen helposti sisään-ulos, mikä johtaa haalistumiseen kuvan vaihtamisen jälkeen.

johtopäätös

Joten mitä teimme? Paransimme käyttökokemusta, teimme verkkosivustomme lataamisen nopeammaksi, muutimme sen helpommin käyttäjille, joilla ei ole nopeaa yhteyttä, ja mahdollisesti paransimme sijoitustamme Googlessa. Se on iso parannus niin pienelle muutokselle.

Uusi tilanne, jossa lataamme ensin matalan resoluution kuvan ja korvaamme sen sitten alkuperäisellä kuvalla

Kuten näette, lataamme paikkamerkkikuvan 570 ms: n kokoisena. Kun tämä on ladattu, käyttäjä näkee alkuperäisen kuvan hämärtyneen matalan resoluution version. Kun alkuperäinen kuva on ladattu, se korvaa matalan resoluution kuvan.

Meillä ei enää ole omituisia kuvantoistoongelmia, ja annamme käyttäjälle nopean ensimmäisen maalin.

Katso toimiva esimerkki täältä

Laiska lataa kuvia

Kun haluat parantaa kuvan latausprosessia entisestään, kannattaa harkita laiskojen kuvien lataamista.

Laiska lataus on tekniikka, jossa kuvia, jotka eivät ole suoraan käyttäjän näkymästä, ei ladata. Kun kuva on lähellä näyttöportin reunaa, kuva ladataan.

Tämän etuna on vähemmän tavuja ladattaessa sivun alkulataukseen. Usein kaikkia kuvia ei tarvitse näyttää käyttäjän näkymässä. Kun käyttäjä aloittaa vierityksen, tarvitsemme yhä enemmän sisältöä, joka voidaan ladata sisään. Hyvä tapa toteuttaa tämä käyttäytyminen on katsoa Risteystarkkailijaan.

Toivottavasti nautit tämän artikkelin lukemisesta ja olet innostunut toteuttamaan tämän parannuksen itse :). Jotkut taput merkitsivät paljon.