Hur du enkelt åtgärdar varningen om att utnyttja webbläsarcache i WordPress

Om du någonsin har kört din WordPress-webbplats genom ett verktyg för hastighetstestning, är chansen stor att du har sett varningen 'utnyttja webbläsar-cache'. Vi aktiverar webbläsar-cache på alla våra webbplatser för att säkerställa optimal WordPress-prestanda som en viktig del av vår optimeringsprocess.

Webbplatsens cache kan låta tekniskt, men konceptet är enkelt: det talar om för besökarnas webbläsare att lagra vissa filer lokalt så att de inte behöver laddas ner igen vid framtida besök. Detta kan halvera laddningstiderna för dina sidor, vilket innebär nöjdare besökare och bättre rankning hos sökmotorer.

Du behöver inte vara utvecklare för att åtgärda denna varning. Vi visar dig flera enkla metoder för att aktivera webbläsarcache på din WordPress-webbplats, från enkla plugin-lösningar till manuella kodjusteringar. I slutet av den här guiden kommer du att ha en snabbare webbplats och en varning mindre att oroa dig för.

Vad är webbläsar-cache i WordPress?

Webbplatscache är ett sätt att förbättra laddningshastigheten för din WordPress-webbplats.

Normalt, när en webbsida laddas, laddas alla filer separat. Detta skapar flera förfrågningar mellan webbläsaren och din WordPress-värdserver, vilket ökar laddningstiden för webbsidan.

När webbläsar-cache är aktiverat lagrar din webbläsare en kopia av din webbsida lokalt. Detta gör att webbläsare kan ladda vanliga filer som stilmallar, logotyper och bilder snabbare när användaren besöker en andra sida på din webbplats.

Detta minskar den totala serverbelastningen eftersom färre förfrågningar kommer att göras till den faktiska servern, vilket som ett resultat förbättrar prestandaoptimering och användarupplevelse.

Var kommer du att se varningen 'Utnyttja webbläsarcache'?

Varningen ‘Utnyttja webbläsarcache’ innebär att du inte har webbläsarcache aktiverat, eller att din cache kan vara felaktigt konfigurerad.

När du kör en hastighetstest av en webbplats med ett verktyg som GTmetrix eller Google PageSpeed Insights, får du en rapport som visar vad du kan åtgärda för att snabba upp WordPress.

Om din webbplats inte för närvarande använder webbläsarcache, får du en varning om att aktivera webbläsarcache.

Så här kan det se ut när du tittar på dina resultat från ett verktyg för sidhastighetsinsikter.

Ibland får du en varning som säger att din ‘effektiva cachepolicy’ inte fungerar.

Båda dessa varningar hänvisar till ett fel i din webbläsar-cacheinställning.

Om du ser varningen 'Utnyttja webbläsarcache' betyder det att du behöver aktivera och anpassa cache-reglerna för att snabba upp din webbplats.

Med det sagt, låt oss titta på hur du enkelt kan åtgärda varningen 'Leverage browser caching' i WordPress med två olika metoder. Använd helt enkelt snabblänkarna nedan för att välja den metod du vill använda:

1. Åtgärda varningen 'Utnyttja webbläsarens cachning' med WP Rocket
2. Åtgärda varningen 'Utnyttja webbläsarcache' med kod
3. Vanliga frågor om aktivering av webbläsarcachelagring

Metod 1: Åtgärda varningen 'Utnyttja webbläsar-cache' med WP Rocket

WP Rocket är det bästa WordPress-cachepluginet på marknaden. Det är nybörjarvänligt och kan hjälpa dig att optimera din webbplats för hastighet, allt utan att känna till komplexa cache- och hastighetstermer.

Direkt ur lådan kommer alla rekommenderade cacheinställningar verkligen att snabba upp din WordPress-blogg.

För att åtgärda varningen 'Utnyttja webbläsarcache' med WP Rocket behöver du bara installera och aktivera pluginet.

Det var allt.

För mer information kan du se vår guide om hur man korrekt installerar och konfigurerar WP Rocket i WordPress.

WP Rocket kommer automatiskt att aktivera webbläsarcache och modifiera din .htaccess-fil med rätt regler.

Metod 2: Åtgärda varningen 'Använd webbläsarcache' med kod

Den andra metoden innebär att lägga till kod i dina WordPress-filer. Om du inte har gjort detta tidigare, se vår nybörjarguide för att klistra in kodavsnitt från webben i WordPress.

Den här metoden är inte lika nybörjarvänlig, så följ den bara om du vet exakt vad du gör. För de flesta företagare rekommenderar vi att använda metod 1.

Med det sagt, låt oss titta på hur du åtgärdar varningen 'Använd webbläsarcache' genom att lägga till kod i WordPress.

Avgör om din webbplats kör Apache eller Nginx

Först måste du ta reda på om din webbplats använder Apache- eller Nginx-servrar.

För att göra detta, öppna din webbplats i en ny flik eller ett nytt fönster. Högerklicka sedan och välj alternativet 'Inspektera'.

Klicka sedan på fliken 'Nätverk' högst upp på sidan.

Du kan behöva uppdatera sidan för att resultaten ska laddas.

Klicka sedan på ditt domännamn i kolumnen 'Namn'.

Den bör vara högst upp på sidan.

Sedan, i avsnittet 'Response Headers', ser du ett objekt som heter 'server' där servertypen visas.

I det här fallet körs webbplatsen på en Apache-server.

Lägg till Cache-Control- och Expires-huvuden i Apache

För att åtgärda varningen 'Använd webbläsarcache' med en Apache-server kommer du att lägga till kod i din .htaccess-fil.

För att redigera den här filen behöver du ansluta till ditt WordPress-värdkonto med en FTP-klient eller din värds filhanteringsverktyg.

När du är ansluten kan du se din .htaccess-fil i din webbplats rotmapp.

Om du inte hittar den, oroa dig inte. Ibland kan den här filen vara dold. För mer information, se vår guide om varför du inte kan hitta .htaccess-filen på din WordPress-webbplats.

Därefter behöver du lägga till cache-control och/eller expires-huvuden för att aktivera webbläsarcachning. Detta talar om för webbläsaren hur länge den ska lagra dina webbplatsresurser innan de tas bort.

• Cache-control-huvudet ger specifika detaljer till webbläsaren om hur cachning ska ske.
• Expires-huvudet möjliggör cachning och talar om för webbläsaren hur länge den ska lagra specifika filer innan de raderas.

Du kan lägga till följande kod i din .htaccess-fil för att lägga till expires-headers:

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "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 image/x-icon "access 1 year"
ExpiresDefault "access 3 days"
</IfModule>
## EXPIRES HEADER CACHING ##

Denna kod ställer in olika cache-utgångsdatum baserat på filtyp.

Därefter kan du lägga till följande kod för att aktivera cachekontroll:

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
    Header set Cache-Control "max-age=96000, public"
</filesMatch>

Den här koden ställer in utgångstiden för när cachen behöver uppdateras. I exemplet ovan går cachen ut efter 90 000 sekunder.

Glöm inte att spara filen efter att du har redigerat den. Därefter kommer webbläsaren att begära nya versioner av filerna.

Lägg till Cache-Control och Expires Headers i Nginx

Om du använder en Nginx-webbserver för att hosta din WordPress-webbplats, kan du redigera serverkonfigurationsfilen för att åtgärda felet med webbläsar-cache.

Hur du redigerar och kommer åt den här filen beror på din värd, så du kan kontakta din hosting-leverantör om du behöver hjälp med att komma åt filen.

Sedan behöver du lägga till följande kod för att lägga till utgångsrubriker:

location ~* \.(jpg|jpeg|gif|png|svg)$ {
  expires 365d;
}
 
location ~* \.(pdf|css|html|js|swf)$ {
  expires 3d;
}

Den här koden kommer att ställa in utgångstiderna för de olika filtyperna. Lägg märke till att bilder cachas längre än HTML, CSS, JS och andra filtyper eftersom bilder vanligtvis förblir desamma.

Därefter kan du lägga till följande kod för att lägga till cache-control-rubriker:

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
 expires 14d;
 add_header Cache-Control "public, no-transform";
}

Den här koden ställer in tiden för när cachen kommer att gå ut. Den talar om för din server att filtyperna ovan inte kommer att ändras på 14 dagar.

Om du vill snabba upp WordPress ännu mer, se till att kolla in vår guide om hur du ökar WordPress hastighet och prestanda.

Vanliga frågor om aktivering av webbläsarcachelagring

Här är några av de vanligaste frågorna om att åtgärda varningen om att utnyttja webbläsarens cachning i WordPress. Dessa svar hjälper dig att bättre förstå webbläsarens cachning och felsöka eventuella problem du kan stöta på.

1. Vad betyder varningen 'utnyttja webbläsarcache'?

Varningen ‘aktivera webbläsarcachelagring’ visas när din WordPress-webbplats inte instruerar besökares webbläsare att lagra filer lokalt för framtida besök. Denna varning visas i verktyg för hastighetstestning som Google PageSpeed Insights och GTmetrix när din webbplats skulle kunna laddas snabbare genom att aktivera webbläsarcachelagring. I grund och botten innebär det att du missar ett enkelt sätt att förbättra din webbplats prestanda.

2. Hur länge ska jag ställa in webbläsarens cache-utgångstider?

För de flesta WordPress-webbplatser rekommenderar vi att bilder ställs in att gå ut efter 1 år, CSS- och JavaScript-filer efter 1 månad och andra statiska filer efter 3-7 dagar. Bilder ändras sällan, så de kan cachas längre, medan CSS- och JS-filer kan uppdateras oftare. Du kan alltid justera dessa tider baserat på hur ofta du uppdaterar din webbplats innehåll och design.

3. Kommer aktivering av webbläsar-cache att bryta min webbplats?

Nej, aktivering av webbläsar-cache kommer inte att bryta din webbplats. Webbläsar-cache påverkar bara hur filer lagras i besökares webbläsare och ändrar inte dina faktiska webbplatsfiler. Vi rekommenderar dock alltid att skapa en säkerhetskopia innan du gör några ändringar på din webbplats, särskilt när du redigerar kod eller .htaccess-filer manuellt.

4. Behöver jag ett cache-plugin om min hosting-leverantör erbjuder cache?

Medan många hosting-leverantörer erbjuder grundläggande cachningsfunktioner, ger ett dedikerat cachningsplugin som WP Rocket vanligtvis mer omfattande optimeringsalternativ. Cachning på servernivå fokuserar ofta på server-sidig cachning, medan plugins som WP Rocket hanterar webbläsarcachning, filkomprimering och andra prestandafunktioner. Du kan använda båda tillsammans för maximal hastighetsfördelar.

5. Varför ser jag fortfarande varningen efter att ha aktiverat webbläsar-cache?

Om du fortfarande ser varningen för att utnyttja webbläsarcache efter att ha aktiverat den, kan det finnas några anledningar: dina cacheinställningar kanske inte är korrekt konfigurerade, ditt CDN kan åsidosätta inställningarna, eller testverktyget kan kontrollera cachade resultat. Försök att rensa din webbplats cache, vänta 24-48 timmar för att ändringar ska spridas och kör sedan hastighetstestet igen.

6. Kan webbläsarcache orsaka problem med webbplatsuppdateringar?

Webbplatsens cachning kan ibland göra att besökare ser inaktuella versioner av din webbplats efter att du har gjort uppdateringar. Detta händer eftersom deras webbläsare laddar den cachade versionen istället för de nya filerna. De flesta cachningsplugins hanterar detta automatiskt genom att rensa cachen när du uppdaterar din webbplats. Om det behövs kan du också be besökare att rensa sin webbläsar-cache eller använda hård uppdatering (Ctrl+F5) för att se den senaste versionen.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt åtgärdar varningen 'Använd webbläsarcache' i WordPress. Du kanske också vill se vår guide om hur du korrekt kör ett hastighetstest för webbplatser och våra experters val av den snabbaste WordPress-hosting för en snabb webbplats.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.