Sådan udnyttes browsercaching WordPress med eller uden et plugin [5 måder]

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 skal du angive, hvor længe webbrowsere skal gemme billeder, CSS og Javascript -filer lokalt i klientbrowseren, hvis du vil udnytte browsercaching. Ved hjælp af disse specifikationer og indstillinger bruger brugerens browser less data, mens du gennemser dine websides sider (fordi det skal downloade færre filer). At udnytte browser caching WordPress betyder 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

1. Download pluginet, som kan findes her
2. Gå til Dashboard på din WordPress, og besøg derefter: Dashboard> Plugins> Tilføj nyt
3. Søg efter "Udnyt browsercaching", eller klik på Upload plugin, og vælg den fil, du downloadede, og klik på Installer nu
4. Aktivér pluginet
5. 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 browser caching?

Du kan udnytte browserens caching gennem processen med at indstille en lang udløbsdato på det statiske indhold på dit websted. Dette gør det muligt for browsere at "udnytte" cache og genbruge disse filer igen og igen uden at skulle downloade dem. Ved at cache disse filer behøver de ikke downloades igen, så dit websted er hurtigere at indlæse.

Hvis du hellere vil se dette som en video, har vi for nylig uploadet denne artikel som en YouTube-video, så tjek den nedenfor:

Før vi faktisk viser dig, hvordan du implementerer dette, skal vi først diskutere, hvad gearing 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æse hurtigere. 

I det væsentlige, når nogen besøger en side, skal browseren downloade alle ressourceserveren på dette domæne fra serveren. Disse inkluderer HTML, CSS-fil, JS, tekst, billeder og andre aktiver) for at indlæse og vise den aktuelle side.

Nu, i stedet for rent faktisk at downloade alt igen og igen hver gang du besøger en anden side på det samme sted, bruger browseren det, der kaldes en webcache. Dette er en funktion, der bruges af browsere til at 'midlertidigt gemme' eller 'cache' websides aktiver på enhedens lokale lager. Denne lagring eller 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 (til venstre) beder serveren (til højre) om billeder / logo-filen, bliver anmodningen opfanget af webcaching-mekanismen (som kontrollerer, om den har en kopi af den fil). Hvis den ikke gør det, henter den den fra serveren. Ved det næste besøg får det det fra sin egen kopi i stedet for at gå til serveren.

Så skønheden 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 findes i den midlertidige cache - snarere end at skulle downloade alle ressourcerne forfra. Browseren downloader kun alt, hvad der er anderledes.

Da mange websteder kun har minimale ændringer fra en side til en anden og mellem besøgene, genbruger cachekopien det muligt for siden at indlæses meget meget hurtigere.

Dette hjælper også med at reducere båndbreddeforbruget fra din webserver og reducerer også belastningen på serveren. Du har muligvis også stødt på en advarsel, når du optimerer dine sider til hastighed.

Pagespeed-advarsel til udnyttelse af caching i browseren

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 advarslen vist i en ældre version af Pagespeed Insights. Den nyere advarsel ser lidt sådan ud:

Server statiske aktiver med en effektiv cache-politik

Hvad betyder det egentlig?

Selvom den ovenfor beskrevne funktion er god i teorien, vil de fleste websteder som standard "markere" indholdet, der udløber efter 8 dage eller en kort periode. Hvad dette betyder er, at hvis en bruger besøger dit domæne igen efter 1 uge, skal de downloade ressourcerne igen.

Når vi opretter en metode til at udnytte browserens caching, er det, vi rent faktisk gør, at instruere browseren om at forlænge levetiden eller udløbsdatoen for de ressourcer, som vores besøgende downloader og dermed optimere ydeevnen.

Ved at forlænge cacheens levetid (eller hvor lang tid det tager for en fil at blive gammel), sørger du for, at dine besøgende ikke behøver at vente med at downloade de samme ting, hver gang de besøger dit websted.

Dette involverer meget små ændringer og er ikke særlig kompliceret at implementere - og du finder den nøjagtige syntaks nedenfor.

Hvad ændringen faktisk gør, er at indstille udløbsdatoer for indhold ved at tilføje Overskrifter til cache-kontrol og ETag overskrifter i HTTP-overskrifter. Cache-Control-overskriften erklærer cacheperioden for en bestemt fil eller filtype. ETag bruges derefter til at verificere eventuelle ændringer, der findes (eller ej) mellem de cachelagrede og anmodede ressourcer.

Indstillingen giver dig typisk mulighed for at specificere perioden i dage, måneder eller år til lagring af cachefiler lokalt. Selvfølgelig, hvis du forventer at ændre ressourcerne så ofte, anbefales det at indstille udløbsdatoer med en frekvens, der svarer til den periode, hvor du forventer at ændre disse. 

I øvrigt, hvis du ønsker at gøre dit WordPress hurtigt, er der et par plugins som f.eks denne hvilket kan gøre en reel forskel i ydeevne på få minutter (med lidt til nul indsats). 

Er du ikke klar til at bruge et plugin indtil videre? Læs videre...

Hvis du er interesseret i at gøre dit websted hurtigere - vil vi varmt anbefale at besøge vores artikel: [25 handlinger] Fremskynd WordPress: Få et superhurtigt websted i dag - en komplet guide.

1. Brug af .htaccess-filen

Her er de nøjagtige instruktioner, du skal udføre:

1. Få adgang til CPanel på din hostingkonto
2. Gå til rodmappen på webstedet
3. Åbn .htaccess-filen med din File Editor. Hvis du ikke finder filen, skal du kontrollere, om du kan se skjulte filer (.htaccess-filen er som standard skjult)
4. Tilføj følgende redigeringer i bunden af ​​filen
5. Tilføj udløbsoverskrifter med lange udløbstider
6. Tilføj Cache-Control-overskrifter
7. Frakoblede ETag-overskrifter
8. Foretag ikke andre ændringer
9. Gem filen
10. Kør testen igen

For at indstille udløbstiden for ressourcer såsom billeder og CSS-filer kræves der en lille ændring af din .htaccess-fil. Dette findes i roden på din hosting-server. Du kan ændre værdierne for udløbsoverskrifter for at øge ydeevnen. 

Indstil disse værdier, så længe det giver mening for dit websted - 1 måned er typisk god nok.

#Customize udløber cachestart - juster perioden efter dine behov FileETag MTime Størrelse AddOutputFilterByType DEFLATE-tekst / almindelig tekst / html-tekst / xml-tekst / css-applikation / xml-applikation / xhtml + xml-applikation / rss + xml-applikation / javascript-applikation / x-javascript udløber aktiv Aktiverer udløber applikation / xhtml + xml "adgang 600 sekunder" UdløberByType tekst / css "adgang 600 måned" UdløberByType tekst / javascript "adgang 1 måned" UdløberByType tekst / x-javascript "adgang 1 måned" UdløberByType applikation / javascript "adgang 1 måned" UdløberByType applikation / x-javascript "adgang 1 måned" UdløberByType-applikation / x-shockwave-flash "adgang 1 måned" UdløberByType-applikation / pdf "adgang 1 måned" UdløberByType-billede / x-ikon "adgang 1 år" UdløberByType-billede / jpg "adgang 1 år "UdløberByType-billede / jpeg" adgang 1 år "UdløberByType-billede / png" adgang 1 år "UdløberByType-billede / gif" adgang 1 år "Udløber Standard" adgang 1 måned "
# Udløber cache-ende

Tror du, at du ikke er fortrolig med at foretage 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 koncert på Fiverr. 

Find de mest populære webstedshastighedsoptimeringsoptagelser på Fiverr

Med de ovennævnte ændringer indstiller vi aktiver, der opdateres hurtigt, f.eks. HTML-siden 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 for kun at udløbe en gang om måneden (sådanne filer ændres kun, hvis du foretager ændringer i din skabelon eller plugins).

Dette 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 indstille værdien højere til 1 år svarende til jpeg, png udløber overskrift.

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, indstilles vores billeder kun til at udløbe en gang om året. Nogle gange kan dette være for langt, så en måned er typisk også god nok. Man skal finde ud af, hvad der giver mening for dit websted.

Dette sørger for, at de største medier, der tager mest tid at downloade, holdes på de besøgendes maskine og ikke skal downloades igen før det næste år. På grund af denne ændring i din .htaccess-fil bruger du gearing af browsercaching i WordPress korrekt - billederne downloades ikke igen i et helt år.

Dette gør oplevelsen af ​​en tilbagevendende kunde meget mere positiv - fordi det tager less at indlæse hver side. De filer, der er cachelagret, genbruges nu.

Når du har indstillet udløbsdatoer, er det vigtigt også at indstille de korrekte Cache-Control-overskrifter, 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-overskrifter

Følgende indstilling skal også føjes til filen for at indstille cache-kontroloverskrifterne som beskrevet ovenfor.

# BEGYNG Cache-kontroloverskrifter
Overskrift tilføj Cache-Control "offentlig" Overskrift tilføj Cache-Control "offentlig" Header tilføj Cache-Control "privat" Overskrift tilføj Cache-kontrol "privat, skal omvalideres"

Vi har allerede indstillet udløbsdatoer, så vi ikke behøver at indstille det igen her.

Frakoblede ETag-overskrifter til multiserverwebsteder eller CDN'er

Den sidste ting, som vi skal gøre er (at) indstille Etags-indstillingen.

I det væsentlige er dette kun vigtigt hvis du bruger et CDN for at tjene nogle af dine ressourcer. Etags er overskrifter, 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 grund - den bruger en MD5, der er 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 betjene deres sider, er der INGEN garanti for, at den samme server vil blive brugt - derfor stemmer tags ikke, når en browser henter den originale komponent fra en server og senere forsøger at validere den pågældende komponent på en anden server.

Af denne grund ville det være bedst at UNSET dem, hvis du bruger flere servere eller et CDN til at være vært for dit websted. Dette gør det muligt for Cache-kontroloverskrifterne faktisk at styre caching snarere end ETags. I betragtning af at vi har sat indstillinger til at styre cachen via Cache-Control-overskrifterne, er ETags ikke længere nødvendige - så vi slukker for dem.

Føj dette til din .htaccess-fil for at fjerne dem.

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

Hvis 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 finjustere og lege med .htaccess-filen kan faktisk bryde dit websted. Hvis du laver en lille fejl, vil din webserver ikke være i stand til at analysere den, men begynder at kaste tomme sider, eller kast error 500 og siden vil være død!

Så hvis du er vild med at gøre dette, kan du installere et simpelt plugin, der tager sig af håndtering af alt dette. 

Selvfølgelig er der masser af andre plugins, der er i stand til at gøre dette. De fleste plugins, der er beregnet til at gøre dine sider hurtigere, udfører de fleste af disse indstillinger i baggrunden. 

I det væsentlige udover at håndtere alle indstillingerne for at udnytte browser-caching WordPress, vil disse være i stand til at udføre et antal andre caching-optimeringer, såsom at oprette midlertidige kopier (filcaching), database-optimeringer, Memcache og andre optimeringer, der gør dit websted hurtigere generelt .

Disse vil omfatte plugins som f.eks WPRocket, WP hurtigeste cacheog W3 Total Cache og premium caching plugins. 

Lad os se et par af disse plugins.

Plugin af Rinku Yadav

Dette er den enkleste af dem alle, det gør ikke andet end at løse gearing browser caching i WordPress.

1. Download pluginet, som kan findes her.
2. Gå til Dashboard på din WordPress, og besøg derefter: Dashboard> Plugins> Tilføj nyt.
3. Søg efter "Udnyt browsercaching", eller klik på Upload plugin, og søg i den fil, du lige har downloadet.
4. Klik på Installer nu.
5. Aktivér pluginet, så er du færdig!
6. Du skal nu teste dit websted igen for at bekræfte, at de nye indstillinger fungerer korrekt, og 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 ​​plugins, som vi nævner nedenfor.

WP Rocket

Dette er et af de hurtigste, mest anbefalede plugins til WordPress, som kan håndtere alle dine hastighedsoptimeringer med et par klik. I det væsentlige udfører dette sådanne hastighedsoptimeringer som

• komprimering af statiske filer (GZip) - for at gøre den samlede størrelse af data, der skal leveres mindre (vi har en komplet tutorial om hvordan man aktiverer GZip-komprimering i WordPress her)
• muliggør en fil cache (inklusive cache -forudindlæsning) - at sætte less stress på serveren (henter en forududgivet kopi af hver side)
• Google Fonts optimering - for at sikre, at tungere skrifttyper indlæses hurtigt),
• doven lastning - sådan at billeder kun indlæses, når brugeren ruller ned til det afsnit på en side, hvor billedet er påkrævet
• Minificering og kombination - formindskelse af størrelsen og kombination af tekstaktiver for at levere dem hurtigere til slutbrugeren
• Udskyd JS-indlæsning - sådan at siden gengives hurtigt i stedet for at vente på, at alle aktiver downloades. Det er noget, vi har dækket CollectiveRay.
• Integrerer og aktiverer et CDN - sådan at dit tungere medie leveres hurtigere 
• Forhentning af DNS - for at reducere den tid, det tager at løse kilden til tredjepartsindhold

Alt det ovenstående lyder måske som pladder for enhver, der ikke er involveret i infrastrukturoptimeringer, men i virkeligheden er disse alle de ting, du skal gøre for at få dit websted til at indlæse hurtigere.

Det fantastiske er, at med WP Rocket behøver du ikke gøre det tunge løft og konfigurationen - alt er gjort for dig! Vi anbefaler stærkt at afprøve dette plugin, som er vurderet som den bedste måde at gøre dit websted hurtigere.

Besøg WP Rocket Now  

W3 Total Cache

Dette er en af ​​de mest populære caching-plugins nogensinde. Det har eksisteret i lang tid og har haft meget tid til at modnes meget pænt for at integrere de fleste af de funktioner, man kunne forvente af et caching-plugin.

Problemet er dette. Mig selv, nogen der har eksisteret i WordPress og webdesign i meget lang tid, og det er sådan en frustrerende oplevelse at arbejde med det. Pluginet er ikke ligetil at konfigurere, og du skal virkelig forstå det og kende det godt for at kunne få det til at køre pænt.

Hvis du leder efter en god måde at udnytte browsing-cache i WordPress ved hjælp af et plugin, vil vi stærkt anbefale WPRocket ovenfor i modsætning til W3Total Cache.

3. Udnyt browsercaching i Nginx

Hvis dit websted faktisk bruger Nginx som sin server, skal du bruge en anden kode, fordi Nginx ikke har en .htaccess-fil. Det er dog stadig relativt nemt at implementere dette, fordi du bare skal udføre et par redigeringer i conf-filen på serveren.

Du skal tilføje koden nedenfor inde i en eksisterende serverblok i din conf-fil. Dette vil typisk være i /etc/nginx/sites-enabled/default

server {lyt 80; servernavn localhost; placering / {root / usr / share / nginx / html; indeks indeks.html indeks.htm; } placering ~ * \. (jpg | jpeg | png | gif | ico | css | js) $ {udløber 365d; } placering ~ * \. (pdf) $ {udløber 30d; }}

Tilføj Cache-Control-overskrifter til Nginx

placering ~ * \. (jpg | jpeg | png | gif | ico | css | js) $ {udløber 90d; add_header Cache-kontrol "offentlig, ikke-transformer"; }

Som du kan udlede af koden ovenfor, indstiller vi udløbsplaceringen for billedfiler til 1 år eller 365 dage, mens vi indstiller PDF-filer til at udløbe efter 30 dage. Du kan tilføje flere filtypenavne for at tilpasse udløbet, hvilket gør det anderledes for andre filtyper.

Alle filtyper, der tilføjes, caches i overensstemmelse hermed. 

4. Sådan cache tredjepartsressourcer

Selv om det er ret nemt at anvende ovenstående indstilling, vil du opdage, at selv efter at du har udført ovenstående ændringer, vil du stadig blive ved med at få denne besked i webstedets hastighedstestværktøjer og Google Pagespeed Insights.

Dette skyldes, at de fleste tredjeparts scripts og tjenester ikke angiver en lang udløbstid - af forskellige forskellige grunde.

Du har desværre ingen kontrol over disse scripts, så vi råder dig på det kraftigste til at bruge MINIMUM tredjeparts-scripts muligt. Hvis du kan leve uden scriptet, skal du fjerne det fra dit websted. Ved at vælge at medtage det trækker det indlæsningstiden på dine sider ned.

5. Angiv en cache-validator

Dette er en anden advarsel, der ofte vises af GTMetrix, typisk fra tredjeparts-scripts. I det væsentlige er dette det samme problem, som vi netop har beskrevet i det foregående afsnit, hvor bestemte scripts hverken specificerer et 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ælde af nedenstående billede, Sumo - så der er intet du kan rette .

Din eneste løsning, i dette tilfælde, ville være at fjerne disse scripts fra dit domæne fuldstændigt, hvis du vil være sikker på, at denne advarsel ikke vises.

Ofte stillede spørgsmål

Hvordan løser du gearing af browsercaching?

Den nemmeste måde at udnytte browserens caching på er at installere et plugin, der giver dig mulighed for at specificere cache-levetiden for forskellige typer statisk indhold. En alternativ, men enkel metode er at specificere cachetiden 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 muliggør flere niveauer af cache, herunder en cache på serverniveau, en cache på sideniveau og en cache på browserniveau. Vores anbefalede plugin til dette valg er WP-Rocket, men der er adskillige alternative valg, som vi nævner i denne artikel, der også får din webside til at indlæse hurtigere.

Hvordan udnytter jeg browser-caching til tredjeparts-scripts?

Du kan ikke ændre browserens cacheværdi for tredjeparts-scripts som Facebook eller Google Analytics, fordi disse er indstillet på serverniveau, og du ikke har nogen kontrol over dem. Din bedste mulighed, i dette tilfælde, er at bruge så få af disse scripts som muligt

Konklusion

Ovenfor har vi vist dig en række måder at implementere for at sikre, at du er i stand til at udnytte browser-caching og sikre, at indhold, der downloades, genbruges igen og igen. Sørg for, at du har implementeret dette på dit websted for at forhindre, at fejlen vises i værktøjer, der analyserer dit websteds hastighedsmålinger. 

Hvis du føler, at dette er noget ud over dine egne evner, vil vi anbefale, at du lader disse ting være i hænderne på PRO'erne og installerer et plugin som WP Rocket for at sikre, at du får de maksimale fordele ved dette og masser af andre handlinger for at gøre din websted indlæses hurtigere.

Besøg WP Rocket for at gøre dit websted hurtigere i dag

Om forfatteren

Forfatter: David AttardInternet side: https://www.linkedin.com/in/dattard/

David har arbejdet i eller omkring online / digital industri i de sidste 18 år. Han har stor erfaring inden for software- og webdesignindustrien ved hjælp af WordPress, Joomla og nicher, der omgiver dem. Som digital konsulent er hans fokus på at hjælpe virksomheder med at få en konkurrencemæssig fordel ved hjælp af en kombination af deres hjemmeside og digitale platforme, der er tilgængelige i dag.