Tutorial WP Rocket pentru optimizarea vitezei site-ului

Ce este WP Rocket?

WP Rocket este un plugin care s-a născut ca soluție pentru diferitele optimizări de cache în WordPress. Astăzi este mult mai mult, iar cu el nu putem optimiza doar cache-ul, ci practic tot ce ține de optimizarea performanței de încărcare a site-ului.

Pentru a demonstra impactul său, aruncă o privire la performanța propriului nostru site CU și FĂRĂ WP Rocket:

De ce să folosești WP Rocket?

Deși am spus că există și alte alternative pentru optimizarea WPO, și fiecare este liber să o folosească pe cea pe care o consideră potrivită, în cazul nostru avem o preferință specială pentru WP Rocket. Interfața sa intuitivă care funcționează cu un click pe o casetă de bifare, multiplele opțiuni pe care le oferă pentru configurarea cache-ului și încărcarea resurselor, fac din WP Rocket favoritul nostru dintre toate opțiunile.

Meniul principal WP Rocket

Presupunând că nu am avut probleme la instalarea WP Rocket, să începem să explicăm interfața sa și diferitele opțiuni disponibile pentru optimizare. Când dai click pe tab-ul dashboard, apare următorul ecran:

Un mesaj de bun venit și opțiuni pe care inițial le putem lăsa în pace, dar pe care le vom explica aici.

My Account

Dacă ai cumpărat WP Rocket, caseta "View my account" te va duce la pagina utilizatorilor WP Rocket ca, odată ajuns acolo, să poți completa și verifica tot ce ține de profilul tău de utilizator: Date, facturare etc.

RocketCDN

RocketCDN este un serviciu CDN pe care WP Rocket îl oferă relativ recent. Scopul este de a furniza instrumentele necesare pentru a obține cea mai bună performanță fără a fi nevoie să cauți soluții în afara plugin-ului. Există și alte servicii CDN foarte populare și la fel de eficiente, precum Cloudflare sau Amazon CloudFront.

My Status

În cadrul acestei opțiuni avem două comutatoare de activat:

• ›

  Rocket Tester: acesta este programul de îmbunătățiri WP Rocket pentru testarea versiunilor lor BETA. Trebuie să îi contactezi prin email.

• ›

  Rocket Analytics: Ești de acord să partajezi anonim datele despre performanța WordPress-ului tău cu echipa de dezvoltare pentru a ajuta la îmbunătățirea WP Rocket.

Aici sunt puține de spus, aceasta este o decizie personală care nu ar trebui să afecteze performanța.

Configurarea cache-ului în WP Rocket

Este momentul să intrăm în opțiunile de configurare și vom începe cu cache-ul:

În al doilea tab al plugin-ului, putem vedea ce opțiuni de cache ne oferă. Să reținem că în WP Rocket optimizăm cache-ul paginii și, așa cum vom vedea acum, avem de asemenea o opțiune pentru utilizatorii autentificați, dar trebuie să fim atenți cu această opțiune.

Cache pentru mobil

În mod normal, când vorbim despre mobil includem și tabletele, dar de data aceasta vorbim doar despre dispozitivele mobile. WP Rocket detectează prin user agent că navigăm de pe smartphone-uri.

Vom activa întotdeauna această opțiune, întrucât ca regulă generală, designurile de desktop și mobil sunt diferite, cu excepția cazului în care nu avem o versiune responsive, această opțiune va fi întotdeauna activată. Ca să fie clar, de ce am vrea să ni se livreze 2 versiuni din cache dacă designul ar fi identic? Cu alte cuvinte, dacă nu am avea o versiune pentru mobil, nu am vrea ca acest cache să fie tratat diferit, nu?

Aici se adaugă o excepție. Când avem o versiune pentru mobil cu resurse sau elemente care se încarcă doar în acea versiune, vom salva fișierele separat.

Exemplu:

• ›Avem o reclamă care pe mobil încarcă un JS pe care versiunea de desktop nu îl are.

În acest caz am salva într-adevăr fișiere separate pentru mobil.

Cache pentru utilizatori

Cache-ul pentru utilizatori este o opțiune pe care WP Rocket o oferă pentru acei utilizatori care navighează în timp ce sunt autentificați.

Activând această opțiune, putem oferi o versiune de cache individualizată pentru fiecare utilizator. Cel mai bine este să o activezi dacă utilizatorii se autentifică, dar trebuie să fii deosebit de atent care pagini sunt puse în cache și care nu, pentru că, dacă utilizatorul introduce date personale (de exemplu informații bancare), stocarea lor în cache ne-ar putea cauza probleme legale.

Cum să excluzi o pagină de la a fi pusă în cache?

Dacă vrei să eviți probleme de acest tip, cel mai bine este să mergi direct la pagina pe care vrei să o excluzi și în opțiunile WP Rocket (bara laterală sau partea de jos) să selectezi "never cache this page".

Durata de viață a cache-ului

În această secțiune trebuie doar să indicăm durata pe care o dorim pentru fișierele de cache care se generează. Adică, WP Rocket generează un fișier care salvează versiunea paginii tale, iar acest fișier va fi cel livrat utilizatorului la accesarea site-ului.

Printr-un manager de procese (CRON), fișierele generate care depășesc durata indicată vor fi șterse și vor fi create altele noi.

Lucruri de reținut

WP Rocket ia deja în considerare anumite procese pentru a șterge și genera noi fișiere de cache, care sunt următoarele:

• ›

  Generarea de noi intrări, pagini, categorii, taxonomii sau editări

• ›

  Generarea și editarea de noi module, widget-uri sau orice element al site-ului

• ›

  Când se modifică configurări WP Rocket care afectează frontend-ul.

În rest, trebuie să ții cont că stocarea fișierelor de cache ocupă spațiu pe serverul tău, iar acest spațiu este limitat. De asemenea, este recomandabil să golești cache-ul din WP Rocket ca acesta să se actualizeze și să nu rămână fișiere care nu mai sunt necesare.

În ceea ce privește timpul, poți lăsa valoarea implicită.

Optimizarea fișierelor în WP Rocket

După ce am trecut pe scurt peste configurarea cache-ului, este momentul să lucrăm la optimizarea fișierelor. Optimizarea fișierelor se face pentru a ușura încărcarea și randarea HTML-ului. Cum putem lucra la această optimizare?

În mai multe moduri:

• ›

  Prin reducerea greutății fișierelor

• ›

  Prin eliminarea fișierelor inutile, și

• ›

  Prin executarea progresivă a fișierelor pe măsură ce sunt necesare.

Fișiere CSS

Fișierele CSS sunt responsabile pentru partea vizuală a site-ului. Foile de stil care dau formă, culoare și stil WordPress-ului nostru. În acest aspect, un design atrăgător poate să nu fie un design optimizat, pentru că designerul, la construirea CSS-ului, poate să nu fi urmat o serie de reguli de bază de optimizare.

Printre cele mai frecvente probleme pe care le întâlnim de obicei la foile de stil se numără:

• ›

  Fișiere CSS grele

• ›

  Fișiere CSS care se încarcă pe pagini care nu folosesc acele stiluri

• ›

  Fișiere CSS prost construite

• ›

  Încărcarea prea multor CSS externe

• ›

  Folosirea @import pentru a aduce foi de stil externe

Pe scurt, există o lume de practici care sunt adesea folosite și care nu sunt recomandate pentru optimizarea unui design bun, dar să trecem la ce ne oferă WP Rocket.

Minifică fișierele CSS

Această opțiune are ca scop reducerea greutății fișierelor CSS prin eliminarea spațiilor și a întreruperilor de linie. WP Rocket o implementează prin activarea casetei de bifare.

Sfat SEO Alive: Ori de câte ori efectuăm o acțiune, este o idee bună să încercăm să încărcăm site-ul pentru a vedea dacă totul este corect, fă-o în modul incognito al browserului.

Procesul este reprezentat în imaginea următoare, preluată din instrumentul minifier.org.

Combină fișierele CSS

Această funcționalitate realizează un fel de "copiere și lipire" a codului dintr-un CSS în altul pentru a evita încărcarea mai multor fișiere CSS și a avea doar unul.

Este recomandabil să continui să testezi pentru că depinde mult de cum a fost dezvoltată tema, pentru că, dacă am un fișier CSS care se încarcă doar pe un tip specific de pagină, ceea ce nu vreau este ca acel cod să fie încărcat într-un singur fișier pe toate paginile.

Idealul este să încarci codul folosit de URL. Bifează caseta și testează cu vreun instrument precum GTMETRIX pentru a vedea dacă ai îmbunătățit viteza de încărcare.

Beneficiul combinării fișierelor CSS este reducerea cererilor către server.

Optimizează încărcarea CSS

WP Rocket a fost actualizat ținând cont de recomandările oferite de diverse instrumente Google pentru optimizarea vitezei de încărcare. Dacă avem deja experiență cu aceste instrumente, cu siguranță am întâlnit avertismentul "Eliminate render-blocking resources". Activând această bifă, împiedicăm CSS-ul să blocheze încărcarea făcându-l să se încarce asincron.

Adică, randarea HTML-ului nu se oprește când trebuie să descarce fișierul CSS; acest fișier se încarcă în fundal, împiedicând oprirea procesului de încărcare. Așa că merită să o activezi.

Fișiere JS (JavaScript)

JavaScript a fost una dintre marile probleme pe care Google le-a întâlnit la procesarea HTML-ului. Fără a intra prea adânc în acest tip de limbaj, WP Rocket a proiectat 5 acțiuni de bază pentru optimizarea acestui tip de fișier. Să aruncăm o privire!

Elimină jQuery Migrate

jQuery Migrate este o bibliotecă JavaScript care permite compatibilitatea cu cod jQuery dezvoltat pentru versiuni de jQuery anterioare lui 1.9. Această bibliotecă vine nativ în WordPress, dar practic nu are niciun rost (unele plugin-uri ar putea avea nevoie de ea).

Cu această acțiune, vrem să evităm o cerere inutilă și încărcarea unui JS care nu va fi folosit. Dezactiveaz-o și navighează prin site-ul tău pentru a vedea dacă totul funcționează corect!

Minifică fișierele JavaScript

La fel ca ceea ce s-a explicat cu fișierele CSS, această acțiune s-ar aplica fișierelor JS, reducând ușor dimensiunea fișierelor JS.

Combină fișierele JavaScript

O altă acțiune similară cu modulul de optimizare CSS. Reține că, atunci când activăm aceste casete de bifare, trebuie să verificăm dacă totul funcționează ca înainte.

Încarcă fișierele JavaScript amânat

Bifa pe această acțiune face două îmbunătățiri ale performanței:

• ›

  Adaugă atributul "defer" la JS pentru a împiedica oprirea randării HTML-ului din cauza unei încărcări JS. Cu această acțiune, se descarcă în paralel și se execută la sfârșitul procesării HTML-ului.

• ›

  Mută JS-ul care blochează randarea inițială.

WP Rocket ne avertizează că acest tip de activare poate cauza probleme, motiv pentru care introduce un mod sigur pentru a evita problemele de încărcare ale elementelor esențiale pentru vizualizarea corectă a paginii.

Întârzie execuția JavaScript

O altă opțiune pentru a întârzia execuția JavaScript-ului care nu este esențial până când utilizatorul interacționează cu pagina. Această acțiune nu pare foarte importantă, dar ne permite să câștigăm timp pentru ca încărcarea să se producă mai rapid. Interacțiunea poate fi un click, un scroll, o mișcare a mouse-ului...

Optimizarea media

În acest tab, vom acoperi optimizarea elementelor cheie din primii pași ai optimizării WPO. Vorbim despre imagini, videoclipuri, iframe-uri și elemente încorporate în WordPress a căror funcționalitate este, cel puțin, discutabilă.

Lazyload

O acțiune esențială în orice optimizare a vitezei de încărcare. Funcția Lazyload face ca elemente precum imaginile, videoclipurile și iframe-urile să nu se încarce până când nu sunt esențiale pentru afișare.

Îți dau un exemplu. Pe măsură ce facem scroll, imaginile se încarcă. Imaginează-ți cum ar fi încărcarea acestei pagini dacă 30 de imagini s-ar încărca toate deodată, mai ales dacă utilizatorul nici măcar nu le vizualizează la început.

Emoji

Browserele includ deja propriile emoji-uri, așa că putem economisi acea cerere care se face dacă nu activăm această bifă. Recomandarea mea este să o activezi.

Conținut integrat

Împiedică alte persoane să integreze conținut de pe site-ul tău și, de asemenea, te împiedică să integrezi conținut de pe alte site-uri neautorizate. Cererile făcute cu acest JS sunt reduse.

Compatibilitate WebP

WebP este un format relativ nou pe care Google l-a introdus în jurul anului 2010, pentru compresia cu pierderi a graficii pe 24 de biți pe web, îmbunătățind furnizarea acestor resurse pentru a le accelera încărcarea.

În prezent nu toate browserele îl suportă, așa că va trebui să fii atent și să știi ce browser folosesc utilizatorii tăi când lucrezi cu acest format. Activează această opțiune dacă lucrezi cu imagini WebP.

Configurarea preîncărcării cache-ului

Trebuie să înțelegem bine cum se generează fișierele de cache ale WP Rocket pentru a înțelege funcția Preload.

Când un utilizator vizitează o pagină de pe site-ul nostru pentru prima dată, atunci pagina este pusă în cache și se generează un fișier de cache care va fi livrat utilizatorilor ulteriori. Același lucru se întâmplă când cache-ul expiră (timpul pe care l-am determinat) și versiunea din cache este eliminată, sau când noi înșine golim cache-ul tuturor URL-urilor noastre.

Preîncarcă cache-ul

Activând opțiunea Preload, ceea ce vom face este să încărcăm o versiune pusă anterior în cache astfel încât chiar și primul utilizator să aibă o versiune mai rapidă a site-ului nostru. Această acțiune se realizează prin link-urile din sitemap, așa că vom avea nevoie de un sitemap.

Sitemap-ul este un fișier generat unde sunt afișate URL-urile site-ului nostru. Cu plugin-uri precum "Rank Math" sau "Yoast" îl putem genera cu ușurință. Dacă vrei să vezi cum să creezi un sitemap cu Rank Math, aici îți arătăm.

Preîncarcă link-urile

Aceasta este o funcție pe care WP Rocket a încorporat-o în ultimele sale versiuni. Scopul este de a anticipa încărcarea "următoarelor pagini pe care utilizatorul urmează să le viziteze". La trecerea cursorului deasupra, are loc preîncărcarea paginii în cazul în care utilizatorul dă click pe link.

WP Rocket a adoptat această funcție pe care plugin-uri specifice precum "Flying Pages" o implementau deja pentru a îmbunătăți fluiditatea navigării în cadrul site-ului (experiența utilizatorului). Acestea fiind spuse, acesta nu este un factor care îmbunătățește timpul de încărcare și nu vei vedea îmbunătățirea în metricile instrumentelor de audit WPO.

Preîncărcarea cererilor DNS

Preîncărcarea cererilor DNS este foarte utilă când folosim resurse terțe precum YouTube, Facebook, fonturi sau iframe-uri pe care le solicităm frecvent.

Când facem orice conexiune pe Internet, se face o cerere DNS care trebuie rezolvată și trimisă la server. Aceasta are o durată pe care o putem îmbunătăți dacă adăugăm URL-urile resurselor necesare în această casetă pe care ne-o oferă WP Rocket.

După cum putem vedea în exemplu, este necesar doar să folosim numele domeniului //youtube.com //facebook.com

Rezolvarea DNS durează aproximativ între 20 și 120 de milisecunde, așa cum indică GTMETRIX, browserul nu va descărca nimic de la host până când acest proces nu este finalizat.

Preîncarcă fonturile

Preîncărcarea fonturilor necesită un pas anterior, care este descărcarea fonturilor și păstrarea lor pe serverul nostru. Odată ajunse acolo, putem face aceeași acțiune pe care am făcut-o cu preîncărcarea cache-ului, realizând o versiune mult mai rapidă a fișierului de fonturi și furnizând-o utilizatorului când se conectează la pagina noastră.

Odată ce fonturile sunt găzduite, îi vom indica WP Rocket calea exactă a fonturilor folosite. Este recomandat să nu abuzezi de fonturi diferite pe paginile noastre pentru că necesită descărcări diferite. Reține de asemenea că cererile către server se fac cu diferitele variații ale fontului, îți explic:

• ›

  Font bold --> 1 cerere

• ›

  Font subliniat --> 1 cerere

• ›

  Font cu majuscule --> 1 cerere

Configurarea regulilor avansate ale WP Rocket

Never cache these URLs

Există anumite URL-uri care, datorită unicității lor, nu vrem să aibă o versiune salvată în cache. Din acest tab, WP Rocket ne permite să introducem o listă de URL-uri pe care nu vrem niciodată să le punem în cache.

Never cache these cookies

WP Rocket ne oferă un alt instrument de control dincolo de a o face prin URL-uri. Multe plugin-uri funcționează cu propriile cookie-uri sau putem chiar instala propriile noastre pentru a identifica anumiți utilizatori; există multe moduri de a folosi aceste mici fișiere.

Cu WP Rocket putem opri punerea în cache a URL-urilor identificate prin ID-ul cookie-ului, odată descărcat în browserul utilizatorului, personalizând astfel și mai mult tipul de URL-uri pe care vrem să le punem în cache.

Never cache these user agents

User agent-ul este un câmp descriptiv din cadrul protocolului HTTP, folosit pentru a furniza informații despre dispozitivul care face o cerere. Cunoscând aceste informații, putem împiedica livrarea paginilor din cache către acești user agents.

De exemplu, unul dintre user agents-ii Google este Googlebot, așa că, indicându-l în această parte a site-ului, de fiecare dată când accesează site-ul nostru vom oferi paginile fără cache.

Always purge these URLs

Această opțiune este foarte interesantă pentru un tip de URL căruia, de exemplu, te interesează să îi fie mereu șters fișierul de cache la actualizare.

De exemplu, am URL-uri cu rezultate sportive și ceea ce nu vreau este să livrez o versiune din cache utilizatorului, întrucât rezultatele sunt actualizate foarte frecvent.

Cache these query strings

Query strings sunt date care sunt trimise la efectuarea unei cereri către o pagină web prin URL.

Ele sunt de obicei identificate prin simbolul semnului de întrebare "?" și, ca regulă generală, WP Rocket nu pune în cache acest tip de URL. În această opțiune îl putem forța să o facă.

Configurarea bazei de date cu WP Rocket

Așa cum am spus în mod repetat pe parcursul articolului, WP Rocket a încetat să mai fie doar un plugin de cache pentru a deveni un plugin pentru optimizarea vitezei de încărcare a site-ului nostru. În această secțiune de configurare, putem aprofunda optimizarea bazei de date.

Pe măsură ce lucrăm la conținutul nostru în WordPress, generăm alte tipuri de informații care nu sunt utile și afectează performanța site-ului nostru. Pentru asta, WP Rocket ne oferă acest instrument pentru a face o curățare mai mult sau mai puțin temeinică.

Curățarea articolelor

După cum putem vedea în imagine, există 3 elemente care pot ocupa spațiu în baza de date fără să ne intereseze. Când actualizăm conținut, se salvează o versiune anterioară, se generează de asemenea o ciornă automată a ceea ce edităm și intrări șterse.

Dacă eliminăm aceste elemente, vom elibera spațiu în baza noastră de date.

Curățarea comentariilor

Această parte este importantă pentru că uneori baza noastră de date se umple cu comentarii "spam", motiv pentru care WP Rocket a introdus această opțiune pentru a curăța acest tip de element.

Curățarea transient-urilor

Când lucrăm în WordPress, se generează anumite elemente transient pe care le putem șterge fără probleme întrucât vor fi regenerate.

Curățarea bazei de date

Atât acest punct, cât și următorul, îți recomand să faci o copie de rezervă a bazei de date pentru că, deși nu ar trebui să se întâmple nimic, aprofundarea acțiunilor în cadrul bazei de date are întotdeauna riscurile sale, așa că nu este o idee rea să faci o copie de rezervă.

Activarea acestei bife va efectua o curățare a tabelelor bazei de date. Acest proces poate fi automatizat.

Configurarea CDN cu WP Rocket

Înainte de a aprofunda cum să configurezi CDN-uri cu WP Rocket, vreau să îți explic ce este un CDN și de ce se folosește.

Ce este un CDN?

Un CDN (Content Delivery Network) este un serviciu al cărui obiectiv este de a îmbunătăți viteza de transfer al conținutului către utilizator. Pentru a face acest lucru, creează o rețea de distribuție a conținutului în diferite servere din întreaga lume pentru a scurta timpii cererii de resurse a utilizatorului. Adică, dacă utilizatorul este în Brazilia, un CDN oferă conținutul găzduit pe un server mai apropiat de el decât serverul de hosting web propriu-zis.

Imagini preluate de pe pagina WP Rocket

Cum funcționează un CDN?

Operează prin aceste alte servere care stochează o copie din cache a site-ului, iar când utilizatorul solicită acest conținut/resurse, un server mai apropiat efectuează transferul.

Aceste tipuri de servicii sunt foarte utile când ai conținut greu precum imagini, audio, video și/sau multe vizite. Dacă inițial ai un site cu puține vizite, nu ar trebui să îți faci griji cu privire la acest aspect.

RocketCDN

WP Rocket ne oferă posibilitatea de a-i angaja CDN-ul la un preț de 7,99 dolari pe lună, mai puțin de 7 euro.

CDN

Când angajăm un CDN ni se furnizează informații pentru a-l folosi. Unul dintre aceste elemente furnizate este CNAME-ul, deși, dacă nu este furnizat, îl putem obține.

CNAME-ul este un tip de înregistrare DNS care mapează un nume de domeniu sursă la un nume de domeniu țintă

Pentru a folosi această funcție va trebui doar să indicăm acel CNAME și să îi spunem pentru ce fișiere îl dorim.

Exclude fișiere din CDN

Următoarea opțiune, așa cum era de așteptat, este de a exclude acele fișiere pe care nu vrem să treacă prin CDN.

Optimizarea funcției WordPress Heartbeat

WordPress heartbeat este un transfer de date de control pentru a stabili comunicarea între backend-ul și frontend-ul WordPress și server. Acest tip de proces poate fi unul dintre motivele pentru care ai putea experimenta încetineală în WordPress-ul tău.

Printre acțiunile care pot fi limitate se numără:

• ›

  Salvarea automată și reviziile în editorul de articole.

• ›

  Notificările în panoul de administrare WordPress.

• ›

  Informații despre cine editează.

• ›

  Date în timp real.

Dacă WordPress-ul nostru funcționează corect, nu recomand să faci nimic în acest punct, dar dacă observăm încetineală, putem încerca să limităm activitatea în diferitele opțiuni.

Configurarea add-on-urilor WP Rocket

Există anumite elemente precum scripturile Google Analytics și Facebook, care, simplu prin activarea lor în această parte a configurării, ne pot oferi o versiune din cache și îmbunătăți performanța. Această acțiune răspunde direct uneia dintre cererile indicate de obicei în auditurile de viteză de încărcare precum Pagespeed "Leverage browser caching".

Optimizarea imaginilor

Optimizarea imaginilor este un proces care, datorită complexității sale, ar putea avea propriul ghid. WP Rocket oferă un plugin independent pentru a lucra cu aceste resurse. Din WP Rocket putem accesa descărcarea versiunii sale "Free".

Instrumente WP Rocket

Configurările WP Rocket pot fi salvate și importate pentru a evita să fii nevoit să petreci din nou timp cu acest proces. Ne oferă de asemenea opțiunea de a efectua un "Rollback", adică de a reveni în ceea ce privește versiunea instalată.

Tutoriale WP Rocket

Pentru a încheia acest ghid WP Rocket, plugin-ul însuși oferă o serie de videoclipuri care dau informații despre diferitele acțiuni care se efectuează și cum să le realizezi.

Concluzii

După cum ai văzut, WP Rocket este mai mult decât un plugin de cache; avem la dispoziție o suită completă pentru a optimiza viteza și performanța site-ului nostru, așa că acum nu ne mai rămâne decât să încercăm diferitele opțiuni. Ce mai aștepți ca să îți faci WordPress-ul să zboare?

Cunoșteai WP Rocket? Ai reușit să îți îmbunătățești performanța cu acest ghid? Ai vreo întrebare? Te așteptăm în comentarii!