Front-end technieken voor snelle websites: Lazyload, Interchange

Online website technieken volgen elkaar snel op, als internetbureau is het belangrijk om mee te gaan in deze ontwikkelingen. In dit blog vertel ik je over recente ontwikkelingen op het gebied van front-end. Als voorbeeld gebruiken we een echte B2 case waarvoor we met technieken als LazyLoad en Interchange hebben gewerkt.

Lazyload? Wat is het en wat heb ik eraan?

Even terug naar de basis, simpel gezegd bestaat een website (als je even puur naar de voorkant kijkt) voornamelijk uit teksten en afbeeldingen. Toen ik jaren geleden begon met front-end development werden alle afbeeldingen dan ook ‘gewoon’ op een pagina geplaatst. De code die toen gebruikt werd om een afbeelding te tonen is als volgt;

 <img alt="Front-en ontwikkelaar Koops op de Bahamas" width="275" height="275"/>

Wanneer je een webpagina bezoekt worden alle elementen van boven naar beneden ingeladen. Dit is standaard in iedere webbrowser en betekent dat alle afbeeldingen dus ook direct worden ingeladen. Wanneer je een scrollbeweging maakt zie je dan ook alle afbeeldingen op de pagina volledig ingeladen. Dit geeft je als bezoeker het idee dat de afbeeldingen er altijd al zijn geweest.

Dat lijkt handig maar heeft een nadeel; Sommige bezoekers scrollen namelijk helemaal niet door een hele pagina heen maar zijn al overtuigd door bijv. een CTA (call-to-action) aan het begin van de pagina. Deze bezoekers hebben dus helemaal geen behoefte aan de afbeeldingen die ergens onderaan de pagina staan, terwijl deze plaatjes wel moeten worden ingeladen.

Daarnaast is er nog een groter nadeel wanneer je alle afbeeldingen in een keer gaat inladen. Namelijk dat het een enige tijd kan duren voordat de pagina helemaal is geladen (dit hangt natuurlijk ook af van je internetverbinding en het aantal afbeeldingen op de pagina). De laadtijd van de pagina wordt door Google gebruikt (hoe sneller je website hoe hoger je scoort en je dus hoger in Google komt). Het is daarom enorm belangrijk om de laadsnelheid van de pagina tot het minimum te beperken.

Met de huidige trends weten we dat er steeds meer afbeeldingen & video’s worden gebruikt op een website, dit gaat vast alleen maar meer groeien.

Daar is snelheids-optimalisatietechniek LazyLoad!

Lazy load is iets wat je vast wel een keer bent tegengekomen op een website, maar als dit goed geïmplementeerd is dan heb je het niet eens door gehad. Je herkent LazyLoad aan het gedeeltelijk inladen van grafische elementen zoals plaatjes en video. Bij sommige websites zie je, tijdens het scrollen, dat de afbeeldingen geleidelijk aan geladen worden. Dit is LazyLoad, en zorgt ervoor dat je webbrowser alleen de plaatjes laadt die je ook echt op je scherm ziet.

Lazyload is dus een snelheids-optimalisatietechniek die op veel nieuwe websites gebruikt wordt. De afbeeldingen worden pas ingeladen als de bezoeker op een bepaald punt heeft gescrolled (bijv. 100px voordat de afbeelding zichtbaar moet zijn).

Het grote voordeel van deze techniek is dat de website veel sneller is geladen en de afbeeldingen alleen zichtbaar zijn voor de bezoeker die er ook echt wat aan heeft. LazyLoad is een techniek die we bij B2 standaard in onze websites gebruiken. Alle websites voor onze opdrachtgevers beschikken standaard over deze technologie. Hierdoor halen we goeie resultaten in de Google Pagespeed resultaten.

Interchange

Sinds ongeveer een jaartje zijn wij bij B2 overgestapt van Bootstrap naar het Foundation framework, dit heeft ervoor gezorgd dat alle front-end collega’s op dezelfde manier werken. Een groot voordeel van het Foundation framework is dat hier Interchange ingebakken zit. Interchange is, net als LazyLoad een manier om snellere en betere websites te maken. Hieronder leg ik uit hoe dit precies werkt en hoe we dit bij B2 toepassen.

Wat is Interchange en wat doet het?

Als webdevelopers weten we hoe belangrijk de snelheid van een website is, neem als voorbeeld het vorige stukje over LazyLoad. Met Interchange gaan we hierin nog een stapje verder, met Interchange kunnen we simpel gezegd verschillende afbeeldingen voor gebruikers tonen, afhankelijk van hun schermgrootte en/of device.

Zo kunnen we de afmetingen van een afbeelding bijvoorbeeld beperken tot 300×300 pixels op een mobiele telefoon, terwijl dezelfde afbeelding op een tablet 400×400 pixels is, en op desktop 750×750 pixels. Dit zorgt ervoor dat de laadtijden op mobiele apparaten drastisch verlaagd worden. We zien bij verschillende opdrachtgevers snelheidswinsten van wel 20% door het toepassen van deze techniek. Dit resulteert weer in een positieve beoordeling van Google, waardoor de gemiddelde positie in de resultaten verhoogd wordt.

En geen zorgen! Degene die de website voorziet van content hoeft hier niet zelf over na te denken, dit gebeurt helemaal automatisch wanneer er een afbeelding wordt geüpload binnen de WordPress configuratie. Per website configureren wij handmatig de afbeelding-groottes zodat elke website perfect geoptimaliseerd wordt voor elke device.

We helpen jou ook graag met het optimaliseren van je website. Wil je een snellere WordPress website? Of juist helemaal iets nieuws? B2 staat voor je klaar met collega’s in verschillende disciplines. Neem gerust contact op!