Naar
boven
Logo Karel Geenen

Sonja Bakker voor je website

Vandaag was een bericht te lezen op Marketingfacts over het feit dat de gemiddelde webpagina in vijf jaar tijd drie maal zo groot zijn geworden. Uiteraard zijn de internet verbindingen in die periode ook sneller geworden.

Toch is het belangrijk dat je website zo snel mogelijk laadt. In dit artikel daarom een aantal tips om je website sneller te maken.

Verwijder alles wat overbodig is
Tijdens het ontwerpen van je website heb je waarschijnlijk allerlei mooie afbeeldingen, video’s, geluidsfragmenten, Java-applicaties en flash elementen toegevoegd.

Mijn advies is om nog eens goed naar je website te kijken en alles te verwijderen wat geen toegevoegde waarde heeft. Start er automatisch een muziekje op wanneer iemand jouw website bezoekt? Is dat echt nodig of is het gewoon “leuk”. Zeker bij automatisch startende muziek is het aan te raden dit te verwijderen. Veel bezoekers vinden dat irritant (ze luisteren vaak zelf al naar muziek op de pc).

Het verwijderen van overbodige elementen levert vaak een fikse winst op voor wat betreft het laden van je website.

Maak gebruik van een stylesheet
Met je opmaak in een aparte .css file kunnen browsers via één bestand alle opmaakdetails, zoals lettertypes, kleuren en posities, opvragen. De code voor de opmaak hoeft dus niet meer op elke pagina apart worden geschreven. Dit bespaart vaak een enorme hoeveelheid code en je website zal dus sneller laden.

Gebruik externe scripts
Wanneer je een bepaald script op meerdere pagina gebruikt is het verstandig om over te schakelen naar een extern script. De scriptcode staat dan niet meer op de pagina zelf maar in een apart bestand. Dit bestand kan dan worden aangeroepen via bijvoorbeeld de volgende code:

<script type=”text/javascript” src=”jouwscript.js” mce_src=”jouwscript.js”></script>

Op deze manier kun je enorm besparen op de laadtijd van je website. Zeker bij de wat grotere scripts is dit absoluut aan te raden.

Splits grote pagina’s
Zowel voor de laadtijd als de gebruiksvriendelijkheid van je website is het verstandig om grote (lange) pagina te splitsen. Kleinere pagina’s laden sneller en de bezoekers zullen niet worden afgeschrikt door de scrollbalk aan de rechterkant van de browser.

Verwijder overbodige witruimte in de code
Witruimte zijn de spaties tussen je code. Het verwijderen van overbodige tabs en spaties kan ook een groot effect hebben op de laadtijd.

Let er wel op dat de code voor jou zelf nog wel “leesbaar” blijft. Het wordt anders erg lastig om op een later tijdstip de code te bewerken als je niet meer weet welke code waar staat.

Hou de code schoon
Wanneer je gebruik maakt van een wysiwyg editor (Microsoft Frontpage bijvoorbeeld) wordt er vaak overbodige code toegevoegd. Lege tags zijn hier een goed voorbeeld van. Het verwijderen van deze tags en het opschonen van de code zorgt ervoor dat je website sneller zal laden.

Voorkom geneste tabellen
Praktisch elke webdesigner zal het gebruik van geneste tabbellen (voor opmaak) afraden. Hoewel ik geen webdesigner ben wil ook ik je adviseren geneste tabellen te voorkomen. Beter is om gebruik te maken van je stylesheet (.css file) om de opmaak te “regelen”.

Geneste tabellen vertragen de laadtijd omdat de browser eerst alle code moet berekenen om de posities van de tabellen te bepalen.
Afbeeldingen sneller laten laden

Overdrijf niet met het plaatsen van afbeeldingen
Hoewel afbeeldingen een website vaak aantrekkelijker maken moet hierin niet overdreven worden. Bekijk de afbeeldingen op je website eens en bepaal of deze wel echt meerwaarde bieden. Zo niet, verwijder ze dan!

Reduceer de bestandsgrootte van de afbeeldingen
Er zijn verschillende gratis tools beschikbaar om je afbeeldingen te optimaliseren (bestandsgrootte verkleinen). Eén van die gratis tools is ImageOptimizer.

Het spreekt voor zich dat een kleinere bestandsgrootte de laadtijd positief zal beïnvloeden.

GIF versus JPG versus PNG
Een veelgebruikt afbeeldingstype is tegenwoordig PNG. Dit is het optimale type om afbeeldingen online te plaatsen. De kwaliteit gaat namelijk niet ten kostte van de compressie.

Wanneer je toch gebruik wil maken van GIF’s en JPEG’s adviseer ik om GIF te gebruiken voor afbeeldingen die niet zo’n scherpe resolutie nodig hebben. JPEG’s gebruik je het best alleen voor foto’s.

Hoogte en breedte tags
Wanneer een pagina wordt geladen en de hoogte en breedte van de afbeeldingen zijn al voorgeschreven (je hebt dus gebruik gemaakt van de “height” en “width” tags) weet de browser hoe groot de afbeeldingen zullen zijn, ook al zijn ze nog niet geladen.

Wanneer je dit niet doet moet de browser eerst wachten tot de afbeelding is geladen om daarna de rest van de website op te bouwen.

De “height” en “width” tags moet je dus zeker gebruiken. Ook bij de tabellen kun je deze tags gebruiken om de laadtijd te optimaliseren.

Meten is weten
Er zijn dus verschillende manieren om ervoor te zorgen dat je website sneller laadt. Voordat je echter aan de slag gaat met het optimaliseren is het eerst verstandig om te kijken wat de huidige laadtijd is. Zo kun je na de optimalisatie zien wat het heeft opgeleverd.

Hiervoor kan ik twee tools aanraden:

http://www.iwebtool.com/speed_test
Gratis eenvoudige online tool waarbij alleen de bestandsgrootte en laadtijd wordt weergegeven.

http://www.web-site-test.com/
Dit is een software die je moet downloaden. Er is een gratis versie beschikbaar (30-dagen proef of 30 testen). Deze tool is een stuk uitgebreider en laat je ook meteen zien welke elementen van je website aandacht nodig hebben.

(inspiratie/bron: Webweaver.nu)


Over de auteur:

Dit artikel is geschreven door .

Karel Geenen
Karel Geenen is de eigenaar van deze weblog, en tevens eigenaar van Yargon, een zoekmachine marketing bedrijf gericht op het MKB.
14 reacties op "Sonja Bakker voor je website"
  • Sven zegt:
    29 apr, 2008 om 16:18

    Denk niet dat het een groot probleem is voor de gebruiker, meer voor jezelf omdat je bandbreedte moet betalen maar ook dat is vaak geen punt meer tegenwoordig. Kan altijd toepassen, maar ik zou nooit minder plaatjes gebruiken alleen om de pagina minder bandbreedte te laten verbruiken.

    Reageren
  • Jens zegt:
    29 apr, 2008 om 20:12

    Bedankt, erg handig en veel zal ik (helaas) ook maar eens toe moeten passen op mijn blog. De code daarvan is echt een zooitje.

    Reageren
  • Meer bezoekers zegt:
    02 mei, 2008 om 15:16

    In eerdere discussies is opgemerkt dat het gebruik van valid xHTML en CSS je o.a. bandbreedte bespaart. Consequent gebruik van standaarden voorkomt veel problemen.

    Wat ik mis is het gebruik van i.p.v. voor de layout. Hiermee verplaats je veel meer opmaak naar de CSS en wordt je pagina dus sneller. Tables gebruik je alleen voor overzichten.

    Hoogte en breedte tags regel je ook in je CSS. Kortom: alle opmaak regel binnen je stylesheet. xHTML is een beschrijvingstaal.

    Reageren
  • [...] Geenen met Sonja Bakker voor je website De inspiratie is voor Karel gekomen uit het feit dat de gemiddelde webpagina de afgelopen 5 jaar 3 [...]

    Reageren
  • [...] Karel Geenen met Sonja Bakker voor je website [...]

    Reageren
  • [...] Geenen met Sonja Bakker voor je website De inspiratie is voor Karel gekomen uit het feit dat de gemiddelde webpagina de afgelopen 5 jaar 3 [...]

    Reageren
  • Roelof zegt:
    12 mei, 2008 om 09:23

    Ik denk dat de gebruiker er normaliter weinig last van heeft, of het moet natuurlijk echt drastische vormen aan gaan nemen. Bandbreedte is al helemaal geen punt meer tegenwoordig, het grootste verschil kan je wellicht vinden bij de verschillende hosters.

    Ik merk dat bij verschillende websites met verschillende hoster, de ene laadt gewoon veel sneller dan de andere (getest met de links die je in je artikel gaf).

    Reageren
  • Marjolein zegt:
    20 mei, 2008 om 10:33

    Wat wordt er precies bedoeld met ‘Voorkom geneste tabellen’? Ik heb namelijk gehoord dat je juist tabellen moet gebruiken om een zo scannable mogelijke website te krijgen.

    Met vriendelijke groet,
    Marjolein

    Reageren
  • Frank zegt:
    31 mei, 2008 om 11:28

    De tools die ik persoonlijk gebruik zijn de Firefox uitbreidingen Firebug en Yahoo Developer tools.
    Ik geef ze de voorkeur omdat ook het caching gedrag van de browser meegenomen wordt in de metingen.

    Als algemene reactie: als je gaat optimaliseren is het nuttig om 3 zaken apart te weten/meten, de laadtijd, de render tijd en de perceived performance van de gebruiker.
    De laadtijd is het pure transport van alle pagina elementen van webserver(s) naar de browser. Caching is hier je vriend.
    De rendertijd is de tijd die de browser nodig heeft om alles te controleren,verwerken, de evt javascript te runnen en alles te tonen. Discussies over “table vs div” en “waar plaats ik javascript” zijn hier relevant.
    Tenslotte de belangrijkste, wanneer denkt de gebruiker dat de pagina klaar is en hij aan de slag kan. Op het moment dat ik een gevuld scherm voor me zie denk ik dat de pagina geladen is en dat kan veel sneller zijn dan de daadwerkelijke laadtijden van alle elementen. Het in de achtergrond laden van bijv plaatjes of een javascript gadget zie ik niet, dus ‘meet’ ik als gebruiker niet.

    Reageren
  • Frank zegt:
    31 mei, 2008 om 11:32

    ah, er is dus geen Preview optie bij Verstuur en de tags worden niet gecontroleerd op afsluiten of lengte.

    Ik zal de volgende keer beter opletten :)

    Reageren
  • Karel Geenen zegt:
    31 mei, 2008 om 18:13

    Is aangepast Frank. Geen probleem ;-).

    Overigens goede tips die je daar aandraagt! Bedankt.

    Reageren
  • Fil zegt:
    31 mei, 2008 om 23:36

    Het is inderdaad een goede werkwijze om je css- en JavaScript bestanden extern op te slaan en er dan vanaf je xHTML bestand naar te linken. Het xHTML bestand op zich heeft weinig tijd nodig om te laden.
    Let er wel op dat je het aantal externe bestanden waar je naar linkt tot een minimum beperkt. Voor ieder extern bestand moet immers een nieuw HTTP request verzonden worden naar de server. En dat kost tijd.
    Probeer je dus te beperken tot 1 css-bestand en 1 eventueel bestand voor Javascript functies.

    Laadtijd is een heel subjectief gegeven. Vandaar ook dat het mij verwondert dat Google hier een parameter van maakt binnen het Adwords programma (zie andere post van Karel).
    Dat brengt ons bij caching.
    Serverside caching kan soms enorme tijdswinst opleveren.
    Wat de clientside (PC van de bezoeker) caching betreft zijn de mogelijke voordelen hier afhankelijk van de browser en de instellingen daarvan. Tijdswinst ? Misschien, maar niet zeker.

    Geneste Tabellen ? Geneste tabellen ! Are you crazy ? :)

    Wat afbeeldingen betreft zijn er ook weer veel mogelijkheden om de laadtijd van je pagina te vergroten. Vele heb je al gegeven.
    Een (veelgebruikte) toepassing is het vooraf laden van afbeeldingen (preloaden), ook al worden deze pas op volgende pagina´s gebruikt.
    Gebruik ook steeds een favicon. De meeste browsers zoeken hier naar (en dat kost tijd). Weer een beetje tijdswinst dus, als je er eentje hebt.

    Maar maak je geen zorgen. Als de bezoeker vermoedt/weet dat je iets interessant te bieden hebt dan kijkt hij niet op een tiende van een seconde.
    Details zijn belangrijk, maar verlies het grotere geheel niet uit het oog.

    Reageren
  • Marjolein zegt:
    02 jun, 2008 om 08:16

    Beste Fil,

    Sorry, maar kun je misschien iets duidelijker zijn over de tabellen? Nu snap ik er helemaal niets meer van. Thanks.

    Reageren
  • BaZz zegt:
    14 jul, 2008 om 21:16

    GIF versus JPG versus PNG

    Sorry, ik bespeur in deze alinea een ernstige vereenvoudiging van de werkelijkheid.

    GIF bij beperkte kleurdiepte, max 256 kleuren, eventueel een eigen gekozen kleurpalet, voorkeursformaat als transparantie gewenst is. Compressie zonder kwaliteitsverlies, maar eventueel met kleurverlies.
    PNG voor afbeeldingen met meer kleuren en eventueel als je transparantie in je afbeelding wil. Compressie zonder kwaliteitsverlies, maar eventueel met enig kleurverlies.
    JPG voor full-color foto’s, liever niet voor bv logo’s en texten
    Compressie met kwaliteitsverlies, texten worden vaak blokkig.

    Als je het even niet weet: even een paar bestand-opties proberen in je favoriete beeldbewerkingsprogramma levert vaak kB-tjes voordeel op!

    @Marjolein: een tabel is voor een matrixje informatie, niet voor de opmaak van je site, hier is css voor! Tabellen voor de opmaak van je site zijn heel erg old-skool.

    Reageren

Reageren


Karelgeenen.nl BV | Pastoor v. Vroonhovenstraat 8 | 5554 HJ Valkenswaard | Tel: 0575-200 228
Privacy Policy | Gebruiksvoorwaarden | Copyright 2006 - 2014