Snelheidsboost innomedio.be

Het is nu ongeveer een half jaar geleden dat onze nieuwe website is gelanceerd. Een uitstekend moment om eens te kijken of we niets konden doen voor een betere performantie. Op zich was de website niet merkbaar traag op een computer of laptop met een degelijke internetverbinding, maar anno 2019 gebruikt een slordige 30% van onze bezoekers een mobiel apparaat (tablet of smartphone).

Minder gegevens inladen is dus niet enkel goed voor de laadsnelheid, maar ook voor het verbruik van mobiele data.

Google ranking

In de snelheidsupdate van Google in juli 2018 lezen we dat Google sinds kort ook de ranking van trage websites negatief beïnvloedt. Zo ver was het op onze website zeker nog niet gekomen, maar dit toont wel aan in welke richting het ranking-algoritme van Google evolueert.

Afbeeldingen

Eén van de grote boosdoeners op vlak van data-verbruik zijn de vele afbeeldingen die we gebruiken doorheen onze website. Op de meeste pagina’s zijn dit meerdere megabytes aan data die ingeladen moeten worden.

Het grote probleem hier is dat sommige afbeeldingen onderaan de pagina staan en dat je deze dus pas te zien gaat krijgen op het moment dat je tot daar scrollt. Klik je halverwege op een link naar een andere pagina, dan heb je dus ook een hoop afbeeldingen ingeladen die je nooit te zien kreeg.

Lazy loading

Om bovenstaand probleem op te lossen maken we nu gebruik van lazy loading. Hierdoor laden we niet zomaar alle afbeeldingen in op het moment dat de pagina geopend wordt, maar pas als de bezoeker tijdens het scrollen in de buurt van een afbeelding komt. Door deze techniek toe te passen laden we nu minder dan een halve megabyte aan afbeeldingen in op het moment dat een pagina wordt geopend.

Dit zorgt niet enkel voor een merkbaar verschil op mobiele apparaten, maar maakt ook het surfen met een laptop of computer veel vlotter en aangenamer.

Webpack en HTTP/2

We kunnen iets gelijkaardig doen met JavaScript bestanden door gebruik te maken van Webpack.
Hiermee laden we stukken JavaScript enkel in op de pagina’s waar ze nodig zijn én op het moment dat ze nodig zijn. Vroeger was dit niet altijd een goed idee, omdat dit zorgt voor meerdere kleine bestandjes die één-voor-één worden ingeladen. Door echter ook HTTP/2 in te schakelen op onze webserver kunnen er nu meerdere bestanden simultaan ingeladen worden, wat weer zorgt voor een snelheidsboost.

 

(lees verder onder de galerij)

Valsspelen

Valsspelen

Een ander trucje dat we gebruiken om navigatie te versnellen is de nieuwe pagina al inladen op de achtergrond alvorens ernaar gesurft wordt.

Maar: hoe weten jullie nu welke pagina een bezoeker gaat bezoeken? Hoor ik je denken.

Als een gebruiker bijvoorbeeld met zijn muis over een link wijst, is de kans groot dat hij hierop gaat klikken. Door de pagina al in te laden vanaf dat de muis op de link komt, winnen we hier dus gemakkelijk een halve second t.o.v. wanneer deze pas in te laden na het klikken. Dit zorgt op vaste computers en laptops voor een merkbare snelheidswinst.


Geschreven door

Sander Quirynen

Sander Quirynen
Frontend Developer
sander@innomedio.be
+32 (0)3 321 72 58

Meer weten over wat we voor jouw project kunnen betekenen?

Wij maken met plezier vrijblijvend een afspraak om kennis te maken. Zo kunnen we luisteren naar je verhaal en kijken hoe we je van dienst kunnen zijn.

Bedankt voor je bericht

We nemen zo snel mogelijk contact met je op.

Er liep iets iets mis. Probeer Opnieuw. Kijk zeker na of alle verplichte velden zijn ingevuld.