Cum să folosiți cachingul browserului în WordPress?

Publicat: 2022-06-25

În acest tutorial, vom învăța cum să folosiți cachingul browserului în WordPress pentru a vă accelera site-ul.

Există o serie de moduri de a accelera site-urile WordPress în general, cu toate acestea, în timpul analizei de optimizare a vitezei site-ului, memorarea în cache a browserului este problema cel mai frecvent descoperită.

Puteți utiliza o varietate de instrumente de internet, inclusiv Google PageSpeed ​​Insights, GTMetrix și Pingdom, pentru a urmări și a testa viteza site-ului dvs. web. Ele vă oferă constatări precise și vă arată unde are nevoie de funcționare site-ul dvs. Este posibil să fi văzut avertismentul „Leverage Browser Caching” în timp ce evaluați viteza site-ului.

Puteți citi și: Serviți active statice cu o politică de cache eficientă

Cuprins

Ce este Leverage Browser Caching?

Memorarea în cache este perioada de timp în care browserele păstrează resursele stocabile în cache ale unui site web pe sistemele lor locale.

Imagini, JavaScript, CSS și alte resurse se numără printre ele. Materialele stocabile în cache care sunt salvate pe computerul dvs. sunt încărcate înapoi de fiecare dată când cineva vede site-ul web. Astfel, există o creștere vizibilă a vitezei de încărcare a site-ului. Oamenii doresc să folosească memorarea în cache a browserului în WordPress din acest motiv.

Cum funcționează exploatarea în cache a browserului în WordPress?

Există numeroase procese care rulează în fundal ori de câte ori un utilizator intră într-un anumit domeniu.

Site-ul dvs. WordPress este făcut vizibil prin tot ceea ce este comunicat browserului utilizatorului. Aceste elemente de site includ scripturi, grafice, foi de stil, conținut și multe altele. Atunci când este necesar, acestea trebuie transferate de pe serverul site-ului web în browserul utilizatorului. Iată pașii din acest proces:

  1. O adresă URL este introdusă în browserul vizitatorului.
  2. O solicitare este făcută de browser către serverul care găzduiește site-ul dvs. (cererea HTTP).
  3. Utilizatorul primește datele după ce acestea au fost asamblate de către server. Utilizatorii încep să experimenteze o încetinire în acest moment. Oamenii pot minimiza dimensiunea script-urilor, pot optimiza dimensiunile imaginii și alte măsuri pentru a opri această încetinire.
  4. Browserul poate afișa în sfârșit site-ul web după ce datele au fost transferate. Când utilizatorii accesează pagini diferite, procedura se repetă. Performanța scăzută poate rezulta din faptul că serverul primește un număr mare de solicitări simultan. Prin urmare, oamenii trebuie să își optimizeze site-urile web pentru a-și menține viteza.
Utilizați memorarea în cache a browserului în WordPress

Atât browserele web, cât și programele software folosesc conținut în cache. Este salvat pentru moment pe discul local. Termenul „Web Cache” sau „HTTP Cache” se referă la aceste date. Browserul va încărca datele de pe computerul dvs. și va descărca conținutul site-ului web de fiecare dată când vizitați același site web.

Trebuie să utilizați un anumit instrument pentru a determina dacă site-ul dvs. WordPress utilizează eficient memorarea în cache a browserului.

Diferența dintre stocarea în cache a browserului și memorarea în cache a serverului

Pentru a reduce încărcarea și latența pe serverele web, memorarea în cache pe server (pentru memorarea în cache pe server, recomandăm întotdeauna LiteSpeed ​​Cache pentru WordPress) presupune adesea utilizarea unui proxy web care stochează răspunsurile web de la serverele web cu care se află în fața. Memorarea în cache web pe partea clientului poate include și memorarea în cache bazată pe browser, care salvează o copie în cache a conținutului web accesat anterior.

Această procedură presupune utilizarea serverului web pentru a produce pagini web stocate în cache pentru site-ul dvs. web. Acțiunile menționate mai sus sunt un exemplu de stocare în cache a paginilor web, care este în principal pe partea serverului.

Puteți îmbunătăți sistemul de stocare în cache a serverului în câteva moduri diferite. Cea mai bună alegere ar fi să actualizați anteturile Apache. Următoarea etapă ar fi utilizarea pluginurilor WordPress, iar apoi ar fi adăugat CDN-ul.

Metoda 1: Utilizați manual stocarea în cache a browserului în WordPress

Notă: Această metodă funcționează numai cu LiteSpeed ​​Enterprise sau Apache.

Prin includerea unui cod în fișierul .htaccess, puteți utiliza manual memorarea în cache a browserului în WordPress. Pentru trei obiective distincte, trebuie de fapt să adăugați trei biți de cod:

  1. Adăugați anteturi Expires
  2. Adăugați anteturi cache-control
  3. Dezactivați ETag-urile

Trebuie să aveți acces la fișierele site-ului dvs. pentru a adăuga acest cod, pe care îl puteți realiza conectându-vă la contul dvs. de găzduire sau CyberPanel.

Accesați tabloul de bord CyberPanel

Faceți clic pe WordPress -> Listă WordPress din meniul din partea stângă

Veți intra în Lista de site-uri web WordPress . De aici, faceți clic pe titlul site-ului dvs. WordPress

Acesta este managerul dvs. WordPress CyberPanel . Faceți clic pe File Manager.

În public_html , veți găsi . fișier htaccess . Rețineți că regulile htaccess sunt acceptate numai de LiteSpeed ​​Enterprise. Nu este acceptat de OpenLite Speed. Faceți clic dreapta pe el și faceți clic pe CodeMirror

Adăugați următorul cod la sfârșitul . conținutul fișierului htaccess prin copierea și lipirea acestuia. Nu modificați fișierul în alte moduri.

 #Customize expires cache start - adjust the period according to your needs <IfModule mod_expires.c> FileETag MTime Size AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript ExpiresActive On ExpiresByType text/html "access 600 seconds" ExpiresByType application/xhtml+xml "access 600 seconds" ExpiresByType text/css "access 1 month" ExpiresByType text/javascript "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresDefault "access 1 month" </IfModule> #Expires cache end

Codul menționat mai sus indică browserului să livreze o copie în cache a resurselor statice, mai degrabă decât să descarce una nouă.

Timpii de reîmprospătare/expirare sunt de asemenea incluse în setări:

HTML durează 600 de secunde.
JavaScript și CSS timp de o lună
Pentru imagini, un an

Vizitatorii nu vor trebui să descarce anumite resurse prea des datorită datelor de expirare. Dacă este necesar, puteți modifica rapid timpii de expirare.

Pentru a stabili politici de stocare în cache a browserului cu privire la modul în care o resursă este stocată în cache, unde este stocată în cache și vârsta maximă înainte de expirare, trebuie să includem antetele Cache Control. Nu trebuie să repetăm ​​timpii de expirare, așa cum le-am menționat deja mai devreme.

următorul cod, apoi lipiți-l:

 # BEGIN Cache-Control Headers <IfModule mod_expires.c> <IfModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(css)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(js)$"> Header append Cache-Control "private" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header append Cache-Control "private, must-revalidate" </filesMatch> </IfModule> </IfModule>

Etichetele electronice vor fi dezactivate, astfel încât browserele trebuie să utilizeze anteturile de expirare și controlul cache-ului în locul verificării fișierelor. Iată cheia:

 Turn Etags off <IfModule mod_headers.c> Header unset ETag </IfModule> FileETag None

După ce ați terminat, faceți clic pe Salvare .

Metoda 2: Utilizați memorarea în cache a browserului în WordPress folosind pluginuri

O singură eroare vă poate distruge complet site-ul web, prin urmare editarea fișierului.htaccess poate fi destul de periculoasă. Astfel, puteți folosi pluginuri precum W3 Total Cache dacă nu doriți să vă asumați riscuri inutile.

Pluginul W3 Total Cache

Iată cum să utilizați W3 Total Cache, unul dintre cele mai bune plugin-uri în acest scop, pentru a valorifica stocarea în cache a browserului.

Introduceți tabloul de bord WordPress

Faceți clic pe Plugins -> Add New din meniul din stânga

Căutați W3 Total cache . Acum instalați și activați acest plugin

Fila de performanță va apărea în partea stângă a mea. Faceți clic pe Performanță -> Setări generale din meniul din stânga

Derulați în jos la Browser Cache și asigurați-vă că este activat și salvați modificările

Acum faceți clic pe Performanță -> Cache browser din meniul din partea stângă

Asigura-te ca

  1. Setați antetul expirării
  2. Setați controlul cache-ului
  3. Setați eticheta de entitate

sunt activate. Salvați toate modificările.

Plugin LiteSpeed ​​Cache

CyberPanel oferă fiecărui utilizator LiteSpeed ​​Cache în mod implicit cu fiecare implementare a site-ului WordPress. Dacă nu utilizați CyberPanel, îl puteți descărca de aici.

Pur și simplu pornind funcția, pluginul de cache LiteSpeed ​​Cache vă permite să exploatați memorarea în cache a browserului.

Accesați tabloul de bord WordPress

Faceți clic pe LiteSpeed ​​Cache -> Cache din meniul din stânga

Faceți clic pe fila Browser din bara de sus

Asigurați-vă că browserul cache este activat și faceți clic pe Salvare modificări

Concluzie

Amintiți-vă că, uneori, după instalarea unui plugin, nu veți observa imediat modificările pe care le faceți. Fișierul CSS/Foaie de stil este de vină pentru această întârziere. Nu veți putea vedea modificările pe care le-ați făcut din cauza cache-ului browserului pe care l-ați salvat deja pe computer. Se recomandă să utilizați funcția Incognito a browserului dvs. pentru a vizualiza site-ul web pentru a-l vedea corect după mai multe modificări. Nu veți consuma resurse de cache dacă utilizați această funcție și ar trebui să puteți observa clar modificările.

Abordarea pe care o selectați pentru a utiliza stocarea în cache a browserului este în cele din urmă irelevantă. Observarea lui în acțiune este singurul lucru care contează. Metoda pe care ați folosit-o pentru a ajunge acolo este irelevantă atâta timp cât Leverage Browser Caching în WordPress funcționează conform intenției. Nu există o abordare corectă sau greșită; rezultatul va fi același, indiferent de alegerea dvs. Leverage Browser Caching va îmbunătăți timpul de încărcare, indiferent dacă decideți să faceți modificări fișierului .htaccess sau să utilizați un plugin.