Performance verbeteren – aantal aanvragen verminderen

Geschreven door: op vrijdag 20 februari 2015

Leestijd:

In eerdere artikelen is al behandeld hoe je slechte performance kunt voorkomen en hoe je performance kunt verbeteren door middel van een CDN. In dit artikel wordt verder behandelt hoe je de performance van uw website verder kunt verbeteren – met name voor mobiele gebruikers.

Waarom het aantal aanvragen verminderen

Als een pagina wordt opgevraagd worden alle onderdelen die op deze pagina staan geladen. Al deze onderdelen moeten afzonderlijk worden geladen door een browser. Met name op een mobiele telefoon kost elke afbeelding die geladen moet worden, hoe klein deze ook is, extra tijd. Het opzetten van de verbinding met de server waarop de afbeelding staat kost namelijk relatief gezien veel tijd. Het is dus verstandig om het aantal van deze aanvragen te verminderen.

Hoe kun je het aantal aanvragen verminderen

Dit kan gedaan worden op verschillende manieren. Het is altijd het beste om alle Javascript en CSS-bestanden te combineren naar één bestand voor Javascript en één bestand voor de CSS. Hierdoor hoeft de browser maar twee bestanden te laden.

In het geval van afbeeldingen wil je deze ook zoveel mogelijk combineren. Voor de afbeeldingen die worden geplaatst in de tekst geldt dit overigens niet. Het combineren van afbeeldingen tot één afbeelding heet een sprite. Deze zogenoemde sprite bevat alle afbeeldingen die bijvoorbeeld onderdeel van de opmaak zijn. Het maken en gebruiken van sprites is vaak lastig. Dit is met name lastig als je een bestaande afbeelding wilt vervangen voor een groter exemplaar waardoor je alle definities van de andere afbeeldingen ook moet wijzigen. Hiervoor is uiteraard een oplossing

Maak gebruik van DATA-uris.

Door gebruik te maken van DATA-uris worden de afbeeldingen niet meer geladen vanaf een bepaalde URL zoals: http://sigmasolutions.nl/markLinks/email.png maar worden ingeladen als DATA-object. De URL van bovenstaande afbeelding word dan: “iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJBAMAAAD5iKAgAAAAD1BMVEXm5ubR0dH///+ampoAAAApwmyIAAAABXRSTlP/////APu2DlMAAAAuSURBVAiZYzAGAhMGYyUlZUMGAyMlA0MGI2ZjJiCppKQEI0FqDBkcBYGAwQUEAMtbB7Tb/9bVAAAAAElFTkSuQmCC”. Zoals je kunt zien valt er weinig van te maken, maar alle browsers kunnen dit omzetten naar een afbeelding.

Je kunt deze DATA-uris op verschillende manieren gebruiken. Je kunt ze direct in een afbeelding plaatsen op de volgende manier:

<img src="iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJBAMAAAD5iKAgAAAAD1BMVEXm5ubR0dH///+ampoAAAApwmyIAAAABXRSTlP/////APu2DlMAAAAuSURBVAiZYzAGAhMGYyUlZUMGAyMlA0MGI2ZjJiCppKQEI0FqDBkcBYGAwQUEAMtbB7Tb/9bVAAAAAElFTkSuQmCC" title=”email” width="10" height="9">

Bovenstaande methode is overigens niet aan te raden om te gebruiken. Je browser zal dit bestand namelijk niet bewaren in zijn cache.

Of in CSS als achtergrond afbeelding:

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJBAMAAAD5iKAgAAAAD1BMVEXm5ubR0dH///+ampoAAAApwmyIAAAABXRSTlP/////APu2DlMAAAAuSURBVAiZYzAGAhMGYyUlZUMGAyMlA0MGI2ZjJiCppKQEI0FqDBkcBYGAwQUEAMtbB7Tb/9bVAAAAAElFTkSuQmCC")

Door gebruik te maken van deze DATA-uris voorkom je dus onnodige aanvragen wat de laadtijden van de website ten goede komt.

Bent u geïnteresseerd in een website waarbij performance geen probleem is? Neem dan contact op met Sigma Solutions via de mail of door het formulier rechts in te vullen.


Andere blogartikelen

  • Til uw bedrijf naar een hoger plan met klantinzicht

    Geschreven door: op vrijdag 23 februari 2018

    80% van de CEO’s vindt de eigen organisatie klantgericht, slechts 8% van de klanten is het daarmee eens (Steven van Belleghem). In deze tijd van digitalisering is de klant kritischer dan ooit. Info ...

    Bekijk het artikel »
  • Css grid

    Geschreven door: op dinsdag 20 februari 2018

    Css grid is een vernieuwende manier voor het indelen van content op website pagina’s. Met behulp van css wordt de uiterlijk van een website bepaald. Doormiddel van een grid is het mogelijk om gemakkel ...

    Bekijk het artikel »
  • CSS vendor prefixes

    Geschreven door: op dinsdag 20 februari 2018

    Bij CSS is het voor een aantal stijl regels mogelijk om aan te geven in welke browser deze gebruikt moet worden. Hiervoor wordt het type browser toegevoegd voor de stijl regel. Dit wordt een prefix (o ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
Aliancys is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd gazellen 2017
Google analytics
Google adwords
TelefoonE-mail

whitepaper-customer-selfservice-1.png

Bedien uw klanten optimaal met customer selfservice

Download de whitepaper