Front-end Optimalisatie

Gebruik van browser caching

Elke keer als uw browser een webpagina laadt, haalt het alle bestanden op (inclusief HTML, CSS, Javascript, afbeeldingen). Voor de pagina´s die klein (KB´s) zijn is dat geen probleem maar pagina´s die wat groter zijn (MB´s) kan dat voor vertraging zorgen. Hoe groter de bestanden, hoe langer het moet laden. Verder is het zo dat elk bestand een eigen verzoek doet bij de server. Veel verzoeken tegelijk kunnen ook nadelige gevolgen hebben voor de laadsnelheid. In combinatie met langzaam internet kan het nog veel langer duren voordat de website laadt.

Browser caching helpt deze bestanden lokaal op te slaan in de browser van de gebruiker. Als de website voor het eerst bezocht wordt moet het wel alle elementen ophalen. Browser caching werkt pas na het eerste keer bezoeken. Bij herhalingsbezoeken of het bezoeken van een andere pagina van de website waarop deze elementen voorkomen, worden de elementen uit de cache van de browser gehaald. Omdat het minder elementen hoeft te downloaden en minder verzoeken stuurt naar de server zal dat resulteren in een snellere laadtijd.

Hoe het werkt

Door het instellen van een verloopdatum of een maximale tijdsduur in de HTTP headers, is het mogelijk om de elementen in de browser op te slaan. Als voorbeeld kunt u de logo van uw website nemen. Het is onwaarschijnlijk dat u vaak uw logo gaat aanpassen. U kunt dan ook de logo in de cache opslaan met een tijdsduur van een week bijvoorbeeld.
De server geeft aan de browser door dat de logo opgeslagen mag worden in de cache voor een week. Zo voorkomt u dat de browser steeds de bestanden opnieuw moet inladen.
Naast het sneller laden van de website, gebruikt u op deze manier ook minder dataverkeer.

Instellen

Om browser caching in te schakelen, dienen de HTTP headers aangepast te worden.
Het instellen van welke types of bestanden gecached moeten worden, dient het .htaccess bestand aangepast te worden.

Tips

1. Zet verloopdatum op minimaal 1 maand.
– Hiermee voorkomt u dat de website om de zoveel dagen opnieuw opgehaald wordt.
2. Zet verloopdatum niet langer dan een 1 jaar.
– Als u wijzigingen heeft aangebracht, is het handig dat deze ook zichtbaar worden voor terugkerende bezoekers. Een te lange verloopdatum kan ervoor zorgen dat terugkerende bezoekers uw oude bestanden te zien krijgen.

Optimaliseren van bestanden

Het zo klein mogelijk maken van afbeeldingen kan een groot verschil uitmaken in de laadtijd van uw website. Het optimaliseren van afbeeldingen kan de download tijd verkorten en het gebruik van dataverkeer terugbrengen. Het gaat dan niet persee om de afmetingen van de afbeeldingen, maar vooral om bestandsgrootte. Kies het meest optimale formaat (PNG voor meeste afbeeldingen en JPG voor foto´s) en pas compressie toe om bestand zo klein mogelijk te maken.

Combineren van CSS, Javascript en afbeeldingen

Door het samenvoegen van deze bestanden, zijn er minder verzoeken aan de server nodig.