Insights, technology, people and more

Altijd up-to-date met onze laatste artikelen.

@
Verbeter de laadtijd van uw website

Verbeter de laadtijd van uw website

24 October 2008 door in Optimalisatie

Wanneer het gaat om een stabiel databasecluster, een zeer snelle webserveroplossing, of een minder geavanceerd hosting abonnement; het eindresultaat dat uw gebruikers of bezoekers voor ogen krijgen kan door verschillende factoren beïnvloed worden, zowel positief als negatief. Gelukkig zijn wij als Managed Hosting provider in staat om u te ondersteunen om het optimale uit uw oplossing te halen. Immers, wanneer uw eindgebruikers tevreden zijn, zal ook ons dat op lange termijn ten goede komen.

Mijn functie binnen Cyso bestaat voor een deel uit het vormgeven, ontwikkelen en optimaliseren van websites en gerelateerde projecten. Met name het optimaliseren van websites is toevalligerwijs het laatste jaar vaker ter sprake gekomen. Na veel research en enkele seminars zou ik mijn kennis graag met u willen delen. Het onderstaande artikel is opgedeeld in methodes om ervoor te zorgen dat uw website sneller laadt, of sneller lijkt te laden. Ik heb de punten op volgorde van snelheidswinst geplaatst.

Beperk het aantal bestanden

De meest eenvoudige manier om de laadtijd van uw website te verbeteren, is door het aantal afbeeldingen, stylesheet-, Javascript- en Flashbestanden te beperken. Het inladen van deze bestanden is verantwoordelijk voor tachtig procent van de laadtijd van uw website.

De snelste manier om dit vervolgens toe te passen is door het design te vereenvoudigen. Echter, dit zal in de meeste gevallen geen realistische oplossing zijn. Het ontwerpbureau van uw website zal namelijk al rekening gehouden hebben met het aantal bestanden en daarmee de grootte van uw website. De volgende mogelijkheden zijn er om in het huidige design van de website toch onderdelen sneller te laten laden:

Combineer bestanden

Door verschillende kleine CSS bestanden tot één CSS bestand samen te voegen reduceert u het aantal te laden bestanden, en dus laadt de website sneller. Zie hier een artikel over het samenvoegen van bestanden op een Unix omgeving.

Maak gebruik van CSS Sprites (zie uitleg). Het gebruik van deze methode reduceert ook het aantal te laden bestanden. Zorg wel dat de afbeeldingen die u combineert alleen de vaak gebruikte zijn.

Het terugbrengen van het aantal te laden bestanden binnen uw website is een goede start. Dit werkt het meest direct bij nieuwe bezoekers op je website. Bezoekers die eerder uw website hebben bezocht, kunnen gebruik maken van de browser cache zodat voor hen de pagina iets sneller laadt. Gemiddeld heeft 60 tot 40 procent van de dagelijkse bezoekers een lege browser cache, dus rekening houden met bovenstaande tips is zeker een goede start !

Gebruik een Content Delivery Network

Een Content Delivery Network (CDN) bestaat uit een aantal servers waar bestanden van de website (zoals afbeeldingen en javascript bestanden) op geplaatst kunnen worden. Doordat de bestanden van verschillende plekken van internet gehaald worden, zal de bezoeker van de website ervaren dat de verschillende onderdelen sneller geladen worden. In de HTTP/1.1 specificatie wordt gesuggereerd dat browsers niet meer dan twee bestanden tegelijkertijd kunnen downloaden per domeinnaam. Meestal wordt deze techniek toegepast voor grotere websites, of websites met veel statische content zoals bijvoorbeeld foto websites (gallery.zoom.nl en Flickr).

Neem contact met ons op wanneer u meer informatie wilt hebben over onze CDN oplossingen.

Voeg een Expires of een Cache-Control Header toe

Websites gebruiken meer en meer Javascript, stylesheets, afbeeldingen en Flashbestanden. Een bezoeker die voor het eerst de website bezoekt moet een aantal bestanden inladen, maar met het toevoegen van Expires Headers kunnen we de bestanden cachen aan de kant van de bezoeker zodat deze bij de volgende pagina die geladen wordt veel sneller geladen worden.

Bij het toevoegen van Expires Headers moet op twee zaken gelet worden:

  • Voor statische bestanden: gebruik een “Never Expires” methode door een Expires Header in de verre toekomst te gebruiken.
  • Voor dynamische bestanden: gebruik een normale Expires Header die enigszins realistisch is.

Een voorbeeld van het gebruik van cache op afbeeldingen in een .htaccess bestand:

    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 day"
    ExpiresByType image/jpeg "access plus 1 day"
    ExpiresByType image/gif "access plus 1 day"
    ExpiresByType image/png "access plus 1 day"

Gebruik Gzip compressie

Compressie van de bestanden door de webserver kan zorgen voor een snellere laadtijd naar de browser. Gzip is de meest populaire en effectieve manier op het moment om dit te realiseren. Met het Gzippen kunt u de reactietijd met gemiddeld 70% versnellen. Inmiddels kunnen 90% van de browsers die gebruikt worden omgaan met Gzip compressie. Als u Apache gebruikt kunt u eenvoudig gebruik maken van de Gzip modules door gebruik te maken van een .htaccess bestand. Binnen een Windows omgeving hebben we Gzip compressie standaard aan staan.

Neem contact op met onze servicedesk wanneer u gebruik wilt maken van (of u wilt weten of u reeds gebruik maakt van) deze Gzip compressie op uw website.

Plaats stylesheets bovenaan

Wanneer u de stylesheets bovenaan in de HEAD zet lijkt de pagina sneller te laden. Dit komt doordat de stylesheet eerst ingeladen wordt voordat er content op het scherm verschijnt. De content die vervolgens verschijnt wordt direct in de juiste vormgeving geplaatst. Dit voorkomt onrustige verspringingen, daarnaast is het voor de browsers efficiënter om eerst te weten waar de vormgevingselementen komen te staan.

Plaats Javascript onderaan

Mede door de eerder genoemde HTTP/1.1 specificatie waarin wordt gesuggereerd dat browsers niet meer dan twee bestanden tegelijkertijd kunnen downloaden per domeinnaam, is het plaatsen van Javascript onderaan de pagina efficiënter dan bovenaan in de HEAD tag. Doordat het voor de gebruiker visueel lijkt alsof de pagina al geladen is op het moment dat de Javascript bestanden aan de beurt zijn, ervaart de gebruik de pagina als sneller dan wanneer deze eerst op het laden van de Javascript bestanden zou moeten wachten.

Maak Javascript en CSS extern

Zorg dat Javascript en CSS bestanden extern opgehaald worden. Op deze manier kan het beter gecached worden.

Fout:
<html>
  <head>
    <style type="text/css">
      body { background-color:white; }
    </style>
  </head>
  <body>
  ...
Goed:
<html>
  <head>
    <link rel="stylesheet" href="/css/mycss.css" type="text/css" media="all" />
  </head>
  <body>
  ...

Overige tips

Vermijd redirects en 404 meldingen
Een bestand opvragen dat niet bestaat kost meer dan 64 milliseconden. Een redirect naar een afbeelding op een andere locatie kost meer dan 90 milliseconden. Probeer dit te vermijden.

Vermijd CSS Expressions

Met het gebruik van CSS Expressions kunt u Javascript in CSS bestanden uitvoeren. Zie het volgende voorbeeld:

    background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

De meeste browsers kunnen niet snel (of helemaal niet) met deze Expressions omgaan. Probeer het gebruik ervan daarom te vermijden. Zie hier een uitgebreider artikel over dit onderwerp.

Comprimeer Javascript en CSS

Het is mogelijk om uw Javascript en CSS bestanden te comprimeren door onnodige karakters uit de bestanden te filteren. Hierdoor worden de bestanden kleiner en zullen ze sneller laden. Twee populaire tools zijn JSMin and YUI Compressor (ook voor CSS).


Lees ook: Optimaliseer webcapaciteit met nginx

Cookies, hou ze klein !

Wanneer een website een paar jaar bestaat, bestaat er een kans dat de cookies die opgeslagen worden te groot worden. Zorg dat er maximaal tien waardes (gecodeerd) per cookie worden opgeslagen. En natuurlijk maar 1 cookie per bezoeker. Zie hier een onderzoek van Yahoo! naar het gebruik van cookies.

Weet u niet zeker of bovenstaande punten realiseerbaar zijn binnen uw website, of wilt u ondersteuning hebben bij de implementatie van enkele onderdelen? Neem dan gerust contact op met onze servicedesk.


Altijd up-to-date met onze laatste artikelen.

@

Kwaliteit. Betrouwbaar. Betrokken.
  • 24/7 service support
  • Nederlandse datacenters
  • ISO 27001 gecertificeerd
vmware enterprise service provider