Hur man lägger till utgångsrubriker i WordPress (2 metoder)

Ett av de vanliga misstagen vi ser att ägare av WordPress-webbplatser gör är att förbise webbläsarcachelagring. Din webbplats kan tappa besökare på grund av långsamma sidladdningstider. Även efter att ha optimerat bilder och uppgraderat hosting kan din webbplats fortfarande kännas långsam tills du lägger till utgångsrubriker.

"Expires headers" fungerar genom att tala om för besökares webbläsare att lagra din webbplats filer, som bilder, CSS och JavaScript, under en viss tid. Detta innebär att när någon besöker flera sidor på din webbplats behöver deras webbläsare inte ladda ner allt igen.

Resultatet är betydligt snabbare laddningstider för återkommande besökare, vilket förbättrar användarupplevelsen och kan öka dina sökrankningar.

Vi har implementerat expires-headers på många WordPress-sajter och förfinat processen till två pålitliga metoder som fungerar på alla hosting-uppsättningar. Oavsett om du är bekväm med att redigera kod eller föredrar en plugin-lösning, visar vi dig hur du lägger till expires-headers på din WordPress-sajt.

Hur används expires-rubriker i WordPress?

Första gången någon besöker en webbsida på din WordPress-webbplats laddas alla filer en efter en. Alla dessa HTTP-förfrågningar mellan webbläsaren och din WordPress-värdserver ökar laddningstiden för webbsidan.

Webbcache lagrar vissa eller alla dessa filer på besökarens dator. Det innebär att nästa gång de besöker sidan kan filerna laddas från deras egen dator, vilket ökar din WordPress-webbplats prestanda och förbättrar användarupplevelsen.

Nu kanske du undrar hur webbläsarna vet vilka filer de ska spara och hur länge de ska behålla dem. Det är där 'expires headers' kommer in.

Reglerna om vilka filer som ska sparas och hur länge de ska sparas ställs in med antingen expires-headers eller cache-control-headers. I den här artikeln kommer vi att fokusera på expires-headers eftersom de är enklare att ställa in för de flesta användare.

Utgångsrubriker (Expires headers) ställer in ett utgångsdatum för varje typ av fil som lagras i webbläsarens cache. Efter det datumet laddas filerna om från din server för att ge besökarna den senaste versionen av sidan.

Vi kommer att visa dig hur du lägger till expires-headers med två olika metoder. Den första metoden är enklare och rekommenderas för de flesta användare. Du kan klicka på länkarna nedan för att hoppa till din föredragna sektion:

1. Lägg till Expires Headers med WP Rocket WordPress Plugin
2. Lägg till Expires Headers i WordPress med kod
3. Vanliga frågor om utgångsrubriker i WordPress
4. Videohandledning

Metod 1: Lägg till Expires Headers med WP Rocket WordPress Plugin

WP Rocket är det mest nybörjarvänliga WordPress-prestanda-plugin på marknaden. När det är aktiverat fungerar det omedelbart för att förbättra din webbplats hastighet utan att behöva krångla med komplicerade konfigurationsinställningar som många andra cache-plugins.

WP Rocket är ett premium-plugin, men det bästa är att alla funktioner ingår i deras lägsta plan.

Det första du behöver göra är att installera och aktivera WP Rocket-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

När WP Rocket har installerats och aktiverats kommer det automatiskt att aktivera webbläsarcachelagring. Som standard lägger det till expires-huvuden och cache-control-huvuden med de bästa inställningarna för att snabba upp din WordPress-webbplats.

Det är allt du behöver göra. Om du vill lära dig mer om pluginet, se vår guide om hur man korrekt installerar och konfigurerar WP Rocket i WordPress.

Om du föredrar att använda ett gratis cache-plugin för att lägga till expires-headers på din webbplats, rekommenderar vi att du tittar på W3 Total Cache.

W3 Total Cache erbjuder några av samma funktioner som WP Rocket, men det är inte lika nybörjarvänligt. Det erbjuder inte heller alla funktioner som du får i ett allt-i-ett-prestandatillägg som WP Rocket. Du måste manuellt aktivera expires-huvuden eftersom det inte aktiverar dem automatiskt.

Metod 2: Lägg till Expires Headers i WordPress med kod

Den andra metoden för att lägga till expires-rubriker i WordPress innebär att lägga till ett kodavsnitt i dina WordPress-filer. Vi rekommenderar det inte för nybörjare eftersom ett misstag i koden kan orsaka allvarliga fel och bryta din webbplats.

Innan du gör dessa ändringar rekommenderar vi att du först säkerhetskopierar din WordPress-sajt. För mer information, se vår guide om hur du säkerhetskopierar och återställer din WordPress-sajt.

Med det sagt, låt oss titta på hur man lägger till expires-headers 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. Du behöver gå till din webbplats, högerklicka på sidan och sedan välja 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.

Därefter kan du klicka på ditt domännamn högst upp i kolumnen 'Namn'.

Sedan bör du skrolla ner till avsnittet 'Response Headers' och leta efter ett objekt som heter 'server'.

Detta visar dig vilken webbserver som används. I det här fallet körs webbplatsen på en Nginx-server.

Nu när du vet vilken webbserver din webbplats använder, använd länkarna nedan för att hoppa vidare:

• Hur man lägger till Expires Headers i Apache
• Hur man lägger till Expires Headers i Nginx

Hur man lägger till Expires Headers i Apache

För att lägga till expires-rubriker till en Apache-server måste du lägga till kod i din .htaccess-fil.

För att redigera den här filen måste du ansluta till ditt WordPress-värdkonto med en FTP-klient eller din värds filhanteringsverktyg. Du hittar din .htaccess-fil i din webbplats rotmapp.

Därefter måste du lägga till expires-rubriker för att aktivera webbläsarcachelagring. Detta talar om för webbläsaren hur länge den ska lagra dina webbplatsresurser innan de tas bort.

Du kan lägga till följande kod nära toppen av din .htaccess-fil:

## 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 ##

Dessa värden bör fungera bra för de flesta webbplatser, men du kan justera tidsperioderna om dina behov skiljer sig åt.

Lägg märke till att koden ställer in olika cache-utgångsdatum baserat på filtyp. Bilder cache:as längre än HTML, CSS, Javascript och andra filtyper eftersom de vanligtvis förblir desamma.

Hur man lägger till Expires Headers i Nginx

Om du använder en Nginx-server för att hosta din WordPress-blogg, behöver du redigera serverns konfigurationsfil för att lägga till expires headers.

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:

location ~* \.(jpg|jpeg|gif|png|svg)$ {
  expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
  expires 3d;
}

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

Vanliga frågor om utgångsrubriker i WordPress

Nedan följer några av de vanligaste frågorna vi får om implementering av expires-headers på WordPress-sajter. Dessa bör hjälpa till att klargöra eventuella funderingar du kan ha kring processen.

1. Vad exakt är expires headers och varför behöver jag dem?

Expires-headers är instruktioner som talar om för webbläsare hur länge de ska lagra (cache:a) din webbplats filer lokalt på en besökares dator. När någon besöker din webbplats laddas filer som bilder, CSS och JavaScript ner och lagras tillfälligt. Med expires-headers behöver återkommande besökare inte ladda ner dessa filer igen förrän de går ut, vilket snabbar upp din webbplats laddningstider.

2. Kommer tillägg av expires-headers att bryta min WordPress-sajt?

När expires-rubriker implementeras korrekt kommer de inte att skada din webbplats. Men om du använder den manuella kodmetoden och gör ett misstag i din .htaccess-fil kan det orsaka problem. Det är därför vi alltid rekommenderar att du säkerhetskopierar din webbplats innan du gör några ändringar och använder ett plugin som WP Rocket för nybörjare, eftersom det hanterar allt automatiskt utan risk.

3. Hur länge ska jag ställa in mina expires-huvuden för olika filtyper?

Vi rekommenderar att ställa in längre utgångstider för filer som sällan ändras, som bilder (1 år), och kortare tider för filer som uppdateras oftare, som CSS och JavaScript (1 månad). HTML-filer bör ha de kortaste cache-tiderna (några dagar) eftersom ditt innehåll ändras regelbundet. Kodexemplen i vår artikel använder dessa beprövade tidsramar som fungerar bra för de flesta WordPress-webbplatser.

4. Kan jag använda expires-rubriker med någon WordPress-värdleverantör?

Ja, expires-rubriker fungerar med de flesta värdleverantörer, men implementeringsmetoden beror på din servertyp. De flesta delade värdtjänster använder Apache-servrar, vilket innebär att du lägger till kod i din .htaccess-fil. Vissa värdar använder Nginx-servrar, vilket kräver redigering av serverkonfigurationsfilen. Om du är osäker på din servertyp visar vi dig hur du kontrollerar detta i artikeln, eller så kan du kontakta din värdleverantör för hjälp.

5. Behöver jag expires-headers om jag redan använder en CDN?

Medan CDN (Content Delivery Networks) hjälper till att snabba upp din webbplats genom att leverera filer från platser närmare dina besökare, ger expires-huvuden fortfarande ytterligare fördelar. De fungerar tillsammans med CDN för att ytterligare minska serverförfrågningar och förbättra laddningstiderna.

Många CDN-tjänster har också sina egna cachningsregler, men att ställa in expires-rubriker på din ursprungsserver säkerställer konsekvent cachningsbeteende i alla scenarier.

6. Hur kan jag testa om mina expires-rubriker fungerar korrekt?

Du kan testa dina expires headers med onlineverktyg som GTmetrix, Google PageSpeed Insights eller Pingdom. Dessa verktyg analyserar din webbplats och visar om webbläsarcache är korrekt konfigurerad. Du kan också använda din webbläsares utvecklarverktyg för att kontrollera svarsrubrikerna och se om expires- eller cache-control-rubrikerna skickas med dina filer.

Videohandledning

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du lägger till expires-rubriker i WordPress. Du kanske också vill se vår guide om hur du enkelt åtgärdar varningen 'Leverage Browser Caching' i WordPress eller vårt experttips om de bästa WordPress CDN-tjänsterna.

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.