Cum se specifică data de expirare a memoriei cache. Activați memoria cache a browserului pentru Google PageSpeed

Eric Bidelman

Traducere: Vlad Merzhevich

Accesibilitatea offline devine din ce în ce mai importantă pentru aplicațiile web. Da, toate browserele au mecanisme de stocare în cache, dar acestea nu sunt de încredere și nu funcționează întotdeauna așa cum era de așteptat. HTML5 elimină unele dintre aceste supărări cu interfața ApplicationCache.

Utilizarea unei interfețe cache oferă aplicației dvs. trei avantaje:

  • navigare offline - utilizatorii vă pot explora întregul site atunci când sunt offline;
  • viteza - resursele sunt stocate în cache local, astfel încât se încarcă mai repede;
  • reducerea sarcinii pe server - browserul descarcă doar resurse modificate de pe server.

Cache-ul aplicației (sau AppCache) permite dezvoltatorului să specifice ce fișiere ar trebui să memoreze în cache browserul și să le pună la dispoziție utilizatorilor offline. Aplicația dvs. va funcționa corect chiar dacă utilizatorul face clic pe butonul „Actualizare” în timp ce este accesat modul offline.

Fișierul manifest în cache

Fișierul manifest cache este un fișier text simplu care listează resursele pe care browserul ar trebui să le memoreze pentru acces offline.

Ajutor pentru fișierul manifest

Pentru a activa memoria cache a aplicației, includeți atributul manifest în etichetă .

...

Atributul manifest trebuie să fie pe fiecare pagină din aplicația dvs. pe care doriți să o păstrați în cache. Browserul nu memorează în cache o pagină decât dacă conține un atribut manifest (și dacă nu este listat în mod explicit în fișierul manifest). Aceasta înseamnă că orice pagină cu atributul manifest vizitată de utilizator va fi adăugată implicit în memoria cache a aplicației. În acest fel, nu este nevoie să enumerați toate paginile din manifest.

Atributul manifest specifică o adresă URL absolută sau relativă, dar cale absolută trebuie să fie în cadrul aceleiași aplicații web. Fișierul manifest poate avea orice extensie, dar trebuie să specificați tipul MIME corect (vezi mai jos).

...

Fișierul manifest trebuie să fie difuzat cu tipul MIME text/cache-manifest . Poate fi necesar să adăugați un tip de fișier personalizat pe serverul web sau prin setarea .htaccess. De exemplu, pentru a configura acest tip MIME în Apache, adăugați la fișierul de configurare:

AddType text/cache-manifest .appcache

Sau în fișierul app.yaml la Aplicația Google Motor:

Url: /mystaticdir/(.*\.appcache) static_files: mystaticdir/\1 mime_type: text/cache-manifest upload: mystaticdir/(.*\.appcache)

Structura fișierului manifest

Un manifest simplu ar putea arăta cam așa:

CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js

Acest exemplu memorează în cache cele patru fișiere specificate în manifest.

Câteva lucruri de reținut:

  • linia CACHE MANIFEST trebuie să fie pe primul loc și este necesară;
  • Datele de stocare în cache a site-ului sunt limitate la 5 MB. Cu toate acestea, dacă scrieți o aplicație pentru Magazinul web Chrome, utilizarea unlimitedStorage elimină această limitare;
  • dacă fișierul manifest sau resursa specificată în acesta nu poate fi descărcată, întregul proces de actualizare a cache-ului va eșua, browserul va utiliza cache veche aplicatii.

Să ne uităm la un exemplu mai complex:

CACHE MANIFEST # 2010-06-18:v2 # Înregistrările principale memorate în cache în mod explicit CACHE: /favicon.ico index.html stylesheet.css images/logo.png scripts/main.js # Resurse de care utilizatorul va avea nevoie online NETWORK: login.php /myapi http://api.twitter.com # static.html va fi folosit dacă main.py nu este disponibil # offline.jpg va fi folosit în locul tuturor imaginilor din imagini/large/ # offline.html va fi folosit în locul tuturor fișierelor HTML FALLBACK: /main.py /static.html images/large/images/offline.jpg *.html /offline.html

Liniile care încep cu un hash (#) sunt comentarii, dar pot servi și unui alt scop. Cache-ul aplicației este actualizat numai atunci când fișierul manifest se modifică. De exemplu, la editarea imaginilor sau Funcții JavaScript, aceste modificări nu vor fi memorate din nou în cache. Trebuie să modificați fișierul manifest pentru a spune browserului să actualizeze fișierele din cache. Creați un comentariu cu numărul versiunii, suma de control sau data este o modalitate de a asigura utilizatorilor că folosesc ultima versiune. De asemenea, puteți actualiza cache-ul în mod programatic când o nouă versiune este gata, așa cum este descris în secțiunea privind actualizarea cache-ului.

Un manifest poate avea trei secțiuni diferite: CACHE, NETWORK și FALLBACK.

CACHE: Aceasta este secțiunea standard pentru înregistrare. Fișierele listate în acest bloc (sau imediat după MANIFESTUL CACHE) vor fi memorate în cache în mod explicit după ce sunt descărcate pentru prima dată.

NETWORK: Fișierele enumerate în această secțiune sunt resurse care necesită o conexiune la server. Toate solicitările către aceste resurse ocolesc memoria cache, chiar dacă utilizatorul este offline. Puteți utiliza * pentru a specifica un model.

FALLBACK: O secțiune suplimentară specifică paginile de rezervă dacă o resursă nu este disponibilă. Prima adresă URL este o resursă, a doua este o rezervă. Ambele adrese trebuie să fie relative și în aceeași locație cu fișierul manifest. Puteți utiliza * pentru a specifica un model.

Aceste secțiuni pot fi listate în orice ordine și fiecare secțiune poate apărea de mai multe ori.

Următorul manifest definește paginile „universale” (offline.html) care vor fi afișate atunci când un utilizator încearcă să acceseze rădăcina site-ului în timp ce este offline. De asemenea, se precizează că toate celelalte resurse (cum ar fi pe un site la distanță) necesită o conexiune la Internet.

MANIFESTUL CACHE # 2010-06-18:v3 # Intrările memorate în cache în mod explicit index.html css/style.css # offline.html vor fi afișate în modul offline FALLBACK: / /offline.html # Toate celelalte resurse (inclusiv site-urile) necesită o înregistrare online conexiune NETWORK: * # Resurse suplimentare în cache-ul CACHE: images/logo1.png images/logo2.png images/logo3.png

Fișierul HTML care face referire la fișierul manifest este memorat în cache automat. Nu este nevoie să îl includeți în manifest, dar vă recomandăm să faceți acest lucru.

Actualizare cache

Aplicația offline rămâne în cache până când apare una dintre următoarele:

  • utilizatorul șterge stocarea datelor din browser pentru site-ul dvs.;
  • Fișierul manifest s-a schimbat. Actualizarea unui fișier menționat în manifest nu înseamnă că browserul va re-cache această resursă. Fișierul manifest în sine trebuie înlocuit;
  • Cache-ul aplicației a fost actualizat programatic.

Stare cache

Obiectul window.applicationCache este al tău acces programaticîn memoria cache a browserului. Proprietatea status este utilizată pentru a verifica starea curentă a memoriei cache.

Var appCache = window.applicationCache; comutare (appCache.status) (case appCache.UNCACHED: // UNCACHED == 0 returnează „UNCACHED”; break; case appCache.IDLE: // IDLE == 1 returnează „IDLE”; break; case appCache.CHECKING: // CHECKING == 2 returnează „CHECKING”; STARE CACHE RECUNOSCĂ";

Pentru actualizare de software cache, applicationCache.update() este apelată mai întâi. Va încerca să actualizeze memoria cache a utilizatorului (care necesită modificarea fișierului manifest). În cele din urmă, când applicationCache.status este în starea UPDATEREADY, apelarea applicationCache.swapCache() va actualiza vechiul cache la cel nou.

Var appCache = window.applicationCache; appCache.update(); // Încercarea de a actualiza memoria cache a utilizatorului... dacă (appCache.status == window.applicationCache.UPDATEREADY) ( appCache.swapCache(); // Cu succes, schimbați la cache nou }

Utilizarea update() și swapCache() nu servește la actualizarea resurselor pentru utilizator. Acest flux spune pur și simplu browserului să verifice noul manifest, să descarce conținutul actualizat specificat și să repopuleze memoria cache a aplicației. Astfel, pagina este descărcată de pe server de două ori, prima dată umplând noul cache al aplicației, iar a doua oară actualizând conținutul paginii. Vești bune: Puteți evita această descărcare dublă. Pentru a actualiza utilizatorul cu o nouă versiune a site-ului dvs., configurați urmărirea pentru evenimentul updateready în timp ce pagina se descarcă.

// Verificați dacă un nou cache este disponibil când pagina este încărcată window.addEventListener("load", function(e) ( window.applicationCache.addEventListener("updateready", function(e)) ( if (window.applicationCache.status = = fereastra applicationCache.UPDATEREADY) ( // Browserul descarcă un nou cache // îl înlocuiește și actualizează pagina window.applicationCache.swapCache(); if (confirm(„O nouă versiune a acestui site este disponibilă. Încărcați-o?”) )) ( window.location.reload( ); ) ) else ( // Manifestul nu s-a schimbat, nimic nou pe server ) ), false ), false);

Evenimente AppCache

După cum vă puteți aștepta, evenimente suplimentare monitorizează starea memoriei cache. Browserul declanșează evenimente în timpul procesului de descărcare, când memoria cache a aplicației este actualizată și când apare o eroare. Următorul fragment ascultă evenimente pentru fiecare tip de eveniment din cache:

Funcția handleCacheEvent(e) ( //... ) funcția handleCacheError(e) ( alert(Eroare: Nu s-a putut actualiza memoria cache!"); // Executat după prima memorare în cache a manifestului appCache.addEventListener("cached", handleCacheEvent, false ); // Verificarea actualizării este întotdeauna pe primul loc în secvența de evenimente appCache.addEventListener("verificare", handleCacheEvent, false, browserul preia resursele appCache.addEventListener("descărcare",); handleCacheEvent, false); // Manifestul a returnat o eroare 404 sau 410, descărcarea a fost întreruptă // sau manifestul s-a schimbat în timpul descărcării appCache.addEventListener("eroare", handleCacheError, // Executată după prima); descărcarea manifestului appCache.addEventListener(„noupdate”, handleCacheEvent, false ; , false); // Execut pentru fiecare resursă listată în manifest în timp ce acestea sunt preluate de addEventListener(„progress”, handleCacheEvent, false); // Execut când resursele manifest au fost descărcate recent appCache.addEventListener("updateready", handleCacheEvent, false);

Dacă fișierul manifest sau resursa specificată nu poate fi descărcată, toate actualizările sunt eliminate. Browserul va continua să folosească vechiul cache al aplicației în cazul unei astfel de eșecuri.

Vreau să înțeleg sfatul pe care mi-l dă în acest sens referitor la Google: Utilizați memoria cache a browserului! Ei bine, hai să încercăm să rezolvăm!

Explicații de la Google: Dacă specificați data sau data de expirare a resurselor statice în anteturile HTTP, browserul va încărca resursele primite anterior de la disc local, nu de pe internet.

Soluția la această problemă este introducerea codului în fișierul .htaccess care va gestiona memoria cache în browserul utilizatorului și va indica cât timp ar trebui să fie stocate aceste date. Iată codul pe care l-am introdus în mine, la sfatul altor webmasteri:

# stocarea în cache în browser din partea utilizatorului ExpiresActive On ExpiresDefault „acces 7 zile” ExpiresByType aplicație/javascript „acces plus 1 an” ExpiresByType text/javascript „acces plus 1 an” ExpiresByType text/css „acces plus 1 an” ExpiresByType text/html „acces plus 7 zile” ExpiresByType /x-javascript „acces 1 an” ExpiresByType image/gif „acces plus 1 an” ExpiresByType image/jpeg „acces plus 1 an” ExpiresByType image/png „acces plus 1 an” ExpiresByType image/jpg „acces plus 1 an” ExpiresByType imagine/pictogramă x „acces 1 an” Aplicația ExpiresByType/x-shockwave-flash „acces 1 an”# Cache-Control # 30 de zile # 30 de zile Set antet Cache-Control „max-age=2592000, public”# 2 zile Set antet Cache-Control „max-age=172800, public, must-revalidate”# 1 zi Set antet Cache-Control „max-age=172800, private, must-revalidate” # utilizați memoria cache a browserului FileETag MTime Size ExpirăActiv la ExpirăDefault „acces plus 1 an” #Interziceți trimiterea antetelor HTTP Vary către browserele din familia MSIE BrowserMatch „MSIE” forțat-no-varie BrowserMatch „Mozilla/4.(2)” forțat-no-vary

După cum puteți vedea, lista este impresionantă, există în principal fișiere de stil și scripturi. Poate că toate acestea nu vor accelera atât de mult site-ul, dar vreau să-mi dau seama din principiu.

Oamenii scriu că nu toate găzduirile acceptă această funcție la nivel de server, poate și găzduirea mea. i-am scris suport tehnicși a început să aștepte un răspuns. inca nici un raspuns :(

Tocmai am răspuns după un alt mesaj al meu. Raspunsul a fost:

O zi buna!

Cache-ul funcționează așa cum ar trebui, doar bibliotecile șterse o singură dată care sunt preluate de pe Twitter, Twimg etc. nu sunt stocate în cache. Din câte puteți vedea, totul este în regulă.

Ei bine, deocamdată voi crede că toate acestea sunt adevărate. Ai vreo părere despre asta? Am descris una dintre soluțiile la această problemă în...

SFATUL WEBMASTER: Capacitatea de a face bani pe Internet este doar jumătate din luptă, cealaltă jumătate este capacitatea de a scoate bani electronici în mod PROFIT. Iată o listă de carduri bancare offshore din care puteți retrage fonduri și apoi să retrageți facturi clare de pe ele:

1. Payoneer- Cel mai popular sistem de plată din lume pentru freelanceri. Emite carduri, situate în SUA.

2. EpayService- Sistemul de plată american, foarte popular în multe țări, oferă un card MasterCard în EVRO gratuit pentru rezidenții CSI și Europa.

3. Skrill- Singurul sistem de plată care funcționează cu criptomonede și în același timp emisiuni gratuite carduri bancare MasterCard.

4. AdvCash- Banca offshore este situată în Belize, puteți deschide un cont în dolari, euro, lire și ruble.

5. Payeer- Sediul acesta sistem de plata este situat în Georgia, puteți deschide și un cont în dolari, euro și ruble.


Domeniul RU - 99 RUR
Domeniul RF - 99 RUR

Igor. Actualizare: 21 noiembrie 2017.

Bună ziua, dragi cititori ai site-ului blogului. Continui seria de articole care se referă la măsurile de optimizare, iar astăzi este timpul să configurez utilizarea cache-ului browserului în aceste scopuri de către utilizatori, acesta fiind următorul pas în accelerarea site-ului.

Fiecare acțiune care vă permite să vă apropiați de acest obiectiv va fi un plus în promovarea unei resurse web și, prin urmare, nu fiți prea leneși să vă uitați măcar la materialele în care am dat descrieri, precum și, care, fără îndoială, vă vor ajuta în implementarea sarcinii generale.

În continuare, voi încerca să ofer instrucțiuni clare despre cum să configurați memorarea în cache a browserului prin implementare cod specialîntr-un minunat fișier .htaccess. Adevărat, acest lucru nu este pentru toată lumea și nu poate ajuta întotdeauna, dar mai multe despre asta mai jos.

Cred că fiecare dintre voi înțelege ce este stocarea în cache, cel puțin în schiță generală. Pentru orice eventualitate, o să explic pe scurt. Să presupunem că un cititor deschide o pagină a resursei dvs. într-o fereastră de browser, ale cărei toate componentele (conținut, stiluri, scripturi etc.) sunt descărcate de pe serverul de găzduire, ceea ce durează ceva timp.

Să presupunem că avem posibilitatea de a lansa un mecanism care ne va permite să salvăm copii ale elementelor paginii direct în browserul web al utilizatorului care le vizitează. Apoi, cu fiecare solicitare ulterioară, toate aceste elemente vor fi preluate direct din memoria cache a browserului vizitatorului (), adică din folder special, care se află pe hard disk-ul computerului său.

Câștigul în viteza de descărcare va fi evident. Acesta este algoritmul pe care îl vom studia în acest articol. Apropo, pe lângă subiect, puteți citi despre cum, împreună cu accelerarea site-ului, puteți realiza, ceea ce este foarte relevant în aceste zile.

Acum câțiva ani, am vorbit despre optimizarea unuia dintre proiectele mele pe baza unei analize a Page Speed, realizată printr-o extensie (acum este disponibil doar un serviciu online), care a oferit o imagine mai detaliată.

Ceea ce este important este că, în cea mai mare parte, codul propus mai jos este destul de suficient pentru a crea condiții în care Pagespeed nu va mai face nicio pretenție și, prin urmare, se va asigura că paginile se încarcă mai repede în măsura necesară.

Deci, pe baza celor de mai sus, trebuie să asigurăm ieșirea unuia dintre anteturile Last-Modified și ETag, precum și a unuia dintre perechile Expires sau Cache-Control: max-age. Pentru claritate și pentru a extinde gama, să luăm în considerare diverse opțiuni.

Variații de cod pentru gestionarea memoriei cache folosind anteturile Last-Modified, Expires și Cache-Control

Dacă găzduirea dvs. este deja configurată pentru a scoate același Last-Modified, atunci jumătate din lucrare este gata (apropo, verificați prezența acestui antet important, inclusiv în lista lor un instrument pentru verificarea răspunsului serverului de la Yandex). Dacă nu, atunci este destul de ușor să faci asta scriind câteva rânduri în același .htaccess de neînlocuit:

RewriteRule .* - RewriteRule .* -

Adevărat, această metodă va funcționa, din nou, cu condiția să aveți un „Apache pur” (dar exact acesta este cazul pe care îl luăm în considerare). Vom presupune că antetul Last-Modified, a cărui valoare, apropo, va afișa data ultima schimbare, configurat.

Acum este rândul Cache-Control cu ​​parametrul max-age, a cărui valoare va specifica perioada de stocare în cache a fiecărui obiect static specific. Modulul vine pe scenă antete de mod, al cărui cod ar trebui introdus în .htaccess:

#dezactivați memoria cache

Trebuie remarcat faptul că prin recipient ifModule Serverul verifică prezența acestui modul. Dacă aceasta este absentă, directiva nu va fi executată, deci utilizarea ei în orice caz nu ar trebui să conducă la erori.

Timpul de păstrare a memoriei cache este determinat folosind parametrul varsta maxima, valoarea sa este setată în secunde. Datorită comentariilor (pe care, apropo, le puteți șterge în siguranță) după simbolul hash „#”, cred că baza acestei construcții este clară.

Cu toate acestea, în loc de anteturile modului, este destul de posibil să utilizați modulul modul expiră, afișând antetul Expires (care, conform Google însuși, este de preferat deoarece are suport mai larg). În acest caz, fragmentul de cod pentru a-l activa va fi astfel:

Punctul de pornire pentru data de expirare a memoriei cache atunci când utilizați antetul Expires este data primei încărcări. Mai mult, spre deosebire de Cache-Control, unde perioada de timp este definită doar în secunde, aici poate fi specificată în orice format de timp, inclusiv anul.

Pentru a vedea acest lucru, priviți secțiunea de imagine a codului. Acolo am indicat în mod specific timpul în diferite unități: 1 lună, 4 săptămâni, 30 de zile, 43829 minute, 2592000 secunde.

Este clar că într-o lună și într-un an pot exista cantitate diferită zile, săptămâni, minute și secunde, dar acest lucru nu este important deoarece se folosesc valori medii. Apropo, pentru JS, fișiere CSSși imagini, se recomandă setarea unei perioade de timp de cel puțin o săptămână, dar nu mai mult de un an. În acest caz, de fapt, data sfârșitului așteptat al perioadei de stocare în cache a acestei versiuni a obiectului va fi indicată ca valoare a antetului Expires în răspunsul serverului.

Pe lângă modulele menționate, este util să se folosească și mod setenvif. Faptul este că browserele web ale familiei Microsoft Internet Explorer și unele versiuni de Mazila nu răspund corect server HTTP Variați antetul, care aduce, de asemenea, o contribuție importantă la gestionarea stocării în cache. Acest modul vă permite să rezolvați această problemă prin excluderea lui Vary din răspunsul serverului:

Ca rezultat obținem două variante finale setările de cache, pe care le puteți verifica inserând una câte una în .htaccess (nu recomand să le folosiți pe ambele în același timp):

#cache fișiere HTML și HTM pentru o zi Set antet Cache-Control „max-age=43200”#cache CSS, JavaScript și fișiere text timp de o săptămână Set antet Cache-Control „max-age=604800”#cache flash și imagini timp de o lună Set antet Cache-Control „max-age=2592000”#dezactivați memoria cache Antetul dezactivat Cache-Control BrowserMatch „MSIE” forțat-no-varie BrowserMatch „Mozilla/4.(2)” forțat-no-vary

ExpiresActive Pe #cache implicit pentru 5 secunde ExpiresDefault „acces plus 5 secunde” #caching flash și imagini pentru o lună ExpiresByType imagine/pictogramă x „acces plus 1 lună” ExpiresByType imagine/jpeg „acces plus 4 săptămâni” ExpiresByType imagine/png " acces plus 30 de zile" ExpiresByType imagine/gif "acces plus 43829 minute" Aplicația ExpiresByType/x-shockwave-flash "acces plus 2592000 secunde" #caching CSS, JavaScript și fișiere text timp de o săptămână ExpiresByType text/css "acces plus 60480 secunde" ExpiresByType text/javascript „acces plus 604800 secunde” ExpiresByType aplicație/javascript „acces plus 604800 secunde” ExpiresByType aplicație/x-javascript „acces plus 604800 secunde” #cache fișiere HTML și HTM pentru o zi ExpiresByType „access plus 604800 secunde” „ #cache fișiere XML timp de zece minute ExpiresByType application/xhtml+xml „acces plus 600 de secunde” BrowserMatch „MSIE” forțat-no-varie BrowserMatch „Mozilla/4.(2)” forțat-no-vary

Permiteți-mi să vă reamintesc încă o dată că, în ciuda prezenței containerului IfModule, care asigură siguranța editării, nu ar fi de prisos să faceți acest lucru de fiecare dată când schimbați .htaccess copie de rezervă versiunea originală a fișierului (puteți să-i copiați pur și simplu conținutul și să-l salvați pe computer) pentru a nu fi prins prin surprindere de forța majoră într-o variantă sau alta.

Cod pentru generarea antetelor Etag și Expires pentru a configura memoria cache

În cazul în care directivele propuse mai sus brusc nu funcționează (chiar dacă Apache „pur” este instalat pe găzduirea dvs.), să ne uităm la un alt caz, și anume, atunci când câteva categorii sunt folosite ca instrumente de gestionare a memoriei cache. anteturile necesare Etag și Expiră. După cum vă amintiți, ambii sunt responsabili pentru livrarea la timp a fișierelor din cache, inițiind o verificare a relevanței versiunii curente.

Dar dacă valoarea Expires afișează data ultimei modificări, atunci ETag-ul folosește unul sau altul identificator unic de resursă (mai des acest rol este jucat de versiunea fișierului). Pentru a activa ETag, trebuie să introduceți doar o linie în același .htaccess:

FileETag MTime Size

Ei bine, atunci aplica modul modul expiră, deja cunoscut de noi. De asemenea, puteți adăuga mod setenvif, care, așa cum am spus mai sus, interzice formarea antetelor Vary pentru un anumit grup de browsere web pentru a asigura formarea unui cache din partea lor:

FileETag MTime Size ExpirăActiv la ExpirăDefault „acces plus 1 an” BrowserMatch „MSIE” forțat-no-varie BrowserMatch „Mozilla/4.(2)” forțat-no-vary

Aici folosim un complex cu un minim de tipuri de obiecte implicate, dar cele mai populare (CSS, JavaScript și imagini), care ar trebui să fie și suficiente pentru a oferi eficienta maximaîn accelerarea locului. Dacă doriți, puteți adăuga alte tipuri de fișiere la setul „jpg|jpeg|gif|png|ico|css|js”.

În plus, în exemplul de cod de mai sus, toate fișierele sunt supuse aceleiași perioade de viață cache de un an („acces plus 1 an”), care este recomandat de Google. Dar puteți specifica propria perioadă de timp pentru fiecare grup de obiecte, urmând exemplul conținutului modulelor mod_expires și mod_headers din secțiunea anterioară a articolului.

Verificarea prezenței antetelor necesare în răspunsul serverului

După ce lipiți codul în fișierul .htaccess, puteți verifica dacă anteturile necesare sunt incluse în răspunsul serverului. În acest scop puteți folosi câteva serviciu online, de exemplu, Checkmy.ru, unde, în calitate de client (Agent utilizator) care trimite o solicitare HTTP către server, selectați orice browser și introduceți, de asemenea Adresa URL a resursei(de exemplu, am luat calea către imaginea folosită într-unul dintre articolele de pe blog):


După ce faceți clic pe butonul „Trimiteți cererea”, după câteva secunde va apărea rezultatul:


După cum puteți vedea, în cazul meu sunt prezente toate cele patru anteturi. Am spus că trebuie afișată una dintre perechile „Last-Modified - ETag” și „Expires - Cache-Control”, restul nu sunt necesare. În acest caz, setul complet, din câte se poate judeca cineva, nu va cauza prejudicii.

Apropo, dacă testați înainte de a începe configurarea memoriei cache, puteți determina imediat cât de productive vor fi acțiunile dvs.

La urma urmei, dacă nginx este prezent în răspunsul serverului, atunci va fi necesar să-l configurez (furnizorul meu a făcut acest lucru), iar fișierul de configurare .htaccess va fi inutil aici. În acest caz, așa cum am menționat deja, va trebui să utilizați ajutorul serviciului de asistență, cu excepția cazului în care, desigur, tariful dvs. de găzduire și cunoștințele insuficiente vă permit să rezolvați singur problema.

În continuare, pentru a consolida materialul, vă sfătuiesc să apelați la videoclip și să urmăriți 6 lecții în succesiune (dintre care una este dedicată instalării caching-ului în browsere), care discută în detaliu cele mai multe aspecte importante accelerați site-ul WP:

");">

Doriți să primiți articole proaspete, relevante și utile în timp util? Apoi te poți abona:

Mai multe articole pe acest subiect:

60 de recenzii

  1. Denis

    Foarte mod util pentru a spori confortul vizitei site-ului. La urma urmei, prin optimizarea vitezei de încărcare, economisiți astfel timpul vizitatorului și pentru aceasta vă va fi recunoscător vizitând site-ul dvs. din nou și din nou. Ceea ce va afecta direct veniturile site-ului într-un mod pozitiv.

  2. Igor

    Absolut dreptate, Denis. Totul este interconectat în promovarea site-ului.

  3. Marazzi

    Nu înțeleg nimic, browserul își amintește efectiv site-urile pe care a fost în cookie-uri, dacă ștergeți cookie-urile. CONFORM METODEI DVS., atunci circuitul dumneavoastră nu va mai funcționa, sau mai bine zis, înțeleg că despre asta vorbim, conceput pentru vizitator obișnuit care nu curăță istoricul7 ABONAT, AȘTEPTĂ UN RĂSPUNS1

  4. Serghei Dmitrievici

    Foarte informatii utile. Mi s-a părut util. Mulțumesc.

  5. Igor

    Marazzi, in primul rand, cookie-urile si cache-ul sunt lucruri diferite. Cookie-urile sunt fișiere speciale cu un set de date care vă permit să identificați un utilizator dacă acesta vizitează o resursă web. Și memoria cache (tradusă din engleză ca depozit, ascunzătoare) a browserului este un fel de loc izolat pentru stocarea copiilor de documente (de exemplu, pagini web de site), care, dacă este necesar, sunt afișate în browser. Pe partea de server este făcută comanda pentru a utiliza memoria cache din partea browserului utilizatorului, iar un folder cu memoria cache este creat pe computerul utilizatorului. La rândul lor, utilizatorul poate regla frecvența creării de copii în cache ale paginilor site-ului, ștergând folderul cache. Sau dezactivați complet memorarea în cache, setări browsere moderne ei o permit. Cu cât ștergeți mai des memoria cache, cu atât mai mult versiune noua primești pagini.

  6. Nikolai

    Super, si totul este OK aici!!!

  7. marazzi

    Ei bine, despre asta vorbeam.

  8. Alexandru
  9. Nikolai

    Multumesc pentru articol. Adevărat, nu este complet clar cum să ștergeți acest cache mai târziu dacă, de exemplu, a noua sectiune sau secțiunea, dimpotrivă, va dispărea. Desigur, exagerez foarte mult, dar sensul este același. Uneori, memoria cache trebuie șters, cum este implementat acest lucru în acest cod?

  10. Irina

    BINE! Mulțumesc!
    Acest cod a ajutat, acum 80 din 100

    FileETag MTime Size ExpiresActiv on ExpiresDefault „acces plus 1 an”

  11. Igor

    Nikolay, nu prea am înțeles întrebarea ta. Acesta este codul pentru stocarea în cache a paginilor din browserele utilizatorilor; Articolele și categoriile noi sunt afișate chiar și atunci când memoria cache este plină. Doar elementele care sunt memorate în cache pentru o lungă perioadă de timp sunt perioadă lungă de timp ramane neschimbat.

  12. Andrei

    Mulțumesc. Dar dacă am nevoie doar de anumite elemente pentru a fi stocate în cache, de exemplu, sigla și steagurile țărilor din subsol, atunci ce ar trebui să fac?

  13. Igor

    Andrey, de ce trebuie să separați imaginile, să memorați în cache unele și nu altele? De obicei, imaginile nu se schimbă cu viteza caleidoscopică.

  14. Andrei

    Ei bine, da, ai dreptate cu pozele. A pagina specifică nu păstrați în cache (de exemplu, din panoul de administrare). Este posibil?

  15. Igor

    Desigur disponibil. Dacă utilizați un plugin de stocare în cache, cum ar fi Hyper Cache, atunci setările sale au o mulțime de opțiuni diferite, inclusiv posibilitatea de a exclude paginile care nu pot fi stocate în cache.

  16. Yaroslav

    Articol foarte util, îmi doream de mult să configurez memoria cache, dar anterior am găsit prima metodă prezentată peste tot și nu a făcut absolut nimic.
    Dar datorită celei de-a doua metode, totul funcționează cu un bang!! PS 91

  17. Igor

    Rezultat bun, Yaroslav.

  18. stan

    nici un fel nu funcționează

  19. Igor

    Stan, se poate ca asta să depindă în mare măsură de găzduitor.

  20. Ilya

    Nu există cuvinte pentru cât timp am căutat un articol despre cum să activez timpul de stocare în cache a browserului, a trebuit doar să introduc codul de top. Multumesc pentru articol.

  21. Igor

    Te rog, Ilya.

  22. Gri

    Multumesc Functioneaza!

  23. Serghei

    nici una dintre metode nu funcționează
    Hosterul este adecvat

    Se pare că vor trebui să scrie pentru a susține

  24. Igor Gornov

    Da, Sergey, poate. Puteți vedea singuri că mulți reușesc să o implementeze.

  25. Alexandru Puzatykh

    Mulțumesc. Informații grozave. Acum o voi corecta pe site-ul meu. În caz contrar, pgespeed dă un semn roșu.

  26. Yuri

    Am făcut totul așa cum este descris, dar viteza de încărcare a PageSpeed ​​​​Insights nu s-a schimbat (74%). Care ar putea fi motivul?

  27. Yuri

    Aici este htaccess-ul meu
    # ÎNCEPE WordPress

    RewriteEngine Pornit
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %(REQUEST_FILENAME) !-f
    RewriteCond %(REQUEST_FILENAME) !-d
    RewriteRule. /index.php [L]

    #ENDWordPress
    Adaug codul tau si nu se schimba nimic
    PageSpeed ​​​​Insights rămâne la 74%.
    Spune-mi care ar putea fi problema???

  28. Igor Gornov

    În configurația specifică a serverului dvs. de găzduire unde se află site-ul. În opinia mea, am notat deja în articol și în comentarii că această metodă nu este potrivită pentru toată lumea.

  29. Valery

    Igor, bun articol. Îmi doream de mult să fac asta, dar nu știam cum. Acum este clar. Am o întrebare: „Unde în fișierul .htaccess ar trebui să lipesc codul?”

  30. Igor Gornov

    Valery, dacă aveți deja câteva fragmente de cod în .htaccess, atunci ar trebui să existe o linie ca aceasta:

    #ENDWordPress

    În acest caz, nu numai acesta, ci și orice cod ar trebui plasat deasupra acestei linii. Restul nu contează.

  31. vokacan

    Informațiile sunt utile, dar destul de greu de înțeles pentru un începător, după părerea mea.

  32. Aely

    În mod ciudat, nu a funcționat același lucru pentru mine, dar ce ar trebui să fac, sau mai degrabă, ce ar trebui să-l întreb pe gazdă?

  33. Igor Gornov

    Trebuie să întrebați găzduitorul următoarele: este posibil să activați memorarea în cache pe server pentru toată lumea? fișiere posibile. Poate că au deja un algoritm gata făcut, diferit de cel pe care l-am propus.

  34. Aely

    Multumesc, am scris-o acum.

  35. Aely

    Iată o glumă, ei (hosterul) au spus că au totul inclus, iar eu le spun, iar Googlespeedtest arată „utilizați cache-ul browserului” și îmi spun că acestea sunt întrebări pentru Googlespeedtest. Nu pot să-mi dau seama pe cine să cred?

  36. Igor Gornov

    Aely, această atitudine față de client din partea hosterului este, cel puțin, ciudată. În teorie, ei ar trebui să explice și să ofere algoritm posibil pentru a-l adăuga în fișierul .htaccess pentru a activa caracteristica chiar dacă o au activată. Mă întreb dacă nu este prima dată când contactați serviciul de asistență, cum s-a comportat acesta în alte situații?

"" pentru a optimiza site-ul conform sfatului instrumentului de la Viteza paginii Google Perspective. Fiecare proprietar de site-uri web s-a confruntat cu problema dificultății de stocare în cache a scripturilor js ale site-urilor terțe.

Nu e ca asta indicator important pentru optimizare, în esență, elementele CSS și JS sunt transferate din antetul site-ului în subsol, în plus, dacă te uiți la Resurse Google Au probleme cu acest punct :)

Dacă doriți totuși să vă optimizați site-ul web sau clienții prin memorarea în cache a scripturilor terță parte, de exemplu. observa frumos numar pe contorul din analizor, apoi urmați pașii de mai jos, care vor dura câteva minute.

Cacheul browserului cu elementele sale

Realizarea unui cache pentru diferite scripturi, exemplu preluat de pe blogul Devaka ru (la momentul scrierii)
De exemplu:

/assets/copyright.min.js (nu a fost specificată data de expirare)
/assets/i/566.jpg (nu a fost specificată data de expirare)
/assets/i/icons.png (nu a fost specificată data de expirare)
/i/postcomm-left.png (nu a fost specificată data de expirare)
/i/postcomm-right.png (nu a fost specificată data de expirare)



Pentru a remedia prima problemă, accesați fișierul .htaccess, care se află la rădăcina site-ului și introduceți acest cod în partea de jos:

# text de compresie, 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# cache a browserului ExpiresActive pe #cache-ul implicit este de 5 secunde ExpiresDefault „acces plus 1 zi” # Activați memoria cache a imaginii și flash pentru o lună ExpiresByType imagine/pictogramă x „acces plus 1 lună” ExpiresByType imagine/jpeg „acces plus 4 săptămâni” ExpiresByType imagine/png „acces plus 30 de zile” ExpiresByType imagine/gif „acces plus 43829 minute” Aplicația ExpiresByType/x-shockwave-flash „acces plus 2592000 secunde” # Activați stocarea în cache css, javascript și fișiere text timp de o săptămână ExpiresByType text/css „acces plus 604800 secunde” ExpiresByType text/javascript „acces plus 604800 secunde” ExpiresByType aplicație/javascript „acces plus 604800 secunde” ExpiresByType application/x-javascript „acces plus 604800 secunde” fișiere htm pentru o zi ExpiresByType text/html „acces plus 43200 secunde” # Activați stocarea în cache fișiere xml timp de zece minute ExpiresByType application/xhtml+xml „acces plus 600 de secunde” # Fonturi non-standard ale site-ului ExpiresByType application/x-font-ttf „acces plus 1 lună” Font ExpiresByType/opentype „acces plus 1 lună” ExpiresByType application/x- font- woff „acces plus 1 lună” ExpiresByType imagine/svg+xml „acces plus 1 lună” ExpiresByType application/vnd.ms-fontobject „acces plus 1 lună”

Exemple de scripturi terțe

Dacă ați făcut totul corect în primul pas, ar trebui să vedeți ceva de genul acesta:

Utilizați memoria cache a browserului pentru următoarele resurse


Desigur, este posibil să aveți doar câteva adrese URL pentru valori și analize, de exemplu, dar acest lucru nu este atât de important, instrucțiunile de corecție sunt aceleași pentru toată lumea.

Cache-ul elementelor terțelor părți

Inițial, articolul trebuia să fie dedicat doar acestor puncte, dar simțind că vor fi multe întrebări, au fost adăugate încă câteva puncte.

Nu există nicio modalitate de a influența timpul de cache al unei resurse terță parte, dar o puteți face pe proiectul dvs. web Cea mai corectă mișcare în această situație este descărcarea automată scenarii proaspete metrici, analize etc. pe site-ul dvs. folosind cron (script prezent)

Să punem lucrurile în ordine acum!
Pasul 1. Copiați lista tuturor scripturilor către care Google PageSpeed ​​​​a indicat într-un bloc de note sau direct din browser.
Pasul 2. Creați un fișier pe găzduirea dvs. cu extensia phpși inserați următorul cod în el:

Atenţie! Nu aveți permisiunea de a vizualiza text ascuns.

Există 3 în cod, de exemplu, dar puteți crea câte puncte aveți nevoie, doar copiați și adăugați mai jos sau ștergeți-le pe cele inutile.


În această linie schimbăm a 3-a valoare:
Utilizați browserul cache pentru Google PageSpeed
1. Scriptul pe care îl vom încărca pe site-ul nostru web

Atenţie! Nu aveți permisiunea de a vizualiza text ascuns.

2. Calea unde să salvezi fișierul:

Realpath("./js")

În acest exemplu este folderul js, adică. calea exactă va fi www.site/js/ (trebuie să creați singur folderul și să setați permisiunile de scriere CHMOD pentru el)

3. Numele scriptului, dacă cu extensia .js, atunci îl scriem împreună cu acesta, dacă fără el sau cu altceva, atunci facem totul ca în exemplul de mai sus. Vă rugăm să fiți atenți că nu există fișiere cu același nume.

Pasul 3. Încărcați fișierul editat pe server

Pasul 4. Plasați fișierul pe cron pentru actualizare automata fișiere

Pentru a evita operare incorectă cu servicii, dacă fac modificări la scripturi, Cron se va autentifica automat și le va actualiza pe serverul lor.

Accesați panoul de găzduire și selectați fila CRON și introduceți comanda și, de asemenea, specificați ora o dată pe oră/zi sau în orice alt moment.

Wget -q -O - /dev/null http://www..php >/dev/null 2>&1

Nu uitați să schimbați adresa URL și poate că sintaxa comenzii dvs. va fi diferită, uitați-vă la exemple de comenzi cron în ajutorul pentru găzduire sau contactați asistența tehnică.

Pasul 5. Schimbați calea către JS în contor sau script

Dacă a existat o cale în contor https://mc.yandex.ru/metrika/watch.js, atunci înlocuiți-o cu o cale în interiorul site-ului, de exemplu http://www..js

Asta e tot, acum nu ar trebui să vezi niciun mesaj despre setarea cache-ului browserului în lista PageSpeed ​​​​Insights.

Descărcați instrucțiunile „Activați memoria cache a browserului pentru Google PageSpeed” din arhivă Nu puteți descărca fișiere de pe serverul nostru
Introducand articol util„Activați cache-ul browserului pentru Google PageSpeed” pentru a optimiza site-ul la sfatul instrumentului de la Google PageSpeed ​​​​- tot ce e mai bun avem forumuri, hack-uri, module, șabloane.