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

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 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 față de un site;
• 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 evita 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.

Sursa: LoadStorm, Econsultancy

Sursa: Pingdom

Studii ecommerce:

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 în calcul încă din 2010, însă 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.

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 (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 (Userii î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%)

Optimizări 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.
• Optimizări 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 cache-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 3^Rd party apps, pentru a informa Browser-ul

• Dacă există requesturi la surse 3^rd 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 pentru orice fişier CSS şi JS (Defer any non-critical JS and CSS) care nu sunt importante pentru pagină, pentru a creşte viteza de încărcare pentru “main content” din pagină.

Reduce CSS Blocking Time:

• Asiguraţi-vă că doar acele CSS-uri utile se încarcă la început. Minify CSS (https://web.dev/minify-css/)
• Defer non-critical CSS: https://web.dev/defer-non-critical-css/
• Inline critical CSS: https://web.dev/extract-critical-css/
• Folosiţi rel=”preload” pentru CSS-uri de care nu este nevoie iniţial: <link rel=”preload” href=”stylesheet.css” as=”style” onload=”this.rel=’stylesheet'”>

Reduce JS Blocking time:

• Serviţi doar minimul necesar de JS pentru useri.
• Optimizați:
  • Minify and Compress JS
  • https://web.dev/reduce-network-payloads-using-text-compression/
  • Defer unused JS
  • https://web.dev/reduce-javascript-payloads-with-code-splitting/
  • https://web.dev/serve-modern-code-to-modern-browsers/

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

1. Verde: Critical

2. Rosu: Non-Critical

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, în 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
  • Break up long tasks or split code (https://web.dev/long-tasks-devtools/)
• Optimizaţi scripturile 3^rd 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.

Optimizări 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 serverului
• 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 buna funcţionare a site-ului.
• Investigaţi fiecare script în parte, fiecare plugin în parte pentru a vedea care îngreunează site-ul şi care cresc 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

• https://web.dev/serve-responsive-images/
• https://developers.google.com/web/fundamentals/design-and-ux/responsive/images
• Serviţi imaginile dintr-un CDN
• Serve multiple image versions: http://prntscr.com/v41np5
• Serviţi imaginile cu dimensiunile corecte (scaling)
  • Folosiți sizes attribute
  • Folositi srcset=”” unde se pot adăuga mai multe dimensiuni, iar browserul o va afişa pe cea potrivită
• Eliminaţi meta datele din imagini, EXIF data (GEO, camera info etc.)

Folosiţi lazy-loading pentru imagini:

• https://web.dev/browser-level-image-lazy-loading/
• https://web.dev/lazy-loading-images/

Tools comprimare imagini:

• https://www.npmjs.com/package/imagemin
• https://github.com/imagemin/imagemin-webp
• https://github.com/imagemin/imagemin-cli 

Tools resize images:

• https://www.npmjs.com/package/sharp
• https://www.imagemagick.org/script/index.php

Resurse pentru optimizări imagini:

• https://web.dev/choose-the-right-image-format/
• https://web.dev/compress-images/
• https://web.dev/use-imagemin-to-compress-images/
• https://web.dev/replace-gifs-with-videos/
• https://web.dev/serve-responsive-images/
• https://web.dev/serve-images-with-correct-dimensions/
• https://web.dev/serve-images-webp/
• https://web.dev/image-cdns/
• https://web.dev/lazy-loading-images/

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 performanță

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/