Cum să serviți active statice cu o politică de cache eficientă pe WordPress

Unul dintre caracteristicile unui site web ușor de utilizat este că nu îi face pe vizitatori să aștepte prea mult în timp ce se încarcă. Memorarea în cache a activelor statice este un pas esențial pentru îmbunătățirea performanței site-ului, dar nu ajută prea mult să configurați acest lucru și să treceți mai departe. Fără o politică eficientă de stocare în cache a WordPress, s-ar putea să vă dificultăți să oferiți timpi de încărcare rapidi.

Din fericire, să înveți cum să folosești memorarea în cache a browserului pe WordPress este mai ușor decât ai putea crede. Puteți configura manual memoria cache a browserului, iar Sistemul de management al conținutului (CMS) vă permite, de asemenea, să utilizați instrumente care o fac pentru dvs.

În acest articol, vom explica cum funcționează memorarea în cache a browserului și vom discuta despre beneficiile acesteia. De asemenea, vă vom arăta cum să verificați dacă stocarea în cache este activată pe site-ul dvs. și să vedem diferite moduri de a o activa.

Ce este memorarea în cache a browserului?

Memorarea în cache a browserului este un proces care salvează copii ale elementelor unui site web pe computer. Când vizitați un site web, browserul dvs. descarcă diferite părți de conținut, cum ar fi imagini și text. În loc să descărcați acest conținut de fiecare dată când vizitați site-ul, browserul dvs. „memorează cache” sau stochează o parte din el în cazul în care aveți nevoie de el mai târziu.

Data viitoare când vizitați site-ul, browserul dumneavoastră va verifica ce elemente sunt stocate local. Apoi va încărca aceste elemente din cache în loc să le solicite de pe serverul site-ului. Acest lucru poate face ca pagina să se încarce semnificativ mai rapid, în funcție de numărul de active care sunt stocate în cache.

Dacă ar fi trebuit să verificați memoria cache a browserului dvs. chiar acum, probabil că veți găsi câteva sute de megaocteți de fișiere în interiorul acestuia. Cele mai multe browsere moderne vă permit să vedeți o prezentare generală a fișierelor stocate în cache dacă accesați setările de confidențialitate.

Lucrul despre stocarea în cache este că un browser nu poate decide să o facă singur. Pentru a profita de memorarea în cache a browserului în WordPress, va trebui să vă configurați site-ul web sau serverul pentru a face acest lucru. Aceasta înseamnă că site-ul dvs. controlează care sunt activele cache-urile browserului și pentru cât timp.

Care sunt beneficiile stocării în cache a activelor statice?

Avantajul principal al memorării în cache a browserului este că îi poate ajuta pe vizitatori să încarce pagini mai rapid la întoarcerea pe site-ul dvs. Vorbim despre „active statice” pentru că nu este posibil să stocați în cache fiecare element de pe un site web.

Elementele dinamice sunt elemente care se modifică de fiecare dată când încărcați o pagină. De exemplu, dacă vă conectați la o aplicație care vă arată un flux de postare în timp real, cum ar fi Twitter sau Instagram, acele active sunt dinamice.

Deoarece activele dinamice se pot schimba frecvent, stocarea lor în cache ar putea să nu servească la niciun scop. La urma urmei, data viitoare când vă conectați la Twitter sau Instagram, veți vedea postări complet noi.

Memorarea în cache oferă cele mai bune rezultate posibile atunci când este limitată la active statice. A învăța cum să serviți active statice cu o politică eficientă de cache în WordPress poate avea mai multe beneficii:

• Reducerea utilizării lățimii de bandă. Deoarece activele din cache sunt încărcate din stocarea locală, există mai puține date transferate între server și dispozitivul vizitatorului. Acest lucru îi ajută pe vizitatorii cu planuri limitate de internet să economisească din utilizarea datelor.
• Scăderea încărcării pe serverul dvs. Atunci când browserele folosesc materiale stocate în cache, serverul primește mai puține solicitări pentru acele fișiere. Acest lucru reduce sarcina de lucru a serverului și poate ajuta la prevenirea supraîncărcărilor serverului în perioadele de trafic intens.
• Se activează parțial navigare offline. În unele cazuri, stocarea în cache a activelor statice poate permite vizitatorilor să acceseze anumite părți ale unui site web chiar și atunci când sunt offline. Dacă browserul a stocat în cache fișierele necesare, acesta poate afișa conținutul fără a avea nevoie de o conexiune activă la internet.

Memorarea în cache a activelor statice vă permite să utilizați mai bine resursele serverului și să îmbunătățiți experiența pentru vizitatori. Toate acestea funcționează prin instruirea serverului despre ce active ar trebui să spună browserelor să memoreze în cache.

Cum să verificați dacă stocarea în cache a browserului este activată pe site-ul dvs

Cea mai simplă modalitate de a verifica dacă un site web folosește stocarea în cache este să utilizați instrumente pentru dezvoltatori de browser, precum cele pe care le găsiți în Firefox și Google Chrome. Această abordare necesită să te uiți la un anumit cod, dar nu trebuie să fii un dezvoltator pentru a-l înțelege.

Pentru a face acest lucru în Google Chrome, vizitați site-ul web pe care doriți să îl verificați, faceți clic dreapta oriunde pe pagină și selectați opțiunea Inspectați . Aceasta va deschide fila Instrumente pentru dezvoltatori din browser, care ar trebui să arate astfel:

Faceți clic pe fila Rețea . Dacă vedeți o listă goală, va trebui să reîncărcați pagina cu fila instrumente pentru dezvoltatori deschisă. Fila Rețea va afișa toate solicitările și activele pe care browserul le încarcă în timpul accesării paginii.

Elementul care ne interesează ar trebui să fie primul pe listă. În cazul nostru, este Jetpack.com și conține anteturile paginii. Selectați acel fișier și se va deschide o filă nouă în dreapta, trecând direct în secțiunea Anteturi .

Unele anteturi ne vor spune dacă site-ul folosește memorarea în cache și cum este implementat. Acestea sunt:

• Cache-Control. Acest antet specifică directive de stocare în cache, cum ar fi max-age (timpul maxim în care o resursă este considerată proaspătă) sau no-cache (forțează cache-urile să trimită cererea către serverul de origine pentru validare înainte de a elibera o copie în cache).
• Expiră. Acest antet oferă o dată și o oră de expirare pentru resursă. După aceasta, resursa este considerată învechită, iar browserul o va revalida.
• ETag. Acest antet este un identificator pentru o anumită versiune a unei resurse. Când resursa se modifică, ETag-ul se schimbă, de asemenea, permițând browserelor să determine dacă o resursă din cache este încă valabilă.
• Modificat ultima dată. Acest antet indică data ultimei modificări a resursei. Browserele pot folosi aceste informații pentru a valida dacă versiunea lor stocată în cache este încă actualizată.

Dacă puteți găsi aceste antete în fișier, atunci site-ul web folosește memorarea în cache. Rețineți că anumite configurații de cache pot varia de la un site la altul. Unele site-uri le pot spune browserelor să stocheze fișiere statice pentru o zi, în timp ce altele le vor spune să stocheze fișiere luni sau perioade mai lungi.

Cum să folosiți memorarea în cache a browserului cu un plugin

Cea mai ușoară modalitate de a folosi memorarea în cache a browserului pe un site WordPress este utilizarea unui plugin. Există o mulțime de pluginuri de cache pe care le puteți folosi. O opțiune excelentă este WP Super Cache.

După ce ați instalat și activat WP Super Cache pe site-ul dvs., puteți implementa memorarea în cache folosind mai multe abordări. Cel mai simplu mod este să accesați Setări → WP Super Cache și să selectați opțiunea Caching On de lângă Caching .

Setările implicite ale pluginului permit stocarea în cache pentru vizitatorii deconectați și setează o durată de viață de 30 de minute pentru activele stocate. Dacă doriți să modificați aceste setări, va trebui să accesați fila Avansat .

Aici, puteți decide pentru care vizitatori să activați memorarea în cache, dacă activați memoria cache dinamică, dacă pluginul ar trebui să ștergeți memoria cache atunci când actualizați paginile și multe altele. Pluginul vă ajută prin recomandarea celor mai eficiente opțiuni.

Dacă nu aveți o înțelegere fermă a memoriei cache, este posibil să doriți să rămâneți cu setările implicite. Configurarea setărilor de stocare în cache fără a înțelege pe deplin cum funcționează acestea poate duce la probleme cu site-ul dvs.

Cum să folosiți memorarea în cache a browserului fără un plugin

Dacă nu doriți să utilizați un plugin, puteți activa manual memorarea în cache a browserului pe site-ul dvs. web. Acest proces poate implica tratarea codului la server sau la nivel de site, în funcție de metoda de implementare pe care o alegeți.

1. Adăugați anteturile „Cache-Control” și „Expires” în NGINX

Pentru a adăuga anteturi „Cache-Control” și „Expire” în NGINX, va trebui să modificați fișierul de configurare a serverului. Acest fișier se numește de obicei nginx.conf și se află în directorul principal nginx .

Cel mai simplu mod de a vă conecta la serverul site-ului dvs. este să utilizați un client FTP (File Transfer Protocol). Apoi, va trebui să localizați fișierul nginx.conf , care ar trebui să fie în oricare dintre ele

/etc/nginx/nginx.conf sau /etc/nginx/sites-available/default .  

Deschideți fișierul folosind un editor de text și căutați blocul de cod al serverului în nginx.conf . Aici, vom adăuga următorul bloc de cod nou, care specifică ce fișiere ar trebui să spună serverul browserelor să memoreze în cache și cât timp ar trebui să dureze acel cache înainte de a expira:

 location ~* \.(jpg|jpeg|png|gif)$ {    expires 30d;    add_header Cache-Control "public, no-transform"; }

Acest cod include atât anteturile „Cache-Control”, cât și „Expires”. Puteți modifica atât intervalul de timp de expirare , cât și tipurile de fișiere pe care browserele ar trebui să le memoreze în cache.

Dacă nu puteți decide ce tipuri de fișiere să memorați în cache, aruncați o privire la ce se află în folderul dvs. media WordPress. Orice fișiere statice pe care vizitatorii le accesează în mod regulat ar trebui să fie stocate în cache. În ceea ce privește antetul de expirare, 30 de zile este, în general, un interval de timp bun pentru majoritatea site-urilor web.

Odată ce adăugați codul, salvați modificările în fișier și ieșiți din editor. Va trebui să reporniți NGINX pentru a aplica modificările.

2. Adăugați anteturile „Cache-Control” și „Expires” în Apache

Folosirea antetelor „Cache-Control” și „Expires” în Apache necesită să activați modulele corespunzătoare. Puteți activa aceste module deschizând terminalul și rulând următoarele comenzi:

 sudo a2enmod expires sudo a2enmod headers sudo systemctl restart apache2

Comanda finală va reporni Apache cu ambele module active. În continuare, va trebui să modificați fișierul de configurare Apache, care se numește de obicei fie httpd.conf , fie apache2.conf .

Puteți găsi acest fișier fie în /etc/httpd/conf/httpd.conf , fie în /etc/apache2/apache2.conf , fie

/etc/apache2/sites-available/000-default.conf , în funcție de configurația serverului.

Apoi, căutați blocul <Directory> în fișierul de configurare Apache și adăugați următorul cod în interiorul acestuia:

 <IfModule mod_expires.c>    ExpiresActive On    ExpiresDefault "access plus 1 month"    ExpiresByType image/jpg "access plus 1 month"    ExpiresByType image/jpeg "access plus 1 month"    ExpiresByType image/gif "access plus 1 month"    ExpiresByType image/png "access plus 1 month" </IfModule> <IfModule mod_headers.c>    <FilesMatch "\.(jpg|jpeg|png|gif)$">        Header set Cache-Control "public, no-transform"    </FilesMatch> </IfModule>

Prima parte a acestui cod guvernează setările de expirare pentru fișierele din cache. A doua parte indică ce tipuri de fișiere ar trebui să memoreze browserele în cache. Ca și în cazul NGINX, puteți modifica aceste setări în funcție de fișierele pe care doriți să le stocheze browserele.

Când ați terminat, salvați modificările în fișierul de configurare Apache și închideți-l. Va trebui să reporniți Apache pentru ca modificările să intre în vigoare.

3. Utilizați o rețea de livrare de conținut (CDN)

O rețea de livrare a conținutului (CDN) este o rețea de servere pe care o puteți folosi pentru a stoca copii în cache ale site-ului dvs. web în regiuni cheie. CDN-urile tind să fie servicii plătite și ajută prin furnizarea de copii stocate în cache ale site-ului dvs. de pe serverul care este cel mai apropiat din punct de vedere geografic de vizitator.

Această abordare reduce sarcina pe propriile servere. În plus, CDN-urile tind să fie optimizate pentru performanțe de vârf și sunt de obicei distribuite pe tot globul, astfel încât să poată servi site-uri web din cea mai bună locație posibilă pentru fiecare vizitator.

Jetpack CDN este o opțiune care se integrează perfect cu WordPress, este ușor de utilizat și foarte eficient.

Cel mai bine, este un CDN gratuit care stochează imagini și alte tipuri de active statice de pe site-ul dvs. Odată ce îl instalați și îl activați, puteți activa CDN-ul accesând Jetpack → Setări din tabloul de bord WordPress.

Apoi, localizați setările de performanță și viteză și comutați opțiunea Activare accelerator site .

4. Găzduiește local scripturi și materiale terță parte (ori de câte ori este posibil)

Scripturile terță parte sunt elemente precum codul de pe site-uri externe, pixelii de urmărire, fonturile și alte elemente care necesită încărcare pentru a funcționa. Cu cât încărcați mai multe scripturi și materiale din surse terțe, cu atât procesul va dura mai mult, ceea ce vă poate încetini site-ul.

În mod ideal, ar trebui să căutați să eliminați orice scripturi și active terțe pe care nu le utilizați. Alternativ, puteți găzdui cod și active pe serverul local pentru a reduce timpii de încărcare.

Puteți identifica scripturi terță parte, precum și JavaScript neutilizat, folosind PageSpeed ​​Insights. Acest instrument evidențiază oportunitățile de îmbunătățire a performanței site-ului, inclusiv liste de coduri neutilizate și scripturi terță parte care pot fi eliminate din paginile dvs.

Puteți șterge în siguranță orice scripturi terță parte neutilizate de pe site-ul dvs. web. Pentru scripturi importante, poate doriți să luați în considerare opțiunea de a le găzdui local.

Pasul final: Instalați un plugin gratuit pentru a îmbunătăți Core Web Vitals

A învăța cum să folosești memorarea în cache a browserului în WordPress este un pas cheie pentru îmbunătățirea performanței site-ului. Din fericire, nu este singurul lucru pe care îl puteți face pentru a îmbunătăți experiența utilizatorului.

Google măsoară calitatea experienței utilizatorului unui site cu un set de valori numite Core Web Vitals. Valorile cheie de performanță includ:

• Cea mai mare vopsea cu conținut maxim (LCP). Această valoare măsoară cât timp durează încărcarea celui mai mare material pe o pagină. De obicei, este un bun indicator al timpului general de încărcare al unei pagini.
• Întârziere la prima intrare (FID). Există o întârziere între încărcarea unei pagini și devine interactivă. S-ar putea să credeți că o pagină s-a terminat de încărcat, dar dacă nu vă permite să interacționați cu elemente precum formulare sau link-uri, este posibil să aibă un FID ridicat.
• Schimbare cumulativă a aspectului (CLS) . În timp ce o pagină se încarcă, aspectul acesteia se poate schimba, deplasând elemente în browser. Cu cât se mișcă mai multe elemente, cu atât scorul CLS este mai mare. În mod ideal, acesta ar trebui să fie zero.

Există o mulțime de moduri de a îmbunătăți Core Web Vitals în WordPress. Cea mai ușoară abordare este utilizarea unui plugin care optimizează toate variabilele din spatele acestor valori.

Jetpack Boost vă poate ajuta să implementați mai multe strategii pentru a îmbunătăți Core Web Vitals. Puteți optimiza livrarea CSS, puteți amâna JavaScript neesențial și puteți activa încărcarea leneră.

De obicei, ar trebui să utilizați mai multe plugin-uri pentru a implementa aceste configurații sau să faceți acest lucru manual. După ce instalați și activați Jetpack Boost, puteți pur și simplu să activați fiecare setare navigând la Jetpack → Boost și comutând opțiunile corespunzătoare.

Întrebări frecvente despre memorarea în cache a browserului WordPress

Deși am acoperit elementele esențiale ale memorării în cache a browserului în WordPress, este posibil să aveți în continuare câteva întrebări despre proces. Să ne uităm la unele dintre cele mai comune.

Memorarea în cache a browserului este sigură?

Memorarea în cache a browserului este foarte sigură. Majoritatea site-urilor web pe care le vizitați probabil folosesc un anumit tip de politică de stocare în cache pentru a îmbunătăți performanța vizitatorilor. În calitate de vizitator, nici nu veți observa acest lucru decât dacă nu veți căuta în anteturile site-ului web sau trebuie să ștergeți memoria cache.

Singurul mod în care stocarea în cache a browserului ar putea să nu fie sigură este printr-o implementare proastă. Dacă nu este configurat corect, browserele nu vor putea stoca activele în mod corect sau o pagină ar putea să nu se încarce (deși acest lucru este foarte rar).

Memorarea în cache în browser vs. în cache pe server: prin ce diferă?

Memorarea în cache a browserului și a serverului funcționează foarte asemănător. Singura diferență este că o metodă stochează fișierele local, în timp ce cealaltă o face pe server.

Cel mai bun exemplu de cache pe server în acțiune este un CDN. Cu ajutorul CDN-urilor, puteți stoca copii stocate în cache ale site-ului dvs. pe un server terță parte (sau un cluster al acestora). Când vizitatorii încearcă să acceseze site-ul web, CDN-ul interceptează acea conexiune și servește copia stocată a site-ului.

În acest scenariu, vizitatorii pot încă stoca în cache conținut static prin browserele lor. Experiența pentru utilizatorii finali nu ar trebui să se schimbe în niciun fel, cu excepția faptului că CDN-urile oferă adesea timpi de încărcare mult mai buni decât serverele tradiționale.

Ce altceva pot face pentru a îmbunătăți performanța site-ului meu?

Există o mulțime de lucruri pe care le puteți face pentru a îmbunătăți performanța site-ului dvs. (dincolo de folosirea memoriei cache a browserului). Alte modificări pe care le puteți face includ eliminarea resurselor care blochează randarea, minimizarea CSS, utilizarea unui CDN, efectuarea mai puține solicitări HTTP și reducerea timpilor de răspuns ale serverului și TTFB.

Când vine vorba de performanța site-ului, unele modificări sunt mai eficiente decât altele. Îmbunătățirile timpilor de încărcare pot avea un impact semnificativ asupra experienței utilizatorului, ceea ce poate duce la o rată de conversie mai mare pentru afacerea dvs.

Începeți să difuzați active statice pe site-ul dvs. WordPress

Utilizarea memoriei cache a browserului în WordPress este una dintre cele mai eficiente moduri de a îmbunătăți timpul de încărcare. O strategie eficientă se va concentra pe fișierele statice și se va configura pentru a le reîncărca periodic. În acest fel, vizitatorii nu sunt blocați cu elemente învechite.

Cel mai simplu mod de a implementa memorarea în cache a browserului în WordPress este utilizarea unui plugin precum WP Super Cache. Acest plugin vă permite să utilizați memorarea în cache a browserului folosind un set de configurații implicite sau să controlați manual fiecare setare. În plus, este gratuit de utilizat.

În plus, atunci când instalați Jetpack Boost, puteți îmbunătăți și mai mult performanța site-ului dvs. Consultați pluginul pentru a afla mai multe!