Korištenje predmemorije na strani preglednika (apache). Kako omogućiti predmemoriju preglednika, recept za htaccess Kako omogućiti predmemoriju preglednika


img class=”aligncenter wp-image-2458 size-full” title=”Kako omogućiti predmemoriju stranica preglednika” src=”http://about-windows.ru/wp-content/uploads/2014/07/Kako da omogućite -browser-caching-of-site-pages.jpg” alt=”Kako omogućiti preglednik predmemoriranje stranica web mjesta” width=”600″ height=”450″ />

Kako mogu omogućiti predmemoriju preglednika krajnjeg korisnika na svojoj stranici?

Ako vaš poslužitelj obavijesti preglednik krajnjeg korisnika da se neki resursi mogu pohraniti u , tada će ponovljeni zahtjev za istim resursima dobiti odgovor ne od udaljenog poslužitelja, već od lokalnog računala. Obje strane će imati koristi od ovoga. Time će se poslužitelj dijelom rasteretiti jer neće morati slati određene resurse koji su već dostupni na računalu korisnika. Ali korisnik će dobiti brži pristup traženim resursima.

Kako omogućiti preglednik predmemoriranje resursa stranice na Apache poslužitelju?

Prvo, shvatimo koje bi resurse preglednik trebao spremiti u predmemoriju. Dopustite mi da vas podsjetim da ako preglednik predmemorira neke resurse, možda ih neće ažurirati dosta dugo. Ova situacija je sasvim prikladna za statične objekte. Koji se resursi mogu klasificirati kao statični objekti?

  1. CSS datoteke.
  2. JS datoteke.
  3. Slike.
  4. Video.
  5. Glazba, muzika.

Gornji resursi, kao i neki drugi resursi, mogu se dugo vremena čuvati u predmemoriji bez štete. Neće se ažurirati svaki dan. Na temelju toga, dat ću vam kod koji će natjerati korisnikov preglednik da predmemorira navedene resurse. Osim toga, navest ćemo razdoblje tijekom kojeg se ti resursi mogu pohraniti u predmemoriju bez traženja ažuriranja.


Istječe aktivno
Ističe Zadano "pristup 7 dana"
Aplikacija ExpiresByType/javascript "pristup plus 1 godina"
ExpiresByType tekst/javascript "pristup plus 1 godina"
ExpiresByType tekst/css "pristup plus 1 godina"
ExpiresByType text/html “pristup plus 7 dana”
ExpiresByType text/x-javascript "pristup 1 godina"
ExpiresByType slika/gif "pristup plus 1 godina"
ExpiresByType slika/jpeg “pristup plus 1 godina”
ExpiresByType slika/png “pristup plus 1 godina”
ExpiresByType slika/jpg “pristup plus 1 godina”
ExpiresByType slika/ikona x "pristup 1 godina"
Aplikacija ExpiresByType/x-shockwave-flash “pristup 1 godina”

Ovaj kod mora biti unesen u datoteku .htaccess, koji se nalazi u korijenskoj mapi stranice kojoj Apache služi kao poslužitelj. Nakon toga, preglednik će predmemorirati sve gore navedene objekte za navedeno razdoblje. To znači da ako posjetite istu stranicu u roku od godinu dana (kao što je navedeno u primjeru), dobit ćete mnogo datoteka sa svog računala, osim ako, naravno, niste izbrisali predmemoriju svog računala tijekom tog vremena.

Uputa radi samo ako apache obrađuje statičke datoteke (instalirane kao sučelje). Ako je nginx ispred njega, iste se radnje moraju izvesti na potpuno drugačiji način.

Prvo nekoliko riječi o temi - zašto je potrebno keširanje resursa web stranice (slike, css, html datoteke, arhive i druge statične datoteke)?

Svaki put kada posjetitelj otvori vašu stranicu, preuzima se ne samo html kod stranice, već i sve popratne datoteke koje su potrebne za dizajn stranice (slike, css stilovi, js skripte i tako dalje).
Kao rezultat toga, jedno otvaranje stranice datoteke nije jedan zahtjev prema poslužitelju, već od deset do stotine! Svaki takav zahtjev nije samo opterećenje poslužitelja (što je važno), već i dodatno vrijeme za korisnika da učita stranicu (što je važno kao pokazatelj kvalitete stranice i korisnikove jednostavnosti rada s njom) .

Na primjer, popularna usluga provjere web mjesta Google PageSpeed ​​​​Insights uvijek piše upozorenje o ovome:

Koristite predmemoriju preglednika
Određivanjem datuma ili datuma isteka za statičke resurse u HTTP zaglavljima, preglednik će učitati prethodno dohvaćene resurse s lokalnog diska, a ne s Interneta.
Koristite predmemoriju preglednika za sljedeće resurse:

//— popis problematičnih datoteka —//

Omogućavanje predmemoriranja ne samo da smanjuje opterećenje poslužitelja (gotovo sve stranice web-mjesta imaju duplicirane elemente dizajna, java skripte itd.) kada korisnik ponovno posjeti web-mjesto/stranicu, već također smanjuje vrijeme učitavanja stranice s njegove strane. Budući da preglednik preuzima datoteke iz predmemorije gotovo munjevitom brzinom, korisnik ima osjećaj da se stranica učitava gotovo munjevitom brzinom!

Da biste riješili ovaj problem, stvorite datoteku u mapi stranice s imenom .htaccess(s točkom na početku. Ovo je važno!) i dodajte mu ova pravila. Ako datoteka već postoji, dodajte na kraj postojeće:

# predmemoriranje u pregledniku na strani korisnika ExpiresActive On ExpiresDefault "pristup 7 dana" ExpiresByType application/javascript "pristup plus 1 godina" ExpiresByType text/javascript "pristup plus 1 godina" ExpiresByType text/css "pristup plus 1 godina" ExpiresByType text/html "pristup plus 7 dana" ExpiresByType tekst /x-javascript "pristup 1 godina" ExpiresByType image/gif "pristup plus 1 godina" ExpiresByType image/jpeg "pristup plus 1 godina" ExpiresByType image/png "pristup plus 1 godina" ExpiresByType image/jpg "pristup plus 1 godina" ExpiresByType image/x-icon "pristup 1 godina" ExpiresByType aplikacija/x-shockwave-flash "pristup 1 godina"# Kontrola predmemorije # 30 dana # 30 dana Zaglavlje postavljeno Cache-Control "max-age=2592000, javno"# 2 dana Zaglavlje postavljeno Cache-Control "max-age=172800, javno, mora se ponovno potvrditi"# 1 dan Header set Cache-Control "max-age=172800, private, must-revalidate" #Zabrani slanje Vary HTTP zaglavlja preglednicima MSIE obitelji BrowserMatch "MSIE" Force-no-Vary BrowserMatch "Mozilla/4.(2)" Force-no-Vary

Nakon toga možete provjeriti rezultat na stranici Google PageSpeed ​​​​Insights (ako je sve točno - poruka “ Koristite predmemoriju preglednika" bit će označeno zelenom bojom i postavljeno u odjeljak "Dovršena pravila: (više detalja)")

Ne radi, što da radim?

Ako predmemoriranje ne radi, trebate provjeriti jesu li moduli instalirani. Da biste to učinili, morate stvoriti datoteku u mapi web mjesta test.php s kodom:

Ako mod_expires ili mod_headers nisu na popisu, redom pokrenite sljedeće naredbe na konzoli poslužitelja (povezano) ( ovo će instalirati/omogućiti mod_expires, mod_headers):

A2enmod zaglavlja a2enmod istječe usluga apache2 restart

Ako je stranica na redovnom hostingu, onda je sve kompliciranije. Kontaktirajte tehničku podršku i saznajte zašto moduli nisu instalirani i kako možete riješiti ovaj problem. Budući da može biti dosta razloga zašto hoster nije instalirao module.

Prije otvaranja stranice preglednik treba preuzeti sav njen sadržaj (HTML, CSS, Javascript i slike). Učitavanje velikih i nezgrapnih stranica može biti prilično bolno iskustvo ako imate spor internet (ili koristite mobilni telefon). Svaka datoteka šalje zaseban zahtjev poslužitelju, a što više takvih zahtjeva prima u isto vrijeme, to više posla treba obaviti i stranica će se sporije učitavati. U tom slučaju koristite predmemoriju preglednika.

Predmemorija preglednika može spremiti neke datoteke stranice za korisnika. Prilikom prvog posjeta, vrijeme preuzimanja ostat će nepromijenjeno, no pri sljedećem posjetu, osvježavanju stranice ili prelasku na drugu, neke će datoteke već biti spremljene u pregledniku. To znači da će korisnički preglednik morati preuzimati manje podataka i postavljati manje zahtjeva poslužitelju, čime se smanjuje vrijeme učitavanja stranice.

Prije nego počnete s ovim vodičem, trebat će vam sljedeće:

  • Pristup .htaccess datoteci

Korak 1 - Uređivanje .htaccess datoteke

Proces je prilično jednostavan, trebate dodati sljedeći kod u svoju .htaccess datoteku (možete pronaći vodič za određivanje lokacije vaše .htaccess datoteke):

## ISTIJEČE KAŠIRANJE ## ExpiresActive On ExpiresByType image/jpg "pristup plus 1 godina" ExpiresByType image/jpeg "pristup plus 1 godina" ExpiresByType image/gif "pristup plus 1 godina" ExpiresByType image/png "pristup plus 1 godina" ExpiresByType text/css "pristup plus 1 mjesec" ExpiresByType aplikacija/pdf "pristup plus 1 mjesec" ExpiresByType text/x-javascript "pristup plus 1 mjesec" ExpiresByType aplikacija/x-shockwave-flash "pristup plus 1 mjesec" ExpiresByType slika/x-icon "pristup plus 1 godina" ExpiresDefault "pristup plus 7 dana"## ISTIJEČE KAŠIRANJE ##

Nakon spremanja promjena u datoteku .htaccess, vaša će stranica automatski početi koristiti predmemoriju preglednika za pohranu privremenih datoteka.

Korak 2 - Provjera upotrebe predmemorije preglednika

Ispravnost unesenih promjena možete provjeriti pomoću mnogih alata, kao što su WebPageTest ili GTMetrix

Evo rezultata PRIJE omogućavanje predmemoriranja preglednika:

Usporedbe radi, evo rezultata NAKON omogući predmemoriju preglednika:

Zaključak

U ovom ste kratkom vodiču naučili kako ubrzati svoju web stranicu pomoću predmemorije preglednika. Ako želite povećati brzinu učitavanja svoje stranice, koristite predmemoriju preglednika.

Svoju stranicu možete osloboditi predmemoriranja datoteka pomoću datoteke .htaccess dodavanjem posebnog koda u nju. Idite u korijenski direktorij vaše stranice na hostingu, gdje se nalaze sve datoteke vaše stranice, tamo pronađite .htaccess datoteku, otvorite .htaccess datoteku i dodajte joj sljedeći kod:


Istječe aktivno
Istječe zadano “pristup 7 dana”
Aplikacija ExpiresByType/javascript “pristup plus 1 godina”
ExpiresByType tekst/javascript “pristup plus 1 godina”
ExpiresByType tekst/css "pristup plus 1 godina"
ExpiresByType text/html “pristup plus 7 dana”
ExpiresByType text/x-javascript “pristup 1 godina”
ExpiresByType slika/gif "pristup plus 1 godina"
ExpiresByType slika/jpeg “pristup plus 1 godina”
ExpiresByType slika/png “pristup plus 1 godina”
ExpiresByType slika/jpg “pristup plus 1 godina”
ExpiresByType slika/ikona x "pristup 1 godina"
Aplikacija ExpiresByType/x-shockwave-flash “pristup 1 godina”






Postavi zaglavlje Cache-Control “max-age=2592000, javno”


Zaglavlje skupa Cache-Control “max-age=172800, javno, mora se ponovno provjeriti”


Zaglavlje postavljeno Cache-Control “max-age=172800, privatno, mora se ponovno provjeriti”



BrowserMatch “MSIE” forsiranje bez mijenjanja
BrowserMatch “Mozilla/4.(2)” fors-no-vary

U kodu možete promijeniti vremenska razdoblja tijekom kojih će preglednik pohraniti vašu web-lokaciju u predmemoriju. Na primjer, umjesto vrijednosti – 1 godina (jednom godišnje), možete napraviti 1 mjesec (to jest, svaki mjesec). Za svaku vrstu datoteke određena su vremenska ograničenja.

Korištenje dodatka

Ako se bojite ući u kod ili nemate .htaccess datoteku, možete napraviti predmemoriju na strani preglednika pomoću jednostavnog dodatka - Zendy Speed: Browser Caching. Sve što trebate učiniti je instalirati i aktivirati ovaj dodatak, ne morate učiniti ništa drugo. Nakon aktivacije dodatka, kod će se automatski dodati.

Bok svima! Danas vam želim reći kako predmemorirati vanjske elemente u Google PageSpeed ​​​​Insights kako biste povećali brzinu svoje stranice. Poanta će biti preuzeti js i druge datoteke koje se mogu preuzeti s vanjskih izvora na vašu web stranicu.

Kako omogućiti predmemoriju datoteka u pregledniku

Prije pisanja o tome kako omogućiti predmemoriju datoteka za vaše web mjesto u pregledniku na strani korisnika, želim objasniti što je predmemorija.

Predmemorija- pohranjivanje pregledanih datoteka na vaše računalo, što zauzvrat povećava brzinu učitavanja stranice ili web mjesta prilikom ponovnog pregledavanja. Predmemorija ima svoj rok trajanja, nakon kojeg se ažurira ili briše.

Shvatili smo što je predmemorija. Sada provjerimo našu stranicu u usluzi PageSpeed ​​​​i uvjerimo se da Google preporučuje da koristimo predmemoriju preglednika. Evo izvatka iz poruke.

Određivanjem datuma ili datuma isteka za statičke resurse u HTTP zaglavljima, preglednik će učitati prethodno dohvaćene resurse s lokalnog diska, a ne s Interneta.

Ako se ove datoteke nalaze na vašem resursu, tada možete napisati kod za predmemoriju preglednika u datoteku htaccess, koji se nalazi u korijenu stranice. Evo i samog koda, ako kome treba.

# kompresija teksta, html, javascript, css, xml: AddOutputFilterByType DEFLATE tekst/html tekst/običan tekst/xml aplikacija/xml aplikacija/xhtml+xml tekst/css tekst/javascript aplikacija/javascript aplikacija/x-javascript# predmemorija preglednika ExpiresActive On #default cache is 5 seconds ExpiresDefault "access plus 1 days" # Enable image caching and flash for a month ExpiresByType image/x-icon "pristup plus 1 mjesec" ExpiresByType image/jpeg "pristup plus 4 tjedna" ExpiresByType image/png "pristup plus 30 dana" ExpiresByType image/gif "pristup plus 43829 minuta" ExpiresByType application/x-shockwave-flash "pristup plus 2592000 sekundi" # Omogući predmemoriju css, javascript i tekstualnih datoteka za jedan tjedan ExpiresByType text/css "access plus 604800 sekundi" ExpiresByType text/javascript "pristup plus 604800 sekundi" ExpiresByType aplikacija/javascript "pristup plus 604800 sekundi" ExpiresByType aplikacija/x-javascript "pristup plus 604800 sekundi" # Omogući predmemoriju html i htm datoteka za jedan dan ExpiresByType text/html "pristup plus 43200 sekundi" # Omogući predmemoriju xml datoteka na deset minuta ExpiresByType application/xhtml+xml "pristup plus 600 sekundi" # Nestandardni fontovi stranice ExpiresByType application/x-font-ttf "pristup plus 1 mjesec" ExpiresByType font/ opentype "pristup plus 1 mjesec" ExpiresByType aplikacija/x-font-woff "pristup plus 1 mjesec" ExpiresByType image/svg+xml "pristup plus 1 mjesec" ExpiresByType aplikacija/vnd.ms-fontobject "pristup plus 1 mjesec"

Zalijepljenjem ovog koda u datoteku htacces možete još jednom provjeriti svoju web stranicu u usluzi Google PageSpeed ​​​​
Uvidi. Ako u odjeljku " koristiti predmemoriju preglednika"Sve je u redu, to znači da ćete ga imati tamo
samo poveznice na vanjske resurse, kao što su analitika, društvene mreže
gumbi i tako dalje.
Osobno, paralelno s ovim kodom, koristim mogućnosti svog hostinga za keširanje datoteka na korisničkoj strani. Ovako izgleda.

Kao što vidite, moj hosting vam omogućuje da omogućite predmemoriju na strani preglednika i postavite razinu kompresije i razdoblje pohrane datoteka. Također, koristim dodatak wp super cache za brzo učitavanje stranica, ali možda ću svojim čitateljima nekako ispričati o tome, pretplaćeni na ažuriranja bloga.

Kako omogućiti vanjsku predmemoriju datoteka u Google PageSpeed ​​​​Insights

Ako ste slijedili preporuke za predmemoriju datoteka na svom blogu. Trebali biste vidjeti samo veze na vanjske resurse u alatu Google PageSpeed ​​​​Insights. Sigurno imate nešto slično.
Kao što možete vidjeti na snimci zaslona, ​​Google PageSpeed ​​​​Insights se kune u vanjske resurse, kao što su Yandex metrics, google analytics i drugi. Sada ću vam reći kako popraviti ovu pogrešku i učiniti veze na vanjske resurse internim i predmemoriranima na strani vašeg poslužitelja.

Korištenje predmemorije preglednika za vanjske resurse

Budući da datoteke vanjskih resursa ne pripadaju našoj stranici, prvo ih je potrebno preuzeti. Kako bismo preuzeli vanjske datoteke iz resursa trećih strana, moramo izraditi datoteku kesh_js.php sa sljedećim kodom. Savjetujem vam da koristite Notepad++ za brzo i ispravno dodavanje koda u datoteku.

Da bismo napisali kod koji nam je potreban. uzmi i kopiraj ovaj link:

preuzimanjeJs( zalijepite vezu iz PageSpeed ​​​​ovdje /metrics.js, realpath("./ folder_js« ) . ‘/ metrics.js— umetnite konačnu datoteku ovdje') ;

Na ovaj način možete dodati mnoge upite. Jedina stvar koju trebate zapamtiti jest osigurati da u mapi nemate duple datoteke. U tom slučaju koristite jednu datoteku za nekoliko skripti, obično istu skriptu, ili je preimenujte.

Nakon dodavanja koda u datoteku kesh_js.php, možete to nazvati i drugačije. Mora se učitati u root stranice. Također u korijenu stranice morate stvoriti mapu folder_js, ili pod drugim imenom s pravom pristupa 777/755. Kako biste postavili prava pristupa mapi, preporučujem korištenje Fillizille.

Da biste to učinili, jednostavno otvorite program fillizilla. Zatim odaberite mapu i postavite prava pristupa, obavezno na 777, nakon čega ponovno mijenjamo na 755. To možete učiniti i na upravljačkoj ploči vašeg hostinga ako ne želite koristiti ovaj program. Pokazat ću vam screenshot podešavanja prava pristupa u programu Fillizilla.
Zatim otvorite odjeljak " dopuštenja za datoteke" i unesite našu vrijednost 777/755.

Kako omogućiti planer zadataka za stranicu (cron)

Sljedeći korak, moramo omogućiti planer zadataka za naše web mjesto tako da naša skripta https://adresa vaše web stranice/kesh_js.php počeo, svakodnevno. Zahvaljujući tome, naše će web mjesto uvijek imati ažurnu verziju datoteka iz vanjskih izvora. Čak i ako programeri naprave promjene u svom kodu, uvijek ćemo imati radnu verziju na web mjestu, zahvaljujući planeru zadataka.

Kako biste rasporedili zadatke za svoju web stranicu, morate otići na upravljačku ploču hostinga i unijeti jednu od opcija koda.

pokretanje zadatka putem GET-a. Ako trebate pokrenuti cron posao uzimajući u obzir kontekst motora:

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

gdje je site.ru naziv vaše domene, a script.php naziv datoteke sa zadatkom;

pokretanje posla putem WGET-a. Alternativna opcija za pokretanje cron posla, uzimajući u obzir kontekst motora:

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

gdje je site.ru naziv vaše domene, a script.php naziv datoteke sa zadatkom;

U našem slučaju moramo napisati:

PREUZMITE https://adresu svoje web stranice/kesh_js.php

Ili odaberite alternativnu opciju; ja sam osobno odabrao prvu.

Smislili smo što registrirati, sada otvaramo naš hosting i idemo na njegovu upravljačku ploču. Ja koristim kontrolnu ploču ISPmanager, ako imate neku drugu, potražite karticu planera zadataka ili cron.

Sada otvorite karticu "kreiraj".

Zatim brišemo predmemoriju preglednika. Za Google Chrome koristite tipkovni prečac ctrl+shift+delete i provjerite rad stranice. Također preporučujem ponovno pokretanje vaše web-lokacije kroz alat PageSpeed ​​​​Insights.

To je sve za mene, želim vam dobar rezultat zahvaljujući ovoj metodi ubrzavanja stranice. U sljedećem članku ću vam reći kako napraviti šareni gumb za pretplatu na YouTubeu za svoj blog, stoga ne zaboravite pretplatite se na ažuriranja. Cao svima!