Het komt in bijna elke usability valkuil top 10 voor; lang wachten is slecht voor de user experience.
Uiteraard helpt de achterliggende server ook mee aan de performance van een site, maar veel vaker kan er “tijd” gewonnen worden op de pagina zelf. Hier zijn dan ook 5 tips om uw website sneller te maken.
Hoe maak ik mijn website sneller?
Tip 1. Zo min mogelijk HTTP-verzoeken
Alles waar een URL aan vast zit, is als het ware een HTTP-verzoek. Heb je 2 javascript bestanden en 3 plaatjes op je website, dan zijn dat al 5 HTTP-verzoeken. Browsers, en nu moet ik oppassen, kunnen maar 2 resources tegelijk downloaden, dit volgens de HTTP 1.1 specificaties. (Uitzonderingen daar gelaten)
De HTML van je website wordt meestal binnen 20% van de laadtijd gedownload, de overige tijd zit in het ophalen van al je assets; CSS, javascript, afbeeldingen en andere media.
Combineer dus, waar mogelijk, al je javascript bestanden in één groot (en compressed) bestand, doe dit ook voor je stylesheets. Voor afbeeldingen zou je zogenaamde “CSS sprites” kunnen gebruiken. Let wel op dat je de originele versies behoudt en hier je wijzigingen ook in blijft doen.
Tip 2. Zet CSS stylesheets bovenaan
Wellicht een open deur, maar toch moet hij ingetrapt worden. Het plaatsen van je CSS in de <head>
tag is, naast het feit dat dit volgens W3C dé standaard is, de meest optimale plek. De browser haalt deze als één van de eerste op en rendert dit ook, wat dus visuele feedback is voor je eindgebruiker. Hij ziet namelijk dat de server iets aan het doen is.
Tip 3. Zet javascript onderaan (of gebruik lazy loading)
Javascript wordt alsmaar populairder en dus steeds vaker gebruikt op websites, echter zijn het vaak deze bestanden die alles ophouden.
In tegenstelling tot CSS zet je je javascript juist onderaan of gebruik je bijvoorbeeld het design pattern lazy loading, een aanpak die er voor zorgt dat bestanden of functies pas opgeroepen worden als je ze ook daadwerkelijk nodig hebt. Niemand heeft namelijk scrollToTopWithThisCodeHeavyAnimation()
nodig bij het laden van jouw website.
Om samen te werken met tip 1, minify je javascript bestanden via bijvoorbeeld JSLint.com of andere Javascript Compressors.
Tip: Niet echt een tip, maar een gouden regel die je moet onthouden: Elk teken in je bestand is 1 byte. Dus ook als je commentaar (/* Deze functie smaakt naar codespaghetti, yum! */) in je bestanden hebt, moeten deze gegevens over de lijn en dus extra laadtijd. Daarom compress je je bestanden!
Tip 4. Voorkom HTTP redirects
HTTP redirect codes zoals 301 en 302 verwijzen de browser naar de nieuwe locatie van een bestaande URL die je hebt opgevraagd. Dit betekent dus, dat naast het oude verzoek, de browser nu een tweede verzoek moet sturen om de nieuwe URL op te halen. Je zult niet vaak tegen dit probleem aan lopen, maar heb je bijvoorbeeld een script dat automatisch een trailing slash achter de URLs plaatst, dan is het wel handig om hier op te letten.
Voor een browser is “best4u.nl/over-ons/” een andere URL dan “best4u.nl/over-ons”, ook al ziet de eindgebruiker hetzelfde.
Tip 5. Maak je afbeeldingen slank
Afbeeldingen zijn ook zware bestanden, maar vaak essentieel voor uw website. Veel bewerkingssoftware heeft al speciale functies voor het opslaan van afbeeldingen speciaal voor het web, maar ook deze kunnen effectiever.
Het web bevat ook veel tooltjes, waarvan veel ook gratis, maar er is ook nog een totaaloplossing, die alle bovenstaande tips in acht houdt..
Bonustip!
Wie houdt er nou niet van een bonus. Om je site in de gaten te houden kan je bijvoorbeeld de YSlow-addon voor Firefox downloaden, gemaakt door Yahoo of de Page Speed-addon van Google, beide vereisen de addon Firebug (sowieso een aanrader!). Mocht je Chrome gebruiken, dan schijnt er ook Speed Tracer te zijn, echter heb ik hier geen ervaring mee. Dus laat mij maar weten hoe die bevalt als iemand hem gebruikt!
Om terug te komen op het “slanke afbeeldingen” verhaal, de addon YSlow controleert ook de grootte van je afbeeldingen en gebruikt de, door Yahoo opgekochte, website SmushIt.com om je afbeeldingen gelijk te compressen.
Dus..
Heb je er nou helemaal niks van meegekregen, onthoudt dan dit:
- Elk teken in je bestand is 1 byte en elke byte moet gedownload worden
- Elk bestand (of beter gezegd elke URL) moet door je browser opgehaald worden
- Verklein (compress/minify) al je bestanden (Javascript, CSS stylesheets maar ook afbeeldingen of zelfs je HTML)
- Zet zoveel mogelijk bestanden van hetzelfde type in één bestand, waar mogelijk
- Voorkom het ophalen van foutieve bestanden (HTTP error 404, 302 of 301) en dus ook geen lege
<img src="">
tags!