Uporaba predpomnilnika na strani brskalnika (apache). Kako omogočiti predpomnjenje brskalnika, recept za htaccess Kako omogočiti predpomnjenje brskalnika


img class=”aligncenter wp-image-2458 size-full” title=”Kako v brskalniku omogočiti predpomnjenje strani spletnega mesta” src=”http://about-windows.ru/wp-content/uploads/2014/07/Kako omogočiti -browser-caching-of-site-pages.jpg” alt=”Kako v brskalniku omogočiti predpomnjenje strani spletnega mesta” width=”600″ height=”450″ />

Kako lahko na svojem spletnem mestu omogočim predpomnilnik brskalnika končnega uporabnika?

Če vaš strežnik sporoči brskalniku končnega uporabnika, da je mogoče nekatere vire shraniti v , bo ponovljena zahteva za iste vire prejela odgovor ne od oddaljenega strežnika, ampak od lokalnega računalnika. Od tega bosta imeli koristi obe strani. Tako bo strežnik nekoliko razbremenjen, saj mu ne bo treba pošiljati določenih virov, ki so že na voljo na uporabnikovem računalniku. Toda uporabnik bo prejel hitrejši dostop do zahtevanih virov.

Kako v brskalniku omogočiti predpomnjenje virov spletnega mesta na strežniku Apache?

Najprej ugotovimo, katere vire naj brskalnik shrani v predpomnilnik. Naj vas spomnim, da če brskalnik predpomni nekatere vire, jih morda ne bo posodobil precej dolgo. Ta položaj je povsem primeren za statične objekte. Katere vire lahko uvrstimo med statične objekte?

  1. datoteke CSS.
  2. datoteke JS.
  3. Slike.
  4. Video.
  5. Glasba.

Zgornje vire, kot tudi nekatere druge vire, je mogoče predpomniti za dolgo časa brez škode. Ne bodo posodobljeni vsak dan. Na podlagi tega vam bom dal kodo, ki bo uporabnikov brskalnik prisilila v predpomnilnik navedenih virov. Poleg tega bomo navedli obdobje, v katerem so lahko ti viri shranjeni v predpomnilniku, ne da bi zahtevali posodobitve.


Poteče aktivno dne
ExpiresDefault "dostop 7 dni"
Aplikacija ExpiresByType/javascript "dostop plus 1 leto"
ExpiresByType besedilo/javascript "dostop plus 1 leto"
ExpiresByType besedilo/css »dostop plus 1 leto«
ExpiresByType text/html “dostop plus 7 dni”
ExpiresByType text/x-javascript "dostop 1 leto"
Slika/gif ExpiresByType »dostop plus 1 leto«
ExpiresByType slika/jpeg »dostop plus 1 leto«
ExpiresByType slika/png »dostop plus 1 leto«
ExpiresByType image/jpg »dostop plus 1 leto«
Slika ExpiresByType/ikona x »dostop 1 leto«
Aplikacija ExpiresByType/x-shockwave-flash »dostop 1 leto«

To kodo je treba vnesti v datoteko .htaccess, ki leži v korenski mapi mesta, za katerega Apache služi kot strežnik. Po tem bo brskalnik predpomnil vse zgoraj navedene objekte za določeno obdobje. To pomeni, da če obiščete isto spletno stran v enem letu (kot je prikazano v primeru), boste prejeli veliko datotek iz vašega računalnika, razen če ste seveda v tem času počistili predpomnilnik vašega računalnika.

Navodilo deluje samo, če apache obdeluje statične datoteke (nameščene kot frontend). Če je pred njim nginx, je treba ista dejanja izvesti na povsem drugačen način.

Najprej nekaj besed o temi - zakaj je potrebno predpomnjenje virov spletne strani (slike, css, html datoteke, arhivi in ​​druge statične datoteke)?

Vsakič, ko obiskovalec odpre vašo spletno stran, se ne prenese samo html koda strani, temveč tudi vse spremljajoče datoteke, ki so potrebne za oblikovanje strani (slike, slogi css, skripti js itd.).
Posledično eno odpiranje strani datoteke ni ena zahteva strežniku, ampak od deset do sto! Vsaka taka zahteva ni samo obremenitev strežnika (kar je pomembno), ampak tudi dodaten čas za uporabnika, da naloži stran (kar je pomembno kot pokazatelj kakovosti spletnega mesta in uporabnikove enostavnosti dela z njim) .

Na primer, priljubljena storitev preverjanja spletnega mesta Google PageSpeed ​​​​Insights vedno napiše opozorilo o tem:

Uporabite predpomnilnik brskalnika
Če navedete datum ali datum poteka za statične vire v glavah HTTP, bo brskalnik naložil predhodno pridobljene vire z lokalnega diska in ne iz interneta.
Uporabite predpomnilnik brskalnika za naslednje vire:

//— seznam težavnih datotek —//

Omogočanje predpomnjenja ne le zmanjša obremenitev strežnika (skoraj vse strani spletnega mesta imajo podvojene oblikovne elemente, java skripte itd.), ko uporabnik ponovno obišče spletno mesto/stran, ampak tudi zmanjša čas nalaganja strani na njegovi strani. Ker brskalnik jemlje datoteke iz predpomnilnika skoraj z bliskovito hitrostjo, dobi uporabnik občutek, da se je stran naložila skoraj z bliskovito hitrostjo!

Če želite rešiti to težavo, ustvarite datoteko v mapi mesta z imenom .htaccess(s piko na začetku. To je pomembno!) in ji dodajte ta pravila. Če datoteka že obstaja, dodajte na konec obstoječe:

# predpomnjenje v brskalniku na strani uporabnika ExpiresActive On ExpiresDefault "dostop 7 dni" ExpiresByType aplikacija/javascript "dostop plus 1 leto" ExpiresByType text/javascript "dostop plus 1 leto" ExpiresByType text/css "dostop plus 1 leto" ExpiresByType text/html "dostop plus 7 dni" ExpiresByType besedilo /x-javascript "dostop 1 leto" ExpiresByType image/gif "dostop plus 1 leto" ExpiresByType image/jpeg "dostop plus 1 leto" ExpiresByType image/png "dostop plus 1 leto" ExpiresByType image/jpg "dostop plus 1 leto" ExpiresByType image/x-icon "dostop 1 leto" Aplikacija ExpiresByType/x-shockwave-flash "dostop 1 leto"# Nadzor predpomnilnika #30 dni #30 dni Nastavitev glave Cache-Control "max-age=2592000, javno"# 2 dneva Nabor glav Cache-Control "max-age=172800, javno, treba ponovno preveriti"#1 dan Header set Cache-Control "max-age=172800, private, must-revalidate" #Prepovejte pošiljanje glav HTTP Vary brskalnikom iz družine MSIE BrowserMatch "MSIE" prisilno brez spreminjanja BrowserMatch "Mozilla/4.(2)" prisilno brez spreminjanja

Po tem lahko preverite rezultat na strani Google PageSpeed ​​​​Insights (če je vse pravilno - sporočilo " Uporabite predpomnilnik brskalnika" bodo označeni z zeleno in uvrščeni v rubriko "Dokončana pravila: (več podrobnosti)")

Ne deluje, kaj naj naredim?

Če predpomnjenje ne deluje, morate preveriti, ali so moduli nameščeni. Če želite to narediti, morate ustvariti datoteko v mapi spletnega mesta test.php s kodo:

Če mod_expires ali mod_headers ni na seznamu, izmenično zaženite naslednje ukaze v konzoli strežnika (povezana) ( to bo namestilo/omogočilo mod_expires, mod_headers):

Glave A2enmod a2enmod poteče storitev apache2 znova zaženite

Če je spletno mesto na običajnem gostovanju, potem je vse bolj zapleteno. Obrnite se na tehnično podporo in ugotovite, zakaj moduli niso nameščeni in kako se lahko izognete tej težavi. Ker je lahko razlogov, zakaj gostitelj ni namestil modulov, kar veliko.

Preden odpre stran, mora brskalnik prenesti vso njeno vsebino (HTML, CSS, Javascript in slike). Nalaganje velikih in okornih spletnih mest je lahko precej boleča izkušnja, če imate počasen internet (ali uporabljate mobilni telefon). Vsaka datoteka strežniku pošlje ločeno zahtevo in več takih zahtev hkrati prejme, več dela mora opraviti in počasneje se stran nalaga. V tem primeru uporabite predpomnilnik brskalnika.

Predpomnilnik brskalnika lahko shrani nekatere datoteke spletnega mesta za uporabnika. Ob prvem obisku bo čas prenosa ostal nespremenjen, ob naslednjem obisku, osvežitvi strani ali preklopu na drugo pa bodo nekatere datoteke že shranjene v brskalniku. To pomeni, da bo moral brskalnik uporabnika prenesti manj podatkov in posredovati manj zahtev strežniku, s čimer se skrajša čas nalaganja spletnega mesta.

Preden začnete s tem vodnikom, boste potrebovali naslednje:

  • Dostop do datoteke .htaccess

1. korak – Urejanje datoteke .htaccess

Postopek je precej preprost, svoji datoteki .htaccess morate dodati naslednjo kodo (lahko najdete vodnik o tem, kako določiti lokacijo vaše datoteke .htaccess):

## POTEČE PREPOMNJENJE ## ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 mesec" Aplikacija ExpiresByType/pdf "dostop plus 1 mesec" ExpiresByType text/x-javascript "dostop plus 1 mesec" Aplikacija ExpiresByType/x-shockwave-flash "dostop plus 1 mesec" ExpiresByType slika/x-icon "dostop plus 1 leto" ExpiresDefault "dostop plus 7 dni"## POTEČE PREPOMNJENJE ##

Ko shranite spremembe v datoteko .htaccess, bo vaše spletno mesto samodejno začelo uporabljati predpomnilnik brskalnika za shranjevanje začasnih datotek.

2. korak – Preverjanje uporabe predpomnilnika brskalnika

Pravilnost opravljenih sprememb lahko preverite s številnimi orodji, kot sta WebPageTest ali GTMetrix

Tukaj so rezultati PREJ omogočanje predpomnjenja brskalnika:

Za primerjavo, tukaj so rezultati PO omogoči predpomnjenje brskalnika:

Zaključek

V tem kratkem vodniku ste se naučili, kako pospešiti svoje spletno mesto z uporabo predpomnilnika brskalnika. Če želite povečati hitrost nalaganja spletnega mesta, uporabite predpomnilnik brskalnika.

Svoje spletno mesto lahko osvobodite predpomnjenja datotek z uporabo datoteke .htaccess, tako da ji dodate posebno kodo. Pojdite v korenski imenik vašega spletnega mesta na gostovanju, kjer se nahajajo vse datoteke vašega spletnega mesta, tam poiščite datoteko .htaccess, odprite datoteko .htaccess in ji dodajte naslednjo kodo:


Poteče aktivno dne
ExpiresDefault “dostop 7 dni”
Aplikacija ExpiresByType/javascript »dostop plus 1 leto«
ExpiresByType besedilo/javascript »dostop plus 1 leto«
ExpiresByType besedilo/css »dostop plus 1 leto«
ExpiresByType text/html “dostop plus 7 dni”
ExpiresByType text/x-javascript “dostop 1 leto”
Slika/gif ExpiresByType »dostop plus 1 leto«
ExpiresByType slika/jpeg »dostop plus 1 leto«
ExpiresByType slika/png »dostop plus 1 leto«
ExpiresByType image/jpg »dostop plus 1 leto«
Slika ExpiresByType/ikona x »dostop 1 leto«
Aplikacija ExpiresByType/x-shockwave-flash »dostop 1 leto«






Nastavitev glave Cache-Control »max-age=2592000, javno«


Nabor glav Cache-Control »max-age=172800, javno, treba ponovno preveriti«


Header set Cache-Control “max-age=172800, private, must-revalidate”



BrowserMatch »MSIE« prisilno ne spreminja
BrowserMatch “Mozilla/4.(2)” fors-no-vari

V kodi lahko spremenite časovna obdobja, v katerih bo brskalnik predpomnil vaše spletno mesto. Na primer, namesto vrednosti – 1 leto (enkrat na leto), lahko naredite 1 mesec (to je vsak mesec). Za vsako vrsto datoteke so določene časovne omejitve.

Uporaba vtičnika

Če se bojite vstopiti v kodo ali nimate datoteke .htaccess, lahko naredite predpomnilnik na strani brskalnika s preprostim vtičnikom - Zendy Speed: Browser Caching. Vse kar morate storiti je, da namestite in aktivirate ta vtičnik, ni vam treba storiti ničesar drugega. Po aktiviranju vtičnika bo koda samodejno dodana.

Pozdravljeni vsi skupaj! Danes vam želim povedati, kako predpomniti zunanje elemente v Google PageSpeed ​​​​Insights, da povečate hitrost vašega spletnega mesta. Bistvo bo v prenosu js in drugih prenosljivih datotek iz zunanjih virov na vaše spletno mesto.

Kako omogočiti predpomnjenje datotek v brskalniku

Preden pišem o tem, kako omogočiti predpomnjenje datotek za vaše spletno mesto v brskalniku na uporabniški strani, želim pojasniti, kaj je predpomnilnik.

predpomnilnik- shranjevanje ogledanih datotek na vaš računalnik, kar posledično poveča hitrost nalaganja strani ali mesta ob ponovnem ogledu. Predpomnilnik ima svoj rok trajanja, po katerem se posodobi ali izbriše.

Ugotovili smo, kaj je predpomnilnik. Zdaj pa preverimo naše spletno mesto v storitvi PageSpeed ​​​​in se prepričajmo, da Google priporoča uporabo predpomnilnika brskalnika. Tukaj je odlomek iz sporočila.

Če v glavah HTTP določite datum ali datum poteka za statične vire, bo brskalnik naložil predhodno pridobljene vire z lokalnega diska in ne iz interneta.

Če se te datoteke nahajajo na vašem viru, lahko v datoteko zapišete kodo za predpomnjenje brskalnika htaccess, ki se nahaja v korenu spletnega mesta. Tukaj je koda sama, če jo kdo rabi.

# stiskanje besedila, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript# predpomnilnik brskalnika ExpiresActive On #default cache is 5 seconds ExpiresDefault "access plus 1 days" # Omogoči predpomnjenje slik in flash za en mesec ExpiresByType image/x-icon "access plus 1 month" ExpiresByType image/jpeg "access plus 4 tedens" ExpiresByType image/png "dostop plus 30 dni" ExpiresByType image/gif "dostop plus 43829 minut" ExpiresByType application/x-shockwave-flash "access plus 2592000 sekund" # Omogoči predpomnjenje css, javascript in besedilnih datotek za en teden ExpiresByType text/css "access plus 604800 sekund" ExpiresByType text/javascript "dostop plus 604800 sekund" ExpiresByType aplikacija/javascript "dostop plus 604800 sekund" ExpiresByType aplikacija/x-javascript "dostop plus 604800 sekund" # Omogoči predpomnjenje datotek html in htm za en dan ExpiresByType text/html "dostop plus 43200 sekund" # Omogoči predpomnjenje datotek xml za deset minut ExpiresByType application/xhtml+xml "dostop plus 600 sekund" # Nestandardne pisave spletnega mesta ExpiresByType application/x-font-ttf "dostop plus 1 mesec" ExpiresByType font/ opentype "dostop plus 1 mesec" ExpiresByType application/x-font-woff "dostop plus 1 mesec" ExpiresByType image/svg+xml "dostop plus 1 mesec" ExpiresByType application/vnd.ms-fontobject "dostop plus 1 mesec"

Če to kodo prilepite v datoteko htacces, lahko še enkrat preverite svoje spletno mesto v storitvi Google PageSpeed ​​​​
Vpogledi. Če v razdelku " uporabite predpomnilnik brskalnika"vse je v redu, to pomeni, da ga boste imeli tam
samo povezave do zunanjih virov, kot so analitika, družabna
gumbi in tako naprej.
Osebno vzporedno s to kodo uporabljam zmožnosti svojega gostovanja za predpomnilnik datotek na uporabniški strani. Izgleda takole.

Kot lahko vidite, vam moje gostovanje omogoča, da omogočite predpomnjenje na strani brskalnika ter nastavite stopnjo stiskanja in obdobje shranjevanja datotek. Uporabljam tudi vtičnik wp super cache za hitro nalaganje strani, a morda bom svojim bralcem nekako povedal o tem, naročen na posodobitve spletnega dnevnika.

Kako omogočiti zunanji predpomnilnik datotek v Google PageSpeed ​​​​Insights

Če ste upoštevali priporočila za predpomnjenje datotek v svojem blogu. V orodju Google PageSpeed ​​​​Insights bi morali videti samo povezave do zunanjih virov. Morate imeti nekaj podobnega.
Kot je razvidno iz posnetka zaslona, ​​Google PageSpeed ​​​​Insights prisega na zunanje vire, kot so Yandex metrics, google analytics in drugi. Zdaj vam bom povedal, kako popraviti to napako in narediti povezave do zunanjih virov notranje in predpomnjene na strani vašega strežnika.

Uporaba predpomnilnika brskalnika za zunanje vire

Ker datoteke zunanjih virov ne pripadajo našemu spletnemu mestu, jih je treba najprej prenesti. Če želimo prenesti zunanje datoteke iz virov tretjih oseb, moramo ustvariti datoteko kesh_js.php z naslednjo kodo. Svetujem vam, da uporabite Notepad++ za hitro in pravilno dodajanje kode v datoteko.

Za pisanje kode, ki jo potrebujemo. vzemite in kopirajte to povezavo:

downloadJs( prilepite povezavo iz PageSpeed ​​​​sem /metrics.js, realpath("./ folder_js« ) . ‘/ metrics.js— tukaj vstavite končno datoteko') ;

Na ta način lahko dodate veliko poizvedb. Edina stvar, ki si jo morate zapomniti, je zagotoviti, da v mapi nimate podvojenih datotek. V tem primeru uporabite eno datoteko za več skriptov, običajno isto skripto, ali pa jo preimenujte.

Po dodajanju kode v datoteko kesh_js.php, lahko temu rečeš drugače. Naložiti ga je treba v koren našega spletnega mesta. Tudi v korenu spletnega mesta morate ustvariti mapo folder_js, ali pod drugim imenom s pravicami dostopa 777/755. Če želite nastaviti pravice dostopa do mape, priporočam uporabo Fillizille.

Če želite to narediti, preprosto odprite program fillizilla. Nato izberemo mapo in nastavimo pravice dostopa, obvezno na 777, nakar jo spremenimo nazaj na 755. To lahko storimo tudi v nadzorni plošči vašega gostovanja, če tega programa ne želite uporabljati. Pokazal vam bom posnetek zaslona nastavitve pravic dostopa v programu Fillizilla.
Nato odprite razdelek » dovoljenja za datoteke" in vnesite našo vrednost 777/755.

Kako omogočiti razporejevalnik opravil za spletno mesto (cron)

V naslednjem koraku moramo omogočiti razporejevalnik opravil za naše spletno mesto, tako da naš skript https://naslov vašega spletnega mesta/kesh_js.php začel, dnevno. Zahvaljujoč temu bo naše spletno mesto vedno imelo posodobljeno različico datotek iz zunanjih virov. Tudi če razvijalci spremenijo svojo kodo, bomo zahvaljujoč razporejevalniku opravil vedno imeli delujočo različico na spletnem mestu.

Če želite načrtovati opravila za vaše spletno mesto, morate iti na nadzorno ploščo gostovanja in vnesti eno od možnosti kode.

izvajanje naloge prek GET. Če morate zagnati opravilo cron ob upoštevanju konteksta motorja:

PRIDOBITE https://site.ru/script.php

kjer je site.ru ime vaše domene, script.php pa ime datoteke z nalogo;

vodenje opravila prek WGET. Alternativna možnost za izvajanje opravila cron ob upoštevanju konteksta motorja:

Wget -q -O - https://site.ru/script.php> /dev/null 2>&1

kjer je site.ru ime vaše domene, script.php pa ime datoteke z nalogo;

V našem primeru moramo napisati:

PRIDOBITE https://naslov vašega spletnega mesta/kesh_js.php

Ali pa izberite alternativno možnost; osebno sem izbral prvo.

Ugotovili smo, kaj registrirati, zdaj odpremo naše gostovanje in gremo na njegovo nadzorno ploščo. Uporabljam nadzorno ploščo ISPmanager, če imate drugo, poiščite zavihek razporejevalnik opravil ali cron.

Zdaj odprite zavihek »ustvari«.

Nato počistimo predpomnilnik brskalnika. Za Google Chrome uporabite bližnjico na tipkovnici ctrl+shift+delete in preverite delovanje strani. Priporočam tudi, da svoje spletno mesto znova zaženete prek orodja PageSpeed ​​​​Insights.

To je vse zame, želim vam dober rezultat zahvaljujoč tej metodi pospeševanja strani. V naslednjem članku vam bom povedal, kako ustvarite barvit youtube gumb za naročanje na svoj blog, zato ne pozabite naročite se na posodobitve. Adijo vsi!