Hjemmeside langsom og forsøger at forbedre det? Du har sandsynligvis set denne advarsel, men er ikke sikker på, hvad det betyder, eller hvordan du løser det ... men vi har fået dig dækket. At udnytte browser-caching er en måde at gøre dit websted hurtigere, men at instruere browseren om at gemme eller "cache" filer i nogen tid, så de ikke behøver at blive downloadet igen ved et efterfølgende besøg. Det er alt dette betyder kort sagt.
Men bliv og læs alt om, hvordan du sørger for at gøre dit websted hurtigere ved at rette denne fejl eller advarsel.
I det væsentlige, hvis du ønsker at udnytte browsercache, skal du angive, hvor længe webbrowsere skal opbevare billeder, CSS og Javascript-filer lokalt i klientbrowseren. Ved at bruge disse specifikationer og indstillinger vil brugerens browser bruge mindre data, mens han gennemser dine webstedssider (fordi den skal downloade færre filer). For at udnytte browsercaching betyder WordPress en forbedring af indlæsningshastigheden på dit websted.
Hvis du har kort tid, er dette den nemmeste måde at udnytte browsercaching på WordPress på:
Sådan løses løftestang Browser Caching WordPress Advarsel
- Download pluginet, som kan findes link.
- Gå til Dashboard på din WordPress, og besøg derefter: Dashboard> Plugins> Tilføj nyt
- Søg efter "Udnyt browsercaching", eller klik på Upload plugin, og vælg den fil, du downloadede, og klik på Installer nu
- Aktivér pluginet
- Test dit websted igen for at bekræfte, at de nye indstillinger fungerer korrekt, og advarslen er væk
Ved at implementere disse minimale ændringer vil du se, at din score på sådanne websteder som GTMetrix, Pingdom Tools eller Pagespeed Insights vil stige betydeligt.
Faktisk er dette en af de nemmeste måder at gøre dit WordPress-websted hurtigere.
Det involverer meget lidt indsats overhovedet fra din side og er en af de højt prioriterede opgaver, som anbefales Google for at få dit websted til at indlæse hurtigere. Det anbefales også af websteder som GTMetrix eller Google Pagespeed Insights for at gøre din belastning hurtigere.
Hvad er browsercaching?
Du kan udnytte browser-caching ved at indstille en lang udløbsdato på det statiske indhold på dit websted. Dette gør det muligt for browsere at "udnytte" caching og genbruge disse filer igen og igen uden at skulle downloade dem. Ved at cache disse filer behøver de ikke at blive downloadet igen, så dit websted indlæses hurtigere.
Før vi rent faktisk viser dig, hvordan du implementerer dette, vil vi først diskutere, hvad udnyttelse af browsercaching i WordPress betyder, og hvordan det fungerer!
Når vi har forklaret, hvordan det fungerer, kan du forstå, hvordan det hjælper få dine sider til at indlæses hurtigere.
Når nogen besøger en side, skal browseren i bund og grund downloade alle ressourcer (serveren på det domæne) fra serveren. Disse inkluderer HTML, CSS-filer, JS, tekst, billeder og andre aktiver for at indlæse og vise den aktuelle side.
I stedet for rent faktisk at downloade alt igen og igen, hver gang du besøger en ny side på det samme websted, bruger browseren nu det, der kaldes en webcache. Dette er en funktion, som browsere bruger til at 'midlertidigt gemme' eller 'cache' websideaktiver på enhedens lokale lager. Denne lagring eller disse data kaldes ' Web-cache'eller'HTTP-cache«.
Se på dette sjove diagram, der forklarer, hvordan webcaching fungerer:
Vi kan se ovenfor, at første gang brugerenheden (venstre) beder serveren (højre) om billed-/logofilen, bliver anmodningen opfanget af web-caching-mekanismen (som kontrollerer, om den har en kopi af filen). Hvis den ikke har en, henter den den fra serveren. Ved næste besøg henter den den fra sin egen kopi i stedet for at gå til serveren.
Så det smarte ved denne funktion er, at når en bruger besøger det samme websted igen, eller en anden side på det samme domæne, vil browseren bruge den kopi, der i øjeblikket ligger i den midlertidige cache - i stedet for at skulle downloade ressourcerne igen. Browseren vil kun downloade alt, der er anderledes.
Da mange websteder kun har minimale ændringer fra side til side og mellem besøg, gjorde genbrug af cachekopien det muligt for siden at indlæse meget hurtigere.
Dette hjælper også med at reducere båndbreddeforbruget på din webserver og reducerer belastningen på serveren. Du er muligvis også stødt på en advarsel, når du har optimeret dine sider for hastighed.
Pagespeed-advarsel om at udnytte browser-caching
Websteder som GTMetrix eller Pagespeed Insights kan vise følgende udnytte browser caching advarsel, som du skal rette, hvis du ikke har aktiveret indstillingerne nedenfor.
men dette var faktisk den advarsel, der blev vist i en ældre version af Pagespeed Insights. Den nyere advarsel ser lidt sådan ud:
Betjen statiske aktiver med en effektiv cachepolitik
Hvad betyder det egentlig?
Selvom den ovenfor beskrevne funktion er fremragende i teorien, vil de fleste websteder som standard "markere" indholdet som værende udløbet efter 8 dage eller en kort periode. Det betyder, at hvis en bruger besøger dit domæne igen efter 1 uge, skal de downloade ressourcerne forfra.
Når vi opretter en metode til at udnytte browsercaching, instruerer vi faktisk browseren i at forlænge levetiden eller udløbsdatoen for de ressourcer, der downloades af vores besøgende, og dermed optimere ydeevnen.
Ved at forlænge cachens levetid (eller hvor lang tid det tager for en fil at blive gammel), sikrer du, at dine besøgende ikke behøver at vente på at downloade de samme ting, hver gang de besøger dit websted.
Dette involverer meget få ændringer og er ikke særlig kompliceret at implementere - og du finder den nøjagtige syntaks nedenfor.
Hvad ændringen rent faktisk gør, er at sætte udløbsdatoer for indhold ved at tilføje Cache-kontrol-headere og ETag-overskrifter i HTTP-headere. Cache-Control-headeren angiver cacheperioden for en bestemt fil eller filtype. ETag'en bruges derefter til at verificere eventuelle ændringer, der findes (eller ikke findes) mellem de cachelagrede og de anmodede ressourcer.
Indstillingen giver dig typisk mulighed for at angive perioden i dage, måneder eller år for at gemme cachefilerne lokalt. Hvis du forventer at ændre ressourcerne med jævne mellemrum, er det selvfølgelig tilrådeligt at indstille udløbsdatoer med en hyppighed, der omtrent svarer til den periode, hvor du forventer at ændre disse.
Hvis du i øvrigt gerne vil gøre din WordPress hurtig, findes der et par plugins, f.eks. denne hvilket kan gøre en reel forskel i præstationen på få minutter (med minimal eller ingen indsats).
Ikke klar til at bruge et plugin lige nu? Læs videre...
Hvis du er interesseret i at gøre din hjemmeside hurtigere, kan vi varmt anbefale at læse vores artikel: [25 handlinger] Sæt fart på WordPress: Få en superhurtig hjemmeside i dag - En komplet guide.
1. Brug af .htaccess-fil
Her er de præcise instruktioner, du skal udføre:
- Få adgang til CPanel på din hostingkonto
- Gå til hjemmesidens rodmappe
- Åbn .htaccess-filen med din fileditor. Hvis du ikke finder filen, skal du kontrollere, om du kan se skjulte filer (.htaccess-filen er som standard skjult).
- Tilføj følgende ændringer nederst i filen
- Tilføj udløbsheadere med lange udløbstider
- Tilføj cache-control-headere
- Fjern ETag-overskrifter
- Foretag ikke andre ændringer
- Gem filen
- Kør testen igen
For at indstille udløbstiden for ressourcer som billeder og CSS-filer kræves der en lille ændring af din .htaccess-fil. Denne findes i roden af din hostingserver. Du kan ændre udløbsheaderværdierne for at forbedre ydeevnen.
Indstil disse værdier, så længe det giver mening for dit websted - 1 måned er typisk nok.
#Tilpas udløber caching start - juster perioden efter dine behov FileETag MTime Størrelse AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript ExpiresActive On ExpiresByType text/html "adgang 600 sekunder" ExpiresByType application/xhtml+xml "adgang 600 sekunder" ExpiresByType text/css "adgang 1 måned" ExpiresByType text/javascript "adgang 1 måned" ExpiresByType text/x-javascript "adgang 1 måned" ExpiresByType application/javascript "adgang 1 måned" ExpiresByType application/x-javascript "adgang 1 måned" ExpiresByType application/x-shockwave-flash "adgang 1 måned" ExpiresByType application/pdf "adgang 1 måned" ExpiresByType image/x-icon "adgang 1 år" ExpiresByType image/jpg "adgang 1 år" ExpiresByType image/jpeg "adgang 1 år" ExpiresByType image/png "adgang 1 år" ExpiresByType image/gif "adgang 1 år" ExpiresDefault "adgang 1 måned"
#Udløber caching slut
Tror du ikke, du er tryg ved at lave disse ændringer selv?
Hvis du ikke er sikker på at foretage en sådan ændring, kan du vælge at gøre disse via en billig opgave på Fiverr.
Find de bedste hjemmesidehastighedsoptimeringsjobs på Fiverr
Med ovenstående ændringer indstiller vi aktiver, der opdateres hurtigt, såsom HTML-koden på din side, til at udløbe efter 600 sekunder (dette skyldes, at HTML typisk ændres oftere). Vi ændrer også ting som CSS og Javascript til kun at udløbe én gang om måneden (sådanne filer ændres kun, hvis du foretager ændringer i din skabelon eller plugins).
Det betyder, at hvis din besøgende besøger siden igen inden for en måned, behøver de ikke at downloade dine CSS- og JS-aktiver igen. Hvis du ved, at du sjældent udfører denne type ændringer på dit websted, kan du sætte værdien højere, til 1 år, svarende til headeren for jpeg og png udløber.
Dette er den mest effektive måde at udnytte browsercaching til WordPress eller andre websteder, der bruger en .htaccess-fil.
Indstil billedfiler til en lang udløbstid
Som du også kan se i vores eksempel ovenfor, er vores billeder kun sat til at udløbe én gang om året. Nogle gange kan dette være for længe, så en måned er typisk også godt nok. Man skal finde ud af, hvad der giver mening for ens hjemmeside.
Dette sikrer, at de største medier, der tager længst tid at downloade, gemmes på de besøgendes maskine og ikke skal downloades igen før næste år. På grund af denne ændring i din .htaccess-fil bruger du leverage browser caching korrekt i WordPress - billederne downloades ikke igen i et helt år.
Dette gør oplevelsen for en tilbagevendende kunde meget mere positiv - fordi det tager mindre tid at indlæse hver side. De filer, der er cachelagret, genbruges nu.
Når du har angivet udløbsdatoerne, er det vigtigt også at indstille de korrekte Cache-Control-headere, så ovenstående indstilling rent faktisk fungerer korrekt. Dette er en anden indstilling i .htaccess-filen, som du kan finde nedenfor.
Tilføj cache-control-headere
Følgende indstilling skal også tilføjes til filen for at indstille cache-control-headerne som beskrevet ovenfor.
# BEGIN Cache-Control-headere
Header-tilføjelse Cache-Control "offentlig" Header-tilføjelse Cache-Control "offentlig" Header-tilføjelse Cache-Control "privat" Header-tilføjelse Cache-Control "privat, skal genvalideres"
Vi har allerede fastsat udløbsdatoerne, så vi behøver ikke at gentage dem her.
Fjern ETag-headere for websteder med flere servere eller CDN'er
Det sidste, vi skal gøre, er at (fjern)indstillingen for Etags.
I bund og grund er dette kun vigtigt hvis du bruger et CDN at betjene nogle af dine ressourcer. ETags er headere, der typisk er konstrueret ved hjælp af attributter, der gør dem unikke for hver specifik maskine, der er vært for et websted (teknisk årsag - den bruger en MD5 genereret af serveren, hvilket gør den unik for den server, der genererer den).
Hvis et websted bruger et CDN eller flere servere til at vise sine sider, er der INGEN garanti for, at den samme server vil blive brugt - derfor vil tags ikke matche, når en browser henter den originale komponent fra én server og senere forsøger at validere den komponent på en anden server.
Derfor er det bedst at FJERN INDSTILLINGEN, hvis du bruger flere servere eller et CDN til at hoste dit websted. Dette gør det muligt for Cache-control-headerne faktisk at kontrollere cachingen i stedet for ETags. Da vi har tilføjet indstillinger til at kontrollere cachingen via Cache-Control-headerne, er ETags ikke længere nødvendige - så vi slår dem fra.
Tilføj dette til din .htaccess-fil for at fjerne dem.
# Disable ETags
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
FileETag NoneHvis du har brug for at læse mere om, hvad Etags gør, kan du finde flere detaljer og læse om dem i denne artikel: https://en.wikipedia.org/wiki/HTTP_ETag
2. Brug af plugins
At justere og eksperimentere med .htaccess-filen kan faktisk ødelægge dit websted. Hvis du laver en lille fejl, vil din webserver ikke være i stand til at analysere den og begynde at kaste tomme sider, eller send fejl 500, og siden vil være død!
Så hvis du er modvillig til at gøre dette, kan du installere et simpelt plugin, der tager sig af at håndtere alt dette.
Der findes selvfølgelig masser af andre plugins, der kan gøre dette. De fleste plugins, der har til formål at gøre dine sider hurtigere, vil udføre de fleste af disse indstillinger i baggrunden.
Udover at håndtere alle indstillingerne for at udnytte browsercaching i WordPress, vil disse i bund og grund være i stand til at udføre en række andre caching-optimeringer, såsom at oprette midlertidige kopier (filcaching), databaseoptimeringer, Memcache og andre optimeringer, der gør dit websted hurtigere generelt.
Disse ville omfatte plugins som f.eks. WPRocket, WP hurtigeste cacheog W3 Total Cache og premium caching-plugins.
Lad os se på et par af disse plugins.
Plugin af Rinku Yadav
Dette er den enkleste af dem alle, den gør intet andet end at løse problemet med browser caching i WordPress.
- Download pluginet, som kan findes link..
- Gå til Dashboard på din WordPress, og besøg derefter: Dashboard> Plugins> Tilføj nyt.
- Søg efter "Udnyt browsercaching", eller klik på Upload plugin, og søg efter den fil, du lige har downloadet.
- Klik på Installer nu.
- Aktivér plugin'et, og så er du færdig!
- Du bør nu teste dit websted igen for at bekræfte, at de nye indstillinger fungerer korrekt, og at advarslen er væk.
Hvis du leder efter et produkt, der gør meget mere for at gøre dit websted hurtigere, vil vi varmt anbefale at se på resten af de plugins, som vi nævner nedenfor.
WP Rocket
Dette er et af de hurtigste og mest anbefalede plugins til WordPress, som kan håndtere alle dine hastighedsoptimeringer med et par klik. I bund og grund udfører dette hastighedsoptimeringer som f.eks.
- statisk filkomprimering (GZip) - for at gøre den samlede størrelse af data, der skal leveres, mindre (vi har en komplet vejledning om hvordan man aktiverer GZip-komprimering i WordPress her)
- muliggør en filcache (inklusive cache-forindlæsning) - for at lægge mindre pres på serveren (hentning af en forudrenderet kopi af hver side)
- Google Fonts-optimering - for at sikre, at tungere skrifttyper indlæses hurtigt),
- doven lastning - således at billeder kun indlæses, når brugeren ruller ned til den del af siden, hvor billedet skal vises
- Minimificering og kombination - formindskelse af størrelsen og kombination af tekstmateriale for at levere det hurtigere til slutbrugeren
- Udskyd JS-indlæsning - således at siden gengives hurtigt i stedet for at vente på, at alle aktiver downloades. Dette er noget, vi har dækket CollectiveRay.
- Integrerer og aktiverer et CDN - således at dine tungere medier leveres hurtigere
- Forhentning af DNS - for at reducere den tid det tager at finde kilden til tredjepartsindhold
Alt ovenstående lyder måske som vrøvl for alle, der ikke er involveret i infrastrukturoptimeringer, men i virkeligheden er det sådan. alt det, du skal gøre for at få din hjemmeside til at indlæse hurtigere.
Det fantastiske er, at med WP Rocket behøver du ikke at gøre det tunge arbejde og konfigurationen - det hele gøres for dig! Vi anbefaler på det kraftigste at prøve dette plugin, som er blevet vurderet som den bedste måde at gøre din hjemmeside hurtigere på.
W3 Total Cache
Dette er en af de mest populære caching-plugins nogensinde. Det har eksisteret i ret lang tid og har haft masser af tid til at modnes rigtig godt til at integrere de fleste af de funktioner, man ville forvente af et caching-plugin.
Problemet er dette. Jeg selv, en der har arbejdet med WordPress og webdesign i meget lang tid, og det er en så frustrerende oplevelse at arbejde med det. Pluginnet er ikke ligetil at sætte op, og man skal virkelig forstå det og kende det godt for at kunne få det op at køre ordentligt.
Hvis du leder efter en god måde at udnytte browser-caching i WordPress ved hjælp af et plugin, vil vi varmt anbefale WPRocket ovenfor i modsætning til W3Total Cache.
3. Udnyt browsercaching i Nginx
Hvis dit websted rent faktisk bruger Nginx som server, skal du bruge en anden kode, da Nginx ikke har en .htaccess-fil. Det er dog stadig relativt nemt at implementere dette, da du blot skal foretage et par redigeringer i serverens conf-fil.
Du skal tilføje nedenstående kode i en eksisterende serverblok i din conf-fil. Dette vil typisk være i /etc/nginx/sites-enabled/default
server { listen 80; server_name localhost; placering / { root /usr/share/nginx/html; index index.html index.htm; } placering ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { udløber om 365 dage; } placering ~* \.(pdf)$ { udløber om 30 dage; } }
Tilføj cache-control-headere til Nginx
placering ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { udløber om 90 dage; add_header Cache-Control "offentlig, ingen transformation"; }
Som du kan udlede af koden ovenfor, sætter vi udløbsdatoen for billedfiler til 1 år eller 365 dage, mens vi sætter PDF'er til at udløbe efter 30 dage. Du kan tilføje flere filtypenavne for at tilpasse udløbsdatoen, så den er anderledes for andre filtyper.
Alle filtyper, der tilføjes, vil blive cachelagret i overensstemmelse hermed.
4. Sådan cacher du tredjepartsressourcer
Selvom det er forholdsvis nemt at anvende ovenstående indstilling, vil du opdage, at selv efter du har udført ovenstående ændringer, vil du stadig få denne besked i hastighedstestværktøjer til websteder og Google Pagespeed Insights.
Dette skyldes, at de fleste tredjepartsscripts og -tjenester ikke angiver en lang udløbstid - af forskellige årsager.
Du har desværre ingen kontrol over disse scripts, så vi anbefaler kraftigt, at du bruger MINIMUM tredjepartsscripts. Hvis du kan undvære scriptet, så fjern det fra dit websted. Ved at vælge at inkludere det, vil det trække indlæsningstiden for dine sider ned.
5. Angiv en cachevalidator
Dette er endnu en advarsel, der ofte vises af GTMetrix, typisk fra tredjepartsscripts. I bund og grund er dette det samme problem, som vi lige har beskrevet i det forrige afsnit, hvor visse scripts ikke angiver hverken en ETag-header eller en Last-Modified-header som beskrevet.
Desværre er der ikke meget, du kan gøre for at løse dette problem, hvis disse specifikke fejl kommer fra domæner, der er uden for din kontrol, såsom Facebook, eller i tilfældet med billedet nedenfor, Sumo - så der er intet, du kan rette.
Din eneste løsning i dette tilfælde ville være at fjerne disse scripts helt fra dit domæne, hvis du vil være sikker på, at denne advarsel ikke vises.
Ofte stillede spørgsmål
Hvordan løser man udnyttelse af browser caching?
Den nemmeste måde at udnytte browser-caching på er at installere et plugin, der giver dig mulighed for at angive cache-levetiden for forskellige typer statisk indhold. En alternativ, men simpel metode er at angive cache-tiden i .htaccess-filen på dit websted. Vi har detaljerede instruktioner om, hvordan du gør dette her.
Hvordan aktiverer jeg cache i WordPress?
For at aktivere cache i WordPress kan du blot installere et plugin, der aktiverer flere niveauer af cache, herunder en cache på serverniveau, en cache på sideniveau og en cache på browserniveau. Vores anbefalede plugin til dette er WP-Rocket, men der er flere alternative valg, som vi nævner i denne artikel, der også vil få dit websted til at indlæse hurtigere.
Hvordan udnytter jeg browsercaching til tredjepartsscripts?
Du kan ikke ændre browserens cache-værdi for tredjepartsscripts som Facebook eller Google Analytics, da disse er indstillet på serverniveau, og du ikke har nogen kontrol over dem. Din bedste løsning er i dette tilfælde at bruge så få af disse scripts som muligt.
Konklusion
Ovenfor har vi vist dig en række implementeringsmetoder for at sikre, at du kan udnytte browser-caching og sikre, at downloadet indhold genbruges igen og igen. Sørg for at have implementeret dette på dit websted for at forhindre fejlen i at vises i værktøjer, der analyserer dit websteds hastighedsmålinger.
Hvis du føler, at dette er lidt uden for dine egne evner, vil vi anbefale, at du overlader dette til professionelle og installerer et plugin som WP Rocket for at sikre, at du får det maksimale udbytte af dette og masser af andre handlinger, der kan få dit websted til at indlæse hurtigere.