Optimizare Viteză de Încărcare Site: Google Core Web Vitals [SEO]

Durata citire articol - 7 min.

Cu toţii ştim că optimizarea vitezei de încărcare a unui website este importantă atât pentru user experience, cât şi pentru conversii. Nimeni nu vrea să stea zeci de secunde pe un site care nu se încarcă. Viteza de încărcare pentru site reprezintă timpul în care conţinutul de pe o pagină web este încărcat de browser.

Page speed mai poate fi numit ca page load time (timpul de încărcare al unei pagini web), adică timpul necesar unei pagini web pentru a afişa întreg conţinutul pe mobile sau pe desktop.

Descoperiri cheie:

  • Un site ar trebui să se încarce cât mai repede posibil
  • Viteza de încărcare ideală pentru mobile ar trebui să fie sub 3s
  • 53% din site-urile mobile sunt abandonate dacă se încarcă în mai mult de 3s
  • O întârziere de 2 secunde în timpul de încărcare poate duce la rate de abandon de până la 87%
  • Ţelul Google este sub 0.5s la load time
  • Un site care se încarcă greu este un factor negativ de Ranking

Site-urile care merg bine au câteva lucruri în comun:

  • procent mare de useri care revin
  • bounce rate mic
  • conversii mai multe
  • timp petrecut pe site mai mare
  • poziţii mai bune în Google
  • user experience bun
  • costuri mai mici la Google Ads

Câteva statistici despre viteza de încărcare:

  • 47% dintre consumatori se aşteaptă ca o pagină web să se încarce în două secunde sau mai puţin.
  • 40% dintre consumatori nu vor aştepta mai mult de trei secunde ca o pagină web să se încarce înainte de a abandona site-ul.
  • 52% dintre cumpărătorii online au declarat că încărcarea rapidă a paginii este importantă pentru loialitatea site-ului lor.
  • 67% dintre consumatorii din Marea Britanie menţionează timpii lenţi de încărcare drept principalul motiv pentru care ar abandona o achiziţie online.
  • Rata de conversie scade cu 7% pentru fiecare secundă de întârziere.
  • Pentru un magazin online cu vânzări de 100.000 lei pe zi, o întârziere de 1s îl costă 2.5M lei / an.
  • 79% dintre cumpărătorii online vor evită un retailer online unde au întâmpinat probleme de performanţă.
  • 44% dintre cumpărătorii online îşi vor împărtăşi experienţa negativă altor utilizatori.
  • Satisfacţia utilizatorilor scade cu 16% cu o întârziere de o secundă în timpul de încărcare a paginii.
  • Pierderea anuală de venituri din cauza coşurilor de cumpărături 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 foloseşte viteza de încărcare ca factor de ranking pentru landing pages atât la SEO, cât şi 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 regăsesc şi în Google Search Console. Mai jos este un print screen de la un site care se încarcă foarte repede.

core web vitals GSC

Aceşti metrici se aplică tuturor paginilor web şi pot fi măsuraţi. Toţi au legătură cu UX (user experience).

  1. https://web.dev/vitals/
  2. http://prntscr.com/v3v2j3 – un raport se află şi în Google Search Console

Metrici:

LCP (Largest Contentful Paint)

  • Măsoară performanţa în termeni de Load, de când pagina începe să se încarce până când cea mai mare porţiune de text/imagine(i) este afişată pe ecran.
  • Google recomandă ca LCP să fie <2.5s

FID (First Input Delay)

  • Măsoară interactivitatea cu pagina. Măsoară timpul de când un user face o acţiune (click, tap, scroll etc.) până când browserul poate să răspundă la acea interacţiune.
  • Google recomandă ca FID să fie <100ms

CLS (Cumulative Layout Shift)

  • Măsoară şi calculează un scor pentru stabilitatea vizuală, adică acel scor prin care userii experimentează schimbări neaşteptate în (butoane care nu merg, texte, elemente web care îşi schimbă poziţia etc.).
  • Google recomandă ca CLS să fie sub 0.1

Other Web Vitals:

TTFB (Time to First Byte)

  • Are legătură directă cu load time. Ajută LCP.

FCP (First Contentful Paint)

  • Măsoară timpul de când o pagină începe să se încarce, până când orice porţiune din content este afişată pe ecran.
  • Are legătură directă cu load time. Ajută LCP.

TBT (Total Blocking Time)

  • Are o pondere de 25% (cea mai mare), în calcularea scorului.
  • Măsoară timpii dintre FCP şi TTI.
  • Are legătură cu interacţiunea cu pagina. Ajută FID.

TTI (Time to Interactive)

  • Măsoară timpii de când o pagină se încarcă până când este randată vizual.
  • Are legătură cu interacţiunea cu pagina. Ajută 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 (Când randarea începe)
    • First Contentful Paint
  • Speed Index (cât de repede un user vede pagina încărcată)
  • Time to Visually Ready (Uşerii încep să vadă contentul)
    • Load Time (Onload) (când toate resursele, JS, CSS, imaginile) sunt downloadate
  • Time to Interactive
  • Fully Loaded Time (când pagina este încărcată 100%)

Optimizari Core Web Vitals:

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

  • În scoring are o pondere de 25% (cea mai mare pondere)
  • LCP trebuie să fie sub 2.5s. LCP ia în considerare imaginile, video şi text.
  • Optimizari Server Response Time (https://web.dev/overloaded-server/). Google recomandă ca SRT să fie sub 200ms. Tot ce este peste 1s este deja o problemă: http://prntscr.com/v424id
  • HTTP Caching: folosiţi cât de mult cahe-ul, pentru orice tip de resursă care nu trebuie servită de pe server

CDN

  • Folosiţi un CDN pentru resurse: Imagini, CSS, JS

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

  • Dacă există requesturi la surse 3rd party folosiţi:link rel=”preconnect”
  • link rel=”dns-prefetch”

Render Blocking JS and CSS

  • Fişierele JS şi CSS afectează mult FCP şi LCP pentru că înainte de randarea paginii sunt toate parsate.
  • Amânaţi load-ul orice fişier CSS şi JS (Defer any non-critical JS and CSS) care nu sunt importante pentru pagina, pentru a creşte viteza de încărcare pentru “main content” din pagină.

Reduce CSS Blocking Time:

Reduce JS Blocking time:

Mai jos este un exemplu de la Moloso de fişiere CSS şi JS care sunt / nu sunt importante. Tot ce este cu roşu nu este important pentru a fi încărcate la început.

1. Verde: Critical

2. Rosu: Non-Critical

defer non critical css js

Preîncărcaţi 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>
  • Comprimaţi fişierele text cu gzip
  • Minimize critical JS
  • Folosiți Server-side Rendering sau Pre-Rendering pentru JS, in loc de Client Side Rendering.

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

  • Măsoară cât de repede răspunde site-ul la interacţiunile pe care userii le fac cu site-ul.
  • Cauza principală pentru care FID este afectat este execuţia JS-urilor. Optimizarea scripturilor de JS, de la crawling, compilare şi execuţie, vor reduce mult FID-ul.
  • Optimizaţi Heavy JS Execution
  • Optimizaţi scripturile 3rd party. Aveţi în vedere care sunt prioritare şi care nu.
  • De exemplu Analytics, Tag Manager sunt prioritare şi se pot încărca la început.
  • Scripturile de live chat, pot fi încărcate la final.
  • Reduceți execuția JS.

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

  • Cauze comune:
  • Imagini fără dimensiuni
    • Iframes, Embeds fără dimensiuni
    • Conţinut dinamic
    • Fonturi
  • Adăugaţi atributele width şi height la imagini.
  • Folosiţi link rel=preload pentru fonturi.

Optimizări Other Web Vitals:

Optimizări FCP (First Contentful Paint): https://web.dev/fcp/

  • Eliminaţi render blocking resources
  • Minifiy CSS
  • Scoateţi CSS-urile nefolosite
  • Folosiţi link rel=preload, pentru resursele (fonts, CSS, etc) importante
  • Reduceţi timpul de răspuns al server-ului
  • Folosiţi timpi mari pentru cache (1 an) la resurse (imagini, font, media, script, CSS). Folosiţi Cache-Control: max-age=31536000 (365 de zile)

Optimizări TTI (Time to Interactive): https://web.dev/tti/, https://web.dev/interactive/

  • TTI ar trebui să fie sub 5s, pe dispozitivele mobile neperformante. Pentru a obţine un scor bun (Fast), ar trebui să fie sub 3.8s.
  • Recomandările pentru îmbunătăţirea TTI sunt foarte similare cu cele de la FCP.

Optimizări TBT (Total Blocking Time)

  • În scoring are cea mai mare pondere: 25%
  • Google recomandă să fie sub 300ms
  • Optimizaţi third party codes (JS în special)
  • Reduceţi timpii de execuţie la JS
  • Minimizaţi request-urile care se fac în pagină

Optimizări Broad:

TTFB (https://web.dev/time-to-first-byte/), are legătură directă cu Server Response Time

  • Minimizaţi HTML-ul
  • Minimizaţi Request-urile HTML
  • Folosiţi un CDN pentru a livra resursele
  • Fully Loaded
  • Cel mai important, în acest caz, este mărimea paginii bytesTotal.
  • Ţineţi cât mai mică 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 încărcare.
  • Recomandări:
  • Folosiţi doar acele scripturi externe care sunt obligatorii, pentru bună funcţionare a site-ului.
  • Investigaţi fiecare script în parte, fiecare plugin în parte pentru a vedea care îngreunează site-ul şi creşte viteza de încărcare.

Optimizare Imagini:

  • Optimizaţi şi comprimaţi imaginile (aici este nevoie de testare, pentru a vedea cât pot fi comprimate imaginile, înainte să îşi piardă din calitate).
  • Adăugaţi mereu atributele width şi height la imagini şi la video (dacă există).
    • Folosiţi formatul webP dezvoltat de Google:
    • https://developers.google.com/speed/webp/
  • Sau folosiţi alte formate noi ca: JPEG 2000, JPEG XR
  • WebP comprimă imaginile între 25-35%

Folosiți Responsive Images

Folosiţi lazy-loading pentru imagini:

Tools comprimare imagini:

Tools resize images:

Resurse pentru optimizări 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

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