Inleiding tot HTTP-caching
Ik weet zeker dat je hebt gemerkt dat het enige tijd duurt voordat je een website opent. Wanneer u het na verloop van tijd weer opent, wordt de site veel sneller gelodd. Stel je voor dat als een site elke keer dezelfde tijd nodig had om te laden, hoe langzaam browsen zou aanvoelen. Nou, dit is allemaal te danken aan een handig idee genaamd HTTP Caching. Laten we eens kijken wat het is, hoe het werkt en hoe het wordt gebruikt om surfen op internet een snellere ervaring te maken.
Wat is HTTP Caching?
HTTP-caching is het idee om sommige veelgebruikte of vaak gebruikte gegevens op te slaan op een plek die snel toegankelijk is. Hiermee is de kans zeer groot dat de meest benodigde gegevens veel sneller toegankelijk zijn, omdat de computer niet te ver hoeft te reiken om ze te krijgen.
In het geval van Web Browsing wordt caching overwogen wanneer uw webbrowser zoals Chrome een kopie van een website of web-app opslaat in de lokale opslag. Als een website eenmaal in de cache is opgeslagen, hoeft een webbrowser niet alle gegevens van de server opnieuw te downloaden en wordt browsen een stuk sneller.
Als een CSS-bestand van een website eenmaal is gedownload, hoeft een browser het bijvoorbeeld niet voor elke pagina van de sessie te downloaden. Hetzelfde kan gezegd worden voor veel JavaScript-bestanden, afbeeldingen (zoals het logo van de site en pictogrammen voor sociale media) en zelfs sommige dynamische inhoud. Caching wordt ingeschakeld met behulp van cachekoppen.
Cachekoppen in HTTP
HTTP Caching heeft twee belangrijke cachekoppen, de eerste heet "Cache-Control" en de tweede heet "Vervallen". Laten we beide eens bekijken:
Cache-Control
U kunt Cache-Control beschouwen als een schakelaar om de caching in te schakelen in de gebruikersbrowser. Nadat deze header is toegevoegd, wordt caching mogelijk voor alle ondersteunde webbrowsers. Als deze header niet aanwezig is, bewaart geen enkele browser de cache van de inhoud van de webpagina, zelfs als deze caching ondersteunt.
De cache-besturing heeft twee soorten privacy-instellingen, de eerste is openbaar en de tweede is privé.
In het geval van Public kunnen de bronnen in de cache worden opgeslagen door elke tussenliggende proxy, zoals Content Delivery Networks (CDN).
Een Cache-Control-header met privé-antwoord zal de browser vertellen dat de caching alleen voor een enkele gebruiker zal worden uitgevoerd en niet voor een tussenliggende proxy.
De waarde "max-age" in de header Cache-Control stelt de tijd in gedurende welke de inhoud cache zal zijn. Deze tijd is in seconden.
Cache-Control:public, max-age=31536000
verloopt
De kop Vervalt wordt gebruikt wanneer Cache-Control aanwezig is in de code. Dit is een eenvoudige HTTP-cachekop die een datum instelt vanaf welke een cachebron als ongeldig wordt beschouwd. Zodra de cache is verlopen en de gebruiker de website laadt, vraagt een webbrowser eenvoudig alle inhoud van de pagina opnieuw op.
Voorwaardelijke verzoeken
Boven besproken headers vertellen de browser eenvoudig wanneer de gegevens van de webserver moeten worden opgehaald. Voorwaardelijke verzoeken vertellen de browser daarentegen hoe deze moet worden opgehaald. Voorwaardelijke aanvragen vertellen een browser hoe deze de server kan vragen of de kopie van gegevens in de cache verouderd is.
In dit proces verzendt de browser gegevens over bronnen die hij in het cachegeheugen heeft opgeslagen en na het lezen van deze gegevens beslist de server of de gegevens verouderd zijn of niet.
Op tijd gebaseerde verzoeken
In tijdgebaseerde aanvragen wordt gecontroleerd of de gevraagde bron is gewijzigd op de server of niet. Als de kopie in de cache in de browser de nieuwste is, retourneert de server code 304.
Om voorwaardelijk verzoek op tijdbasis in te stellen, kunt u "Laatst gewijzigd" gebruiken in de antwoordkop.
Cache-Control:public, max-age=25998579
Last-Modified: Fri, 08 Jul 2018 15:25:00 GMT
Content-based
In op inhoud gebaseerde aanvragen wordt de MD5 Hash (of een andere uitvoerbare optie) gecontroleerd op zowel serverkopie als cachekopie. Dit geeft aan of de gegevens hetzelfde zijn of niet, in het geval dat de gegevens verschillen, komt de MD5-controlesom niet overeen en verzendt de server een nieuw exemplaar van de bronnen.
Dit gebeurt via "ETag" in de koptekst. De waarde ervan is de samenvatting van middelen.
Cache-Control:public, max-age=25998579
ETag: "496d7131f15f0fff99ed5aae”
Zichtbaarheid
Bijna alle moderne browsers bevatten een aantal ontwikkelingstools waarmee u bronnen, broncode en andere aspecten van een webpagina kunt controleren. Onder hen kunt u een tool vinden om de headers te zien die door elke toepassing worden geretourneerd.
In Google Chrome kunt u om deze kopteksten te zien met de rechtermuisknop op een leeg gedeelte van een webpagina klikken en op "Inspecteren" klikken of op CTRL + SHIFT + I drukken om DevTools te openen. Klik in deze tool op het tabblad Netwerk en druk op CRTL + R om opnieuw te laden om alle headers van de pagina te zien.
Gebruik cases in HTTP-caching
Hieronder vindt u enkele gevallen van gebruik van HTTP-caching die als volgt zijn:
Voor statische activa
Voor statische elementen van een pagina, zoals afbeeldingen, JS-bestanden en alle CSS-bestanden, kunt u ervoor kiezen om de inhoud agressief te cachen. Als u deze bestanden niet hoeft te laden, levert dit een indrukwekkende prestatieverbetering op. Ga voor deze use case naar de Cache-Control Header met de maximale leeftijd van meer dan een maand of zelfs een jaar.
Cache-Control:public; max-age=31536000
Voor dynamische inhoud
In het geval van dynamische inhoud van een pagina, moet u zelf nadenken voor welke bestanden de browser moet cachen en voor hoe lang. In het geval dat de inhoud regelmatig wordt gewijzigd, moet u ervoor zorgen dat de tijdsduur die u kiest voor caching geen problemen oplevert voor de gebruiker.
Caching van privé-inhoud
Zoals we in het gedeelte Cache-Control hebben besproken, kunt u, in het geval dat de inhoud van de pagina privé is, voorkomen dat deze in de cache wordt opgeslagen door tussenliggende proxy's zoals CDN's door "Cache-Control: private" toe te voegen in de koptekst.
Een andere veiligere aanpak is om helemaal geen privé-inhoud te cachen.
HTTP-caching implementeren
Nu u weet wat HTTP Caching is en hoe het werkt, gaan we kijken hoe u het op uw website kunt implementeren. De implementatie van HTTP-caching is iets anders voor verschillende servertypen. Laten we in ons geval eens kijken naar het implementeren van caching via het .htaccess-bestand.
Om de caching op de site in te schakelen, kunt u de headers toevoegen aan het .htaccess-bestand op uw server, bijvoorbeeld:
FilesMatch "\.(ico|pdf|flv|jpg.webp|jpeg.webp|png|gif|js|css|swf)$"
Header set Cache-Control "max-age=31536000, public"
/FilesMatch
Bovenstaande bewaart gedurende één jaar alle, pdf, flv, jpg.webp en andere genoemde formaten genoemd in de "File Match".
Conclusie
HTTP Caching is een van de belangrijkste trucs die het browsen op uw site een snellere ervaring voor uw bezoekers maakt en nu u kunt zien hoe het werkt, kunt u het implementeren op uw sites en web-apps om ze sneller te maken voor uw gebruikers en voor het besparen van uw serverbandbreedte.
Aanbevolen artikelen
Dit is een handleiding voor HTTP-caching geweest. Hier hebben we de implementerende, voorwaardelijke aanvragen, cachekop en use cases van HTTP besproken. U kunt ook onze andere voorgestelde artikelen doornemen voor meer informatie -
- Leer wat HTML is
- Hoe Github te installeren?
- Wat is MapReduce in Hadoop?
- Beginnershandleiding voor knooppuntopdrachten
- HTTP-cookies | Veiligheid