De snelheid van je website optimaliseren - hoe doe je dat?
Je website optimaliseren
Het is niet alleen zo dat een trage website ervoor zorgt dat bezoekers je website snel wegklikken, Google straft je ook voor de langere laadtijd. Snelle websites worden beloond met een hogere indexatie in zoekmachines. Voor zowel je score in zoekmachines als de gebruikservaring van je bezoekers is het dus van belang dat je wat power zet op die laadtijd van je website. Maar hoe doe je dat? Daar zijn verschillende manieren voor, waarvan we er hier één behandelen. Lees in deze blog alles over het optimaliseren van je code om de snelheid van je website te optimaliseren.
Minified code
Eén manier om de code van je website sneller in te laden, is door je code te verkleinen. Dit noemen ze minified code. Dit houdt in dat je alle onnodige tekens, zoals bijvoorbeeld spaties of enters, eruit haalt. Hierdoor worden je bestanden kleiner en worden ze dus sneller ingeladen.
Dit kan je met de hand doen, maar dat kost over het algemeen nogal veel tijd. En dan het goede nieuws: er zijn tools die dit voor je kunnen doen. Deze tools verkleinen Javascript of CSS.
Voorbeeld:
Dit stukje CSS:
.niice { color: #000;}Kan worden verkleind naar:
.niice{color:#000}Door alles spaties en enters weg te halen, is een stukje code van drie regels verkleind naar één regel.
Twee populaire tools die dit doen zijn:
Javascript
Het gebeurt vaak dat Javascript-bestanden in de <head> tag worden ingeladen. Dit zorgt ervoor dat allereerst deze bestanden worden ingeladen, daarna pas de rest van de html en CSS. Dat betekent dat de bezoeker van je website nog niks ziet van de website wanneer het bezig is met de Javascript-bestanden, totdat het toekomt aan het inladen van de html.
Wij raden het daarom aan om de Javascript-bestanden onderaan de pagina in te laden. Dat betekent dat de html eerst ingeladen wordt en de websitebezoeker dus al direct wat op je website ziet. Daarna pas is de beurt aan de Javascript-bestanden. Dit levert een grote bijdrage aan de gebruikservaring.
Code optimalisatie
Je hebt ook tools die ongebruikte CSS verwijderen uit jouw code. Een voorbeeld hiervan is Purgecss. Dit is erg handig wanneer je een framework gebruikt, zoals bootstrap of tailwind css. Doordat de overbodige code verwijderd wordt, worden de CSS-bestanden een stuk kleiner. Dat zorgt er uiteraard weer voor dat ze sneller ingeladen worden. Bekijk hier de website van Purgecss voor meer informatie.