Hoe optimaliseer ik mijn website performance?

Wat zijn concrete punten waarmee de performance van een website of webshop verbeterd kan worden? Er zijn verschillende bronnen te gebruiken om de verbeterpunten te bepalen. Google biedt via haar PageSpeed Web Performance Best Practices een uitstekende bron van verbeterpunten met bijbehorende uitleg. Yahoo heeft een vergelijkbare lijst van Best Practices for Speeding Up Your Web Site. Deze verbeterpunten zijn vooral van toepassing op de optimalisatie van hetgeen de bezoeker ziet: de front-end van de website.

Denk daarbij onder andere aan de HTML-code, CSS-bestanden, JavaScripts, afbeeldingen en het aantal elementen op een pagina. Gerelateerd aan laadtijden leiden alle verbeterpunten naar een reductie van de tijd die nodig is om de elementen te downloaden en de tijd die nodig is om de pagina op te bouwen (renderen).

Google heeft haar verbeterpunten gegroepeerd in zes categorieën:

1. Optimaliseren van browser en proxy caching
2. Minimaliseren van de latency (round-trip time)
3. Minimaliseren van de overhead op inkomende verzoeken (request overhead)
4. Minimaliseren van de omvang van de webpagina (inclusief alle elementen)
5. Optimaliseren van het opbouwen van een webpagina (rendering)
6. Optimaliseren specifiek voor mobiele gebruikers

Omdat de verbeterpunten vooral gerelateerd zijn aan de front-end van de website, behoren zij tot het werk van een internetbureau. Een voorbeeld hiervan is de optimale volgorde van het inladen van stylesheets en javascripts zodat een pagina zo snel mogelijk door de browser wordt opgebouwd. Het merendeel van alle verbeterpunten wordt door een goed internetbureau standaard al toegepast. Desondanks is mijn ervaring dat veel websites op meerdere punten nog verder verbeterd kunnen worden. Al met al kunnen de front-end optimalisaties grofweg in drie groepen verdeeld worden:

1. Het minimaliseren van de totale paginaomvang, door elementen zo klein mogelijk te maken (minification, compressie)
2. Het minimaliseren van het aantal verzoeken naar de server door het samenvoegen van elementen (combining, css-sprites) en het minimaliseren van overhead door DNS bevragingen en redirects.
3. Het optimaliseren van de paginaopbouw door toepassing van browser caching, efficiënte CSS selectors en de juiste volgorde van CSS en javascript. Hierdoor wordt de gemeten én gepercipieerde laadtijd verbeterd.

Front-end optimalisatie
Hieronder staan een drietal verbeterpunten nader omschreven. Voor niet-geoptimaliseerde websites is door toepassing van deze technieken veel winst te behalen.

Gebruik van browser caching
Door het instellen van een verloopdatum of een maximale tijdsduur in de HTTP headers, is het mogelijk om statische content (bijvoorbeeld CSS-bestanden, javascripts en afbeeldingen) in de browser te cachen. Bij herhalingsbezoeken of het bezoeken van een andere pagina van de website waarop deze elementen voorkomen, wordt de content uit de cache van de browser gehaald. Hierdoor wordt de content niet opnieuw opgevraagd, waardoor het aantal verzoeken aan de server afneemt én de downloadtijd van de pagina wordt verkort.

Optimaliseren van afbeeldingen
De afbeeldingen op een webpagina vormen vaak het merendeel van de totale paginaomvang. Het zo klein mogelijk maken van de afbeeldingen kan een groot verschil maken. Het gaat dan niet om de afmetingen van de afbeelding, maar om de bestandsgrootte. Door het kiezen van het meest optimale bestandsformaat (PNG voor de meeste afbeeldingen, en JPG voor fotografische afbeeldingen) en het toepassen van compressie kan het bestand flink kleiner worden. Hieronder een voorbeeld van twee afbeeldingen, ziet u een verschil?

De linkerafbeelding is een JPG-bestand van 27,6 KB. De rechterafbeelding is een PNG-bestand van 10,0 KB. Voor de bezoeker van uw website dezelfde afbeelding, maar dan wel 63 procent kleiner. Door het optimaliseren van alle afbeeldingen op uw website kunt u de downloadtijd verkorten en het gebruik van dataverkeer of bandbreedte van uw website terugbrengen.

Combineren van CSS, JavaScripts en afbeeldingen
De gemiddelde webpagina bevatte in mei 2013 maar liefst zeventien JavaScript bestanden. Door deze samen te voegen, zijn er veel minder verzoeken aan de server nodig. Hetzelfde geldt ook voor CSS-bestanden. Afbeeldingen die deel uitmaken van de vormgeving van de website, kunnen vaak worden samengevoegd door gebruik te maken van CSS sprites. Hierbij worden meerdere afbeeldingen samengevoegd tot één grotere afbeelding, waarna op de betreffende pagina’s via CSS wordt bepaald welk stukje van die afbeelding wordt getoond. Door het combineren van CSS en JavaScript en het toepassen van CSS sprites zijn er aanzienlijk minder verzoeken nodig aan de server, waardoor de latency wordt teruggebracht en de pagina sneller zal laden.

Back-end optimalisatie
Naast de optimalisatie van de front-end verdient ook de optimalisatie van de back-end aandacht. De back-end is het deel van de website dat een bezoeker niet ziet, zoals de achterliggende databases en het verwerken van scripts. Optimalisatie van de back-end van een website is een samenspel tussen het internetbureau en de hostingprovider. Hieronder staan drie concrete verbeterpunten nader omschreven.

Gebruik van caching
Caching is het tijdelijk opslaan van gegevens, bijvoorbeeld het resultaat van berekeningen. Hierdoor hoeft de berekening niet iedere keer als de informatie wordt opgevraagd, opnieuw uitgevoerd te worden. De resultaten van de berekening (gecompileerde PHP code) wordt op de schijf of in het geheugen opgeslagen. Dit wordt ‘opcode caching’ genoemd en zorgt voor een snelheidswinst en een verlaging van de serverbelasting. Daarnaast kunnen ook andere onderdelen zoals afbeeldingen in de cache worden opgeslagen. Dit wordt ‘object caching’ genoemd en vindt doorgaans plaats in het geheugen van de server. Voorbeelden van caching zijn APC, XCache, Memcached en Redis.

Database optimalisatie
Door het optimaliseren van de databases en de manier van omgaan met bevragingen, kan een website aanzienlijk sneller worden. Door toepassing van database (query) caching, wordt het resultaat van veel voorkomende bevragingen opgeslagen in de cache. Hierdoor hoeft niet steeds de database aangesproken te worden, maar wordt het resultaat direct vanuit het geheugen geladen. Dit zorgt voor een snelheidswinst en een verlaging van de serverbelasting.Naast het cachen is ook het optimaliseren van de databases en de bevragingen van groot belang. Denk daarbij aan het toepassen van indexes op tabellen, het verbeteren van trage SQL queries en het periodiek opschonen en optimaliseren (defragmenteren) van tabellen.

Toespitsen op de gebruikte applicatie
Om het maximale uit een applicatie en hostingomgeving te halen, is het van belang dat alle losse onderdelen (onder andere webserver, databaseserver en caching) worden afgestemd op de applicatie en de onderlinge werking. Het installeren van de onderdelen en werken met de standaardinstellingen is niet genoeg. Door voortdurend te monitoren en de instellingen in detail af te stemmen, ontstaat een hostingomgeving die de gehoste applicatie optimaal faciliteert.

Dit is het laatste artikel in een reeks over website performance. We zijn de reeks begonnen met vier artikelen: 

• Het belang van website performance: laadtijden beïnvloeden direct de conversie en dus het resultaat!
• De laadtijden van uw website in relatie tot de internetsnelheid van uw bezoekers en hun afstand tot de servers waarop uw website wordt gehost.
• Het dilemma voor websites: bezoekers willen een rijke gebruikerservaring én websites die steeds sneller laden.
• Inzicht in website performance: door gebruik van monitoring en toepassing van load, stress en performance tests.