7 praktische tips om je website sneller te maken

Het maken of laten maken van een website gaat vaak georganiseerd en met een plan. Op basis van wat je wilt bereiken met je website maak je een plan wat je op je website wilt hebben en waar je website aan zal moeten voldoen. Vaak zien we alleen helaas dat ondernemers niet genoeg aandacht geven aan de snelheid van hun website. Met Google Page Speed Insights kun je de snelheid van je website meten.

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 je 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 een lage pagina snelheid kunnen verwachten. Foto's duren namelijk een tijdje om volledig te laten laden door de browser. Je kunt een lange laadtijd van foto's voorkomen door de foto's die je op je website hebt staan te cachen. Hoe cache je dan je foto's?

Htaccess bestand

Met een htaccess bestand kun je aangeven aan de browser 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 dat bestand:

                            
                            <IfModule mod_expires.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 weer over naar je server met FileZilla bijvoorbeeld. Je hebt dan er voor gezorgd dat de browser je foto's zal cachen. Dit zal je website een stuk sneller maken. Is het niet gelukt om je foto's te laten cachen dan kun je altijd hulp vinden bij YouTube Tutorials waarbij je stap per stap kunt kijken hoe je je foto's kunt cachen op de website.

2. Comprimeren van teksten

Comprimeren van teksten foto

Een website met veel tekst duurt vaak lang om volledig te laden. De browser heeft dan een grote moeite om de tekst eerst te comprimeren en dan te tonen. De browser moet om je website te laden, je teksten comprimeren tot een klein bestand. Gzip word het ook wel genoemd. Het comprimeren van je teksten moet je zelf doen om te voorkomen dat de browser het zal doen wat veel tijd zal kosten. 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 gemakkelijker gecomprimeerd worden door de browser waardoor je website een stuk sneller word.

3. Comprimeren van foto's

Afbeeldingen comprimeren

Foto's die op je website staan kunnen een hoge bestandsgrootte hebben. Doordat de bestandsgrootte de groot is zal de browser en meer tijd 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 leid tot het verkleinen van je foto's. Dit zal dan er voor zorgen dat je website een stuk sneller word.

Met een website als imagecompressor.com kun je je foto's laten comprimeren. Ze comprimeren gratis 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 in de browser. 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 word geladen. JavaScript zul je ook niet merken dat het aan het laden is, dus het is handig om dit als laatst te laden. Vind je het belangrijk dat je JavaScript aan het begin van de pagina wilt laten laden, dan kun je de stukken die het meest belangrijk voor je zijn als eerst laden en de rest aan het einde van jouw code. 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 voor Google, omdat ze veel aandacht geven aan de gebruikservaring van de bezoekers op je website.

5. Afbeeldingen later laten laden

Later laden foto

Het laden van afbeeldingen kost de browser wat tijd om volledig zichtbaar te maken aan de bezoeker. Je wilt dat je bezoeker de afbeelding zo snel mogelijk te zien krijgt en dat het laden van de website niet word 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 komt. Dit bespaart de browser een hoop laadtijd.

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

Door 'loading="lazy"' toe te passen aan de foto zul je aangeven aan Google Chrome dat de foto pas geladen moet worden als de foto in beeld komt. 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 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 jouw code, zal de browser de foto's pas laden als de foto in beeld moet komen. Deze manier van lazy loading wat ik je zojuist heb uitgelegd is een alternatief voor de browsers die de functie niet ondersteunen als tag.

Heb je moeite met het toepassen van 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 later laten laden van CSS en JavaScript, 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, omdat je het niet gebruikt voor je website. Er is een tool genaamd PurifyCSS, die er voor zorgt dat je CSS code krijgt die je wel gebruikt op je website. Je moet je URL plakken in de invul veld. Je krijgt dan een analyse wat je wel gebruikt en wat je niet gebruikt van je CSS. Dit kun je dan handig overnemen van de tool en plakken binnen de code. Door het overnemen zul je ook een gecomprimeerde versie van bruikbare CSS terugkrijgen waardoor je ook gelijk je CSS verkleint. Het verwijderen van onnodige JavaScript kun je handmatig doen via je code door te kijken wat je wel gebruikt en wat je niet gebruikt. Door CSS en JavaScript te verkleinen zal je website een flink stuk sneller worden en zul je dit effect terug zien in je SEO en conversies.

7. Derden partijen verminderen

Derden foto

Het kan voorkomen dat je gebruik maakt van derden partijen. Dit zal wel effect hebben op de snelheid van je website. API koppelingen leiden tot een verlies in de snelheid van je website. Het is beter om onnodige derden te vermijden om je snelheid hoog te houden. Maak je gebruik van Google Analytics, dan kun je gebruik maken van de volgende code om je website sneller te maken:

                        
                            <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. Maak gebruik van de versnelde versie van JavaScript koppeling met Google Analytics om je website snel te maken en om snelheid te behouden.

Bekijk deze video hoe jij als WordPress website eigenaar 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 :D. Wij zijn een webdesign bureau genaamd Web Exact. Wij maken websites en optimaliseren websites in SEO. Wil jij een website laten bouwen of optimaliseren door onze gespecialiseerde webdesigners? Bekijk dan onze prijzen voor het optimaliseren of maken van je website. Neem vrijblijvend contact met ons op voor je eventuele vragen.