Website traag en probeert u deze te verbeteren? U hebt deze waarschuwing waarschijnlijk gezien, maar weet niet zeker wat deze betekent of hoe u deze kunt oplossen ... maar wij hebben u gedekt. Gebruikmaken van browsercaching is een manier om uw website sneller te maken, maar de browser te instrueren om bestanden enige tijd op te slaan of te "cachen", zodat ze bij een volgend bezoek niet opnieuw hoeven te worden gedownload. Dat is alles in het kort.
Maar blijf en lees alles over hoe u ervoor kunt zorgen dat u uw website sneller maakt door deze fout of waarschuwing op te lossen.
Als u browsercaching wilt gebruiken, moet u in wezen specificeren hoe lang webbrowsers afbeeldingen, CSS- en Javascript-bestanden lokaal in de clientbrowser moeten bewaren. Met behulp van deze specificaties en instellingen gebruikt de browser van de gebruiker less gegevens tijdens het bladeren door uw websitepagina's (omdat er minder bestanden hoeven te worden gedownload). Om gebruik te maken van browsercaching betekent WordPress een verbetering van de laadsnelheid van uw website.
Als je weinig tijd hebt, is dit de gemakkelijkste manier om gebruik te maken van browsercaching WordPress:
Hoe te repareren Gebruik Browser Caching WordPress-waarschuwing
- Download de plug-in die u kunt vinden hier
- Ga naar het dashboard van uw WordPress en ga naar: Dashboard> Plug-ins> Nieuw toevoegen
- Zoek naar "Browsercaching gebruiken" of klik op Plug-in uploaden en kies het gedownloade bestand en klik op Nu installeren
- Activeer de plug-in
- Test uw website opnieuw om te bevestigen dat de nieuwe instellingen correct werken en dat de waarschuwing verdwenen is
Door deze minimale wijzigingen door te voeren, zult u zien dat uw score op sites als GTMetrix, Pingdom Tools of Pagespeed Insights aanzienlijk zal stijgen.
Dit is in feite een van de gemakkelijkste manieren om uw WordPress-website sneller te maken.
Het vereist weinig inspanning van uw kant en het is een van de taken met hoge prioriteit die worden aanbevolen door Kopen Google Reviews om uw website sneller te laten laden. Het wordt ook aanbevolen door sites zoals GTMetrix of Google Pagespeed Insights om uw laadactie sneller te maken.
Wat is browsercaching?
U kunt browsercaching gebruiken door een lange vervaldatum in te stellen voor de statische inhoud van uw website. Hierdoor kunnen browsers caching "gebruiken" en deze bestanden keer op keer hergebruiken, zonder ze te hoeven downloaden. Door deze bestanden in het cachegeheugen te plaatsen, hoeven ze niet opnieuw te worden gedownload, zodat uw website sneller wordt geladen.
Voordat we u daadwerkelijk laten zien hoe u dit kunt implementeren, gaan we eerst bespreken wat het gebruik van browsercaching in WordPress betekent en hoe het werkt!
Zodra we hebben uitgelegd hoe het werkt, kunt u begrijpen hoe het helpt laat uw pagina's sneller laden.
In wezen, wanneer iemand een pagina bezoekt, moet de browser alle resourceserver op dat domein van de server downloaden. Deze omvatten HTML, CSS-bestand, JS, tekst, afbeeldingen en andere activa) om de huidige pagina te laden en weer te geven.
Nu, in plaats van alles steeds opnieuw te downloaden elke keer dat u een andere pagina op dezelfde site bezoekt, gebruikt de browser een zogenaamde webcache. Dit is een functie die door browsers wordt gebruikt om webpagina-items 'tijdelijk op te slaan' of 'cachen' op de lokale opslag van het apparaat. Deze opslag of gegevens worden ' Webcache'of'HTTP-cache'.
Bekijk dit leuke diagram waarin wordt uitgelegd hoe webcaching werkt:
We kunnen hierboven zien dat de eerste keer dat het gebruikersapparaat (links) de server (rechts) om het afbeeldingen / logobestand vraagt, het verzoek wordt onderschept door het webcaching-mechanisme (dat controleert of het een kopie van dat bestand heeft). Als dit niet het geval is, wordt het van de server opgehaald. Bij het volgende bezoek krijgt het het uit zijn eigen exemplaar, in plaats van naar de server te gaan.
Het mooie van deze functie is dus dat wanneer een gebruiker dezelfde site of een andere pagina op hetzelfde domein opnieuw bezoekt, de browser de kopie gebruikt die zich momenteel in de tijdelijke cache bevindt - in plaats van alle bronnen te moeten downloaden. opnieuw. De browser zal alleen iets downloaden dat anders is.
Aangezien veel websites slechts minimale wijzigingen van de ene pagina naar de andere en tussen bezoeken zullen ondergaan, kon de pagina door hergebruik van de caching-kopie veel sneller worden geladen.
Dit helpt ook om het bandbreedteverbruik door uw webserver te verminderen en vermindert ook de belasting van de server. Mogelijk bent u ook een waarschuwing tegengekomen bij het optimaliseren van uw pagina's voor snelheid.
Pagespeed-waarschuwing om gebruik te maken van browsercaching
Sites zoals GTMetrix of Pagespeed Insights kunnen het volgende laten zien maak gebruik van browsercaching waarschuwing, die u moet oplossen als u de onderstaande instellingen niet heeft geactiveerd.
maar dit was eigenlijk de waarschuwing die werd getoond in een oudere versie van Pagespeed Insights. De nieuwere waarschuwing ziet er ongeveer zo uit:
Serveer statische activa met een efficiënt cachebeleid
Nu, wat betekent dit eigenlijk?
Hoewel de hierboven beschreven functie in theorie geweldig is, zullen de meeste websites de inhoud standaard "markeren" als vervallen na 8 dagen of een korte periode. Dit betekent dat als een gebruiker uw domein na 1 week opnieuw bezoekt, hij de bronnen opnieuw moet downloaden.
Wanneer we een methode opzetten om browsercaching te gebruiken, geven we de browser feitelijk opdracht om de levensduur of vervaldatum van de bronnen die door onze bezoekers worden gedownload te verlengen en bijgevolg de prestaties te optimaliseren.
Door de levensduur van de cache te verlengen (of hoe lang het duurt voordat een bestand oud wordt), zorgt u ervoor dat uw bezoekers niet elke keer dat ze uw site bezoeken, hoeven te wachten om dezelfde dingen te downloaden.
Dit brengt heel weinig veranderingen met zich mee en is niet erg ingewikkeld om te implementeren - en u vindt de exacte syntaxis hieronder.
Wat de wijziging eigenlijk doet, is het instellen van vervaldatums voor inhoud door toe te voegen Cache-control headers en ETag-kopteksten in HTTP-headers. De Cache-Control-header geeft de cacheperiode van een bepaald bestand of type bestand aan. De ETag wordt vervolgens gebruikt om eventuele wijzigingen te verifiëren die bestaan (of niet) tussen de gecachte en aangevraagde bronnen.
Met de instelling kunt u doorgaans de periode in dagen, maanden of jaren specificeren om de cachebestanden lokaal op te slaan. Als u verwacht de bronnen af en toe te veranderen, is het natuurlijk raadzaam om vervaldatums in te stellen met een frequentie die ongeveer overeenkomt met de periode waarin u verwacht deze te wijzigen.
Overigens, als u uw WordPress snel wilt maken, zijn er een paar plug-ins zoals deze die binnen een paar minuten een echt verschil kunnen maken in de prestaties (met weinig tot geen inspanning).
Nog niet klaar om een plug-in te gebruiken? Lees verder...
Als u uw website sneller wilt maken, raden we u ten zeerste aan om ons artikel te bezoeken: [25 acties] WordPress versnellen: ontvang vandaag nog een supersnelle website - een complete gids.
1. Met behulp van .htaccess-bestand
Hier zijn de exacte instructies die u moet uitvoeren:
- Ga naar het CPanel van uw hostingaccount
- Ga naar de hoofdmap van de website
- Open het .htaccess-bestand met uw File Editor. Als u het bestand niet kunt vinden, controleer dan of u verborgen bestanden kunt zien (het .htaccess-bestand is standaard verborgen)
- Voeg de volgende bewerkingen toe aan de onderkant van het bestand
- Voeg Expire Headers toe met lange vervaltijden
- Voeg Cache-Control Headers toe
- Schakel ETag-kopteksten uit
- Breng geen andere wijzigingen aan
- Sla het bestand op
- Voer de test opnieuw uit
Om de vervaltijd van bronnen zoals afbeeldingen en CSS-bestanden in te stellen, is een kleine wijziging in uw .htaccess-bestand vereist. Dit is te vinden in de root van uw hostingserver. U kunt de waarden voor vervallen kopteksten wijzigen om de prestaties te verbeteren.
Stel deze waarden in zolang het zinvol is voor uw site - 1 maand is doorgaans goed genoeg.
#Customize vervalt caching start - pas de periode aan volgens uw behoeften FileETag MTime Grootte AddOutputFilterByType DEFLATE tekst / platte tekst / html tekst / xml tekst / css applicatie / xml applicatie / xhtml + xml applicatie / rss + xml applicatie / javascript applicatie / x-javascript ExpiresActive On ExpiresByType text / html "access 600 seconds" ExpiresByType application / xhtml + xml "toegang 600 seconden" ExpiresByType tekst / css "toegang 1 maand" ExpiresByType tekst / javascript "toegang 1 maand" ExpiresByType tekst / x-javascript "toegang 1 maand" ExpiresByType applicatie / javascript "toegang 1 maand" ExpiresByType applicatie / x-javascript "toegang 1 maand" ExpiresByType applicatie / x-shockwave-flash "toegang 1 maand" ExpiresByType applicatie / pdf "toegang 1 maand" ExpiresByType afbeelding / x-icon "toegang 1 jaar" ExpiresByType image / jpg "toegang 1 jaar "ExpiresByType image / jpeg" toegang 1 jaar "ExpiresByType image / png" toegang 1 jaar "ExpiresByType image / gif" toegang 1 jaar "ExpiresDefault" toegang 1 maand "
#Expires caching-einde
Denk je dat je het niet prettig vindt om deze veranderingen zelf door te voeren?
Als je niet zeker bent van zo'n verandering, kun je ervoor kiezen om dit te doen via een goedkoop optreden op Fiverr.
Vind de beste optredens voor optimalisatie van websitesnelheid op Fiverr
Met de bovenstaande wijzigingen stellen we items die snel worden vernieuwd, zoals de HTML van uw pagina, in om na 600 seconden te vervallen (dit komt omdat HTML doorgaans vaker verandert). We veranderen ook zaken als de CSS en Javascript zodat ze maar één keer per maand vervallen (dergelijke bestanden veranderen alleen als je wijzigingen aanbrengt in je sjabloon of plug-ins).
Dit betekent dat als uw bezoeker de pagina binnen een maand opnieuw bezoekt, hij uw CSS- en JS-assets niet opnieuw hoeft te downloaden. Als u weet dat u dit soort wijzigingen zelden op uw site uitvoert, kunt u de waarde hoger instellen, op 1 jaar, vergelijkbaar met de jpeg, png-header.
Dit is de meest effectieve manier om browsercaching te gebruiken voor WordPress of andere websites die gebruikmaken van een .htaccess-bestand.
Stel afbeeldingsbestanden in op een lange vervaltijd
Zoals je ook kunt zien in ons voorbeeld hierboven, verlopen onze afbeeldingen slechts één keer per jaar. Soms is dit misschien te lang, dus een maand is meestal ook goed genoeg. U moet erachter komen wat logisch is voor uw website.
Dit zorgt ervoor dat de grootste media die de meeste tijd nodig hebben om te downloaden, op de computer van de bezoekers blijven staan en pas volgend jaar opnieuw hoeven te worden gedownload. Vanwege deze wijziging in uw .htaccess-bestand, gebruikt u correct gebruik van browsercaching in WordPress - de afbeeldingen worden gedurende een heel jaar niet opnieuw gedownload.
Dit maakt de ervaring van een terugkerende klant veel positiever - omdat het duurt less om elke pagina te laden. De bestanden die in de cache zijn opgeslagen, worden nu opnieuw gebruikt.
Nadat je de vervaldatums hebt ingesteld, is het belangrijk om ook de juiste Cache-Control-headers in te stellen, zodat de bovenstaande instelling echt correct werkt. Dit is een andere instelling in het .htaccess-bestand, dat u hieronder kunt vinden.
Voeg Cache-Control Headers toe
De volgende instelling moet ook aan het bestand worden toegevoegd om de cache-control headers in te stellen, zoals hierboven besproken.
# Begin cache-controlekoppen
Koptekst toevoegen Cache-Control "openbaar" Koptekst toevoegen Cache-Control "openbaar" Koptekst toevoegen Cache-Control "privé" Koptekst toevoegen Cache-Control "privé, moet opnieuw worden gevalideerd"
We hebben de vervaldatums al ingesteld, dus we hoeven deze hier niet opnieuw in te stellen.
Schakel ETag-headers uit voor sites met meerdere servers of CDN's
Het laatste dat we moeten doen, is de Etags-instelling (de) instellen.
In wezen is dit alleen belangrijk als u een CDN gebruikt om een aantal van uw bronnen te dienen. Etags zijn headers die doorgaans zijn opgebouwd met behulp van attributen die ze uniek maken voor elke specifieke machine die een site host (technische reden - het gebruikt een MD5 die door de server wordt gegenereerd, waardoor deze uniek is voor de server die deze genereert).
Als een website een CDN of meerdere servers gebruikt om hun pagina's te bedienen, is er GEEN garantie dat dezelfde server zal worden gebruikt - daarom komen de tags niet overeen wanneer een browser de originele component van de ene server haalt en later probeert die component te valideren op een andere server.
Om deze reden is het het beste om ze UIT TE SCHAKELEN als u meerdere servers of een CDN gebruikt om uw website te hosten. Hierdoor kunnen de Cache-control headers feitelijk de caching besturen in plaats van de ETags. Aangezien we instellingen hebben ingevoerd om de caching via de Cache-Control-headers te regelen, zijn de ETags niet langer nodig - dus zullen we ze uitschakelen.
Voeg dit toe aan uw .htaccess-bestand om ze ongedaan te maken.
# Disable ETags
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
FileETag NoneAls je meer wilt lezen over wat de Etags doen, kun je meer details vinden en erover lezen in dit artikel: https://en.wikipedia.org/wiki/HTTP_ETag
2. Plug-ins gebruiken
Aanpassen en spelen met het .htaccess-bestand kan uw site zelfs kapot maken. Als je een kleine fout maakt, zal je webserver het niet kunnen parseren, zal beginnen met gooien blanco pagina's, of gooi fout 500 en de site is dood!
Dus als je hier een hekel aan hebt, kun je een eenvoudige plug-in installeren die dit allemaal afhandelt.
Natuurlijk zijn er tal van andere plug-ins die dit kunnen doen. De meeste plug-ins die bedoeld zijn om uw pagina's sneller te maken, zullen de meeste van deze instellingen op de achtergrond uitvoeren.
In wezen, naast het afhandelen van alle instellingen om gebruik te maken van browsercaching WordPress, zullen deze in staat zijn om een aantal andere caching-optimalisaties uit te voeren, zoals het maken van tijdelijke kopieën (file caching), database-optimalisaties, geheugencache en andere optimalisaties die uw site in het algemeen sneller maken .
Deze omvatten plug-ins zoals Wekker, WP Snelste Cache, en W3 Total Cache en premium caching-plug-ins.
Laten we een paar van deze plug-ins bekijken.
Plugin door Rinku Yadav
Dit is de eenvoudigste van allemaal, het lost niets anders op dan het gebruik van browsercaching in WordPress.
- Download de plug-in die u kunt vinden hier.
- Ga naar het dashboard van uw WordPress en ga naar: Dashboard> Plug-ins> Nieuw toevoegen.
- Zoek naar "Gebruik Browser Caching" of klik op Upload Plugin en zoek het bestand dat je zojuist hebt gedownload.
- Klik op Nu installeren.
- Activeer de plug-in en je bent klaar!
- U moet uw website nu opnieuw testen om te bevestigen dat de nieuwe instellingen correct werken en dat de waarschuwing verdwenen is.
Als u op zoek bent naar een product dat veel meer doet om uw site sneller te maken, raden we u ten zeerste aan om de rest van de plug-ins te bekijken die we hieronder noemen.
WP Rocket
Dit is een van de snelste, meest aanbevolen plug-ins voor WordPress die al je snelheidsoptimalisaties met een paar klikken aankan. In wezen voert dit dergelijke snelheidsoptimalisaties uit zoals
- compressie van statische bestanden (GZip) - om de totale omvang van de aan te leveren gegevens kleiner te maken (we hebben een volledige tutorial over hoe je GZip-compressie in WordPress hier kunt inschakelen)
- maakt een bestandscache (inclusief voorladen van cache) - om te zetten less stress op de server (ophalen van een vooraf gerenderde kopie van elke pagina)
- Optimalisatie van Google Fonts - om ervoor te zorgen dat zwaardere lettertypen snel worden geladen),
- trage voortgang - zodanig dat afbeeldingen alleen worden geladen wanneer de gebruiker naar beneden scrolt naar het gedeelte van een pagina waar de afbeelding nodig is
- Minificatie en combinatie - het verkleinen van de grootte en het combineren van tekstitems om ze sneller aan de eindgebruiker te leveren
- Stel het laden van JS uit - zodat de pagina snel wordt weergegeven in plaats van te wachten tot alle items zijn gedownload. Dit is iets waar we het over hebben gehad CollectiveRay.
- Integreert en maakt een CDN mogelijk - zodat uw zwaardere media sneller wordt afgeleverd
- DNS-prefetching - om de tijd te verminderen die nodig is om de bron van inhoud van derden op te lossen
Al het bovenstaande klinkt misschien als onzin voor iedereen die niet betrokken is bij infrastructuuroptimalisaties, maar in werkelijkheid zijn dit alles wat u moet doen om uw website sneller te laten laden.
Het mooie is dat je met WP Rocket niet het zware werk en de configuratie hoeft te doen - het wordt allemaal voor je gedaan! We raden u ten zeerste aan deze plug-in uit te proberen, die is beoordeeld als de beste manier om uw website sneller te maken.
W3 Total Cache
Dit is één van de meest populaire caching-plug-ins ooit. Het bestaat al een behoorlijk lange tijd en heeft veel tijd gehad om heel mooi te rijpen om de meeste functies te integreren die je van een caching-plug-in zou verwachten.
Het probleem is dit. Ikzelf, iemand die al heel lang met WordPress en webdesign bezig is, en het is zo'n frustrerende ervaring om ermee te werken. De plug-in is niet eenvoudig in te stellen en je moet hem echt begrijpen en goed kennen om hem goed te kunnen gebruiken.
Als je op zoek bent naar een goede manier om gebruik te maken van browsercaching in WordPress met behulp van een plug-in, raden we WPRocket hierboven ten zeerste aan in plaats van W3Total Cache.
3. Maak gebruik van browsercaching in Nginx
Als je website daadwerkelijk Nginx als server gebruikt, heb je een andere code nodig, omdat Nginx geen .htaccess-bestand heeft. Het is echter nog steeds relatief eenvoudig om dit te implementeren, omdat u slechts een paar bewerkingen in het conf-bestand van de server hoeft uit te voeren.
U moet de onderstaande code toevoegen in een bestaand serverblok in uw conf-bestand. Dit zal meestal in /etc/nginx/sites-enabled/default
server {luister 80; servernaam localhost; locatie / {root / usr / share / nginx / html; index index.html index.htm; } locatie ~ * \. (jpg | jpeg | png | gif | ico | css | js) $ {verloopt 365d; } locatie ~ * \. (pdf) $ {verloopt 30 dagen;
Voeg Cache-Control Headers toe voor Nginx
locatie ~ * \. (jpg | jpeg | png | gif | ico | css | js) $ {verloopt 90d; add_header Cache-Control "public, no-transform";
Zoals je uit de bovenstaande code kunt afleiden, stellen we de vervallocatie voor afbeeldingsbestanden in op 1 jaar of 365 dagen, terwijl we instellen dat pdf's na 30 dagen vervallen. U kunt meer bestandsextensies toevoegen om de vervaldatum aan te passen, waardoor deze anders is voor andere bestandstypen.
Alle bestandstypen die worden toegevoegd, worden dienovereenkomstig in de cache opgeslagen.
4. Hoe bronnen van derden in het cachegeheugen worden opgeslagen
Hoewel het vrij eenvoudig is om de bovenstaande instelling toe te passen, zult u merken dat zelfs nadat u de bovenstaande wijzigingen heeft aangebracht, u dit bericht nog steeds krijgt in de testtools voor websitesnelheid en Google Pagespeed Insights.
Dit komt doordat de meeste scripts en services van derden geen lange vervaltijd specificeren - om verschillende redenen.
Je hebt helaas geen controle over deze scripts, dus we raden je ten zeerste aan om MINIMAAL mogelijk scripts van derden te gebruiken. Als je zonder het script kunt leven, verwijder het dan van je website. Als u ervoor kiest om het op te nemen, sleept het de laadtijd van uw pagina's naar beneden.
5. Specificeer een Cache Validator
Dit is een andere waarschuwing die vaak door GTMetrix wordt getoond, meestal afkomstig van scripts van derden. In wezen is dit hetzelfde probleem dat we zojuist in de vorige sectie hebben beschreven, waarbij bepaalde scripts geen ETag-header of een Last-Modified-header specificeren zoals beschreven.
Helaas is er niet veel dat u kunt doen om dit probleem op te lossen, als deze specifieke fouten afkomstig zijn van domeinen die buiten uw controle vallen, zoals Facebook, of in het geval van de onderstaande afbeelding, Sumo - dus er is niets dat u kunt oplossen .
In dit geval zou uw enige oplossing zijn om deze scripts volledig van uw domein te verwijderen als u zeker wilt zijn dat deze waarschuwing niet verschijnt.
Veelgestelde Vragen / FAQ
Hoe los je het gebruik van browsercaching op?
De eenvoudigste manier om browsercaching te gebruiken, is door een plug-in te installeren waarmee u de levensduur van verschillende soorten statische inhoud kunt specificeren. Een alternatieve maar eenvoudige methode is om de cachetijd op te geven in het .htaccess-bestand van uw website. We hebben hier gedetailleerde instructies voor hoe u dit moet doen.
Hoe schakel ik cache in WordPress in?
Om cache in WordPress in te schakelen, kunt u eenvoudig een plug-in installeren die verschillende cacheniveaus mogelijk maakt, waaronder een cache op serverniveau, een cache op paginaniveau en een cache op browserniveau. Onze aanbevolen plug-in hiervoor is WP-Rocket, maar er zijn verschillende alternatieve keuzes die we in dit artikel noemen, waardoor je website ook sneller laadt.
Hoe gebruik ik browsercaching voor scripts van derden?
U kunt de browsercachingwaarde voor scripts van derden, zoals Facebook of Google Analytics, niet wijzigen, omdat deze op serverniveau zijn ingesteld en u er geen controle over heeft. In dit geval is de beste optie om zo min mogelijk van deze scripts te gebruiken
Conclusie
Hierboven hebben we u een aantal manieren laten zien om te implementeren om ervoor te zorgen dat u browsercaching kunt gebruiken en ervoor kunt zorgen dat gedownloade inhoud steeds opnieuw wordt gebruikt. Zorg ervoor dat u dit op uw site heeft geïmplementeerd om te voorkomen dat de fout wordt weergegeven in tools die de snelheidsstatistieken van uw site analyseren.
Als je denkt dat dit iets buiten je eigen mogelijkheden ligt, raden we je aan dit in de handen van de PRO's te laten en een plug-in zoals WP Rocket te installeren om er zeker van te zijn dat je hiervan maximaal profiteert en tal van andere acties om je website laadt sneller.
Bezoek WP Rocket om uw website vandaag nog sneller te maken
Alstublieft laat een nuttig geef commentaar met je mening, deel dit dan op je Facebook-groep (en) die dit nuttig zouden vinden en laten we samen de vruchten plukken. Bedankt voor het delen en aardig zijn!
Disclosure: Deze pagina kan links bevatten naar externe sites voor producten die we geweldig vinden en die we van harte aanbevelen. Als u producten koopt die we aanbevelen, kunnen we een verwijzingsvergoeding verdienen. Dergelijke vergoedingen hebben geen invloed op onze aanbevelingen en we accepteren geen betalingen voor positieve beoordelingen.
en nog veel meer ...