Website sneller maken

website sneller maken
Snelle websites worden beter bekeken en trekken meer terugkerende bezoekers. Met deze praktische tips kun je zelf aan de slag om de laadtijd van een website te verkorten.

Testen van de laadtijd van een webpagina

PageSpeed Insights
PageSpeed Insights van Google geeft een rapportcijfer, en uitgebreide adviezen om de laadtijd te verkleinen. De suggesties zijn zeer compleet, er wordt bijvoorbeeld direct aangegeven hoeveel je kunt besparen door scripts te comprimeren. Je kunt ook een rapport opvragen voor de laadtijd op mobiele apparaten.
Taal: Nederlands.
Gratis: Ja.

Pingdom
Pingdom geeft een goed inzicht in de laadtijd van een webpagina. In het overzicht is te zien hoe de verschillende onderdelen laden, en welke voor vertraging zorgen. Let op: ingebedde objecten - zoals filmpjes - worden niet vermeld. Ook is de laadtijd natuurlijk niet constant: om een goed beeld te krijgen moet je testen op meerdere momenten van de dag.
Taal: Engels.
Gratis: Een beperkt rapport is gratis, een abonnement biedt meer informatie.

Afbeeldingen optimaliseren

Afbeeldingen zijn vaak de zwaarste onderdelen van een webpagina. Het loont dus om ze zo klein mogelijk op te slaan. Opslaan in PNG levert meestal de kleinste bestanden op. Voor verdere reductie kun je bij het opslaan het aantal kleuren - standaard 256 - verminderen.
Je kunt ook het aantal afbeeldingen dat geladen wordt verminderen door ze samen te voegen. Achtergronden en menu's kunnen gemaakt worden met 1 afbeelding, in plaats van meerdere losse plaatjes. Hiervoor kan gebruik gemaakt worden van CSS sprites. Kijk voor een handleiding op: CSS Tricks.

Minify Javascript en stylesheets

Scripts en stylesheets kunnen verkleind worden door het verwijderen van overbodige witregels, spaties en commentaar. Zeker bij lange scripts kan de omvang hierdoor aanzienlijk slinken. Comprimeren van code wordt minifying genoemd en wordt gedaan met (online) programma's zoals UGLYfy en Minifier. Het omgekeerde van minifying staat bekend als beautifying of pretty-printing: het omzetten van gecomprimeerde naar leesbare code. Ook hiervoor zijn tools beschikbaar.

Scripts en stylesheets samenvoegen

Om het laden te versnellen kun je meerdere Javascripts samenvoegen tot één extern JS bestand. Dit wordt geplaatst aan het einde van de content (voor de afsluitende BODY-tag).
Code voorbeeld: <script src="mijnbestand.js" type="text/javascript"></script>

Dit geldt ook voor meerdere stylesheets: deze kunnen worden samengevoegd tot één extern CSS bestand.
Code voorbeeld: <link rel="stylesheet" type="text/css" href="style.css" />

Verminderen van externe onderdelen

De laadtijd van een website kan sterk oplopen door onderdelen die ingeladen worden vanaf andere websites, zoals advertenties, apps, statistieken (tellers) en sociale media buttons. De like-buttons van Facebook zijn berucht, en ook de code van een webstatistieken programma kan een flinke aanslag zijn. Als een website traag laadt is het aan te raden om kritisch naar deze onderdelen te kijken.

De cache aanzetten

Dit is belangrijk voor gebruikers van WordPress, Joomla. Drupal en andere Content Management systemen. Als de cache is ingeschakeld wordt een pagina niet bij elke aanvraag opgebouwd, maar opgehaald uit de cache. Dat gaat sneller, en scheelt druk op de server. In de meeste CMS-en kan de cache worden ingeschakeld in het admin gedeelte. In WordPress zijn hiervoor ook plugins beschikbaar.

Browser caching

Met browser caching geef je aan wat de 'houdbaarheidsdatum' is van onderdelen op een website. Als de afbeeldingen zelden veranderen kun je aangeven dat ze niet bij elk bezoek opnieuw geladen worden, maar bijvoorbeeld pas na een maand. Als een website op een server met Apache draait kan browser caching worden geregeld via een .htaccess bestand.

Browser caching met mod_expires
Hiervoor moet Apache op de server draaien, en mod_expires zijn ingeschakeld.
  1. Open Kladblok (of een andere simpele teksteditor).

  2. Plak deze code erin:
    ExpiresActive On
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType text/plain "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 2 weeks"
    ExpiresByType text/css "access plus 2 weeks"
    ExpiresByType text/html "access plus 2 weeks"

    Kijk voor uitleg over de code op: Apache mod expires.

  3. Sla het bestand op als htaccess.txt
  4. Upload het bestand via FTP naar de website, naar de map met de index.html
  5. Wijzig de naam van het bestand op de server naar .htaccess (zonder extensie)
  6. Controleer de werking van de pagina in de browser.


Browser caching met mod_headers
Hiervoor moet Apache op de server draaien, en mod_headers zijn ingeschakeld.
  1. Open Kladblok (of een andere simpele teksteditor).

  2. Plak deze code erin:
    <FilesMatch "\.(jpg|gif|png|)$"> Header set Cache-Control "max-age=2592000" </FilesMatch>

    Hiermee worden de genoemde elementen (jpg, gif en png) voor 1 jaar gecached.
    Kijk voor uitleg over de code op: Apache mod headers.

  3. Sla het bestand op als htaccess.txt
  4. Upload het bestand via FTP naar de website, naar de map met de index.html
  5. Wijzig de naam van het bestand op de server naar .htaccess (zonder extensie)
  6. Controleer de werking van de pagina in de browser.

Welke modules zijn ingeschakeld in Apache?
Als de server PHP ondersteunt kun je dit zelf testen:
  1. Open Kladblok (of een andere simpele teksteditor).
  2. Plak deze code erin: <?php phpinfo(); ?>
  3. Sla het bestand op als test.php
  4. Upload het bestand via FTP naar de website, naar de map met de index.html
  5. Ga in de browser naar: www.mijnsite.nl/test.php
  6. Er wordt een PHP informatiepagina getoond, onder apache2handler zie je de ingeschakelde modules bij Loaded Modules.