Ecommerce Marketing Online SEO

Optimizarea Vitezei de Incarcare a Site-urilor Web: Google Core Web Vitals [SEO]

site speed

Cu totii stim ca optimizarea vitezei de incarcare a unui website este importanta atat pentru user experience, cat si pentru conversii. Nimeni nu vrea sa stea zeci de secunde pe un site care nu se incarca. Viteza de incarcare reprezinta timpul in care continutul de pe o pagina web este incarcat de browser.

Page speed este diferit de site speed, care reprezinta de fapt page speed (viteza de incarcare a paginilor) pe un set de pagini din site. Page speed mai poate fi numit ca page load time (timpul de incarcare al unei pagini web), adica timpul necesar unei pagini web pentru a afisa intreg continutul pe mobile sau pe desktop.

Descoperiri cheie:

  • Un site ar trebui sa se incarce cat mai repede posibil
  • Viteza de incarcare ideala pentru mobile ar trebui sa fie sub 3s
  • 53% din site-urile mobile sunt abandonate daca se incarca in mai mult de 3s
  • O intarziere de 2 secunde in timpul de incarcare poate duce la rate de abandon de pana la 87%
  • Telul Google este sub 0.5s la load time
  • Un site care se incarca greu este un factor negativ de Ranking

Site-urile care merg bine au cateva lucruri in comun:

  • procent mare de useri care revin
  • bounce rate mic
  • conversii mai multe
  • timp petrecut pe site mai mare
  • pozitii mai bune in Google
  • user experience bun
  • costuri mai mici la Google Ads

Cateva statistici despre viteza de incarcare:

  • 47% dintre consumatori se asteapta ca o pagina web sa se incarce in doua secunde sau mai putin.
  • 40% dintre consumatori nu vor astepta mai mult de trei secunde ca o pagina web sa se incarce inainte de a abandona site-ul.
  • 52% dintre cumparatorii online au declarat ca incarcarea rapida a paginii este importantă pentru loialitatea site-ului lor.
  • 67% dintre consumatorii din Marea Britanie mentioneaza timpii lenti de incarcare drept principalul motiv pentru care ar abandona o achizitie online.
  • Rata de conversie scade cu 7% pentru fiecare secunda de intarziere.
  • Pentru un magazin online cu vanzari de 100.000 lei pe zi, o intarziere de 1s il costa 2.5M lei / an.
  • 79% dintre cumparatorii online vor evita un retailer online unde au intampinat probleme de performanta.
  • 44% dintre cumparatorii online isi vor impartasi experienta negativa altor utilizatori.
  • Satisfactia utilizatorilor scade cu 16% cu o intarziere de o secunda in timpul de incarcare a paginii.
  • Pierderea anuala de venituri din cauza cosurilor de cumparaturi abandonate din magazinul online este de 18 miliarde de dolari.

did-you-know

Sursa: LoadStorm, Econsultancy

bounce-rate-statistics

Sursa: Pingdom

Studii ecommerce:

ecommerce-case-studies

Google foloseste viteza de incarcare ca factor de ranking pentru landing pages atat la SEO, cat si la Google Ads.

  1. https://developers.google.com/web/updates/2018/07/search-ads-speed
  2. https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
  3. https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html – acest factor a fost luat in calcul inca din 2010, insa doar pentru Desktop

Core Web Vitals:

Core Web Vitals se regasesc si in Google Search Console. Mai jos este un print screen de la un site care se incarca foarte repede.

core web vitals GSC

Acesti metrici se aplica tuturor paginilor web si pot fi masurati. Toti au legatura cu UX (user experience).

  1. https://web.dev/vitals/
  2. http://prntscr.com/v3v2j3 – un raport se afla si in Google Search Console

Metrici:

LCP (Largest Contentful Paint)

  • Masoara performanta in termeni de Load, de cand pagina incepe sa se incarce pana cand cea mai mare portiune de text/imagine(i) este afisata pe ecran.
  • Google recomanda ca LCP sa fie <2.5s

FID (First Input Delay)

  • Masoara interactivitatea cu pagina. Masoara timpul de cand un user face o actiune (click, tap, scroll etc.) pana cand browserul poate sa raspunda la acea interactiune.
  • Google recomanda ca FID sa fie <100ms

CLS (Cumulative Layout Shift)

  • Masoara si calculeaza un scor pentru stabilitatea vizuala, adica acel scor prin care userii experimenteaza schimbari neasteptate in (butoane care nu merg, texte, elemente web care isi schimba pozitia etc.).
  • Google recomanda ca CLS sa fie sub 0.1

Other Web Vitals:

TTFB (Time to First Byte)

  • Are legatura directa cu load time. Ajuta LCP.

FCP (First Contentful Paint)

  • Masoara timpul de cand o pagina incepe sa se incarce, pana cand orice portiune din content este afisata pe ecran.
  • Are legatura directa cu load time. Ajuta LCP.

TBT (Total Blocking Time)

  • Are o pondere de 25% (cea mai mare), in calcularea scorului.
  • Masoara timpii dintre FCP si TTI.
  • Are legatura cu interactiunea cu pagina. Ajuta FID.

TTI (Time to Interactive)

  • Masoara timpii de cand o pagina se incarca pana cand este randata vizual.
  • Are legatura cu interactiunea cu pagina. Ajuta FID.

Page Speed Overview:

Backend Time:

  • DNS Time
  • TCP Connect Time
  • TLS Connect Time
  • Time to First Byte (TTFB) of HTML doc response

Frontend Time:

  • Base Page Time
  • Start Render / First Paint (Cand randarea incepe)
    • First Contentful Paint
  • Speed Index (cat de repede un user vede pagina incarcata)
  • Time to Visually Ready (Userii incep sa vada contentul)
    • Load Time (Onload) (cand toate resursele, JS, CSS, imaginile) sunt downloadate
  • Time to Interactive
  • Fully Loaded Time (cand pagina este incarcata 100%)

Optimizari Core Web Vitals:

Optimizari LCP (Largest Contentful Paint): https://web.dev/optimize-lcp/

  • In scoring are o pondere de 25% (cea mai mare pondere)
  • LCP trebuie sa fie sub 2.5s. LCP ia in considerare imaginile, video si text.
  • Optimizari Server Response Time (https://web.dev/overloaded-server/). Google recomanda ca SRT sa fie sub 200ms. Tot ce este peste 1s este deja o problema: http://prntscr.com/v424id
  • HTTP Caching: folositi cat de mult cahe-ul, pentru orice tip de resursa care nu trebuie servita de pe server

CDN

  • Folositi un CDN pentru resurse: Imagini, CSS, JS

Conexiuni la 3Rd party apps, pentru a informa Browser-ul

  • Daca exista requesturi la surse 3rd party folositi:
  • link rel=”preconnect”
  • link rel=”dns-prefetch”

Render Blocking JS and CSS

  • Fisierele JS si CSS afecteaza mult FCP si LCP pentru ca inainte de randarea paginii sunt toate parsate.
  • Amanati load-ul orice fisier CSS si JS (Defer any non-critical JS and CSS) care nu sunt importante pentru pagina, pentru a creste viteza de incarcare pentru “main content” din pagina.

Reduce CSS Blocking Time:

Reduce JS Blocking time:

Mai jos este un exemplu de la Moloso de fisiere CSS si JS care sunt / nu sunt importante. Tot ce este cu rosu nu este important pentru a fi incarcate la inceput.

1. Verde: Critical

2. Rosu: Non-Critical

defer non critical css js

Preincarcati resursele importante:

  • Exemple:
  • <link rel=”preload” as=”script” href=”script.js”>
  • <link rel=”preload” as=”style” href=”style.css”>
  • <link rel=”preload” as=”image” href=”img.png”>
  • <link rel=”preload” as=”video” href=”vid.webm” type=”video/webm”>
  • <link rel=”preload” href=”font.woff2″ as=”font” type=”font/woff2″ crossorigin>
  • Comprimati fisierele text cu gzip
  • Minimize critical JS
  • Folositi Server-side Rendering sau Pre-Rendering pentru JS, in loc de Client Side Rendering.

Optimizari FID (First Input Delay): https://web.dev/optimize-fid/

  • Masoara cat de repede raspunde site-ul la interactiunile pe care userii le fac cu site-ul.
  • Cauza principala pentru care FID este afectat este executia JS-urilor. Optimizarea scripturilor de JS, de la crawling, compilare si executie, vor reduce mult FID-ul.
  • Optimizati Heavy JS Execution
  • Optimizati scripturile 3rd party. Aveti in vedere care sunt prioritare si care nu.
  • De exemplu Analytics, Tag Manager sunt prioritare si se pot incarca la inceput.
  • Scripturile de live chat, pot fi incarcate la final.
  • Reduceti executia JS.

Optimizari CLS (Cumulative Layout Shift): https://web.dev/optimize-cls/

  • Cauze comune:
    • Imagini fara dimensiuni
    • Iframes, Embeds fara dimensiuni
    • Continut dinamic
    • Fonturi
  • Adaugati atributele width si height la imagini.
  • Folositi link rel=preload pentru fonturi.

Optimizari Other Web Vitals:

Optimizari FCP (First Contentful Paint): https://web.dev/fcp/

  • Eliminati render blocking resources
  • Minifiy CSS
  • Scoateti CSS-urile nefolosite
  • Folositi link rel=preload, pentru resursele (fonts, CSS, etc) importante
  • Reduceti timpul de raspuns al server-ului
  • Folositi timpi mari pentru cache (1 an) la resurse (imagini, font, media, script, CSS). Folositi Cache-Control: max-age=31536000 (365 de zile)

Optimizari TTI (Time to Interactive): https://web.dev/tti/, https://web.dev/interactive/

  • TTI ar trebui sa fie sub 5s, pe dispozitivele mobile neperformante. Pentru a obtine un scor bun (Fast), ar trebui sa fie sub 3.8s.
  • Recomandarile pentru imbunatatirea TTI sunt foarte similare cu cele de la FCP.

Optimizari TBT (Total Blocking Time)

  • In scoring are cea mai mare pondere: 25%
  • Google recomanda sa fie sub 300ms
  • Optimizati third party codes (JS in special)
  • Reduceti timpii de executie la JS
  • Minimizati request-urile care se fac in pagina

Optimizari Broad:

TTFB (https://web.dev/time-to-first-byte/), are legatura directa cu Server Response Time

  • Minimizati HTML-ul
  • Minimizati Request-urile HTML
  • Folositi un CDN pentru a livra resursele
  • Fully Loaded
  • Cel mai important, in acest caz, este marimea paginii bytesTotal.
  • Tineti cat mai mica dimensiunea paginii.

Third Party Scripts:

  • Aici intervin Chat, Email Marketing, Pop-ups etc. inclusiv Google Analytics (care este printre cele mai optimizate astfel de scripturi)
  • Ele au de obicei cel mai mare impact negativ asupra vitezei de incarcare.
  • Recomandari:
  • Folositi doar acele scripturi externe care sunt obligatorii, pentru buna functionare a site-ului.
  • Investigati fiecare script in parte, fiecare plugin in parte pentru a vedea care ingreuneaza site-ul si creste viteza de incarcare.

Optimizare Imagini:

  • Optimizati si comprimati imaginile (aici este nevoie de testare, pentru a vedea cat pot fi comprimate imaginile, inainte sa isi piarda din calitate).
  • Adaugati mereu atributele width si height la imagini si la video (daca exista).
  • Sau folositi alte formate noi ca: JPEG 2000, JPEG XR
  • WebP comprima imaginile intre 25-35%

Folositi Responsive Images

Folositi lazy-loading pentru imagini:

Tools comprimare imagini:

Tools resize images:

Resurse pentru optimizari imagini:

Tools pentru testare imagini:

  1. https://web.dev/measure/
  2. https://www.thinkwithgoogle.com/intl/en-cee/feature/testmysite/
  3. https://developers.google.com/speed/pagespeed/insights/?hl=ro
  4. https://developers.google.com/web/tools/lighthouse#devtools – poate cel mai bun dintre toate
  5. https://github.com/GoogleChrome/lighthouse-ci
  6. https://github.com/GoogleChrome/web-vitals: The easiest way to measure all the Core Web Vitals is to use the web-vitals JavaScript library, a small, production-ready wrapper around the underlying web APIs that measures each metric in a way that accurately matches how they’re reported by all the Google tools listed above.
  7. https://w3c.github.io/user-timing/
  8. https://w3c.github.io/longtasks/
  9. https://wicg.github.io/element-timing/
  10. https://w3c.github.io/navigation-timing/
  11. https://w3c.github.io/resource-timing/
  12. https://w3c.github.io/server-timing/
  13. https://googlechrome.github.io/lighthouse/scorecalc/ – calculator de scor la performanta

Resurse:

  1. https://web.dev/
  2. https://developers.google.com/web/tools/lighthouse
  3. https://developers.google.com/web/tools/chrome-user-experience-report/ -Chrome UX Report
  4. https://web.dev/fast/ – Techniques for improving site performance.
  5. https://web.dev/performance-scoring/ – cum sunt calculate: http://prntscr.com/v4nc0t

Sursa imagini: https://www.websitebuilderexpert.com/building-websites/website-load-time-statistics/

Author

Daniel Ene

SEO Growth Hacker & Partner at Moloso Agency. Daniel Ene se considera unul dintre norocosii care si-a gasit pasiunea inca de la inceput. De peste 11 ani s-a implicat in proiecte mari si mici, de la start-upuri pana la companii internationale. Este in permanenta in cautare de nou si de evolutie atat profesionala, cat si personala. Zi de zi cauta, testeaza si implementeaza noi trucuri de SEO pentru a-si ajuta clientii sa aiba succes.