Maak je website sneller met deze praktische tips 💥
Bij het maken van een website is het belangrijk dat je denkt aan de conversie. Het is niet meer dan logisch dat het converteren een grote rol speelt binnen een website. Aanzetten van actie door een bezoeker is waar je als website-eigenaar op moet focussen, maar hoe vergroot je die kans nou als je een langzame laadsnelheid hebt op je website? Bezoekers verwachten een snelle website waar hun behoeften aan bod komen. Ze willen snel vinden waar ze naar op zoek zijn. Met een langzame website wordt dit nogal verhinderd.
In dit artikel geef ik je praktische tips om je website te versnellen. Met deze tips zal je website binnen de kortste keren zo snel als een trein worden. Verbeter je conversie dus met deze tips en bedank me later :D.
Advertisement
1. Comprimeren van teksten
Dit is de grootste tip in het versnellen van je website. Door je teksten te comprimeren maak je je website kleiner in bytes, waardoor de browser je website sneller zal laden. Met deze praktische tip heb je al 50% van je laadsnelheid versneld.
Comprimeer je website teksten door een ‘.htaccess’ bestand aan te maken. Dit bestand wordt gelezen door de browser wanneer je website wordt opgezocht. Dit bestand zorgt voor re directs en het comprimeren van je teksten bijvoorbeeld. Door het volgende in je ‘.htaccess’ bestand toe te voegen zul je jouw website teksten comprimeren waardoor je website supersnel wordt!
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_include mime ^text/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_include handler ^cgi-script$
</IfModule>
Na het toevoegen van de bovenstaande code in de '.htaccess' bestand, zul je het moeten opslaan en overzetten naar je server. Dit kun je ook doen met FileZilla bijvoorbeeld. Nadat je het bestand hebt overgezet, zal je website tekst gecomprimeerd worden door de browser waardoor je website een stuk sneller wordt.
2. Cachen van foto's
De foto’s op je website nemen vaak veel tijd in beslag, door je foto’s vervolgens te laten cachen door de browser, zal je website sneller laden. De browser slaat de foto’s op mocht je de website voor een andere keer weer bezoeken. Zo laadt de website sneller en voorkom je zo frustratie bij het wachten. Door het volgende toe te voegen aan de ‘.htaccess’ bestand kun je jouw foto’s cachen.
<ifModule mod_gzip.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 5 months"
ExpiresByType image/jpeg "access plus 5 months"
ExpiresByType image/webp "access plus 5 months"
ExpiresByType image/gif "access plus 5 months"
ExpiresByType image/png "access plus 5 months"
ExpiresByType text/css "access plus 5 months"
ExpiresByType application/pdf "access plus 5 months"
ExpiresByType text/x-javascript "access plus 5 months"
ExpiresByType application/x-shockwave-flash "access plus 5 months"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 30 days"
</IfModule>
Kopieer de bovenstaande code en plaats deze in je '.htaccess' bestand. Sla nu het bestand op en zet het over naar je server met FileZilla. Je hebt dan ervoor gezorgd dat de browser je foto's zal cachen, maar daarnaast zal de browser ook je code cachen. Dit zal resulteren dat je website een stuk sneller wordt.
3. JavaScript en CSS later laten laden
De browser laadt je opmaak en javascript wanneer een website wordt bezocht. Dit kost wel wat tijd voor de browser om alles te laden. Vaak duurt het twee tot drie seconde om de website volledig te laden, door de opmaak en javascript. Het is daarom ook handig om de belangrijke delen van de opmaak eerst te laten laden, en de minder belangrijke wat later. Zo laadt de website sneller en kunnen de bezoekers de content eerder zien.
Maak gebruik van defer en async attributen bij de javascript scripts. Zo zorg je ervoor dat het script pas laadt wanneer de essentiële delen van de website zijn geladen. De browser stelt het laden van javascript dan dus uit, en dat zorgt voor een snellere laadtijd.
<script defer type="text/javascript">
[code]
</script>
De defer attribuut zorgt ervoor dat het script pas wordt geladen wanneer de zichtbare elementen van de website tevoorschijn komen. De javascript laadt op deze manier dus in de achtergrond in plaats van de voorgrond. Zo voorkom je dat de javascript de pagina blokkeert doordat het als eerst wordt geladen.
4. Comprimeren van foto's
Met websites zoals imagecompressor.com kun je jouw foto’s comprimeren. Dit is belangrijk wanneer de bestandsgrootte van de je foto’s wat hoog zijn. Door gebruik te maken van foto compressie websites, verminder je deze bestandsgrootte en behoud je op dezelfde tijd de kwaliteit. De browser neemt ongeveer één tot twee seconden om de foto’s te laden. Door de foto’s te comprimeren versnel je dat proces.
5. Laden van afbeeldingen uitstellen
Afbeeldingen laden kan je ook uitstellen om de laadtijd te versnellen. Er is namelijk een optie om een afbeelding pas te laden wanneer het in beeld moet komen. Zo laden de afbeeldingen die buiten het zicht zijn niet totdat het in zicht komt. Zo zorg je ervoor dat de laadsnelheid versnelt.
Met de onderstaande code pas je deze optie toe aan je foto’s:
<img src="voorbeeld.png" loading="lazy"/>
Deze functie wordt ondersteund door Google Chrome. Zie op deze website welke browsers deze optie ondersteunen. Voor de browsers die het niet ondersteunen is er een andere manier om de afbeeldingen pas te laden wanneer ze in zicht komen.
<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages = document.querySelectorAll("img.lazy");
var lazyloadThrottleTimeout;
function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
});
</script>
Plak de JavaScript code aan de onderkant van je code om de snelheid van je website niet te vertragen. Verander de foto's in je website van:
<img src="voorbeeld.png"/>
naar
<img class="lazy" data-src="voorbeeld.png"/>
Nadat je dit hebt gedaan voor al je foto's in je code, zal de browser de foto's pas laden als de foto in beeld moet komen.
Heb je moeite met het toepassen van lazy loading functie? Dan kun je het artikel van Lazy Loading bekijken van CSS-Tricks bekijken.
Statische website en CMS
Bij websites die gemaakt zijn met een CMS-systeem zoals WordPress, ligt de snelheid vaak lager van een website. WordPress haalt namelijk haar gegevens uit een database. De database dient volledig uitgelezen te worden door de browser en dat zorgt vaak voor een langere laadtijd. Vindt je snelheid toch zeer belangrijk, dan raad ik aan om te gaan voor een statische website. Die zijn vaak sneller dan een WordPress website.
Tot slot
Ben je zo ver gekomen in dit artikel? Dan wil ik je bedanken voor je aandacht. Met de tips die zijn benoemd, kun je jouw conversie sterk verbeteren. Mocht je willen weten hoe je ook je conversie sterk kunt verbeteren, dan kun je dit artikel checken waar super goede tips worden gegeven.
Advertisement