Gebruikmaken van browsercaching

Deze regel wordt geactiveerd wanneer PageSpeed Insights detecteert dat de reactie van uw server geen expliciete cachingheaders bevat of als wordt gespecificeerd dat de resources slechts korte tijd worden gecacht.

Overzicht

Browsercaching voor statische resources kan een gebruiker tijd besparen als hij uw site meerdere keren bezoekt. Cachingheaders moeten worden toegepast op alle statische resources die kunnen worden gecacht, niet alleen op een kleine subset (zoals afbeeldingen). Resources die kunnen worden gecacht, zijn JavaScript- en CSS-bestanden, afbeeldingsbestanden en andere binaire objectbestanden (mediabestanden, pdf's, enzovoort). HTML is doorgaans niet statisch en moet daarom niet standaard worden gecacht. Ga na welk cachingbeleid goed zou werken voor de HTML van uw site.

Aanbevelingen

Schakel browsercaching in voor uw server. Statische resources moeten een cacheduur van ten minste één week hebben. Resources van derden, zoals advertenties of widgets, moeten een cacheduur van ten minste één dag hebben. Voor alle resources die kunnen worden gecacht, raden we de volgende instellingen aan:

  • Stel Expires in op een minimum van één week (en bij voorkeur op een waarde tot één jaar), in de toekomst. (We geven de voorkeur aan Expires boven Cache-Control: max-age, omdat deze header breder wordt ondersteund.) Stel geen waarde van meer dan één jaar in de toekomst in, omdat dit in strijd is met de RFC-richtlijnen.
  • Als u precies weet wanneer een resource gaat veranderen, kunt u een kortere vervaltijd instellen. Als u echter denkt dat de resource 'mogelijk binnenkort gaat veranderen' maar niet precies weet wanneer, moet u een langere vervaltijd instellen en URL-vingerafdrukken gebruiken (hieronder beschreven).

De headers Expires en Cache-Control: max-age

Met deze headers geeft u de periode op waarin de browser de gecachte resource kan gebruiken zonder te controleren of er een nieuwe versie beschikbaar is op de webserver. Dit zijn sterke cachingheaders die onvoorwaardelijk van toepassing zijn. Zodra deze headers zijn ingesteld en de resource is gedownload, verzendt de browser geen GET-verzoeken voor de resource totdat de vervaldatum of maximumduur van de resource is bereikt of totdat de cache wordt gewist door de gebruiker.

De headers Last-Modified en ETag

Met deze headers geeft u aan hoe de browser met betrekking tot cachingdoeleinden moet bepalen of de bestanden hetzelfde zijn. In de header Last-Modified is dit een datum. In de header ETag kan dit elke waarde zijn waarmee een resource uniek kan worden geïdentificeerd (bestandsversies of inhoudshashes zijn gebruikelijk). Last-Modified is een zwakke cachingheader, omdat de browser een heuristiek toepast om te bepalen of het item wel of niet uit de cache moet worden opgehaald.

Met deze headers kan de browser zijn gecachte resources efficiënt bijwerken door voorwaardelijke GET-verzoeken te verzenden wanneer de gebruiker de pagina expliciet opnieuw laadt. Voorwaardelijke GET-verzoeken sturen niet de volledige reactie terug, tenzij de resource is gewijzigd op de server, en hebben daarom een kortere wachttijd van volledige GET-verzoeken.

Welke cachingheaders moet ik gebruiken?

Het is belangrijk dat u een van de headers Expires of Cache-Control max-age en een van de headers Last-Modified of ETag opgeeft voor alle resources die kunnen worden gecacht. Het is overbodig om de beide headers Expires en Cache-Control: max-age of de beide headers Last-Modified en ETag op te geven.

URL-vingerafdrukken gebruiken

Voor resources die af en toe veranderen, kunnen we de browser de resource laten cachen totdat de resource wordt gewijzigd op de server. Op dat moment laat de server de browser weten dat er een nieuwe versie beschikbaar is. We kunnen dit doen door elke versie van de resource een unieke URL te geven. Stel dat we een resource met de naam 'mijn_stylesheet.css' hebben. We kunnen de naam van het bestand wijzigen in 'mijn_stylesheet_vingerafdruk.css'. Wanneer de resource verandert, verandert ook de bijbehorende vingerafdruk, evenals de bijbehorende URL. Zodra de URL verandert, wordt de browser gedwongen de resource opnieuw op te halen. Met vingerafdrukken kunnen we vervaldatums ver in de toekomst instellen, zelfs voor resources die vaker dan dat veranderen.

Een vaak gebruikte methode voor vingerafdrukken is gebruik van een 128-bits hexadecimaal getal dat de inhoudshash van het bestand codeert.

Een andere strategie is een nieuwe releasedirectory maken voor elke nieuwe versie van de app en alle items voor elke versie in de versiedirectory plaatsen. Dit heeft het nadeel dat als een item ongewijzigd blijft voor verschillende versies, de URL nog steeds een nieuwe download afdwingt. Bij het gebruik van inhoudshashes treedt dit probleem niet op, maar deze methode is wel wat ingewikkelder.