7 praktische tips om je website sneller te maken

Het hebben van een langzame website is zeer frustrerend. Niet alleen voor de gebruikers van je website, maar ook voor jou als ondernemer. Dat komt omdat je als ondernemer zo veel mogelijk wilt converteren. Met een langzame website gaat dat wat lastig. In dit artikel vertel ik hoe jij van start kunt gaan om je website sneller te maken.

Hoe maak je jouw website sneller? Het versnellen van je website doe je zo: cachen van foto's, comprimeren van je teksten, comprimeren van foto's, JavaScript en CSS later laten laden, afbeeldingen later laten laden, verkleinen van CSS en JavaScript, derden partijen verminderen.

1. Cachen van foto's

Cache foto

Door gebruik te maken van foto's, zul je al snel merken dat de laadsnelheid achteruit gaat. Foto's duren namelijk een tijdje om volledig te laden. Je kunt een lange laadtijd voorkomen door de foto's te cachen die op je website staan. Hoe cache je dan je foto's?

Htaccess bestand

Met een htaccess bestand kun je de browser aangeven dat de foto's die je op je website hebt, gecachet moeten worden. Allereerst zou je een htaccess bestand handmatig aan moeten maken. Dit doe je door kladblok te openen en vervolgens de nieuwe klad op te slaan als '.htaccess'.

Nadat je de klad hebt opgeslagen als .htaccess, zul je deze bestand moeten overzetten naar je server. Dat gaat met FileZilla bijvoorbeeld. Als je het bestand hebt overgezet, zul je de volgende code moeten toevoegen aan het bestand:

                            
                            <IfModule mod_expires.c>
                                ExpiresActive On
                                ExpiresByType image/jpg "access plus 5 months"
                                ExpiresByType image/jpeg "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 weer over naar je server met FileZilla. Je hebt er nu voor gezorgd dat de browser je foto's zal cachen. Dit zal je website een stuk sneller maken.

2. Comprimeren van teksten

Comprimeren van teksten foto

Een website met veel tekst duurt vaak lang om volledig te laden. De browser heeft dan grote moeite om de tekst eerst te comprimeren en dan te vertonen. De browser moet om je website te laden, eerst je teksten comprimeren tot een klein bestand. Gzip wordt het ook wel genoemd.

Het comprimeren van je teksten moet je zelf doen om te voorkomen dat de browser er lang over zal doen. Om je teksten te comprimeren zul je gebruik moeten maken van je '.htaccess' bestand. In dit bestand zul je de volgende code moeten toevoegen op een nieuwe regel.

                        
                            <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 toepassen van de code in de '.htaccess' bestand, zul je het moeten opslaan en moeten overzetten naar je server. Dit kun je ook doen met FileZilla. Nadat je het bestand hebt overgezet, zal je website tekst makkelijker gecomprimeerd worden door de browser, en dat zal je website gaan versnellen.

3. Comprimeren van foto's

Afbeeldingen comprimeren

Foto's kunnen een hoge bestandsgrootte hebben. Doordat de bestandsgrootte groot is, zal de browser er langer over moeten doen om de foto te laden. Dit zal leiden tot het hebben van een langzame website en dat is niet wat je wilt.

Gelukkig zijn er verschillende websites beschikbaar die foto's voor je comprimeren, wat zal leiden tot het verkleinen van de bestandsgrootte van je foto's. Dit zal er dan voor zorgen dat je website een stuk sneller wordt.

Met een website als imagecompressor.com kun je je foto's laten comprimeren. Ze comprimeren PNG en JPG foto's. Maak gebruik van deze gratis tool en verbeter de snelheid van je website.

4. JavaScript en CSS later laten laden

JavaScript en CSS later laden foto

Websites bestaan uit HTML, CSS en JavaScript. Deze drie programmeertalen nemen helaas nog wel wat tijd in beslag bij het laden van een website. Wat je kunt doen om je website sneller te maken, is door CSS en Javascript op een later moment te laden.

Het is handig dat je JavaScript aan het einde van je code plaatst, zodat deze als laatste wordt geladen. Je zult niet merken dat Javascript bezig is met laden, dus het is handig om dit als laatst te laden.

Vind je het belangrijk dat je JavaScript aan het begin van de pagina moet laden, dan kun je de stukken die het meest belangrijk voor je zijn als eerst laden en de rest later. Wanneer je JavaScript en CSS later laat laden zul je een flinke boost zien in de snelheid van je website. Een snelle website is fijn voor je bezoeker en Google.

5. Afbeeldingen later laten laden

Later laden foto

Je wilt dat je bezoeker de afbeelding zo snel mogelijk te zien krijgt en dat het laden van de website niet wordt vertraagd door de afbeeldingen. Gelukkig heeft Google Chrome, Firefox, Edge en Samsung Internet een nieuwe functie toegevoegd aan hun browser.

Door in je code van de afbeelding het volgende toe te voegen, zullen deze browsers jouw afbeeldingen pas laden als de afbeelding in beeld moet komen. Dit bespaart de browser een hoop laadtijd.

                        
                            <img src="voorbeeld.png" loading="lazy"/>
                        
                    

Door 'loading="lazy"' toe te passen aan de foto, zul je Google Chrome en de overige webbrowsers aangeven dat de foto pas geladen moet worden als de foto in beeld moet komen. Het bespaart een hoop laadtijd door dit toe te passen aan de foto's van je website.

Safari en andere browsers ondersteunen deze functie nog niet. Wat je dan wel kunt doen is om een lazyloading functie toe te voegen aan je JavaScript. Er is een mogelijkheid om met behulp van JavaScript, alsnog de lazy loading functie toe te passen aan de foto's in je website. Dit doe je door de volgende code:

                        
                        <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 te waarborgen.

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 jouw code, zal de browser pas je foto's laden als het in beeld moet komen. Deze manier van laden zal je website sneller maken.

Heb je moeite in het toepassen van de lazy loading functie? Dan kun je het artikel van Lazy Loading bekijken van CSS-Tricks bekijken.

6. Verkleinen van CSS en JavaScript

Minify foto

Naast het uitstellen van CSS en JavaScript code, kun je de snelheid van je website ook verbeteren door de CSS en JavaScript te verkleinen. Verwijder bijvoorbeeld code die je niet gebruikt voor je website. Dit bespaart de browser laadtijd. Er zijn gratis tools beschikbaar op het internet die je code verkleinen en aangeven welke code je kunt nalaten.

Er is een tool genaamd PurifyCSS die ervoor zorgt dat je CSS code te zien krijgt die wel gebruikt wordt op je website. Je krijgt van hen een analyse wat je wel gebruikt en wat je niet gebruikt voor CSS. Dit kun je dan handig overnemen van de tool en plakken binnen je website.

Door het overnemen zul je ook een gecomprimeerde versie van bruikbare CSS terugkrijgen, waardoor je ook gelijk je CSS verkleint. Bekijk welke JavaScript code je kunt verwijderen om je code op te schonen en de laadtijd te versnellen.

7. Derden partijen verminderen

Derden foto

Het kan voorkomen dat je gebruik maakt van derden. Dit zal wel effect hebben op de snelheid van je website. API koppelingen leiden tot een verlies in snelheid van je website. Het is beter om onnodige derden te vermijden zodat je jouw laadtijd snel kunt houden. Maak je gebruik van Google Analytics? Maak je website dan sneller door de volgende code toe te voegen aan je website:

                        
                            <script defer async type="text/javascript">
                              var _gaq = _gaq || [];
                              _gaq.push(['_setAccount', 'API_ID']);
                              _gaq.push(['_trackPageview']);

                              (function() {
                                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
                              })();
                            </script>
                        
                    

Met de bovenbenoemde code voor het koppelen van Google Analytics, zal JavaScript niet meteen laden. Dit voorkomt dus dat de browser er lang over doet om de website te laden. De code is een gecomprimeerde versie van de koppeling. Zo zul je dus je website gaan versnellen.

Bekijk deze video hoe jij als WordPress webmaster alsnog je website kunt versnellen


Deel dit artikel met jouw vrienden en kennissen


Bedankt voor je aandacht

Ben je zo ver gekomen in dit artikel? Dan wil ik je bedanken voor je aandacht en je doorzettingsvermogen. Een snelle website doet dus zeker wonderen voor jouw onderneming. Laat je website versnellen door onze specialisten. Ze hebben al velen hiermee mogen helpen met indrukwekkende resultaten. Neem vrijblijvend contact met ons op voor je eventuele vragen.