Korišćenje keša na strani pretraživača (apache). Kako omogućiti keširanje pretraživača, recept za htaccess Kako omogućiti keširanje pretraživača


img class=”aligncenter wp-image-2458 size-full” title=”Kako omogućiti keširanje web stranica u pretraživaču” src=”http://about-windows.ru/wp-content/uploads/2014/07/How da omogućite -browser-caching-of-site-pages.jpg” alt=”Kako omogućiti keširanje web stranica pretraživača” width=”600″ height=”450″ />

Kako mogu omogućiti keš pretraživača krajnjeg korisnika na svojoj web lokaciji?

Ako vaš server obavijesti pretraživač krajnjeg korisnika da se neki resursi mogu pohraniti u , tada će zahtjev za ponavljanje za iste resurse dobiti odgovor ne od udaljenog servera, već od lokalnog računala. Od ovoga će imati koristi obje strane. Tako će server malo rasteretiti, jer neće morati slati određene resurse koji su već dostupni na korisnikovom računalu. Ali korisnik će dobiti brži pristup traženim resursima.

Kako omogućiti keširanje pretraživača resursa stranice na Apache serveru?

Prvo, hajde da shvatimo koje resurse pretraživač treba da kešira. Dozvolite mi da vas podsjetim da ako pretraživač kešira neke resurse, možda ih neće ažurirati prilično dugo. Ova situacija je prilično pogodna za statične objekte. Koji se resursi mogu klasificirati kao statički objekti?

  1. CSS fajlovi.
  2. JS fajlovi.
  3. Slike.
  4. Video.
  5. Muzika.

Gore navedeni resursi, kao i neki drugi resursi, mogu se dugo keširati bez štete. Neće se ažurirati svaki dan. Na osnovu toga, dat ću vam kod koji će natjerati korisnikov pretraživač da kešira navedene resurse. Pored toga, naznačićemo period tokom kojeg se ovi resursi mogu pohraniti u keš memoriju bez zahtjeva za ažuriranje.


Ističe aktivno uključeno
Ističe Podrazumevano "pristup 7 dana"
ExpiresByType aplikacija/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 text/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”

Ovaj kod se mora unijeti u datoteku .htaccess, koji se nalazi u korijenskom folderu stranice za koju Apache služi kao server. Nakon toga, pretraživač će keširati sve gore navedene objekte za navedeni period. 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čunara, osim ako, naravno, niste obrisali keš memoriju svog računara za to vrijeme.

Instrukcija radi samo ako apache obrađuje statičke datoteke (instalirane kao frontend). Ako je nginx ispred njega, iste radnje moraju biti izvedene na potpuno drugačiji način.

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

Svaki put kada posjetitelj otvori vašu stranicu, ne preuzima se samo html kod stranice, već i svi prateći fajlovi koji su potrebni za dizajn stranice (slike, css stilovi, js skripte itd.).
Kao rezultat toga, jedno otvaranje stranice datoteke nije jedan zahtjev prema serveru, već od deset do stotina! Svaki takav zahtjev nije samo opterećenje na serveru (što je bitno), već i dodatno vrijeme za korisnika da učita stranicu (što je važno kao pokazatelj kvaliteta stranice i korisnikove lakoće rada sa njom) .

Na primjer, popularni servis za provjeru web stranice od Google PageSpeed ​​Insights uvijek napiše upozorenje o tome:

Koristite keš pretraživača
Određivanjem datuma ili datuma isteka za statičke resurse u HTTP zaglavljima, pretraživač će učitati prethodno preuzete resurse sa lokalnog diska, a ne sa Interneta.
Koristite keš pretraživača za sljedeće resurse:

//— lista problematičnih fajlova —//

Omogućavanje keširanja ne samo da smanjuje opterećenje servera (skoro sve stranice sajta imaju duplirane elemente dizajna, java skripte, itd.) kada korisnik ponovo poseti sajt/stranicu, već i smanjuje vreme učitavanja stranice sa svoje strane. Pošto pretraživač preuzima fajlove iz keša skoro munjevitom brzinom, korisnik ima osećaj da se stranica učitava skoro munjevitom brzinom!

Da biste riješili ovaj problem, kreirajte datoteku u folderu web lokacije s imenom .htaccess(sa tačkom na početku. Ovo je važno!) i dodajte ova pravila. Ako datoteka već postoji, dodajte na kraj postojeće:

# keširanje u pretraživaču na strani korisnika ExpiresActive On ExpiresDefault "pristup 7 dana" ExpiresByType aplikacija/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"ype /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" ExpiresByTy image/x-icon "pristup 1 godina" ExpiresByType aplikacija/x-shockwave-flash "pristup 1 godina"# Cache-Control # 30 dana # 30 dana Set zaglavlja Cache-Control "max-age=2592000, javno"# 2 dana Set zaglavlja Cache-Control "max-age=172800, javno, mora se ponovo potvrditi"# 1 dan Set zaglavlja Cache-Control "max-age=172800, privatno, mora se ponovo potvrditi" #Zabrani slanje Vary HTTP zaglavlja pretraživačima iz MSIE porodice 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 ispravno - poruka “ Koristite keš pretraživača" će biti označeno zelenom bojom i postavljeno u rubriku "Završena pravila: (više detalja)")

Ne radi, šta da radim?

Ako keširanje ne radi, onda morate provjeriti jesu li moduli instalirani. Da biste to učinili, morate kreirati datoteku u folderu web lokacije test.php sa kodom:

Ako mod_expires ili mod_headers nisu na listi, pokrenite sljedeće komande na konzoli servera (povezano) redom ( ovo će instalirati/omogućiti mod_expires, mod_headers):

A2enmod zaglavlja a2enmod ističe servis apache2 restart

Ako je stranica na redovnom hostingu, onda je sve složenije. Obratite se tehničkoj podršci i saznajte zašto moduli nisu instalirani i kako možete zaobići ovaj problem. Budući da može biti dosta razloga zašto hoster nije instalirao module.

Prije otvaranja stranice, pretraživač treba da preuzme 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 poseban zahtjev serveru, a što više takvih zahtjeva primi u isto vrijeme, potrebno je više posla i sporije će se stranica učitavati. U tom slučaju koristite keš pretraživača.

Keširanje pretraživača može sačuvati neke od fajlova sajta za korisnika. Prilikom vaše prve posjete, vrijeme preuzimanja će ostati nepromijenjeno, ali pri sljedećoj posjeti, osvježavanju stranice ili prelasku na drugu, neke od datoteka će već biti sačuvane u pretraživaču. To znači da će korisnikov pretraživač morati da preuzima manje podataka i postavlja manje zahtjeva serveru, čime se smanjuje vrijeme učitavanja stranice.

Prije nego što započnete ovaj vodič, trebat će vam sljedeće:

  • Pristup datoteci .htaccess

Korak 1 - Uređivanje .htaccess datoteke

Proces je prilično jednostavan, morate dodati sljedeći kod u vašu .htaccess datoteku (možete pronaći vodič o tome kako odrediti lokaciju svoje .htaccess datoteke):

## ISTIČE KEŠ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 "access plus 1 godina" 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" Ističe Podrazumevano "pristup plus 7 dana"## ISTIČE KEŠIRANJE ##

Nakon što sačuvate promjene u datoteci .htaccess, vaša stranica će automatski početi koristiti keš pretraživača za pohranjivanje privremenih datoteka.

Korak 2 - Provjera upotrebe predmemorije pretraživača

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

Evo rezultata PRIJE omogućavanje keširanja pretraživača:

Za poređenje, evo rezultata POSLIJE omogući keširanje pretraživača:

Zaključak

U ovom kratkom vodiču naučili ste kako da ubrzate svoju web stranicu koristeći keš pretraživača. Ako želite da povećate brzinu učitavanja vaše stranice, koristite keš pretraživača.

Možete osloboditi svoju web stranicu od keširanja datoteka koristeći .htaccess datoteku dodavanjem posebnog koda. Idite u korijenski direktorij vaše stranice na hostingu, gdje se nalaze svi fajlovi vaše stranice, tamo pronađite .htaccess datoteku, otvorite .htaccess datoteku i dodajte joj sljedeći kod:


Ističe aktivno uključeno
Ističe Podrazumevano “pristup 7 dana”
ExpiresByType aplikacija/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 text/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”






Set zaglavlja Cache-Control “max-age=2592000, javno”


Set zaglavlja Cache-Control “max-age=172800, javno, mora se ponovo potvrditi”


Set zaglavlja Cache-Control “max-age=172800, privatno, mora se ponovo potvrditi”



BrowserMatch “MSIE” force-no-vary
BrowserMatch “Mozilla/4.(2)” force-no-vary

U kodu možete promijeniti vremenske periode tokom kojih će vaš web preglednik keširati. Na primjer, umjesto vrijednosti – 1 godina (jednom godišnje), možete napraviti 1 mjesec (tj. svaki mjesec). Vremenska ograničenja su navedena za svaku vrstu datoteke.

Korištenje dodatka

Ako se plašite da uđete u kod ili nemate .htaccess datoteku, onda možete napraviti keš na strani pretraživača pomoću jednostavnog dodatka - Zendy Speed: Browser Caching. Sve što treba da uradite je da instalirate i aktivirate ovaj dodatak, ne morate ništa drugo da radite. Nakon aktivacije dodatka, kod će se automatski dodati.

Zdravo svima! Danas vam želim reći kako keširati vanjske elemente u Google PageSpeed ​​Insights da biste povećali brzinu vaše stranice. Poenta će biti preuzimanje js-a i drugih datoteka za preuzimanje sa vanjskih izvora na vašu web stranicu.

Kako omogućiti keširanje datoteka u pretraživaču

Prije nego što pišem o tome kako omogućiti keširanje datoteka za svoju web stranicu u pretraživaču na strani korisnika, želim objasniti što je keš memorija.

Skladiste- pohranjivanje pregledanih fajlova na vašem računaru, što zauzvrat povećava brzinu učitavanja stranice ili sajta prilikom ponovnog pregleda. Keš memorija ima svoj rok trajanja, nakon čega se ažurira ili briše.

Shvatili smo šta je keš. Sada, hajde da provjerimo našu stranicu u usluzi PageSpeed ​​i uvjerimo se da Google preporučuje da koristimo keš pretraživača. Evo izvoda iz poruke.

Određivanjem datuma ili datuma isteka za statičke resurse u HTTP zaglavljima, pretraživač će učitati prethodno preuzete resurse sa lokalnog diska, a ne sa Interneta.

Ako se ove datoteke nalaze na vašem resursu, tada možete napisati kod za keširanje pretraživača u datoteku htaccess, koji se nalazi u korijenu stranice. Evo i samog koda, ako nekome treba.

# kompresija teksta, 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# keš pretraživača ExpiresActive On #default cache je 5 sekundi ExpiresDefault "pristup plus 1 dan" # Omogući keširanje slika i fleš za mjesec dana ExpiresByType image/x-icon "pristup plus 1 mjesec" ExpiresByType image/jpeg "pristup plus 4 sedmice" ExpiresByType image/png "pristup plus 30 dana" ExpiresByType image/gif "pristup plus 43829 minuta" ExpiresByType aplikacija/x-shockwave-flash "pristup plus 2592000 sekundi" # Omogući keširanje css, javascript i tekstualnih datoteka za jednu sedmicu ExpiresByTyscs "access plus 604800 sekundi" ExpiresByType text/javascript "pristup plus 604800 sekundi" ExpiresByType application/javascript "pristup plus 604800 sekundi" ExpiresByType application/x-javascript "pristup plus 604800 sekundi" # Omogući i ExpiresByType text/caching fajlove za jedan dan "pristup plus 43200 sekundi" # Omogući keširanje xml fajlova na deset minuta ExpiresByType application/xhtml+xml "pristup plus 600 sekundi" # Nestandardni fontovi sajta ExpiresByType application/x-font-ttf "pristup plus 1 mesec" ExpiresByType font opentype "pristup plus 1 mjesec" ExpiresByType application/x-font-woff "pristup plus 1 mjesec" ExpiresByType image/svg+xml "pristup plus 1 mjesec" ExpiresByType application/vnd.ms-fontobject "pristup plus 1 mjesec"

Ako zalijepite ovaj kod u htacces datoteku, možete još jednom provjeriti svoju web stranicu u usluzi Google PageSpeed
Insights. Ako u odjeljku " koristite keš pretraživača„Sve je u redu, znači da ćete ga imati tamo
samo veze na eksterne resurse, kao što su analitika, društvene mreže
dugmad i tako dalje.
Lično, paralelno sa ovim kodom, koristim mogućnosti svog hostinga za keširanje datoteka na strani korisnika. To izgleda ovako.

Kao što vidite, moj hosting vam omogućava da omogućite keširanje na strani pretraživača i podesite nivo kompresije i period skladištenja fajlova. Također, koristim dodatak za brzo učitavanje stranica wp super cache, ali možda ću o tome nekako reći svojim čitaocima, pretplaćeni na ažuriranja bloga.

Kako omogućiti eksternu keš memoriju datoteka u Google PageSpeed ​​Insights

Ako ste slijedili preporuke za keširanje datoteka na svom blogu. Trebali biste vidjeti samo veze ka vanjskim resursima u alatu Google PageSpeed ​​Insights. Mora da imate nešto slično.
Kao što možete vidjeti na snimku ekrana, Google PageSpeed ​​Insights se zaklinje na vanjske resurse, kao što su Yandex metrika, google analytics i drugi. Sada ću vam reći kako da ispravite ovu grešku i da napravite veze ka spoljnim resursima internim i keširanim na strani vašeg servera.

Upotreba keša pretraživača za vanjske resurse

Budući da datoteke vanjskih resursa ne pripadaju našoj stranici, prvo ih morate preuzeti. Da bismo preuzeli eksterne datoteke sa resursa trećih strana, moramo kreirati fajl 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:

preuzimanje Js( zalijepite link sa PageSpeed ​​ovdje /metrics.js, realpath("./ folder_js« ) . ‘/ metrics.js— ubacite konačnu datoteku ovdje') ;

Na ovaj način možete dodati mnogo upita. Jedina stvar koju trebate zapamtiti je da se uvjerite da nemate duple datoteke u folderu. 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 drugačije. Mora se učitati u korijen naše stranice. Također u korijenu web-mjesta trebate kreirati folder folder_js, ili pod drugim imenom sa pravom pristupa 777/755. Da biste podesili prava pristupa za fasciklu, preporučujem korišćenje Fillizille.

Da biste to učinili, jednostavno otvorite Filizilla program. Zatim odaberite folder i postavite prava pristupa, obavezno 777, nakon čega ga vraćamo na 755. To možete učiniti i u kontrolnoj tabli vašeg hostinga ako ne želite koristiti ovaj program. Pokazaću vam snimak ekrana podešavanja prava pristupa u programu Fillizilla.
Zatim otvorite odjeljak “ dozvole za fajlove" i unesite našu vrijednost 777/755.

Kako omogućiti planer zadataka za web lokaciju (cron)

Sljedeći korak, trebamo omogućiti planer zadataka za našu stranicu tako da naša skripta https://adresa vaše web stranice/kesh_js.php trčao svakodnevno. Zahvaljujući tome, naša web stranica će uvijek imati ažurnu verziju datoteka sa vanjskih izvora. Čak i ako programeri izvrše promjene u svom kodu, mi ćemo uvijek imati radnu verziju na stranici, zahvaljujući rasporedu zadataka.

Da biste zakazali zadatke za svoju web stranicu, morate otići na kontrolnu ploču vašeg hostinga i unijeti jednu od opcija koda.

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

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

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

pokretanje posla preko 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šeg domena, a script.php naziv datoteke sa zadatkom;

U našem slučaju moramo napisati:

NABAVITE https://adresu vaše web stranice/kesh_js.php

Ili izaberite alternativnu opciju, ja sam lično izabrao prvu.

Shvatili smo šta da registrujemo, sada otvaramo naš hosting i idemo na njegovu kontrolnu tablu. Koristim ISPmanager kontrolnu tablu, ako imate drugu, potražite karticu rasporeda zadataka ili cron.

Sada otvorite karticu "kreiraj".

Zatim brišemo keš pretraživača. Za Google Chrome koristite prečicu na tastaturi ctrl+shift+delete i provjerite rad stranice. Takođe preporučujem da ponovo pokrenete svoju stranicu putem alata 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 da kreirate šareno dugme za pretplatu na youtube za svoj blog, tako da ne zaboravite pretplatite se na ažuriranja. Ćao svima!