Cum să obțineți un scor de performanță ridicat pe Google PageSpeed ​​Insights pentru WooCommerce

Performanța site-ului web este un aspect esențial al designului web care este adesea trecut cu vederea de agenții. Dacă site-ul dvs. răspunde și oferă conținut foarte rapid, veți primi multe beneficii – inclusiv o creștere a conversiilor și o poziție mai bună în Google.

La Herdl, apreciem pe deplin beneficiile pe care performanța înaltă le poate oferi pe mai multe canale de marketing și considerăm optimizarea performanței o parte integrantă a procesului nostru.

De ce este importantă viteza site-ului?

Ca site de comerț electronic, rata de conversie este o piesă vitală de date care ar trebui să formeze nucleul procesului dvs. de raportare. Viteza site-ului are un efect fundamental asupra ratei de conversie a site-ului web, iar cercetările prezentate de Google evidențiază beneficiile profunde ale unui site rapid. În raportul lor, este ușor de observat corelația puternică dintre viteza site-ului și rata de conversie.

De asemenea, Google a reconfirmat recent importanța vitezei site-ului web ca factor de clasare: la începutul anului 2018, au anunțat Actualizarea vitezei ca parte a tranziției lor mai ample la un index pe mobil. Actualizarea vitezei a fost lansată în iulie 2018 și ar fi afectat doar un mic procent de site-uri care au fost responsabile pentru cele mai lente experiențe pe site.

Ca site de comerț electronic, rata de conversie este o piesă vitală de date care ar trebui să formeze nucleul procesului dvs. de raportare.

Cu toate acestea, viteza site-ului a făcut parte din algoritmul motorului de căutare Google încă din 2010, când a fost lansat pentru prima dată Google PageSpeed ​​Insights. În timpul lansării, viteza site-ului a fost denumită oficial ca unul dintre semnalele de clasare ale Google și de atunci a fost recunoscută ca un factor integral de clasare SEO.

Importanța hardware-ului și a configurației

Performanța începe cu hardware-ul, așa că dacă serverele sau rețeaua dvs. sunt limitate, performanța va avea inevitabil de suferit.

Platforma noastră de găzduire este proiectată, construită și gestionată de expertul în infrastructură, John Arundel, de la Bitfield Consulting, și oferă găzduire WordPress de înaltă performanță cu recuperare în caz de dezastru la nivel de centru de date. Distribuim site-uri în Digital Ocean și Linode, care oferă ambele servere private virtuale fiabile și scalabile, care rulează pe hardware rapid, cu unități SSD și o rețea de 40 Gbit.

Pentru performanță și securitate, lucrăm întotdeauna la un model cu un singur site pe server, cu un firewall per server . Gazduirea partajată este cel mai bine evitată pentru site-urile de afaceri și cu siguranță ar trebui evitată pentru comerțul electronic. Când vine vorba de găzduire și securitate, fiți paranoic – „nu vă asumați riscuri” este cel mai bun mod de a adopta.

Gazduirea partajată este cel mai bine evitată pentru site-urile de afaceri și cu siguranță ar trebui evitată pentru comerțul electronic.

Serverele Herdl rulează o stivă LEMP (Ubuntu LTS, Nginx, MySQL, PHP) cu gestionarea configurației de către Puppet. Puppet ne permite să ne automatizăm configurarea serverului, instalarea aplicațiilor și gestionarea sistemului, eliminând erorile umane în timpul acestor sarcini repetitive. Este, de asemenea, folosit pentru a automatiza backup-urile zilnice ale serverului, salvând baze de date complete și backup-uri incrementale ale site-ului pe Amazon S3. Salvând copiile de rezervă în afara site-ului pe S3, ne asigurăm că acestea sunt accesibile chiar dacă un centru de date se defectează.

Pentru o arhitectură cu un singur server, blocajul de performanță este adesea baza de date, care poate consuma multă memorie - asigurați-vă că aveți suficientă memorie RAM, precum și vCPU-uri. Performanța bazei de date poate fi îmbunătățită în continuare prin utilizarea Redis pentru a stoca în cache rezultatele interogărilor.

Configurația standard care este livrată cu MySQL ( my.cnf ) va funcționa, dar probabil că doriți să o modificați puțin pe baza specificațiilor serverului dvs. Există o mulțime de articole bune despre optimizarea MySQL pentru WordPress, care includ sugestii utile și exemple de fișiere de configurare, dar cea mai bună opțiune este să o ajustați la utilizarea reală a site-ului - pentru aceasta, folosim acest excelent script Perl.

Asigurați-vă că testați întotdeauna toate modificările de configurare pe site-ul dvs. de pregătire și comparați rezultatele utilizând mysqlslap (care este livrat cu MySQL). Este o idee bună să activați jurnalul de interogări lenți MySQL și pe serverul dvs. intermediar, deoarece acest lucru poate evidenția interogări supărătoare care ar trebui investigate (și poate fi, de asemenea, util pentru furnizarea de interogări de testare pentru benchmarking).

Dacă publicați conținut în mod regulat, baza de date WordPress poate deveni foarte umflată din cauza întregii pagini și poate posta revizuirile pe care le salvează automat. În mod implicit, nu există limite privind numărul de revizuiri salvate de WordPress – limităm acest număr la cinci adăugând următoarea linie la fișierul de configurare WordPress ( wp-config.php ):

define( 'WP_POST_REVISIONS', 5 );

În sfârșit, merită și optimizarea bazei de date din când în când, dar asigurați-vă că o faceți mai întâi o copie de rezervă. WP Rocket, un plugin de cache pentru WordPress, oferă toate instrumentele de care aveți nevoie pentru aceasta. Voi vorbi mai târziu despre WP Rocket.

Instrumente de dezvoltare

Pentru dezvoltarea WordPress, ne bazăm pe propria noastră „aromă” specială a WordPress folosind tema de pornire Sage (și fluxul de lucru) de către echipa Roots. Aceasta include Gulp pentru sarcini avansate, automate de construire, Composer pentru controlul dependențelor, inclusiv utilizarea de pluginuri WordPress terță parte (și versiunea de versiuni) și npm pentru gestionarea pachetelor.

După cum vă puteți imagina, fluxul nostru de lucru evoluează constant și ne uităm mereu la noi instrumente și servicii pe care să le încorporam în procesul nostru. Echipa noastră se străduiește să păstreze codul USCAT și să urmeze principiile BEM cât mai îndeaproape posibil. Modul în care structurem fișierele cu teme este configurat pentru a facilita acest lucru prin descompunerea funcționalității temei, șabloanele și activele.

Pentru controlul versiunilor, folosim Git prin Bitbucket, urmând fluxul de lucru NVIE git. Codul este construit și implementat automat prin DeployHQ, care este ușor de configurat și oferă toate opțiunile necesare pentru dezvoltarea WordPress. În plus, sprijinul lor este de primă clasă.

Odată ce aplicația dvs. este deschisă și rulează, este timpul să măsurați și să comparați statisticile vitale, astfel încât să puteți regla fin și optimiza performanța. Pentru aceasta, folosim o combinație de instrumente Pingdom, GT Metrix și Google PageSpeed ​​Insights. Există o mulțime de valori de analizat în rapoartele pe care aceste servicii le produc – în cele din urmă, timpul de încărcare și dimensiunea paginii sunt cele pe care trebuie să vă concentrați, cu scopul de a le reduce cât mai mult posibil. Acest lucru asigură că toți utilizatorii de pe toate dispozitivele (și conexiunile de rețea) au cea mai bună experiență posibilă.

Când vine vorba de testarea între browsere și dispozitive, alegem LambdaTest. Este simplu de utilizat, oferă o suită cuprinzătoare de teste și are planuri pentru toate bugetele. De asemenea, se integrează cu Trello și Slack, formând o parte esențială a fluxului nostru de lucru.

WP Rocket este pluginul nostru preferat de cache pentru WordPress și va îmbunătăți dramatic performanța pe orice site. Este ușor de configurat și oferă controale foarte granulare pentru utilizatorul mai avansat, ceea ce înseamnă că puteți ajusta configurația cache-ului. WP Rocket se integrează frumos cu CDN-urile, iar modelul lor de licențiere este perfect pentru agenții.

În funcție de bugetul și site-ul clientului, activele statice sunt fie deservite direct de serverul web, de la un CDN (cum ar fi Beluga și BunnyCDN), fie prin servicii de optimizare a imaginii în timp real (Piio și Imagekit). Pentru performanța mobilă, Piio (pronunțat pie-o) este o alegere excelentă, deoarece detectează, optimizează și redimensionează imaginile din mers înainte de a le încărca lene - asta înseamnă că fiecare dispozitiv primește imagini optimizate și redimensionate corect (fără scalare în browser).

Dacă nu folosim un serviciu de optimizare a imaginii, atunci Short Pixel este pluginul nostru recomandat. Oferă o optimizare excelentă a imaginii folosind compresie cu pierderi, lucioase sau fără pierderi și poate, de asemenea, converti imaginile în format WebP. De asemenea, poate optimiza în bloc întreaga bibliotecă media, iar prețul este, de asemenea, foarte competitiv.

Securitatea este o componentă esențială a performanței site-ului web. Dacă site-ul dvs. este deteriorat, infectat cu programe malware sau scos offline printr-un atac, atunci acesta nu funcționează optim. Fiind atât de popular, WordPress este o țintă evidentă pentru hackeri, așa că securitatea la nivel de aplicație este esențială. Folosim și recomandăm cu tărie WordFence, care este de departe cel mai bun plugin de securitate WordPress disponibil. Pentru site-urile de comerț electronic, alegeți Licența Pro plătită – datele clienților nu sunt ceva ce ar trebui să riscați.

Disponibilitatea este de asemenea cheia. Nu are rost să ai cel mai rapid site de pe planetă dacă în prezent este oprit și nu știi despre el. Pentru monitorizarea la nivel de server, folosim Icinga pentru a urmări toate serviciile care rulează pe fiecare server. De asemenea, folosim Uptime Robot pentru o liniște sporită – împreună, acești doi asigură că suntem întotdeauna alertați cu promptitudine cu privire la orice problemă.

Mabl, Sentry și Fluxguard se ocupă de monitorizarea aplicațiilor, alertându-ne cu privire la orice problemă la nivel de aplicație. De asemenea, pot detecta modificări la nivel de conținut – un bun indicator al problemelor subiacente la nivel de cod în urma unei actualizări. Mabl face și o mulțime de alte lucruri interesante, inclusiv testare automată. Este unul dintre serviciile noastre preferate și cu siguranță unul de verificat.

Pe măsură ce traficul și încărcarea cresc dincolo de capacitatea unui singur server, intră în joc o arhitectură cu mai multe servere. În acest moment, vă recomandăm cu tărie să angajați un consultant de dezvoltare sau un membru intern dedicat al echipei dvs.

Faceți performanța parte a proceselor dvs. de proiectare și dezvoltare

Performanța este o considerație pe tot parcursul procesului nostru, de la planificare până la proiectare și dezvoltare. Există un dialog continuu între echipa noastră de design și dezvoltatori cu privire la cea mai bună modalitate de a aborda un proiect – sau chiar elemente specifice – pentru a crea cea mai bună experiență online.

În fazele de planificare, avem o idee fermă despre ce funcționalitate va fi necesară pe site. Utilizarea WooCommerce este un exemplu excelent în acest sens, deoarece cerințele de găzduire sunt diferite atunci când oferim un element de comerț electronic. Clienții sunt conștienți de acest lucru de la început și li se oferă un set diferit de opțiuni de găzduire.

Aceeași gândire este transmisă în faza de proiectare, unde vom crea wireframes, concepte și chiar animații, pentru a reprezenta pagini și elemente de pe site. Aici sunt concepute majoritatea efectelor front-end, iar echipa noastră lucrează împreună pentru a proiecta ceva care oferă o experiență uimitoare în care performanța joacă un rol esențial.

Considerăm că este important să luăm în considerare toate dispozitivele ca parte a acestui proces, ținând cont de modul în care experiențele mobile și desktop pot diferi.

Adoptăm o abordare iterativă a testării pe parcursul dezvoltării, elementele fiind permanent modificate. Urmăm un proces de degradare grațioasă, începând cu conceptul nostru ideal și eliminând straturile în mod corespunzător pentru dispozitivele și browserele individuale. În plus, vom rezerva timp special pentru optimizarea performanței, introducerea caching-ului și optimizarea fișierelor, precum și modificări la nivel de cod. În timpul acestui pas, vom testa și retesta elementele pe mai multe dispozitive până când ne bucurăm că funcționează cel mai bine.

Concentrarea pe performanță în toate etapele activității noastre a ajutat să ne asigurăm că site-urile pe care le livrăm sunt bine primite în timpul lansării și ne-a făcut să câștigăm multe premii. Acestea includ o serie de premii specifice dezvoltării, cum ar fi Awwwards' Developer Award, Mobile Excellence Award și Mobile Site of The Week (printre altele).

Îmbunătățiți viteza și securitatea site-urilor dvs. WooCommerce

Sperăm că, împărtășind câteva informații despre performanța site-ului și detalii despre configurarea și procesul nostru, putem ajuta managerii WooCommerce să îmbunătățească viteza și securitatea site-urilor lor. Pentru a rula eficient un site de comerț electronic, performanța ar trebui să fie o prioritate de top și credem că va deveni mai critică odată cu prevalența dispozitivelor mobile.

Dacă aveți întrebări sau comentarii cu privire la configurația noastră, lăsați-ne un comentariu sau contactați-ne.