Snelheid is een zeer belangrijke factor voor je website, zowel voor gebruikers als voor je ranking op Google.
Gebruikers straffen lange laadtijden af door je website te verlaten en je krijgt hierdoor een hoge bounce rate. Ook Google zal je minder hoog plaatsen wanneer je website langzaam laadt.
Grote multinationals als Amazon en Walmart zagen hun omzet stijgen per milliseconde die hun website sneller werd.
In dit blog geef ik je een vijftal tips om direct je website sneller te maken en leg ik per punt uit wat het inhoudt. Ik daag je uit om direct mee te doen en de snelheid van je website vooraf en naderhand te meten.
Gebruik hiervoor WebPageTest of Google PageSpeed Insights en laat me vooral de resultaten weten!
- Minder plug-ins/ thema’s
- Afbeeldingen optimaliseren
- Caching
- Verwijder ongebruikte CSS en JS
- Minify CSS en JS/ above fold
Minder plug-ins/ thema’s
Het is natuurlijk fijn als je website veel functies heeft. Een gemiddelde webwinkel heeft al snel een webshop-module, foto sliders, post-/ pakket module, contactformulier, chat functies, bescherming tegen hackers, etc. Al deze functionaliteiten eisen een tol: langere laadtijden.
Plug-ins zijn handig, maar soms werken ze elkaar tegen en genereren ze een hoop extra code. Dan probeert de ene plug-in een bepaalde functie op te starten, die een tweede plug-in juist weer uitschakelt. Dubbel werk en funest voor laadtijden.
Door het aantal plug-ins en thema’s te verminderen, ervaar je dat de snelheid van je website aanzienlijk omhoog gaat. Verwijder niet gebruikte thema’s en plug-ins. Zorg wel dat je een back-up thema beschikbaar hebt, dit kan gewoon het gratis thema van WordPress zelf zijn.
Als je veel plug-ins gebruikt, probeer dan alternatieven te vinden waardoor je bijvoorbeeld 2 functies samenbrengt met 1 plug-in. Heeft je website echt veel functionaliteiten nodig, bijvoorbeeld je hebt een blog en een webshop module, probeer dan eens een gedeelte daarvan op een subdomein te zetten, bijvoorbeeld “shop.jouwdomein.nl” of “blog.jouwdomein.nl”.
Afbeeldingen optimaliseren
Weinig websites ontkomen aan het plaatsen van afbeeldingen. Ze bepalen voor een groot deel de sfeer op jouw website en zijn een goede visuele ondersteuning bij een tekst.
Webwinkels plaatsen afbeeldingen om een indruk te geven van hun product; uit alle mogelijke hoeken.
Maar.. de ene afbeelding is de andere niet. Afbeeldingen komen in alle soorten en maten: jpg/ jpeg, png, eps, svg, gif, webp, om er maar een paar te noemen. Hoe weet je nu welke je moet hebben?
Google zelf adviseert webp natuurlijk en dat kan je helpen om beter op je snelheid te scoren. Er bestaan plug-ins om je afbeeldingen om te zetten naar een webp en te optimaliseren. Voor logo’s is altijd SVG aan te raden, omdat die altijd scherp blijft, hoe groot of klein je hem ook maakt. Je hebt hier wel een plug-in voor nodig, omdat WordPress geen SVG ondersteuning heeft. Heb je al veel plug-ins, probeer dan een keuze te maken wat belangrijk is voor jouw website.
Upload niet te grote afbeeldingen, zeker als je deze niet nodig hebt. Als je zelf verder wil optimaliseren kun je een programma gebruiken als ImageAlpha of TinyPNG, scheelt je weer een plug-in!
Heb je echt veel afbeeldingen, dan is het goed om te kijken naar een cloud host voor je afbeeldingen en/of video’s.
Caching
Als een bezoeker op je website komt, wordt de website geladen vanaf de server. Met caching slaat de browser (delen van) de pagina’s lokaal op. Op het moment dat iemand terug komt op je website, kan de browser een groot gedeelte uit de cache halen. Dit scheelt aanzienlijk in laadtijden.
Verwijder ongebruikte CSS en JS
Het is aan te raden om een optimalisatie plug-in te gebruiken, de meeste doen een combinatie van de tips die je in dit blog leest, caching, code optimalisatie, ongebruikte code verwijderen de optie om een minify code op te geven (verder uitgelegd bij de volgende tip) en soms zelf afbeelding optimalisatie.
Ons advies is om geen broncode aan te passen, maar als je weet wat je doet, kun je dit doen.
Minify CSS en JS/ above fold
Als je een optimalisatie plug-in gebruikt, heb je de optie om CSS en JS bestanden samen te voegen en te minimaliseren, probeer hier een beetje mee te spelen om te kijken wat het beste werkt voor jouw website.
Je hebt ook de optie “Above fold CSS”, ook wel “Critical CSS path”. Dit houdt in dat de CSS die als eerste wordt geladen de code is die je website nodig heeft voor het gedeelte wat als eerste in beeld komt. Als je niet weet welke code dat precies is, kun je een critical path generator gebruiken.
Je website sneller gemaakt
Nu je de bovenstaande tips hebt toegepast op je website, is deze een stuk sneller. Super goed gedaan! Maak jezelf niet gek om een perfecte score te halen, zeker voor mobiel is dit erg lastig, zorg dat je in ieder geval in het groen komt.
Is niet alles gelukt of wil je ondersteuning bij het optimaliseren van je website? Je kunt me snel en geheel vrijblijvend een bericht sturen, dan kijken we samen naar de mogelijkheden om ook jouw website sneller te maken.