Google PageSpeed Insights er et af flere nyttige værktøjer til måling af webstedets ydeevne. Nogle af dets forslag – som f.eks. advarslen om at udnytte browsercaching – kan dog være forvirrende for uerfarne webstedsejere.
Når du bryder det ned, er caching ikke så svært at forstå. Med nogle få justeringer kan du implementere denne bedste udviklingspraksis på dit websted for at forkorte indlæsningstiderne og forbedre din PageSpeed-score.
I dette indlæg starter vi tingene med en introduktion til advarslen Leverage Browser Caching. Derefter deler vi flere tips til at løse dette problem på dit WordPress-websted.
Lad os springe ud i det!
Foretrækker du video-versionen?
Hvad er advarslen om Leverage Browser Caching?
For at forstå advarslen om Leverage Browser Caching hjælper det at vide lidt om Google PageSpeed Insights. Hvis du er ny på platformen, anbefaler vi, at du læser vores komplette vejledning, Google PageSpeed Insights: Scoring 100/100 med WordPress.
Leverage Browser Caching-advarslen er en af mange “diagnoser”, som Google PageSpeed plejer at returnere som forslag til forbedring af din score som f.eks:
I version 5 af Google PageSpeed Insights blev denne meddelelse erstattet af advarslen “Server statiske aktiver med en effektiv cache-politik”:
På trods af ændringen i sprog og udseende er løsningen på disse advarsler den samme.
Google foreslår, at man bruger browsercaching til at reducere sideindlæsningstiden og forbedre ydeevnen. Kort fortalt er caching, når brugernes browsere gemmer statiske kopier af siderne på dit websted. Ved efterfølgende besøg kan dette indhold så indlæses hurtigere igen, fordi browseren ikke behøver at kontakte dit websteds server for at få adgang til de ønskede ressourcer.
Alle cachede ressourcer skal dog have en bestemt udløbstid. Dette fortæller browsere, når indholdet på dit websted er blevet forældet, så de kan erstatte deres cachede kopi med en opdateret version.
Hvis du ser advarslen “Leverage Browser Caching” i dine resultater af præstationstesten, betyder det sandsynligvis en af to ting:
- Der mangler Cache-Control- eller Expires-headere på dit eller en tredjeparts server på dit websted.
- De nødvendige headere er til stede, men udløbstiden er meget kort og har derfor ikke stor indvirkning på ydeevnen.
Løsningerne på denne advarsel involverer løsning af et eller begge af disse problemer.
Sådan løser du Leverage Browser Caching Advarsel i WordPress (3 Metoder)
Der er et par forskellige måder, du kan gå til at rette Leverage Browser Caching-advarslen i WordPress på, afhængigt af hvad der forårsager den. Her er tre løsninger, du kan prøve.
1. Tilføj Cache-Control- og Expires-headers
Der er to headere, der er relateret til browsercaching: Cache-Control og Expires. Mindst én skal være til stede for at aktivere browser caching for dit websted, da det er sådan, at browsere bestemmer, hvor længe de skal beholde ressourcer, før de opdaterer dem.
En enkel måde at afgøre, om det er dette, der er årsag til advarslen Leverage Browser Caching, er at se på de oplysninger, der er angivet for hver ressource. I Google PageSpeed Insights Version 5 vil du i stedet se “None” anført under Cache TTL:
Som en praktisk reference viste tidligere versioner af Google PageSpeed Insights en “expiration not specified”-meddelelse, når overskrifterne manglede:
Mens Cache-Control headeren aktiverer caching på klientsiden og fastsætter den maksimale alder for en ressource, bruges Expires-headeren til at angive et tidspunkt, hvor ressourcen ikke længere er gyldig.
Du behøver ikke nødvendigvis at tilføje begge dele, da det kan være overflødigt. Cache-Control er nyere og er normalt den anbefalede metode. Nogle værktøjer til webpræstationer, f.eks. GTmetrix, kontrollerer dog stadig Expires-headere.
Hvis du hoster hos Kinsta, behøver du ikke at bekymre dig om at indstille disse headere. Alle vores Nginx-servere indeholder dem allerede. De, der bruger et Content Delivery Network (CDN ), bør også allerede have disse headere anvendt.
Hvis du bruger en anden hostingudbyder, skal du sørge for at tage en backup af dit websted, før du følger nedenstående trin, som redigering .htaccess kan ødelægge dit websted, hvis du ikke er forsigtig.
Sådan tilføjes Cache-Control-headers i Nginx
For at tilføje Cache-Control-headers i Nginx kan du tilføje følgende til din servers konfigurationsfil:
location ~* .(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}
Dette fortæller din server, at de angivne filtyper ikke vil blive ændret i mindst 30 dage. Den vil gemme de relevante filer i denne periode, før den opdaterer dem.
Sådan tilføjes Cache-Control-headers i Apache
Hvis du i stedet har en Apache-server, kan du tilføje følgende kode til din .htaccess fil:
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>
Dette uddrag skal tilføjes før “#BEGIN WordPress” eller efter “#END WordPress”. I dette tilfælde er cachen indstillet til at udløbe efter 84.600 sekunder.
Sådan tilføjes Expires Headers i Nginx
Du kan tilføje Expires-headers i Nginx ved at tilføje følgende til din serverblok. I dette eksempel kan du se, hvordan du kan angive forskellige udløbstider baseret på filtyper:
location ~* .(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* .(pdf|css|html|js|swf)$ {
expires 2d;
}Sådan tilføjes Expires-headers i Apache
Du kan tilføje Expires-headere i Apache ved at tilføje følgende til 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 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##Du kan derefter kontrollere dine headers ved at køre dit websted gennem Google PageSpeed Insights igen og se, om advarslen fortsætter.
2. Udnyt browser caching til Google Analytics
Ironisk nok er Google Analytics nogle gange årsagen til advarslen Leverage Browser Caching og en ufuldkommen PageSpeed-score. Det skyldes, at den har en lav cacheudløbstid på kun to timer. Dette plejede at være den gamle advarsel:
I PageSpeed Insights Version 5 resulterer dette problem ikke længere i en advarsel, men Google Analytics kan stadig være opført som en ikke-optimeret ressource:
Du kan ikke ændre dette med Cache-Control- eller Expires headers, fordi ressourcen ikke er på din server. Der er dog en måde at udnytte browser caching til Google Analytics på ved at hoste scriptet lokalt.
Du skal dog være opmærksom på, at denne metode ikke understøttes af Google.
Udnyttelse af browser caching til Google Analytics med Complete Analytics Optimization Suite
Hvis du ønsker at løse ovenstående problem, er der et gratis plugin kaldet Complete Analytics Optimization Suite (CAOS) udviklet af Daan van den Bergh, som du kan bruge:
Du kan downloade CAOS fra WordPress Plugin Directory eller ved at søge efter det under Plugins > Tilføj nyt i dit WordPress dashboard.
Nogle yderligere fordele ved at hoste dit analysescript lokalt omfatter, at det reducerer dine eksterne HTTP-forespørgsler til Google fra to til én, og det giver dig mulighed for at få fuld kontrol over caching af filen. Det betyder, at du kan bruge cache-headers, som vi viste dig tidligere.
For at komme i gang skal du installere pluginet og derefter indtaste dit Google Analytics Tracking ID. Pluginet tilføjer den nødvendige sporingskode til Google Analytics til dit WordPress-websted, downloader og gemmer analytics.js-filen til din server og holder den opdateret ved hjælp af et planlagt script i wp_cron().
Vi anbefaler også at indstille den til at blive indlæst i footeren:
Husk på, at CAOS ikke vil fungere med andre Google Analytics WordPress-plugins.
Udnyttelse af browser caching til Google Analytics med WP-Rocket
Alternativt kan du bruge WordPress caching plugin WP-Rocket til at opnå det samme mål:
Dette plugin’s Google Tracking Add-on giver dig mulighed for at hoste dit analysescript lokalt med et klik på en knap. Du skal blot slå status til under WP-Rocket > Add-ons.
WP-Rocket og dets add-on er kompatible med andre Google Analytics-plugins. Som et premium-værktøj har det en pris med licenser, der starter på 49 USD pr. år.
3. Minimer din brug af tredjeparts scripts
Nogle gange kan Google Analytics-scriptet forårsage problemer for din Google PageSpeed Insights-score, fordi det er hostet på Googles server, og du har derfor ikke kontrol over cachen.
Det samme gælder for andre scripts fra tredjeparter. Hvis du administrerer en virksomhed via dit WordPress-websted, har du højst sandsynligt yderligere scripts fra tredjeparter, der kører for at spore konverteringer, A/B-tests og meget mere.
Dette kan omfatte scripts som Facebook-konverterings-pixels, Crazy Egg, Hotjar og andre. Medmindre du kan finde en måde at hoste disse scripts lokalt, er der desværre ikke meget, du kan gøre for at få kontrol over dem, medmindre du kan finde en måde at hoste disse scripts lokalt.
En mulighed for Facebook Pixel-brugere er at bruge endnu et WP-Rocket add-on. Ideelt set vil du gerne minimere din brug af scripts fra tredjeparter, hvis du ønsker at forbedre din Google PageSpeed-score. Så det kan være værd at foretage en revision af dit websted og fjerne alle scripts, der ikke er nødvendige for at køre det.
Opsummering
Selvom Google PageSpeed Insights ikke er en endelig måling af dit websteds ydeevne, er det stadig en fornuftig indikator for, hvordan det kører. Hvis du forbedrer din score ved at løse de advarsler, der vises under “Server statiske aktiver med en effektiv cachepolitik”, kan du gøre dit websted hurtigere og mere anvendeligt for besøgende.
Hvis du ser denne advarsel i Google PageSpeed Insights, kan du løse den ved at:
- Tilføjelse af Cache-Control- eller Expires headers.
- Udnyttelse af browser caching til Google Analytics.
- Minimering af din brug af scripts fra tredjeparter.
Har du andre tips til at rette op på den hævede browser caching? Lad os vide det i kommentarfeltet nedenfor!
Jon is the Chief Operating Officer at Kinsta and is involved with Kinsta's sales, customer service, and technical support teams on a daily basis. Jon's a family man. So when he isn't feverishly tapping the keys of his laptop he's usually helping one of his kids fix a bike or setting up Netflix for an impatient preschooler.
Skriv et svar