Performance is design

De Wifi-verbinding in de trein is te traag, dus bezoek je een website met je iets minder trage 3G-verbinding. De website laadt niet snel, maar het lukt, je hebt de pagina kunnen bereiken maar niet van harte.

Tegenwoordig is de gemiddelde webpagina 1MB groot, dat is te groot. We zijn er vanuit gegaan dat internetverbindingen steeds sneller zijn geworden. Dat is ook zo, maar we zijn de mobiele verbindingen vergeten. Een pagina van 1MB is te groot en in de meeste gevallen pure luiheid van designers en ontwikkelaars, inclusief mijzelf. Dat is sinds een tijdje flink veranderd en ik ben mij bewust geworden van het belang van goede performance.

Laten we het voorbeeld van de zware website er weer bij halen. Deze is in dit geval rond de 1.3MB per pagina. Stel dat deze 250KB klein zou zijn, 5 keer zo klein, 5 keer zo snel. Hip, dat willen we! Sneller een artikel lezen, sneller tickets bestellen en sneller treintijden bekijken zonder 10 seconden te hoeven wachten.

Design is ervoor zorgen dat de gebruiker zo simpel mogelijk zijn of haar doel kan bereiken. Een slechte performance betekent dus een slechter design.

Praktische verbeteringen

• Ontwikkel eerder in de browser, want in Photoshop kun je de performance niet meten.
• Let op het aantal afbeeldingen en hun grootte. Gebruik sprites of fonts voor iconen en vergeet responsive images niet.
• Pas op met box-shadow, meer dan 3 pixels zorgt voor het trager renderen van je website.
• Compress en bundel al je Javascript en CSS files.

Verder lezen

• Tutsplus: Best practices for increasing website performance
• Brad Frost: Performance as design
• CSS Wizardry: Front-end performance for web designers and frond-end developers
• Clearleft: Responsive design on a budget
• Smashing Magazine: How to make your websites faster on mobile devices

— This post was originally written on the Studio Wolf blog.