De snelheid van je website is naast kwaliteit van de content, beveiliging en toegankelijkheid een van de belangrijkste pijlers van een goede website. Zowel de ervaring van de bezoeker als de ranking in zoekmachines zijn afhankelijk van de laad- en rendersnelheid.
Gelukkig neemt het HubSpot CMS je veel werk uit handen door standaard al technieken te implementeren die de prestaties ten goede komen. Een aantal voorbeelden hiervan zijn CDN, HTTP2, minification, caching, prerendering en compression.
Daarnaast zijn er de volgende best practices die je als developer kan aanhouden om de prestaties van je website te verbeteren:
Hou vanaf het begin af aan rekening met de snelheid van de website
Niets is vervelender om achteraf alle werkende code aan te moeten passen, omdat blijkt dat deze de snelheid negatief beïnvloedt. Hou dus vanaf het begin van het bouwen al rekening met het implementeren van de juiste technieken om de prestaties te optimaliseren. Test regelmatig met de bekende tools je websitepagina’s om te zien of recente wijzigingen ten koste zijn gegaan van de snelheid.
Gebruik de technische mogelijkheden van het HubSpot CMS
Het CMS werkt met modules die eigen css en javascript bestanden bevatten. Schrijf css en javascript die specifiek voor modules bedoeld is dus ook in deze bestanden en niet in één groot bestand. Op deze manier wordt de code alleen maar geladen wanneer de module ook daadwerkelijk op een pagina gebruikt wordt. Voor andere css en javascript code kan er gebruik worden gemaakt van de HubL functies require_css en require_js. Het laden van de code wordt hiermee door HubSpot geoptimaliseerd. Voor javascript bestanden kan met de require_js functie ook gespecificeerd worden of de code in de head of footer moet worden geladen en of de code async of defer geladen wordt.
Hou rekening met afbeeldingen die door gebruikers worden geupload
Als developer kan je nog zo’n snelle site bouwen, als de gebruikers veel te grote foto’s uploaden dan beïnvloedt dit alsnog de prestaties. Gelukkig heb je met de HubL functie resize_image_url alle tools in handen om de afbeelding in het juiste formaat op de website te plaatsen. In combinatie met de srcset en sizes attributen van de img tag kan je het juiste formaat afbeelding voor elk schermformaat tonen.
Denk goed na of je een css framework of javascript library echt nodig hebt
Het is natuurlijk erg makkelijk om bijvoorbeeld Bootstrap of jQuery te gebruiken, maar dit kan ook ten koste gaan van de snelheid van je website. Je zal namelijk veel code inladen die je in de praktijk niet gebruikt. De site “You might not need jQuery” geeft voor een aantal jQuery functies Javascript alternatieven. Veel css frameworks zijn ook opgedeeld in meerdere bestanden, bijvoorbeeld voor alleen het grid of voor alleen opmaakfuncties. Bedenk dus ook hier of je het framework nodig hebt en zo ja of een deel van het framework zou kunnen volstaan.
Pas op met tracking scripts en andere third party applications
Google Analytics is uiteraard het bekendste voorbeeld, maar er zijn enorm veel tools die je vragen een (tracking) script op je website te plaatsen. Wees kritisch of deze scripts echt nodig zijn, want de som van al deze scripts kan de website behoorlijk vertragen. De meeste scripts zullen overigens pas na oplevering van de website, in de loop van de tijd, worden toegevoegd. Als developer kan je de gebruikers wijzen op het effect van dit soort scripts op de snelheid van de website. Een periodieke controle op de snelheid van de website is vanuit dit perspectief ook aan te bevelen.
Bovenstaande best practices bieden een eerste houvast bij het maken van een snelle website. Maar in de praktijk zul je nog veel meer details tegenkomen die daadwerkelijk het verschil kunnen maken. Voor meer informatie over dit onderwerp en ook specifiek welke tools je kunt gebruiken om je pagina’s te testen is er een interessante development tutorial beschikbaar. Voor een goede kickstart van je project, ook op het gebied van snelheid, is het HubSpot CMS Boilerplate thema zeker aan te bevelen om te gebruiken als basis.
Bovenstaande best practices bieden een eerste houvast bij het maken van een snelle website. Maar in de praktijk zul je nog veel meer details tegenkomen die daadwerkelijk het verschil kunnen maken. Voor meer informatie over dit onderwerp en ook specifiek welke tools je kunt gebruiken om je pagina’s te testen is er een interessante development tutorial beschikbaar. Voor een goede kickstart van je project, ook op het gebied van snelheid, is het HubSpot CMS Boilerplate thema zeker aan te bevelen om te gebruiken als basis.