Profitați de cache-ul browserului în WordPress pentru a optimiza timpul de încărcare a paginii

Utilizatorii site-ului web WordPress caută întotdeauna ceva din cutie și doresc să atingă acest punct de referință pentru peste 90 de puncte Google PageSpeed ​​Insights. În general, există mai multe tehnici pentru a accelera site-urile web WordPress, dar printre toate, cache-ul browserului este cel mai frecvent problemă găsită în timpul analizei de optimizare a vitezei site-ului web.

Pentru a monitoriza și testa performanța site-ului dvs. web, puteți utiliza o serie de instrumente online, cum ar fi Google PageSpeed ​​Insights, GTMetrix și Pingdom. Acestea oferă rezultate exacte și vă ajută să înțelegeți unde site-ul dvs. are nevoie de îmbunătățiri. În timp ce testați performanța site-ului, este posibil să fi primit o notificare de avertizare despre „Leverage Browser Caching”.

Astăzi, vom discuta despre modul în care puteți rezolva această problemă. Deci, să nu pierdem timpul și să ne adâncim.

Ce este un cache al browserului și cum funcționează?

Ori de câte ori o persoană vă vizitează site-ul web, browserul trimite o cerere de încărcare a activelor precum HTML, Scripturi, Imagini, CSS etc. de pe server. Serverul răspunde apoi la solicitarea browserului. În funcție de mărimea activului solicitat și de timpul de procesare al serverului, răspunsul poate dura puțin timp pentru a răspunde. În cele din urmă, rezultă o încărcare crescută pe server și încetinește site-ul web la sfârșitul utilizatorului.

În această situație, cache-ul browserului funcționează cel mai bine. Stochează conținut static în browserul unui utilizator, prima dată când un vizitator vizitează un site web. Dacă site-ul dvs. web nu este configurat corespunzător cu memoria cache a browserului și testați viteza site-ului dvs. web utilizând oricare dintre instrumentele de testare a performanței menționate mai sus, instrumentul va afișa cu siguranță un mesaj de avertizare pentru a utiliza memoria cache a browserului.

Potrivit Google, răspunsul serverului ar trebui să includă mai jos două etichete în antet:

Cache-Control definește cum și pentru cât timp răspunsul individual poate fi stocat în cache de browser și de alte cache-uri intermediare.

ETag oferă un jeton de revalidare care este trimis automat de browser pentru a verifica dacă resursa s-a schimbat de la ultima solicitare.

Ce este stocarea în cache a browserului Leverage?

În cuvinte simple, utilizarea pachetul de cache în browser ajută la reducerea cererilor HTTP pentru încărcarea mai rapidă a paginilor și, de asemenea, îmbunătățește timpul de răspuns al serverului.

Să aruncăm o privire la un exemplu live. Mi-am testat site-ul folosind Think with Google și iată rezultatul.

Să-l testăm din instrumentul Google PageSpeed ​​Insights.

Bine, deci, puteți vedea că performanța generală a site-ului meu web este destul de bună. Dar, este loc să-l îmbunătățim. Se arată că URL-urile mele interne pot fi stocate în cache.

Remediați avertismentul „Leverage Browser Caching”

Pentru a remedia avertismentul „Leverage Browser Caching”, va trebui să efectuați următorii doi pași.

1. Modificați antetele cererii pentru a utiliza memoria cache
2. Optimizați politica de cache

1. Modificați antetele cererii pentru a utiliza memoria cache

O modalitate de a îmbunătăți viteza și răspunsul site-ului dvs. web este să schimbați antetele cererii pentru a utiliza memoria cache. Vom adăuga câteva linii de cod în fișierul nostru WordPress .htaccess.

Notă: .htaccess este camera de control a unui site web. Dacă nu este configurat corect, acesta poate defecta site-ul complet în timp ce vă aflați la el! Aflați cum să vă protejați WordPress cu fișierul .htaccess .

Pentru a valorifica stocarea în cache a browserului în WordPress, accesați directorul principal al instalării dvs. WordPress, căutați fișierul .htaccess și deschideți-l cu orice editor de cod. Pur și simplu, lipiți liniile menționate mai jos în partea de sus a fișierului .htaccess WordPress.

 ## EXPIRES CACHING ##

<IfModule mod_expires.c>

ExpiresActive On
ExpiresByType image / jpg "acces 1 an"
ExpiresByType image / jpeg "acces 1 an"
ExpiresByType image / gif "acces 1 an"
ExpiresByType image / png "acces 1 an"
ExpiresByType text / css "acces 1 lună"
ExpiresByType text / html "acces 1 lună"
Aplicație ExpiresByType / pdf "acces 1 lună"
ExpiresByType text / x-javascript "acces 1 lună"
Aplicația ExpiresByType / x-shockwave-flash "acces 1 lună"
ExpiresByType image / x-icon "access 1 year"
Expiră "Acces 1 lună" implicit

</IfModule>

## EXPIRES CACHING ##

2. Optimizați politica de cache

Al doilea pas pentru a accelera timpul de răspuns pe site-ul dvs. web este optimizarea politicii de cache. Codul de mai sus descrie tipurile de fișiere și expirările acestora. Depinde în totalitate de dvs. cât timp doriți să stocați conținut static specific în memoria cache a utilizatorului. Dacă conținutul dvs. static, cum ar fi imaginile, este pe termen lung. Aș sugera să le setați pentru un an. Cu toate acestea, conținutul pe care îl suspectați poate fi schimbat în viitorul apropiat, este sugerat să setați data de expirare pentru cel puțin o lună.

Cache-Controale

Dacă metoda de mai sus nu funcționează pe serverul dvs., avem o altă alternativă care vă poate ajuta cu controalele cache pentru a seta expirarea în cache. Tot ce trebuie să faceți este să copiați și să lipiți următoarele rânduri în partea de sus a fișierului .htaccess.

 # 1 lună pentru majoritatea activelor statice

<filesMatch ". (css | jpg | jpeg | png | gif | js | ico) $">
Set de antet Cache-Control "max-age = 2592000, public"

</filesMatch>

La fel ca și pasul anterior, codul de mai sus descrie politica de expirare și cache a diferitelor tipuri de fișiere.

Notă: Aceasta este valoarea minimă care poate elimina avertismentul. Dacă expirarea este mai mică decât aceasta, este posibil să vedeți în continuare avertismentul de pârghie al browserului, sugerând creșterea expirării.

După configurarea corectă a fișierului .htaccess, o vom testa acum. Deci, Să testăm!

Și avertismentul „pârghie în cache a browserului” a fost remediat.

WordPress utilizează cache-ul browserului pentru Google Analytics

Dacă utilizați orice plugin WordPress pentru Google Analytics, este posibil să primiți în continuare un avertisment privind stocarea în cache a browserului, nu contează că configurați totul corect.

Acest lucru se datorează faptului că Google Analytics a stabilit timpul de expirare implicit pentru doar două ore pentru a vă asigura că primiți actualizări cât mai repede posibil.

Există două moduri de a remedia avertismentul cache al browserului pentru Google Analytics.

1. Local : puteți crea o copie locală a analytics.js și / sau ga.js (orice fișier aveți de-a face cu ajutorul cache-ului browserului). Rețineți că Google nu recomandă această metodă.
2. Plugin : utilizați pluginul complet WordPress Optimization Suite (CAOS) WordPress care găzduiește local fișierul Google Analytics și utilizați wp_cron () pentru a-l menține actualizat.

Încă vedeți avertismentul privind cache-ul pârghiei browserului?

După ce ați setat totul corect, este posibil să vedeți în continuare Google sugerând să utilizați memoria cache a browserului, cum ar fi imaginea de mai jos.

După cum puteți vedea, fișierele de mai sus sunt integrări de la terți. Acestea nu sunt prezente pe serverul nostru. Nu putem face nimic cu ele decât să le ștergem. Toate integrările terților pot provoca acest avertisment în instrumentele de testare a vitezei.

Sunt client Cloudways, ce-i în mine?

Dacă sunteți un client de găzduire WordPress optimizat pentru Cloudways, atunci ar trebui să vă lăsați deoparte îngrijorările cu privire la utilizarea de către WordPress avertismentului cache al browserului care apare în instrumentele de testare a vitezei online. Deoarece Cloudways gestionează această problemă de la sine. Puteți modifica timpul de expirare navigând pur și simplu la Server → Setări și pachete → Avansat , derulați puțin în jos și căutați NGINX - Expirare cache statică . Valoarea implicită este 43200 min, adică echivalentul a 30 de zile.

Profitați de cache-ul browserului cu cache-ul total W3

Metoda menționată mai sus este modalitatea manuală de eliminare a avertismentului cache al browserului. Dacă utilizați un plugin de cache, cum ar fi W3 Total Cache , trebuie să activați cache-ul browserului navigând la Performanță → Setări generale .

Apoi navigați la Cache browser și bifați mai jos cinci casete de selectare.

Derulați puțin în jos pentru a seta timpul de expirare pentru fișierele CSS și JSS. Valoarea implicită este 31536000, care este echivalentă cu 365 de zile. Puteți schimba acest lucru în intervalul de timp dorit.

Derulați un pic mai mult pentru a seta un timp de expirare pentru HTML și XML.

Pentru a modifica valorile implicite pentru fișiere media și alte fișiere, derulați puțin în jos și setați expirarea. Valoarea implicită este 31536000, adică echivalentă cu 365 de zile.

Gânduri finale

Leverage Browser Caching ajută la îmbunătățirea scorului de testare a performanței web. Amintiți-vă, aceste setări sunt destinate numai construirii de orientări de bază și înțelegere în rândul utilizatorilor WordPress. În afară de aceasta, există o serie de tehnici care pot ajuta indivizii să realizeze un site web mai rapid în cel mai scurt timp, în care cea mai importantă este alegerea cea mai rapidă găzduire WordPress.

Dacă aveți orice întrebare, nu ezitați să întrebați în secțiunea de comentarii de mai jos. Mi-ar plăcea să răspund.