Ik heb de snelste

8 februari 2013 Inzichten /

Designers bij Wijs geloven niet in mooie websites. Of in websites die bruikbaar zijn. Ze geloven niet in platte of fotorealistische esthetiek. Designers bij Wijs zijn er van overtuigd dat goed design al die dingen en meer omvat. Dat goed design even veel aan de binnenkant als aan de oppervlakte zit. Ze zijn er van overtuigd dat hoe je een website bouwt minstens even belangrijk is als wat bezoekers te zien krijgen.

Neem bijvoorbeeld snelheid. Als je een bedrijf hebt, dan weet je dat reactiesnelheid belangrijk is. Je kan snel reageren op een vraag van een klant, of traag. Als je traag reageert kom je arrogant of ongeïnteresseerd over. Het is de snelste manier om klanten te verliezen.

Reactiesnelheid moet zich ook online vertalen. De trage website van de NMBS is een correcte vertaling van de offline ervaring. De vraag is maar of je dat wil. Snelheid is een rechtstreeks gevolg van hoe een website gebouwd wordt. Het is een gevolg van hoe het design tot stand is gekomen. Het is éen van de vele aspecten die digitaal ontwerp zo uitdagend maken. Snelheid is een essentieel onderdeel van hoe je bedrijf gedesignd wordt.

Éen seconde

Dat is de tijd die je krijgt. Je kan snelheid op verschillende vlakken aanpakken. De motor van de website moet goed draaien—voor die optimalisatie zorgen onze developers en sysadmin of hosting partner. Maar het dashboard, het stuur en de pedalen moeten ook snel reageren op je acties. Een bezoeker wil controle over de website voelen. De rule of thumb is dat je pagina’s binnen de seconde moeten laden. Éen ding is zeker: te snel bestaat niet.

Een groot deel van de optimalisatie kan je gelukkig automatiseren of moeiteloos in je workflow meenemen. Deze blogpost zou te lang worden als we àlles zouden beschrijven, maar wat volgt is een lijstje met een aantal dingen die wij in ons proces geautomatiseerd hebben.

CSS verkleinen

De CSS code die je schrijft is tijdens het ontwikkelen liefst overzichtelijk. De CSS die je aan je bezoekers geeft, is liefst zo klein mogelijk. In Fork CMS is een CSS minifier ingebouwd die er onder andere voor zorgt dat overbodige karakters zoals spaties verwijderd worden voor de site bij de bezoeker terecht komt. Dat gebeurt automatisch: slimme, moeiteloze optimalisatie dus!

Afbeeldingen optimaliseren

Er zijn twee manieren om afbeeldingen te optimaliseren: met verlies van kwaliteit en zonder verlies van kwaliteit. We gebruiken beide technieken in tandem.

Compressie met verlies van kwaliteit vergt meestal wat inspanning. Je moet onder andere goed kijken en afwegen of de compressie goed zit. Bij het exporteren vanuit Photoshop hebben we na veel testen een sweet spot gevonden in de Save For Web settings. Die sweet spot zit ergens tussen “genoeg compressie om grote beelden toch compact te maken” en “je mag niet onmiddellijk zien dat de beelden gecomprimeerd zijn.” Download onze instellingen als je er ook mee aan de slag wil.

Optimalisatie zonder verlies van kwaliteit kan met een tool zoals ImageOptim. Omdat onze designers met CodeKit werken gebruiken we de ingebouwde compressie van CodeKit—wat in se dezelfde is als die van ImageOptim. Alleen hebben we er geen apart programma voor nodig. Weer een stapje minder in de workflow!

Er komt uiteraard nog wat denkwerk kijken bij het exporteren van afbeeldingen. Zeker met HiDPI displays zoals Retina. Wij delen beelden in grofweg drie categorieën in:

  1. Iconen. Daarvoor gebruiken we icon fonts. Meestal genereren we die zelf via IcoMoon of FontCustom om de font file zo compact mogelijk te houden.
  2. Complexe foto’s. Daarvoor gebruiken we Progressive JPG via onze Preset.
  3. Illustraties met grote kleurvlakken. Daarvoor gebruiken we PNG. In combinatie met ImageAlpha en de Posterize filter in Photoshop kunnen we daar snel tot 80% kleinere files bekomen.

Compressie en caching aanzetten

Op de webservers waar wij controle over hebben zetten we standaard compressie aan. Eenvoudig gezegd: de server comprimeert je bestand, stuurt het door en je browser pakt het weer uit. Dat zorgt voor een kortere downloadtijd en dus een snellere website.

Daarnaast maken we gebruik van browsercaching om bestanden die niet zo vaak veranderen tijdelijk op te slaan. Op die manier hoef je niet bij elk bezoek aan de website alles opnieuw te downloaden, wat voor een aanzienlijke snelheidswinst zorgt.

We hebben een soort eigen Boilerplate met een set instellingen voor zowel Apache als Nginx die we steeds opnieuw kunnen gebruiken. Effortless optimization!

Aantal HTTP Requests beperken

Een webpagina is niet éen groot bestand, maar een veelvoud van bestanden zoals de stijlen van je website (CSS), afbeeldingen, lettertypes of JavaScript. Elke keer je browser zo’n bestand opvraagt, zit er een stukje vertraging op. Als je al die kleine stukjes samentelt laadt je pagina soms veel trager dan wanneer alles in éen bestand zou zitten.

Een veelgebruikte techniek om bijvoorbeeld alle afbeeldingen in éen keer in te laden is het gebruiken van CSS sprites. Sprites zijn echter moeilijk in onderhoud wanneer er verschillende mensen aan éen project werken. Daarom schreven we voor Fork CMS een stuk code dat alle afbeeldingen en lettertypes die via CSS worden opgehaald automatisch in éen bestand worden gezet via DataURI’s. Dat betekent geen extra werk voor de designer en automatische optimalisatie via het CMS. What a wonderful world!

Meer weten

Ben je geïnteresseerd om meer te weten over hoe je er voor kan zorgen dat je website snel reageert? De volgende informatie gaat nog veel dieper in op de verschillende aspecten van front-end optimalisatie:

Lees meer

Nieuwsbrief

Doe zoals meer dan 1700 marketing en design experts en ontvang maandelijks onze nieuwsbrief vol inzichten, tips en verrassende nieuwigheden.