Stocarea în Cache a Browserului
Dacă nu l-ați citit deja, vă recomand să citiți primul articol de optimizare a performanței „explicat pe înțelesul tuturor”, unde am discutat despre cache-ul de pagini pentru WordPress.
Acum vom aborda „stocarea în cache a browserului”, deoarece mulți oameni le confundă pe cele două.
Deci, primul lucru de știut este că stocarea în cache a paginilor și cache-ul browserului sunt două lucruri diferite.
Memorarea în cache este procesul de „amintire” a informațiilor pentru regăsirea rapidă. Atât cache-ul paginilor, cât și cache-ul browserului sunt metode pentru amintirea informațiilor, dar o fac în locuri diferite.
Memorarea în cache a paginii are loc pe serverul dvs., în timp ce cache-ul browserului se întâmplă în browser. Mai exact, în browserul fiecărui vizitator și pe fiecare dispozitiv cu care se accesează site-ul dvs. Și pentru a fi clar, prin browser ne referim la programul pe care îl folosiți pentru a vizualiza paginile web, de ex. Safari, Chrome, Internet Explorer, Firefox etc.
Să Preparăm o Pagină Web!
Ne putem imagina stocarea în cache a browserului ca prepararea unei mese. În acest caz, „masa” este pagina web pe care doriți să o consultați, iar toate fișierele utilizate pe acea pagină sunt „ingrediente”. Înainte de a putea pregăti o masă, trebuie să verificați dacă aveți toate ingredientele potrivite și că acestea sunt proaspete. Apoi combinați toate aceste ingrediente într-un mod specific pentru a prepara masa.
Dacă este prima dată când faceți această masă specială, probabil că nu aveți toate ingredientele la îndemână în bucătăria dvs. Așadar, va trebui să mergeți la magazin și să le cumpărați – aceasta va necesita un timp suplimentar.
Să presupunem că vrei să iei aceeași masă din nou mâine. De data aceasta, deoarece aveți deja majoritatea sau toate ingredientele în bucătărie, puteți pregăti masa mult mai repede.
Ok, deci, în analogia noastră, vă folosiți browserul pentru a solicita o anumită pagină web – o anumită masă. Browserul contactează serverul în care locuiește acea pagină web, solicită rețeta pentru acea pagină și primește lista de ingrediente. Aceste ingrediente sunt, în principiu, HTML, CSS, JavaScript și fișiere de imagine. Dacă este prima dată când accesați această pagină web, browserul dvs. nu va avea niciunul dintre ingrediente la îndemână, așa că trebuie să „meargă la cumpărături” și să le recupereze pe toate proaspete de pe server.
Dar când vizitați din nou aceeași pagină web, browserul dvs. nu trebuie să reasambleze totul de la zero, acesta poate folosi ingredientele deja stocate și poate cere serverului doar lucrurile noi pe care nu le are.
De aceea, prima dată când accesați o pagină web durează mai mult decât următoarele vizite.
Este posibil să fi observat acest fenomen când faceți teste de viteză repetate sau când utilizați „vizualizarea repetată” de pe webpagetest.org. Vizualizarea repetată este întotdeauna mai rapidă, deoarece multe dintre componente au fost deja descărcate și nu trebuie să fie preluate altele noi.
Scopul memorării în cache a browserului este de a face vizualizările repetate ale unei pagini web mai eficiente și mai rapide.
Ingredientele din bucătăria ta rămân însă învechite, nu-i așa?
Cu siguranță, la fel și ingredientele paginii dvs. web. În ceea ce privește o pagină web, „învechită” înseamnă că ați actualizat ceva, ceea ce face ca versiunea de cache să nu mai fie actualizată. La fel ca produsele alimentare, ingredientele paginii web trebuie să aibă și o dată de expirare, astfel încât browserul să știe dacă le folosește sau dacă obține o versiune nouă atunci când gătește pagina web.
Când browserul primește lista de ingrediente de pe server, fiecare fișier are un „antet”. Acestea sunt doar câteva informații despre acel fișier, inclusiv cât timp poate fi considerat proaspăt.
Este ca și cum ai verifica data de „vânzare până” sau „expirare” a ingredientelor. Această expirare va varia în funcție de tipul de fișier. Scopul este de a păstra ingredientele proaspete cât mai mult posibil, pentru a evita acele drumeții pentru cumpărături consumatoare de timp.
Deci, browserul verifică expirarea pentru lista de ingrediente și apoi verifică bucătăria (cache-ul browserului) pentru a vedea dacă ceea ce există este vechi sau nu. Dacă data de expirare nu a trecut, browserul nu trebuie să descarce acel ingredient, ci doar îl folosește pe cel pe care îl are deja, care este mult mai rapid.
Uneori, în Pingdom/GT Metrix etc., primiți recomandarea:
„Următoarele resurse cache pot avea o durată de viață scurtă. Specificați o expirare cu cel puțin o săptămână în viitor pentru următoarele resurse ”
Ceea ce spune este că aceste ingrediente au o durată scurtă de valabilitate, acestea se învechesc rapid, așa că va trebui să le cumpărați frecvent și acest lucru este ineficient.
Deci, în general, este o idee bună să aveți o dată de expirare cât mai lungă, astfel încât browserul dvs. să nu trebuiască să facă efort de a accesa tot timpul serverul pentru o nouă versiune a fișierului respectiv.
Care Este Rolul WP Rocket la Masă?
WP Rocket determină datele de expirare optime pentru ingrediente, astfel încât bucătarul (browserul dvs.) să poată face câteva călătorii de cumpărături. Face asta cu reguli scrise în fișierele .htaccess.
Puteți seta doar date de expirare pentru fișierele difuzate de pe site-ul dvs. – din propria bucătărie, dacă doriți. Când cumpărați o masă pre-ambalată dintr-un magazin, trebuie să aveți încredere în ingredientele lor – la fel ca atunci când utilizați conținut de la o terță parte precum Google, Facebook etc. Este pre-ambalat și nu este din bucătăria dvs., astfel încât să puteți controla expirarea.
Google PageSpeed Insights și alte instrumente vor face recomandări despre aceste fișiere terță parte (vezi mai jos captura de ecran), dar este imposibil pentru tine să le implementezi:
Eliminați șirurile de interogare din resursele statice
Unele dintre instrumentele obișnuite de testare a vitezei au această „recomandare”. Dar nu îl recomandăm din cauza memorării în cache a browserului.
Vorbesc despre fișiere care arată astfel:
style.css? ver = 1.1
Șirul de interogare este semnul întrebării și informațiile ulterioare (ver = 1.1 în acest exemplu)
Problema este că, dacă eliminați șirurile de interogare din resurse, cum ar fi fișierele CSS, nu mai puteți comunica browserului fiecărui utilizator când un fișier a fost actualizat.
Să presupunem că aveți fișierul „style.css” în tema dvs.
Actualizați fișierul cu stilul dvs. nou, dar numele fișierului nu se schimbă, este încă style.css. Apoi mergi să-ți verifici site-ul și să vezi stilul tău vechi, nu cel nou. Ștergeți memoria cache WP Rocket, dar totuși vedeți stilul vechi.
Acest lucru se datorează faptului că browserul dvs. a stocat deja o copie a ingredientului, style.css pe care îl folosește. Ștergerea memoriei cache WP Rocket nu ajută deoarece fișierul se află pe computerul dvs. (nu pe serverul în care locuiește memoria cache WP Rocket), în bucătăria browserului.
Deci, dacă vă goliți memoria cache a browserului, browserul dvs. va fi forțat să descarce din nou style.css, apoi veți vedea stilul nou.
Dar ce se întâmplă cu toți ceilalți vizitatori ai site-ului dvs.? Este important să ne amintim că stocarea în cache a browserului are loc pentru fiecare utilizator, pe fiecare browser/dispozitiv pe care îl utilizează. Nu puteți ajunge la computerul lor și să le ștergeți memoria cache a browserului, iar persoana obișnuită nu face asta foarte des, sau dacă o face vreodată. Așa că vor fi obligați, fără să vrea, să vadă stilul vechi, învechit de style.css.
Acum, dacă utilizați un șir de interogare pentru a reîmprospăta numele fișierului, puteți rezolva această problemă.
Deci, în loc de style.css, aveți style.css? Ver = 1
Apoi, după ce modificați fișierul respectiv și numele fișierului se modifică în: style.css? Ver = 2
Browserul îl vede ca un fișier diferit și primește noua versiune. Boom! Noul tău stil elegant este disponibil pentru a fi văzut de toți.
Deci, șirul de interogare are un scop important, iar site-ul dvs. nu va fi mai rapid dacă îl eliminați (continuați, testați singur), deci de ce să vă deranjați?
Acest lucru finalizează stocarea în cache a browserului!
