Vinkkejä HubSpot-kehittäjille: Suorituskyky

Web-kehitys Tekninen kehitys HubSpot 18.5.2022

Voidaan todennäköisesti sanoa, että jokainen meistä on kokenut tämän: surffailet läpi erilaisia verkkosivustoja etsien itseäsi kiinnostavaa artikkelia tai uutista. Viimein kun löydät sivuston, joka tarjoaa janoamaasi tietoa, sivu latautuu hitaasti tai osa elementeistä jää kokonaan latautumatta. Olet kärsimätön ja siirryt pois sivustolta. Sinä saatat unohtaa tapahtuman nopeasti, mutta sivuston omistaja sen sijaan menettää jäljen käynnistäsi ja näin ollen myös potentiaalisen mainonnan kohteen. Tämänkaltaiset kärsimättömät sivustovierailut tarkoittavat menetettyjä ansioita niin sivuston julkaisijalle kuin mainostajille. Siispä on kiistatonta, että kävijöiden säilyttämisen kannalta sivun nopeus ja suorituskyky ovat elintärkeitä.

Sivustosi tarkoituksesta tai sisällöstä huolimatta hitaasti lataava sivu tulee aina kääntämään kävijöitä pois. Olennainen käsite verkkokäyttökokemuksesta puhuttaessa on "fast loading" eli sivun suorituskyky. HubSpotin mukaan verkkosivu lataa elementit näkyville keskimäärin noin kuudessa sekunnissa. Jo tämä aika saattaa kuulostaa pitkältä joillekin.

 

Lazy-loading -toiminnolla suorituskyky paremmaksi

Mitkä asiat oikeastaan vaikuttavat verkkosivuston latautumiseen kuluvaan aikaan? Yksi tavallinen ja hyvin mahdollinen syy on sivuston koko ja erityisesti sivustolla olevien sisältöelementtien määrä ja näiden tiedostokoko. Suuri määrä kuvia, videoita tai muuta mediasisältöä voi hidastaa sivuston suorituskykyä hidastaen myös latautumisaikaa. Hyvä uutinen on se, että olemassa on teknologisia ratkaisuita, joiden avulla voit parantaa sivustosi suorituskykyä ja mikä parasta, nostaa syntyvien konversioiden laatua.

Tässä blogitekstissä esittelemme erään tällaisista ratkaisuista, nimittäin lazy loading -toiminnon eli niin sanotun laiskan latauksen. Lazy loading ei vaadi sisällön vähentämistä, se parantaa sivustosi suorituskykyä ja antaa hakukoneoptimoinnillekin lisäpotkua! Yksinkertaistettuna lazy loading tarkoittaa sivuston elementtien lataamisen viivästyttämistä siihen asti, kunnes kävijä oikeasti niitä tarvitsee. Verkkosivustoilla tämä tarkoittaa esimerkiksi kuvien, videoiden tai muiden elementtien latautumista vasta siinä vaiheessa, kun kävijä on siirtynyt sivustolla tarpeeksi lähelle sitä kohtaa, jossa HTML-dokumentissa elementti esitettäisiin.  

Lazy loading -kuvat

Kuten aiemmin mainittua, kuvien suuri määrä tai niiden suuri tiedostokoko voivat vaikuttaa sivuston latautumisaikaan. On olemassa useita erilaisia tapoja lisätä lazy loading -toiminto sivustollesi, riippuen siitä, kuinka mielelläsi käsittelet sivuston koodia. Osa selaimista saattaa myös automaattisesti lisätä lazy loading -toiminnon verkkosivustollesi.

Selainkohtainen lazy-loading -toiminto 

Yleisimmät selaimet, kuten Chrome ja Firefox tukevat lazy-loading -toimintoa lataamisattribuutilla. Attribuutti voidaan lisätä <img>-elementteihin sekä <iframe>-elementteihin. Niin sanotun lazy:n arvo, eli hauskasti muotoiltuna laiskuuden arvo, määrittää lataamisen ajankohdan viestittäen selaimelle, että kuva tulee ladata juuri sillä hetkellä, kun käyttäjä siirtyy sen lähelle oikeaan näkymään. 

Selaimen yhteensopivuus 

Kooditoiminto <img loading=lazy> on niin ikää tuettu yleisimmissä selaimissa, kuten Chromessa, Edgessä, Operassa ja Firefoxissa. Ne selaimet, jotka eivät tue lataamisattribuuttia, yksinkertaisesti vain ohittavat koodin ilman sivuvaikutuksia.

Esimerkki:
<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Intersection Observer -ohjelmointirajapinnan hyödyntäminen

Mikä oikeastaan tarkoitetaan Intersection Observer -ohjelmointirajapinnalla (API)? Erään määritelmän mukaan Intersection Observer API mahdollistaa sivustolla tehtävien muutosten tarkastelemisen kohde-elementin ja kantaelementin risteyskohdissa tai korkeatasoisten dokumenttien näkymässä.

Mahdollistaakseen kuvaelementtien lazy-loadingin kehittäjät tavallisesti hyödyntävät JavaScriptiä, jotta elementtejä voidaan tarkastella tietyssä näkymässä. Mikäli elementit ovat paikallaan, niiden src- ja toisinaan myös srcset-attribuutit on täytetty URL-osoitteen tiedoilla halutun kuvan esittämiseksi. Mikäli olet kirjoittanut lazy-loading -koodia aiemmin, olet saattanut suorittaa tehtäväsi event handler -toimintoja, kuten sivun scrollaamista tai koon mukauttamista hyödyntäen. Vaikka tämä menetelmä saattaa olla kaikista yhteensopivin eri selainten kanssa, modernit selaimet tarjoavat myös tehokkaampia tapoja elementtien tarkasteluun Intersection Observer API:n avulla

Esimerkki: 
 

document.addEventListener("DOMContentLoaded", function() {

 var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

 if ("IntersectionObserver" in window) {

   let lazyImageObserver = new IntersectionObserver(function(entries, observer) {

     entries.forEach(function(entry) {

       if (entry.isIntersecting) {

         let lazyImage = entry.target;

         lazyImage.src = lazyImage.dataset.src;

         lazyImage.srcset = lazyImage.dataset.srcset;

         lazyImage.classList.remove("lazy");

         lazyImageObserver.unobserve(lazyImage);

       }

     });

   });

   lazyImages.forEach(function(lazyImage) {

     lazyImageObserver.observe(lazyImage);

   });

 } else {

   // Possibly fall back to event handlers here

 }

});


 lazy loading HubSpotissa

HubSpotissa lazy loading -ratkaisut ovat käytettävissä kustomoitujen moduleiden (custom modules) kuvakentissä, jolloin niitä voidaan hyödyntää HubL-tageissa. Luodessasi uutta kustomoitua modulia voit valita, haluatko sallia selaimen sisäänrakennetut (built-in) lazy loading -kuvakentät lisäämällä kuvakentän moduliin ja navigoimalla sisällön asetuksiin tarkastuspaneelissa (inspector panel). Paneelissa näet sekä kuvan latausmahdollisuudet että valittavissa olevat muut latausvaihtoehdot. Kun tämä valinta on sallittu, voit joko näyttää tai piilottaa sisältöeditorin toimintoja samalla mahdollistaen latausajan muuttamisen sivueditorissa.

kuvan-lataus

Esimerkki:
Vertaile näitä vaihtoehtoja module.html -tiedostossasi hyödyntäen seuraavaa syntaksia:
{% set loadingAttr = module.image_field.loading != 'disabled' ? 'loading="{{ module.image_field.loading }}"' : '' %}
<img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" {{ loadingAttr }}>

 

Mikäli “näytä kaikki toiminnot” (show all controls) on valittuna, tulisi sinun nyt nähdä “kuvan lataus” (image loading) -vaihtoehto sisältöeditorissa. 
kuvan-muokkaus

Suosittuja JavaScript-ohjelmakirjastoja lazy loading -ratkaisuille

Seuraavia ohjelmakirjastoja voidaan käyttää lazy loading -kuville: 

  • Lazysizes on monipuolinen ohjelmakirjasto lazy loading -kuville ja iframe ratkaisuille. Kaava, jota kirjasto hyödyntää on melko samanlainen kuin yllä esitetyt esimerkit, sillä se automaattisesti sitoo lazy loading -luokan (class) kuvaelementteihin (<img>) ja edellyttää sinun määrittelevän kuvan URL-osoitteen data-src tai data-srcset -attribuutteihin, minkä jälkeen osoitteen sisältö sitten luontevasti vaihtuu kyseisiin attribuutteihin. Kirjasto käyttää Intersection Observeria ja sitä voidaan laajentaa useiden erilaisten lisäosien avulla, jotta se soveltuu esimerkiksi lazy-loading -videoiden luomiseen.
  • Vanilla-lazyload on niin kutsuttu kevyen sarjan vaihtoehto lazy loading -kuville, taustakuville, videoille, iframeille ja koodille. Se hyödyntää Intersection Observeria, tukee responsiivisia kuvia ja mahdollistaa selaintason lazy-loading -ratkaisut.
  • lozad.js on vastaavanlainen kevyempi vaihtoehto, joka hyödyntää vain Intersection Observeria. Se on yksinään hyvin tehokas, mutta tarvitsee polyfill -toimintoa toimiakseen yhteen vanhempien selainten kanssa.
  • yall.js on ohjelmakirjasto, joka hyödyntää Intersection Observeria ja nojaa event handler -rutiineihin. Kirjasto on yhteensopiva IE11:n ja yleisimpien selainten kanssa.
  • Mikäli etsit React-kohtaista lazy loading -kirjastoa, harkitse react-lazyloadia. Vaikka se ei hyödynnä Intersection Observeria, se tarjoaa vastaavanlaisen metodin lazy loading -kuviin niille, jotka ovat tottuneet kehittämään sovelluksia Reactia hyödyntäen.

Mikäli haluat oppia lisää verkkosivujen ja sovellusten suorituskyvystä ja lazy loading -ratkaisuista, suosittelemme tutustumaan Google Developers -sivustolla julkaistuihin blogikirjoituksiin ja case-tutkimuksiin sekä HubSpotin blogiin, josta löydät enemmän HubSpot-aiheista kehittäjäsisältöä.

HubSpot tutuksi tunnissa

Varaa aika ilmaiseen tunnin mittaiseen demoon!