Hur man utnyttjar webbläsarcaching WordPress med eller utan ett plugin [5 sätt]

Webbplats långsam och försöker förbättra den? Du har förmodligen sett den här varningen men är inte säker på vad det betyder eller hur du åtgärdar det ... men vi har täckt dig. Att utnyttja webbläsarens cachning är ett sätt att göra din webbplats snabbare, men att instruera webbläsaren att lagra eller "cache" filer under en tid, så att de inte behöver laddas ner igen vid ett senare besök. Det är kort sagt allt detta. 

Men stanna och läs allt om hur du ser till att du gör din webbplats snabbare genom att fixa det här felet eller varningen.

I huvudsak, om du vill utnyttja cachning av webbläsare, måste du ange hur länge webbläsare ska ha bilder, CSS- och Javascript -filer lagrade lokalt i klientens webbläsare. Med hjälp av dessa specifikationer och inställningar kommer användarens webbläsare att använda less data när du surfar på dina webbsidor (eftersom den behöver ladda ner färre filer). Att utnyttja webbläsarens cachning WordPress innebär en förbättring av laddningshastigheten på din webbplats.

Om du har kort tid är det här det enklaste sättet att utnyttja webbläsarens caching WordPress:

Hur man fixar hävstångswebbläsare Caching WordPress Varning

1. Ladda ner plugin som kan hittas här
2. Gå till Dashboard på din WordPress och besök sedan: Instrumentpanel> Plugins> Lägg till nytt
3. Sök efter "Utnyttja webbläsarcaching" eller klicka på Upload Plugin och välj filen du laddade ner och klicka på Installera nu
4. Aktivera plugin
5. Testa din webbplats igen för att bekräfta att de nya inställningarna fungerar korrekt och varningen är borta

Genom att genomföra dessa minimala förändringar ser du att din poäng på sådana webbplatser som GTMetrix, Pingdom Tools eller Pagespeed Insights kommer att öka avsevärt.

I själva verket är detta ett av de enklaste sätten att göra din WordPress-webbplats snabbare.

Det innebär mycket lite ansträngning alls från din sida och är en av de högprioriterade uppgifter som rekommenderas av Google för att få din webbplats att laddas snabbare. Det rekommenderas också av webbplatser som GTMetrix eller Google Pagespeed Insights för att göra din belastning snabbare. 

Vad är webbläsarcaching?

Du kan utnyttja webbläsarens cachning genom att ställa in ett långt utgångsdatum på det statiska innehållet på din webbplats. Detta gör det möjligt för webbläsare att "utnyttja" cachning och återanvända dessa filer om och om igen utan att behöva ladda ner dem. Genom att cachelagra dessa filer behöver de inte laddas ner igen, så din webbplats är snabbare att ladda.

Om du hellre vill titta på detta som en video har vi nyligen laddat upp den här artikeln som en YouTube-video, så kolla in den nedan:

Innan vi faktiskt visar dig hur du implementerar detta ska vi först diskutera vad hävstångseffekt för webbläsare i WordPress betyder och hur det fungerar!

När vi har förklarat hur det fungerar kan du förstå hur det hjälper gör att dina sidor laddas snabbare. 

I grund och botten, när någon besöker en sida, måste webbläsaren ladda ner alla resursservern på den domänen från servern. Dessa inkluderar HTML, CSS-fil, JS, text, bilder och andra tillgångar) för att ladda och visa den aktuella sidan.

Nu, istället för att faktiskt ladda ner allt om och om igen varje gång du besöker en annan sida på samma webbplats, använder webbläsaren det som kallas en webbcache. Detta är en funktion som används av webbläsare för att "tillfälligt lagra" eller "cache" webbsidstillgångar på enhetens lokala lagring. Denna lagring eller data kallas ' Webcache"eller"HTTP-cache".

Ta en titt på det här roliga diagrammet som förklarar hur webbcaching fungerar:

Vi kan se ovan, att första gången användarenheten (vänster) frågar servern (höger) om bilderna / logotypfilen, avlyssnas begäran av webbcachemekanismen (som kontrollerar om den har en kopia av den filen). Om den inte gör det hämtar den den från servern. Vid nästa besök, istället för att gå till servern, får den det från sin egen kopia.

Så det fina med denna funktion är att när en användare besöker samma webbplats igen, eller en annan sida på samma domän, kommer webbläsaren att använda den kopia som för närvarande finns i den tillfälliga cachen - snarare än att behöva ladda ner alla resurser om igen. Webbläsaren laddar bara ner allt som är annorlunda.

Eftersom många webbplatser bara har minimala ändringar från en sida till en annan och mellan besök, kan återanvändning av cachekopian göra det möjligt att sidan laddas mycket mycket snabbare.

Detta hjälper också till att minska bandbreddskonsumtionen på din webbserver och minskar också belastningen på servern. Du kan också ha stött på en varning när du optimerar dina sidor för snabbhet.

Sidvarvningsvarning för att utnyttja webbläsarens cachning

Webbplatser som GTMetrix eller Pagespeed Insights kan visa följande utnyttja webbläsarens caching varning, som du måste åtgärda om du inte har aktiverat inställningarna nedan.

men detta var faktiskt varningen som visas i en äldre version av Pagespeed Insights. Den nyare varningen ser lite ut så här:

Servera statiska tillgångar med en effektiv cachepolicy

Vad betyder detta egentligen?

Även om den ovan beskrivna funktionen är utmärkt i teorin kommer de flesta webbplatser som standard att "markera" innehållet för att upphöra efter åtta dagar eller en kort tidsperiod. Vad detta betyder är att om en användare besöker din domän igen efter en vecka, måste de ladda ner resurserna igen.

När vi ställer in en metod för att utnyttja webbläsarens cachning är det vi faktiskt gör att vi instruerar webbläsaren att förlänga livslängden eller utgångsdatumet för de resurser som hämtas av våra besökare och därmed optimera prestanda.

Genom att förlänga cachens livslängd (eller hur lång tid det tar för en fil att bli gammal) ser du till att dina besökare inte behöver vänta med att ladda ner samma saker varje gång de besöker din webbplats.

Detta innebär mycket små förändringar och är inte särskilt komplicerat att implementera - och du hittar den exakta syntaxen nedan.

Vad ändringen faktiskt gör är att ställa in utgångsdatum för innehåll genom att lägga till Cache-Control-rubriker och ETag-rubriker i HTTP-rubriker. Cache-Control-rubriken förklarar cacheperioden för en viss fil eller filtyp. ETag används sedan för att verifiera eventuella ändringar som finns (eller inte) mellan de cachade och efterfrågade resurserna.

Inställningen låter dig vanligtvis ange perioden i dagar, månader eller år för att lagra cachefiler lokalt. Naturligtvis, om du förväntar dig att ändra resurserna så ofta, är det lämpligt att ställa in utgångsdatum med en frekvens som motsvarar ungefär den period du förväntar dig att ändra dessa. 

Förresten, om du vill göra din WordPress snabb, finns det några plugins som denna vilket kan göra en verklig skillnad i prestanda på några minuter (med liten eller ingen ansträngning). 

Är du inte redo att använda ett plugin för tillfället? Läs vidare...

Om du är intresserad av att göra din webbplats snabbare rekommenderar vi starkt att du besöker vår artikel: [25 åtgärder] Snabba upp WordPress: Få en supersnabb webbplats idag - en komplett guide.

1. Använda .htaccess-filen

Här är de exakta instruktionerna du behöver utföra:

1. Gå till CPanel för ditt värdkonto
2. Gå till rotmappen på webbplatsen
3. Öppna .htaccess-filen med din filredigerare. Om du inte hittar filen, kontrollera om du kan visa dolda filer (.htaccess-filen är dold som standard)
4. Lägg till följande ändringar längst ner i filen
5. Lägg till Expire Headers med långa utgångstider
6. Lägg till Cache-Control Headers
7. Avaktiverade ETag-rubriker
8. Gör inga andra ändringar
9. Spara filen
10. Kör om testet

För att ställa in utgångstiden för resurser som bilder och CSS-filer krävs en liten ändring av din .htaccess-fil. Detta finns i roten till din värdserver. Du kan ändra värdena för utgående rubriker för att öka prestandan. 

Ställ in dessa värden så länge det är vettigt för din webbplats - en månad är vanligtvis tillräckligt bra.

#Customize löper ut cachingstart - justera perioden efter dina behov FileETag MTime Storlek AddOutputFilterByType DEFLATE text / vanlig text / html text / xml text / css applikation / xml applikation / xhtml + xml applikation / rss + xml applikation / javascript applikation / x-javascript ExpiresActive On Expires application / xhtml + xml "access 600 seconds" ExpiresByType text / css "access 600 month" ExpiresByType text / javascript "access 1 month" ExpiresByType text / x-javascript "access 1 month" ExpiresByType application / javascript "access 1 month" ExpiresByType application / x-javascript "access 1 month" ExpiresByType application / x-shockwave-flash "access 1 month" ExpiresByType application / pdf "access 1 month" ExpiresByType image / x-icon "access 1 year" ExpiresByType image / jpg "access 1 year "ExpiresByType image / jpeg" access 1 year "ExpiresByType image / png" access 1 year "ExpiresByType image / gif" access 1 year "ExpiresDefault" access 1 month "
# Expires cache-end

Tror du att du inte är bekväm med att göra dessa förändringar själv?

Om du inte är säker på att göra en sådan förändring kan du välja att göra dessa via en billig spelning på Fiverr. 

Hitta de bästa webbplatsens hastighetsoptimeringsspel på Fiverr

Med ovanstående ändringar ställer vi in ​​tillgångar som uppdateras snabbt, till exempel att din sidas HTML ska upphöra att gälla efter 600 sekunder (det beror på att HTML vanligtvis ändras oftare). Vi ändrar också saker som CSS och Javascript så att de bara går ut en gång i månaden (sådana filer ändras bara om du gör ändringar i din mall eller plugins).

Det betyder att om din besökare besöker sidan igen inom en månad behöver de inte ladda ner dina CSS- och JS-tillgångar igen. Om du vet att du sällan utför dessa typer av ändringar på din webbplats - kan du ställa in värdet högre, till 1 år, liknande jpeg, png upphör att gälla.

Detta är det mest effektiva sättet att utnyttja webbläsarcaching för WordPress eller andra webbplatser som använder en .htaccess-fil.

Ställ in bildfiler på lång utgångstid

Som du också kan se i vårt exempel ovan är våra bilder inställda på att löpa ut en gång om året. Ibland kan det här vara för långt, så en månad är vanligtvis också tillräckligt bra. Man måste ta reda på vad som är vettigt för din webbplats.

Detta säkerställer att det största mediet som tar mest tid att ladda ner förvaras på besökarnas maskin och inte behöver laddas ner igen förrän nästa år. På grund av denna förändring i din .htaccess-fil använder du webbläsarens cachning på rätt sätt i WordPress - bilderna laddas inte ner igen under ett helt år.

Detta gör upplevelsen av en återkommande kund mycket mer positiv - för det krävs less att ladda varje sida. Filerna som cachelagras återanvänds nu.

När du har ställt in utgångsdatum är det viktigt att du också ställer in rätt Cache-Control-rubriker så att ovanstående inställning faktiskt fungerar korrekt. Detta är en annan inställning i .htaccess-filen, som du hittar nedan.

Lägg till Cache-Control Headers

Följande inställning bör också läggas till i filen för att ställa in cache-kontrollrubrikerna som diskuterats ovan.

# BÖRJA Cache-kontrollhuvuden
Rubrik lägg till Cache-Control "offentlig" Rubrik lägg till Cache-Control "offentlig" Rubrik lägg till Cache-Control "privat" Rubrik lägg till Cache-kontroll "privat, måste ompröva"

Vi har redan ställt in utgångsdatum så att vi inte behöver ställa in det igen här.

Avaktiverade ETag-rubriker för flerserverwebbplatser eller CDN

Det sista vi behöver göra är att (av) ställa in Etags-inställningen.

I huvudsak är detta bara viktigt om du använder en CDN för att tjäna några av dina resurser. Etags är rubriker som vanligtvis konstrueras med attribut som gör dem unika för varje specifik maskin som är värd för en webbplats (teknisk anledning - den använder en MD5 som genereras av servern, vilket gör den unik för servern som genererar den).

Om en webbplats använder en CDN eller flera servrar för att betjäna sina sidor finns det INGEN garanti för att samma server kommer att användas - därför kommer taggarna inte att matcha när en webbläsare hämtar den ursprungliga komponenten från en server och senare försöker validera den komponenten på en annan server.

Av denna anledning vore det bäst att UNSET dem om du använder flera servrar eller ett CDN för att vara värd för din webbplats. Detta gör att Cache-kontrollhuvuden faktiskt kan styra cachningen snarare än ETags. Med tanke på att vi har ställt in inställningar för att styra cachningen genom Cache-Control-rubrikerna är ETags inte längre nödvändiga - så vi stänger av dem.

Lägg till detta i din .htaccess-fil för att avmarkera dem.

# Disable ETags
<IfModule mod_headers.c>
	Header unset ETag
</IfModule>
FileETag None

Om du behöver läsa mer om vad Etags gör kan du hitta mer information och läsa om dem i den här artikeln: https://en.wikipedia.org/wiki/HTTP_ETag

2. Använda plugins

Att finjustera och leka med .htaccess-filen kan faktiskt bryta din webbplats. Om du gör ett litet misstag kommer din webbserver inte att kunna analysera det utan kommer att börja kasta tomma sidor, eller kasta error 500 och sajten kommer att vara död!

Så om du inte vill göra det här kan du installera ett enkelt plugin som tar hand om allt detta. 

Naturligtvis finns det många andra plugins som kan göra detta. De flesta insticksprogram som är avsedda att göra dina sidor snabbare gör de flesta av dessa inställningar i bakgrunden. 

I grund och botten, förutom att hantera alla inställningar för att utnyttja webbläsarcaching WordPress, kommer dessa att kunna utföra ett antal andra cachingoptimeringar, till exempel skapa temporära kopior (filcaching), databasoptimeringar, Memcache och andra optimeringar som gör din webbplats snabbare totalt .

Dessa skulle inkludera plugins som WPRocket, WP Snabbaste Cache, och W3 Total Cache och premiumcaching-plugins. 

Låt oss se några av dessa plugins.

Plugin av Rinku Yadav

Detta är det enklaste av dem alla, det gör ingenting annat än att fixa webbläsarens caching i WordPress.

1. Ladda ner plugin som kan hittas här.
2. Gå till Dashboard på din WordPress och besök sedan: Instrumentpanel> Plugins> Lägg till nytt.
3. Sök efter "Utnyttja webbläsarcaching" eller klicka på Upload Plugin och sök i filen du just laddade ner.
4. Klicka på Installera nu.
5. Aktivera plugin-programmet så är du klar!
6. Du bör nu testa din webbplats igen för att bekräfta att de nya inställningarna fungerar korrekt och varningen är borta.

Om du letar efter en produkt som gör mycket mer för att göra din webbplats snabbare, rekommenderar vi starkt att du tittar på resten av plugins som vi nämner nedan.

WP Rocket

Detta är en av de snabbaste, mest rekommenderade pluginsna för WordPress som kan hantera alla dina hastighetsoptimeringar med några få klick. I huvudsak utför detta sådana hastighetsoptimeringar som

• komprimering av statiska filer (GZip) - för att göra den totala storleken på data som ska levereras mindre (vi har en fullständig handledning om hur man aktiverar GZip-komprimering i WordPress här)
• möjliggör en filcache (inklusive laddning av cache) - att sätta less stress på servern (hämtar en förutgivet kopia av varje sida)
• Google Fonts optimering - för att se till att tyngre teckensnitt laddas snabbt),
• lat laddning - så att bilder endast laddas när användaren rullar ner till det avsnitt på en sida där bilden krävs
• Minifiering och kombination - krympa storleken och kombinera textresurser för att leverera dem snabbare till slutanvändaren
• Uppskjuta JS-laddning - så att sidan görs snabbt istället för att vänta på att alla tillgångar ska laddas ner. Det här är något vi har täckt CollectiveRay.
• Integrerar och möjliggör ett CDN - så att dina tyngre medier levereras snabbare 
• DNS-förhämtning - för att minska den tid det tar att lösa källan till innehåll från tredje part

Allt ovanstående kan låta som gibberish för alla som inte är inblandade i infrastrukturoptimeringar, men i verkligheten är det alla saker du behöver göra för att din webbplats ska kunna laddas snabbare.

Det fantastiska är att med WP Rocket behöver du inte göra tunga lyft och konfigurationen - allt är gjort för dig! Vi rekommenderar starkt att du testar detta plugin, som har rankats som det bästa sättet att göra din webbplats snabbare.

Besök WP Rocket Now  

W3 Total Cache

Detta är en av de mest populära caching-plugins någonsin. Det har funnits ganska länge och har haft mycket tid att mogna mycket snyggt för att bädda in de flesta funktioner som man kan förvänta sig från ett caching-plugin.

Problemet är detta. Jag själv, någon som har varit runt WordPress och webbdesign under mycket lång tid, och det är en så frustrerande upplevelse att arbeta med det. Insticksprogrammet är inte enkelt att ställa in och du måste verkligen förstå det och känna till det för att kunna få det att fungera snyggt.

Om du letar efter ett bra sätt att utnyttja surfning av cachning i WordPress med ett plugin, rekommenderar vi starkt WPRocket ovan i motsats till W3Total Cache.

3. Utnyttja webbläsarcaching i Nginx

Om din webbplats faktiskt använder Nginx som server behöver du en annan kod, eftersom Nginx inte har en .htaccess-fil. Det är dock fortfarande relativt enkelt att implementera detta eftersom du bara behöver utföra några redigeringar i conf-filen på servern.

Du måste lägga till koden nedan i ett befintligt serverblock i din conf-fil. Detta kommer vanligtvis att vara i /etc/nginx/sites-enabled/default

server {lyssna 80; server_name localhost; plats / {root / usr / share / nginx / html; index index.html index.htm; } plats ~ * \. (jpg | jpeg | png | gif | ico | css | js) $ {upphör 365d; } plats ~ * \. (pdf) $ {går ut 30d; }}

Lägg till Cache-Control Headers för Nginx

plats ~ * \. (jpg | jpeg | png | gif | ico | css | js) $ {går ut 90d; add_header Cache-Control "public, no-transform"; }

Som du kan dra slutsatsen från koden ovan ställer vi in ​​utgångsplatsen för bildfiler till 1 år eller 365 dagar, medan vi ställer in PDF-filer för att upphöra att gälla efter 30 dagar. Du kan lägga till fler filtillägg för att anpassa utgången och göra det annorlunda för andra filtyper.

Alla filtyper som läggs till cachas i enlighet med detta. 

4. Hur man cachar tredjepartsresurser

Även om det är ganska enkelt att tillämpa ovanstående inställning, kommer du att upptäcka att även efter att du utfört ovanstående ändringar kommer du fortfarande att få detta meddelande i webbplatsens hastighetstestverktyg och Google Pagespeed Insights.

Detta beror på att de flesta skript och tjänster från tredje part inte anger en lång utgångstid - av olika skäl.

Du har tyvärr ingen kontroll över dessa skript, så vi rekommenderar starkt att du använder MINIMUM tredjepartsskript. Om du kan leva utan manuset, ta bort det från din webbplats. Genom att välja att inkludera den dras nedladdningstiden för dina sidor.

5. Ange en Cache Validator

Detta är en annan varning som ofta visas av GTMetrix, vanligtvis från tredjepartsskript. I grund och botten är detta samma problem som vi just har beskrivit i föregående avsnitt, där vissa skript inte specificerar varken ETAG-rubrik eller senast modifierad rubrik som beskrivs.

Tyvärr finns det inte mycket du kan göra för att lösa detta problem, om dessa specifika fel kommer från domäner som ligger utanför din kontroll, till exempel Facebook, eller i fallet med bilden nedan, Sumo - så det finns inget du kan fixa .

Din enda lösning, i det här fallet, är att ta bort dessa skript helt från din domän om du vill vara säker på att den här varningen inte visas.

Vanliga frågor

Hur löser du webbläsarens caching?

Det enklaste sättet att utnyttja webbläsarens cachning är att installera ett plugin som låter dig ange cachningstid för olika typer av statiskt innehåll. En alternativ men enkel metod är att ange cachningstiden i .htaccess-filen på din webbplats. Vi har detaljerade instruktioner om hur du gör det här.

Hur aktiverar jag cache i WordPress?

För att aktivera cache i WordPress kan du helt enkelt installera ett plugin som möjliggör flera nivåer av cache, inklusive en cache på servernivå, en cache på sidnivå och en cache på webbläsarenivå. Vårt rekommenderade plugin för detta är WP-Rocket, men det finns flera alternativ som vi nämner i den här artikeln som också gör att din webbplats laddas snabbare.

Hur använder jag webbläsarcaching för skript från tredje part?

Du kan inte ändra webbläsarens cachningsvärde för skript från tredje part som Facebook eller Google Analytics eftersom de är inställda på servernivå och du inte har någon kontroll över dem. Det bästa alternativet är i det här fallet att använda så få av dessa skript som möjligt

Slutsats

Ovan har vi visat dig en massa sätt att implementera för att se till att du kan utnyttja webbläsarens cachning och se till att innehåll som laddas ner återanvänds om och om igen. Se till att du har implementerat detta på din webbplats för att förhindra att felet visas i verktyg som analyserar webbplatsens hastighetsvärden. 

Om du känner att detta är något utanför dina egna möjligheter, rekommenderar vi att du lämnar det här i händerna på PRO: erna och installerar ett plugin som WP Rocket för att säkerställa att du får maximala fördelar med detta och många andra åtgärder för att göra din webbplats laddas snabbare.

Besök WP Rocket för att göra din webbplats snabbare idag

Om författaren

Författare: David Attardwebbplats: https://www.linkedin.com/in/dattard/e-post: david@collectiveray.com

David har arbetat i eller runt online / digital industrin under de senaste 18 åren. Han har stor erfarenhet av mjukvaru- och webbdesignindustrin med WordPress, Joomla och nischer som omger dem. Som digital konsult fokuserar han på att hjälpa företag att få en konkurrensfördel med en kombination av deras webbplats och digitala plattformar som finns idag.