Optimizarea vitezei unui site WordPress

optimizare viteza site wordpress

Distribuie Articolul

Optimizarea vitezei unui site WordPress

Viteza de descarcarea a unei pagini web pe orice dispozitiv, dar in special pe cele mobile, nu este numai un factor SEO din ce in ce mai important.

Un site care functioneaza greu va influenta in mod negativ experienta oricarui utilizator pe site-ul propriu.

Pe de cealalta parte, fiecare element din site (text, poza, video, script) necesita un „request” (o solicitare) in plus ceea ce influenteaza in mod direct viteza.

Astfel, pentru a avea un site care arata bine, dar se misca si repede, trebuie sa poti face joc fin intre cele doua si in fiecare situatie sa alegi ce e mai important.

Elementul de design sau o fractiune de secunda mai putin la timpul de incarcare a paginii respective?

Atentie la tema activa pe site

O influenta covarsitoare asupra vitezei cu care se descarca o pagina web o are tema care a fost folosita la baza site-ului. Unele teme sunt recunoscute ca nu sunt cea mai buna optiune pentru un site rapid.

Daca deja ai o astfel de tema pe site, nu trebuie neaparat sa schimbi tema, te poti concentra pe celelalte aspecte pentru a putea compensa.

Unele teme am posibilitate de-a activa/deazactiva tipurile de continut pe care le folosesti in site. Dezactiveaza orice nu este folosit pe site.

Exemplu: Tema Porto u este una dintre cele mai rapide, dar iti permite o serie de customizari la indemana inclusiv excludere tipurilor de continut nefolosit

Incepe documentarea descoperind top-ul celor mai rapide teme de WordPress, dar nu ar trebui ca alegerea pe care urmeaza s-o faci, sa fie bazata doar pe acest argument – cea mai rapida.

De asemenea, actualizarea temei la zi te poate ajuta sa obtii timpi mai buni la descarcarea site-ului prin optimizarile facute de producatorul temei.

Alege cu atentie builder-ul

Page/Content/WebSite Builder este un tool prin interfata caruia poti face modificari sau completari site-ului tau fara a interactiona in vreun fel cu orice linite de cod.

Unele teme WordPress lucreaza doar cu un anumit „builder”, alte sunt compatibilie cu mai multe programe de „content builder”, dar performanta difera intre ele.

Cu cat builder-ul este mai complex cu atat foloseste mai mutle fragmente de cod si scripturi pentru a implementa modificarile facute de tine.

Daca intr-o prima instanta castigam din punct de vedere al timpului pentru implementarea unor task-uri simple, pe termen lung site-ul poate avea de suferit la nivelul vitezei.

Din nou acelasi joc fin, la care faceam referire la inceputul articolului. O pagina construita cu un builder, nu poate fi modificata cu un alt program pentru ca va produce erori complicate.

Alege cu mare atentie, inca de la inceput page builder-ul pe care vrei sa-l folosesti in site de la acel punct incolo, folosindu-te de lista foarte buna realizata de cei de la HostGator.

Foloseste cat mai putine plugin-uri

Probabil ca ai auzit de foarte multe ori acest sfat, dar totusi media de pluging-uri intr-un site WordPress se invarte in jurul a 40 de plug-in-uri.

Incearca sa te incadrezi cat mai mult sub acest numar.

Exemplu: nu folosi un plugin pentru a instala codurile de tracking pentru aplicatii cum ar fi: Google Analytics, Google Ads, Facebook Pixel, Conversii Standard sau Custom, HotJar si asa mai departe.

Nu ai nevoie de un plugin in plus pentru a adauga cateva fragmente de cod. Daca nu te descurci, solicita ajutor unei unei firme specializate sau unui freelancer.

Chiar daca acest lucru implica un cost, acesta nu este foarte mare, si este de tip one-time-payment si nu o cheltuiala recurenta.

De asemenea, in cazul magazinelor, poti verifica pentru ceea ce ai nevoie de un anumit plugin, daca nu cumva exista o extensie WooCommerce.

Testeaza compatibilitatea dintre Tema, Extensii si Plugin-uri

Un aspect des ignorat de catre majoritatea administratorilor de site-uri WordPress este sa testeze efectiv compatibilitatea dintre Tema site-ului si majoritatea plug-inurilor instalate.

Pentru aproape orice optiune pe care vrei s-o implementezi in site, vei gasi cel putin 3-4 module care te pot ajuta. Dar nu toate sunt la fel de bune, sau nu toate functioneaza la fel de bine cu tema pe care o ai activa pe site.

Unele teme au pe site-ul lor oficial sau la instalare, o sectiune speciala cu module recomandate (in special la nivel de module Cache) cu care tema functioneaza perfect.

Aceste este primul loc in care trebuie sa te uiti.

Apoi, ori poti cauta pe net, in functie de tema pe care o ai pe site, ori incepi testarea efectiva. Folosindu-te de analizatoarele de viteza precum: GT Metrix, Pingdom sau Google Page Speed Insights, vei vedea impactul fiecarui plugin la nivelul vitezei.

Mai mult decat atat, in raportul GT Metrix, ai disponibil raportul de tip Waterflow, unde vezi fiecare resursa sau script cat de mult timp necesita pentru descarcare.

Este bine sa testezi cu 2 analizatoare ca sa fii sigur(a) de alegerile pe care le faci si n-ar trebui sa testezi mai multe de 4-5 pluginuri intr-o zi.

Aceste tool-uri de analizare a vitezei, au masuri proprii de protectie, iar dupa cateva scanari ale site-ului, aplicatia respectiva va folosi versiunea cache a site-ului si nu cea cu ultimele modificari facute.

De exemplu, am facut si noi acest testing la unele site-uri la WebHipsters, si am descoperit ca Facebook Messenger-ul disponibil in cadrul plugin-ului Facebook for WooCommerce se incarca mult mai repede decat pluginul dedicat.

Desi modulul Facebook For WooCommerce contine mult mai multe optiuni pe langa partea de mesagerie, acesta functioneaza de departe mai bine.

O foarte buna sursa de informare este site-ul WooCommerce, in primul rand ar trebui sa citesti articolul pe tema compabilitatilor dar la fel de important este sa verifici si lista de conflicte cunoscute.

Optimizarea pozelor

Toata lumea stie cat de importanta este optimizarea pozelor pentru Web inainte de incarcarea pe site, dar oare cati dintre noi, utilziatori de WordPress stim sa facem acest proces ca la carte.

Optimizarea pozelor presupune un proces in 3 directii:

  1. Format-ul pozei: Obligatoriu jpg sau png, ideal svg. Acestea din urma reusesc performante si mai bune.
  2. Dimensiunile pozei: Nu incarca pozele direct din aparat sau telefon. Acestea trebuie adaptate la dimensiunea elementului in care urmeaza sa fie afisate. Altfel, acest proces de redimensionare va fi facut de browser, si il va tine ocupa, in loc sa incarce cat mai repede tot site-ul.
  3. Optimizarea Looslessly: Acest tip de optimizare presupune reducerea spatiului ocupat de fiecare poza, deci implicit cantitatea de resurse ce trebuie descarcata pe un dispozitiv de catre browser atunci cand accesezi pagina web. Exista tool-uri cu ajutorul carora poti face asta, manual inainte de-a incarca pozele efectiv in site (Ex: Tinypng) sau cu ajutorul unor module WordPress cum ar fi: Smush sau Optimus mai multe module similare in articolul HubSpot.

Optimizarea fonturilor

Un aspect a carui importanta a crescut considerabil in ultima perioada, odata cu nevoia tot mai mult de personalizare si creare a unei identitatii pentru tot mai multe brand-uri.

Recomandarea principala aici este sa-ti alegi fonturile din lista oficiala de fonturi de la Google. Astfel, eviti descarcarea pentru fiecare utilizator inclusiv a fontului pe langa restul resurselor din site.

Fiecare mod de-a scrie un Font: Thin, Semi Bold, Bold implica incarcarea unui subfont. Ar trebui sa alegi foarte bine cate si care fonturi si subfonturi le foloseste. Acest lucru il poti face cu usurinta din cadrul setarilor temei – Typography, daca este disponibila aceasta optiune.

Servicii Gazduire (pachet + baza de date)

Un aspect foarte mult subevaluat cand vine vorba de viteza unui site. Nu odata ne-am confruntat cu solicitari pentru optimizarea vitezei unui site care era gazduit folosind cel mai mic pachet disponibil.

Total gresit.

Costul cu gazduirea unui site trebuie privit la fel de serios precum chiria unui magazin fizic. Cu cat esti dispus sa platesti mai mult cu atat o sa mearga mai bine (… cu atat o sa o pozitie mai buna).

Avand in vedere media de preturi pentru serviciile de gazduire din Romania, orice pachet cu un cost mai mic de 50 ron/luna nu va fi niciodata suficient, mai ales daca ai un magazin online.

Modul Cache

In cursa optimizarii multi administratori de site si/sau antreprenori care-si administreaza direct site-ul, instaleaza un plug-in specializat, bifeaza 2-3 optiuni si asteapta minunea sa se intample.

Lucrurile sunt putin mai complicate decat atat si avem si mai mutle optiuni de avut in vedere.

Nu exista un program de cache care sa rezolve singur tot.

In functie de tema din site-ul tau, un plug-in sau altul poate fi alegerea cea mai buna. Raspunsul il poti afla doar testand mai multe plugin-uri pentru minim o saptamana fiecare.

O alternativa mai usoara ar fi sa cauti pe internet in functie de tema pe care o ai instalata.

Dupa ce ai identificat cea mai buna optiune de program cache pentru site-ul tau, analizeaza posiblitatea achizitionarii variantei premium care-ti va conferi rezultate sporite.

Plugin-uri  cache apreciate de-alungul timpului:

Servicii CDN

Scump, dar extrem de eficient, obligatoriu pentru cei care opereaza la nivel international.

CDN = content delivery network reprezinta copii ale site-ului tau gazduite in diferite alte locuri pe glob, astfel incat site-ul tau se incarca din mai multe surse concomitent.

In mod similar cu pachetele de gazduire, furnizorii ofera mai multe optiuni din care-ti poti alege, dar adevarata valoarea a acestui serviciu n-o poti intelege pana nu incerci.

Furnizori importanti pentru CDN sunt: Cloudfare, CloudFront de la Amazon

Testeaza si imbunatateste cu ajutorul analizatoarelor de viteza pentru site

Ai implementat toate sau doar o parte din sfaturile noastre si nu numar? Perfect!

Munca nu s-a incheiat aici. Salveaza in calendar

Majoritatea tool-urilor care-ti testeaza viteza site-ului au un sistem de protectie pentru a evita supra solicitarea server-ului.

Astfel ca, dupa 2/3/4 analize ale aceluiasi site, tool-urile respective o sa-ti afiseze rezultate similare. Pentru a evita asta, trebuie sa reiei testul dupa cateva zile.

Evaluarea plugin-urilor de care ai stricta nevoie, stergerea comentariilor neaprobate, stergerea copiilor generate la editarea paginilor/articolelor/produselor din site trebuie facute periodic

Monitorizeaza periodic scripturile externe

Unele script-uri externe iti pot creea probleme serioase.

Folosind tool-uri precum GT Metrix, in pagina de rezultate ai disponibil tab-ul WaterFall unde poti vedea toate resursele folosite la incarcarea site-ului tau inclusiv script-uri externe.

La unele script-uri poate poti renunta, de exemplu, Facebook Like Box, este un element care ingreuneaza foarte mult incarcarea unui site si nu intotdeauna aduce rezultatele scontate.

Daca nu poti renunta, verifica daca nu exista alternative de implementare a optiunilor pe care le pune la dispozitie respectivul script.

De exemplu, integrarea unui site WordPress cu MailChimp se poate face in mai multe moduri, adaugand direct fragmentul de cod in site sau folosind un plugin sau chiar pluginul special MailChimp for WooCommerce.

Varianta castigatoare este pluginul MailChimp for WooCommerce s-a dovedit cea mai buna metoda de implementare fara sa ingreunam site-ul. Pluginul este foarte bine facut.

Mai mult decat atat, exista alternative pentru sistem de newsletter, mail-uri automate si asa mai departe (pe langa MailChimp), cum ar fi: Active Campaigns, GetResponse.

Pentru a-ti instala corect Google Analytics si Google Search Console pe site, citeste articolul scris de Maistru’, in care-ti explica pas cu pas ce trebuie sa faci.

Elemente dinamice sau statice?

Elementul static reprezinta o sectiune anterior construita, ex sectiunea de abonare a newsletter.  Elementul dinamic reprezinta o sectiune construita la momentul incarcarii paginii din care face parte, ex: sectiune cu ultimele articole/produse publicate pe site.

La fiecare afisare, acel element va interoga (intreba) baza de date care sunt cele mai noi produse, ceea ce contribuie la timpul de incarcare a unei pagini.

Daca un anumit continut nu se schimba foarte des, mai bine il creezi ca un element static pe care il actualizezi manual atunci cand este cazul, decat sa fie conceput ca un element dinamic.

Nu uita!

Cand finalizezi acest proces de imbunatatirea a vitezei de incarcarea a site-ului tau, asteapta 1 luna de zile si apoi reia acest articol, pas cu pas, si vezi ce mai poate fi implementat.

Poti continua cu implementarea unui proces de mentenanta web, astfel incat aceste imbunatatiri sa se faca periodic si sa nu mai acumuleze asa mult cantitate de munca.

Anumite optimizari nu le vei putea integra in activitatea site-ului inca de la inceput.

Cand vei relua procesul de analizare si optimizare a vitezei site-ului tau, o sa identifici foarte usor ce ti-a scapat si ce poate fi facut si mai bine.

Nu uita ca atat in Google Search Console cat si in Google Analytics ai date care pot ajuta sa vezi efectiv ce efect au optimizarile aduse site-ului.

Continua dezvoltarea site-ului tau cu implementarea masurilor de securitate pentru un site WordPress.

Faci un comentariu sau dai un răspuns?