Salut!
În această postare vreau să îți povestesc pașii pe care i-am urmat pentru a realiza o optimizare site web completă și a îmbunătăți performanța website-ului agenției noastre. Cu multă muncă și atenție la detalii, am obținut un scor Google Page Speed de 90+ pentru fiecare criteriu esențial cerut de Google.
Testele au fost realizate folosind Google Page Speed, un instrument indispensabil pentru a analiza viteza și performanța site-ului pe mobil. Hai să începem prin a identifica problema inițială și să vedem ce am descoperit pe parcurs.
Ce este LCP?
LCP, sau Largest Contentful Paint, se referă la timpul necesar pentru ca cel mai mare element vizual din prima parte a paginii (viewport) să fie afișat complet atunci când website-ul se încarcă.
Pe varianta desktop, problemele legate de LCP sunt mai puțin frecvente. Motivul? Viteza mai mare a conexiunilor la internet, care ajută la încărcarea rapidă a elementelor mari.
Însă, când vine vorba de dispozitive mobile, lucrurile stau diferit. Google testează site-urile folosind o conexiune lentă de tip 4G, simulând astfel scenarii reale pentru utilizatorii din întreaga lume. În acest context, orice element de dimensiuni mari, cum ar fi o imagine sau un titlu, poate întârzia încărcarea și poate cauza o problemă de LCP.
Problema LCP: Ce am descoperit și de unde am pornit
De aproape 9 luni, ne-am confruntat cu o problemă de LCP (Largest Contentful Paint), evidențiată de scorul Google Page Speed pe varianta mobilă a site-ului. Această problemă afecta performanța site-urilor create cu WordPress și builder-e precum Elementor Pro, WPBakery și Divi.
LCP, sau Largest Contentful Paint, măsoară timpul necesar pentru ca cel mai mare element vizual din viewport să fie afișat complet. Pe desktop, problemele sunt rare datorită vitezei mai mari de internet. Însă, pe mobil, unde conexiunile sunt mai lente, orice element mai mare, cum ar fi o imagine, poate afecta semnificativ performanța site-ului pe mobil.
În cazul nostru, chiar și o imagine optimizată (sub 100kb) cauza probleme de LCP. Dacă eliminam imaginea, problema se muta pe următorul element mare din viewport – adesea un titlu. Acest lucru afecta scorul general și optimizarea site-ului web, așa că am decis să găsim soluții eficiente.
Introducere
Pentru a realiza o optimizare site web eficientă, am folosit următoarele unelte și pluginuri:
- Elementor și Elementor Pro – pentru design personalizat.
- Suita Crocoblock – pentru funcționalități avansate.
- WP Rocket Pro – pentru cache și optimizarea resurselor.
- AssetCleaner – pentru reducerea scripturilor inutile și prioritizarea celor esențiale.
În ceea ce privește designul, am folosit tema Hello Elementor (link aici), care este una dintre preferatele noastre. Este o temă minimală, „goală”, perfectă pentru a crea designuri personalizate fără elemente inutile sau setări suplimentare care pot încetini site-ul.
Această abordare ne oferă control total asupra designului și performanței, asigurându-ne că fiecare proiect este adaptat perfect nevoilor clientului.
Mod de lucru: Cum am abordat problema
Folosind o temă simplă, precum Hello Elementor, ne-am gândit că problema ar putea fi cauzată de Elementor, care poate adăuga mult „bloat” în site. Am început prin configurarea WP Rocket conform celor mai bune practici, dar, din păcate, problema LCP persista.
Ne-am zis: „Ok, poate doar WP Rocket nu este suficient.” Așa că am trecut la pasul următor – analiza waterfall-ului de încărcare a site-ului.
Ce am descoperit în waterfall?
Waterfall-ul, pe care îl poți vizualiza direct în Chrome DevTools, ne-a arătat că unul dintre cele mai lente fișiere încărcate era cel de fonturi. Așadar, ne-am îndreptat atenția către optimizarea fonturilor.
- Primul pas: Elementor permite încărcarea fonturilor direct în site folosind opțiunea Elementor → Custom Fonts. Am încărcat fonturile local și am dezactivat Google Fonts din Elementor → Settings. După rescanarea site-ului, nu am observat nicio schimbare semnificativă.
- Al doilea pas: Am folosit opțiunea Font Preload din WP Rocket. Am introdus link-urile către fonturile locale din Media Library, dar rezultatele au fost la fel de modeste.
- Al treilea pas: Am instalat și configurat AssetCleaner pentru a gestiona mai bine resursele. AssetCleaner oferă, de asemenea, o funcție de preload fonts, pe care am activat-o. De această dată, doar o parte dintre fonturi erau încărcate corect (6 fișiere), iar 2 continuau să fie încărcate mai târziu, după alte scripturi.
Problema: Fonturi parțial preîncărcate
Această încărcare incompletă a fonturilor avea un impact direct asupra imaginii din viewport, care rămânea „în așteptare” timp de 4-5 secunde înainte de a se încărca complet. Imaginea avea doar 50kb, dar problema persista din cauza prioritizării greșite a resurselor.
Aceasta a fost analiza noastră pas cu pas. Hai să vedem mai departe cum am găsit o soluție care să rezolve eficient această situație.
Soluția: Ce am făcut și cum am rezolvat problema
Deși soluția noastră nu este ideală, este singura variantă care a funcționat pentru noi până acum. Și, sincer, rezultatele au fost peste așteptări!
După implementare, site-ul nostru a obținut un scor de 95+ pe varianta mobilă în Google Page Speed. Hai să-ți povestesc pas cu pas ce am făcut pentru a ajunge aici.
Ce am făcut concret?
- Renunțarea la fonturi custom
Primul pas a fost să renunțăm la fontul personalizat (în cazul nostru, Poppins) și să folosim un system font. Noi am ales Helvetica, un font deja preexistent în browsere, care nu necesită timp de încărcare.
- Rezultat: Schimbarea fontului a redus semnificativ timpul de încărcare. Deși am avut câteva ajustări de design de făcut, site-ul continuă să arate foarte bine și, cel mai important, funcționează fără probleme.
- Optimizarea imaginii din viewport
Am modificat secțiunea principală (viewport) și am duplicat imaginea:- Pentru desktop, am păstrat imaginea originală, de dimensiuni mai mari și calitate mai bună.
- Pentru mobil, am folosit o imagine optimizată, încărcată manual printr-un widget HTML.
- Cum am ascuns imaginea pe diferite dispozitive?
Elementor oferă o funcție de responsive, disponibilă la fiecare widget în tab-ul „Advanced”. Aceasta ne-a permis să afișăm versiuni diferite ale imaginii în funcție de dispozitiv (desktop sau mobil).
Codul HTML pentru imaginea optimizată arată așa:
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20168'%3E%3C/svg%3E" width="300" height="168" alt="Imagine optimizată" fetchpriority="high" data-lazy-src="https://siteultau.ro/path/numepoza.jpg" /><noscript><img src="https://siteultau.ro/path/numepoza.jpg" width="300" height="168" alt="Imagine optimizată" fetchpriority="high" /></noscript>
Descompunerea codului HTML
Să explicăm fiecare parte a codului, pentru a-l înțelege mai bine:
- Src: Aici treci link-ul către imaginea din Media Library. Găsești link-ul complet dând click pe imaginea dorită.
- Width și Height: Specifică lățimea și înălțimea exactă a imaginii. Este crucial să faci asta pentru a preveni întârzierile în încărcare cauzate de redimensionări automate.
- Alt: Este descrierea alternativă a imaginii, esențială pentru SEO și pentru accesibilitate.
- Fetch Priority: Aceasta spune browserului cât de important este elementul. Setat pe „high”, îi oferă prioritate maximă la încărcare.
Rezultatele finale
După implementarea acestor soluții, am obținut un scor Google Page Speed de 95+ pe mobil. Performanța îmbunătățită nu doar că ne-a ajutat să oferim o experiență mai bună utilizatorilor, dar a contribuit și la creșterea vizibilității site-ului în căutările Google.
Dacă întâmpini probleme similare, încearcă aceste soluții pentru a-ți îmbunătăți performanța site-ului pe mobil și a realiza o optimizare site web eficientă.
Concluzie
Chiar dacă soluția noastră nu este perfectă, a funcționat pentru noi și ne-a permis să obținem rezultate semnificative. Sperăm că acest articol te-a ajutat să înțelegi mai bine procesul de optimizare site web și pașii necesari pentru a îmbunătăți performanța site-ului pe mobil.
Mult succes cu optimizarea site-ului tău și dacă ai nevoie de servicii profesionale de creare site web sau optimizare site scrie-ne! 😊
Vrei site, dar ai buget mic? Avem soluții și pentru asta.
Dacă bugetul tău este insuficient pentru ofertele noastre standard îți punem la dispoziție și serviciul nostru de creare site web cu plata esalonată pe 1 an de zile și posibilitatea de prelungire ulterioară. Acest pachet iți acoperă toate nevoile pe care le-ai putea avea de la un site ca tu să te poți focusa pe dezvoltarea afacerii.
