Cum să serviți activele statice cu o politică de cache eficientă

Site-uri web precum GTMetrix și Google PageSpeed ​​Insights oferă sugestii despre cum să îmbunătățiți performanța site-ului dvs. Dacă citiți acest lucru, știți cel puțin că fiecare site web are oportunități de îmbunătățire a performanței, fie prin optimizări manuale, fie prin utilizarea unor plugin-uri precum 10Web Booster.

În ambele instrumente, este posibil să vedeți o sugestie de aservi materiale statice cu o politică de cache eficientă .Această sugestie este să stocați fișierele local, astfel încât vizitele repetate pe site să fie mai rapide. Pașii de îmbunătățire a acestei recomandări nu îmbunătățesc vizita inițială a site-ului (există și alte îmbunătățiri pentru asta). Cu toate acestea, toate vizitele ulterioare vor beneficia de utilizarea memoriei cache a browserului.

Trebuie remarcat faptul că sugestia de servire a activelor statice cu o politică eficientă de cache a fost, de asemenea, denumită caching a browserului de pârghie sau cache a browserului în WordPress.

Acest articol explică cum să difuzați materiale statice cu o politică de cache eficientă și cum o politică de cache eficientă poate îmbunătăți performanța site-ului dvs. web.

Când utilizați GTMetrix, sugestia va arăta ca exemplul de mai jos pe pagina de rezultate. Acesta va evidenția posibilele economii din implementarea memorării în cache a browserului.

În Google PageSpeed ​​Insights, sugestia arată similar și oferă informații similare.

Sugestiile sunt similare deoarece GTMetrix și PageSpeed ​​Insights folosesc instrumentul Lighthouse pentru cadrul lor de analiză a paginilor web. Lighthouse este un instrument open-source care vizează îmbunătățirea performanței site-ului și poate rula în multe formate diferite.

Să luăm un moment pentru o reîmprospătare rapidă pentru a ne aminti cum este măsurată performanța unui site web printr-o colecție de valori, dintre care cea mai importantă este Core Web Vitals.

Iată un rezumat:

• Cea mai mare vopsea de conținut ( LCP ) – Măsurarea timpului în care cel mai mare obiect se încarcă în fereastra de vizualizare a paginii.
• Întârzierea primei intrări ( FID ) – Aceasta măsoară capacitatea de răspuns a site-ului web. Măsoară timpul dintre care utilizatorul face clic sau interacționează cu site-ul și acesta răspunde.
• Schimbare cumulativă a aspectului ( CLS ) – Aceasta măsoară cât de mult se modifică în mod neașteptat aspectul unei pagini.

O modalitate de a avea un impact pozitiv atât pe LCP, cât și pe FID este de a servi activele statice cu o politică de cache eficientă, ceea ce înseamnă să anunțați browserul că poate stoca local o resursă pentru o anumită perioadă de timp.

O politică de cache eficientă va însemna timpi de încărcare mai rapidi, deoarece indiferent cât de rapidă este viteza dvs. de internet, încărcarea dintr-un cache local va fi mai rapidă și va economisi timp.

Există câteva componente, așa că haideți să le discutăm mai detaliat.

Cum să serviți activele statice cu o politică de cache eficientă

Pentru a înțelege cum să servim activele statice cu o politică de cache eficientă, trebuie mai întâi să înțelegem diferitele aspecte, cum ar fi activele statice, stocarea în cache și o politică de cache. Să le descompunem aici.

Ce sunt activele statice?

Activele statice sunt fișiere. Când ne referim la activele statice în acest articol, ne referim la fișiere individuale care nu se așteaptă să se schimbe nici curând, nici des.

Fișierele precum imaginile, javascriptul, fișierele CSS și fonturile sunt fișiere care ar putea fi considerate active statice. În ceea ce privește WordPress, aceste fișiere CSS, javascript și imagini și fonturi ar fi de obicei parte dintr-o temă, un plugin sau conținut de utilizator.

Fișierele și paginile care sunt generate dinamic nu sunt considerate active statice. Un exemplu în acest sens în WordPress ar fi paginile statice generate de pluginurile de cache. Acest lucru este detaliat în secțiunea următoare.

Ce este caching-ul?

Memorarea în cache este procesul de stocare a răspunsurilor într-un cache, astfel încât data viitoare când se pune aceeași întrebare, răspunsul poate fi returnat mai repede.

Articole similare

Cum să ștergeți cache-ul WordPress în siguranță și eficient?

Găsiți cel mai bun plugin de cache WordPress cu cele mai bune 5 alegeri ale noastre

Dacă ați mai lucrat cu pluginuri de stocare în cache WordPress, este posibil să fiți familiarizat cu stocarea în cache a paginii întregi. Memorarea în cache a paginii este diferită de stocarea în cache a activelor statice.

Memorarea în cache a paginii vs. stocarea în cache a activelor statice

Acest articol analizează în mod specific stocarea în cache a activelor (fișierelor) statice. Acest lucru nu trebuie confundat cu stocarea în cache a paginii întregi, care stochează paginile generate pentru o utilizare ulterioară.

Atât memorarea în cache a paginilor, cât și cea a fișierelor ajută la îmbunătățirea performanței unui site. Când discutăm despre stocarea în cache a activelor statice, ne referim la active specifice, cum ar fi fișierele javascript, CSS și imagine.

Memorarea în cache a paginii stochează rezultatele unei pagini WordPress generate dinamic și reservează acea versiune pentru o anumită perioadă de timp. Cache-urile paginilor sunt de obicei stocate pe un server sau pe o rețea de margine, cum ar fi un CDN, iar activele statice sunt stocate local pe computerul utilizatorului.

Memorarea în cache cu privire la modul în care servim activele statice cu o politică de cache eficientă înseamnă să spunem browserului cât timp poate stoca o resursă local pe browser înainte de a fi nevoit să o redescărcați.

Ce face ca un activ static să fie stocat în cache?

Potrivit GTMetrix, un activ poate fi stocat în cache dacă îndeplinește următoarele cerințe:

• Este un font, CSS, javascript sau fișier media.
• Returnează un cod de stare HTTP 200, 203 sau 206
• Nu are o politică explicită fără cache

Ce este o politică de stocare în cache?

Ne-am uitat la ce este un activ static, precum și la ce înseamnă să memorezi un activ în cache.

Termenii de prospețime și învechit pot fi folosiți aici pentru a descrie starea unui fișier în cache. Dacă un fișier este în regulă pentru a fi scos din cache, acesta poate fi numit fresh . Când expiră, s-ar numi învechit .

O politică va răspunde la întrebări precum cât de mult timp este considerat un fișier proaspăt și cum să verificați dacă un fișier este proaspăt. Politica prevede că trebuie să verificăm cu serverul numai după o anumită perioadă de timp sau să ne anunțăm să verificăm cu serverul la fiecare solicitare, dar să re-descărcăm fișierul numai dacă s-a schimbat.

Încă câțiva termeni care vor fi bine de înțeles înainte de a progresa mai departe.

Cum sunt UX și SEO afectate de o politică de cache?

Experiența utilizatorului (UX) și optimizarea pentru motoarele de căutare (SEO) sunt strâns legate între ele. Potrivit Google, studiile arată că utilizatorilor le pasă de receptivitatea site-ului, astfel încât Google plasează mai multe pagini cu receptivitate mai sus.

Dacă materialele statice sunt stocate în cache în mod eficient, pagina se va afișa mai rapid datorită timpului redus necesar pentru încărcarea acestor materiale. Reducerea timpului duce la îmbunătățiri ale elementelor vitale web de bază, cum ar fi LCP și FID și, în cele din urmă, la o poziție mai ridicată a motorului de căutare.

Puteți citi mai multe despre modul în care elementele vitale web de bază influențează clasarea paginii aici.

Cum să remediați Servirea activelor statice cu o problemă de politică de cache eficientă

Remediați manual

Servirea activelor statice cu o politică de cache eficientă nu este o setare specifică WordPress, o puteți seta manual modificând fișierul de configurare a serverului web sau utilizați un plugin precum găzduirea 10Web Booster pentru a vă asigura că site-ul dvs. este configurat cu setări optimizate de cache.

Această secțiune va acoperi editarea directă a fișierelor de configurare a unui server web pentru a activa cache-control și expiră anteturile HTTP pe serverele dvs., astfel încât atunci când deservește active statice, aplică antete HTTP în răspuns.

Când este solicitată o resursă, serverul web răspunde cu resursa și câteva informații suplimentare în ceea ce se numește antete HTTP. Gândiți-vă la anteturile HTTP ca metadate despre conexiune. În cazul stocării în cache, anteturile HTTPCache-ControlșiExpirescontrolează modul în care memorăm în cache un activ.

Antetul cache-control conține instrucțiuni despre dacă și/sau cum să se memoreze în cache materialul static. Există multe directive pentru controlul cache-ului, așa că să înțelegem unele dintre cele mai populare.

Iată câteva exemple despre cum poate arăta un antet cache-control.

Exemplu: memorează în cache un material timp de șapte zile
Cache-Control: max-age=604800

Exemplu: poate fi stocat într-o memorie cache partajată timp de până la șapte zile
Cache-Control: public, max-age=604800

Exemplu: poate fi stocat, dar trebuie revalidat la fiecare cerere
Cache-Control: no-cache

Exemplu: nu poate fi stocat în cache
Cache-Control: no-store

Antetul cache-control este mai nou și are mai multe opțiuni, dar în cazul în care cache-control nu este acceptat, antetul HTTP expiră realizează aceeași sarcină de antet și indică cât de mult este valabil un activ înainte de a necesita revalidare. (Rețineți că directiva de vârstă maximă din antetul Cache-Control are prioritate față de Expires)
Expires: Wed Feb 13 21:01:38 CST 2023

Modificarea directă a configurației unui server

În primul rând, să ne uităm la „modul greu”, astfel încât să înțelegem ce se întâmplă atunci când folosim alte instrumente și servicii care ne ușurează.

Apache

În serverul Apache HTTP, următorul fragment ar putea fi adăugat la o definiție de site sau la un fișier .htaccess.

Explicând acest fragment, se spune că orice material în care extensia se potrivește cu .ico sau .pdf etc. va avea antetul Cache-Control setat pentru activ.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=3600, public"
</filesMatch>

Cu Apache, mulți furnizori de găzduire vă vor oferi opțiunea de a adăuga directive la un fișier .htaccess. Rețineți că, deși aceasta este o modalitate ușoară de a adăuga la configurația serverului, utilizarea fișierelor .htaccess este cunoscută pentru a oferi rezultate negative la nivel de server.

Nginx

În Nginx, acest fragment poate fi adăugat la un bloc de server.

Explicând acest fragment, se spune că orice material în care extensia se potrivește cu .ico sau .pdf etc. va avea setate atât anteturile expiră, cât și cache-control.

location ~* \.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$ {
    expires 1h;
    add_header Cache-Control "public, no-transform";
}

Atât pentru Apache, cât și pentru Nginx, arătăm cum să modificați/adăugăm anteturi. Arătăm anteturile particulare pe care le folosim pentru stocarea în cache, dar metoda poate fi folosită pentru orice altă formă de stocare în cache.

Remediați cu un plugin WordPress

Dacă cele de mai sus par mult, este pentru că este. Modificarea configurațiilor serverului și menținerea la curent cu modificările manuale necesită timp și este predispusă la erori.

Planul gratuit 10Web Booster poate configura Apache să adauge anteturi pentru activele statice și, de asemenea, adaugă anteturi pentru paginile web stocate în cache. Dacă nu utilizați deja 10Web hosting și gazda dvs. folosește Apache, aceasta este o modalitate excelentă de a începe implementarea unei politici eficiente de cache.

Dacă aveți nevoie de mai multe opțiuni sau de mai mult control asupra antetelor HTTP, puteți utiliza 10Web Booster Pro. 10Web Booster Pro își folosește Cloudflare. Când utilizați Cloudflare, acesta adaugă anteturile de control cache la elementele dvs. statice și la paginile stocate în cache. Acest lucru ocolește orice configurare sau restricție de server, deoarece vizitatorii dvs. primesc direct fișierele din Cloudflare.

Ceea ce face ca pluginul 10Web Booster să fie cea mai bună alegere aici este că face toate acestea și le face automat. Nu trebuie să gestionați nicio configurație de server sau fișiere .htaccess.

Alternativ, dacă utilizați 10Web Hosting, acesta implementează automat memorarea în cache și nu trebuie să vă faceți griji cu privire la adăugarea antetelor pentru activele statice.

Încă nu puteți remedia problema? Încercați aceste două sfaturi

Dacă ați implementat pașii de mai sus și vedeți în continuare că activele statice ale serviciului cu o politică de cache eficientă încă apar în rapoartele dvs., iată câteva lucruri pe care le puteți încerca.

Verificarea fișierelor sunt stocate în cache

Dacă GTMetrix și PageSpeed ​​raportează în continuare că ar trebui să difuzați materiale statice cu o politică de cache, vă recomandăm să verificați dacă implementarea dvs. a adus efectiv modificările așteptate.

În majoritatea browserelor, există o modalitate ușoară de a verifica dacă fișierele provin sau nu dintr-un cache.

În Chrome, sub vizualizare și Dezvoltator, selectați Instrumente pentru dezvoltatori:

Sub fila Rețea, veți putea identifica fișierele care provin din (cache de disc) sau (cache de memorie). Diferența dintre disc și memoria cache este că memoria dispare când browserul este închis, iar discul persistă când browserul este închis.

Măriți timpul de cache

Conform statisticilor de la Lighthouse, o politică de cache eficientă este cea care are un raport mare de accesări în cache și rateuri, ceea ce înseamnă că majoritatea activelor statice au o vârstă maximă sau expiră setat. Pentru locațiile care sunt în producție sau care nu se schimbă des, se recomandă o vârstă maximă de trei luni până la un an.

Ei recomandă să începeți o politică de aproximativ trei luni (aproximativ 7890000 de secunde), dacă ați setat deja acest lucru, ar putea merita să creșteți vârsta maximă la un an sau mai mult dacă site-ul dvs. este activ.

Concluzie

Capacitatea de a servi active statice cu o politică eficientă de cache aduce îmbunătățiri ale vitezei performanței site-ului dvs. web.

Acest articol a tratat ce sunt activele statice, ce sunt antetele HTTP și a analizat cum să activați și să verificați anteturile de cache.

Ne-am uitat la elementele de bază ale activării manuale a antetelor prin modificarea configurațiilor serverului și cum putem face mai ușoară utilizarea unui plugin WordPress precum 10Web Booster și valorificând integrarea 10Web cu Cloudflare pentru a avea acces la setarea antetelor HTTP pentru controlul cache-ului.

10Web Booster este mult mai mult decât un simplu plugin de cache. Puteți citi mai multe despre multele funcții de cache și optimizare a vitezei în acest articol 10Web Booster .

FAQ