Guarda il webinar qui: https://youtu.be/Oj0T4aoVWSI I Core Web Vitals sono una delle novità più importanti del 2021 introdotte da Google all'interno del proprio algoritmo. Per superare la prova dei Core Web Vitals, avere un sito veloce è ora diventata condizione necessaria ma non sufficiente. Andrea Cardinali, esperto di web performance, ci spiega: - Cosa sono i Core Web Vitals e come impattano sulla SEO - Come misurare correttamente i Core Web Vitals anche quando Google non ce li fornisce - Le tecniche Black hat utilizzate da diversi plugin per imbrogliare i CWV - Perché ottenere PageSpeed 100 non serve a nulla e cosa fare invece - Best practices per ottimizzare per i core web vitals.

1. #SGwebinar
@siteground_it
SITEGROUND WEBINAR
OTTIMIZZARE IL PROPRIO
SITO PER I CORE WEB VITALS
it.siteground.com

2. OSPITE SPECIALE
Andrea Cardinali
andreacardinali
CEO @ Performize
#SGwebinar
@siteground_it
it.siteground.com
andreacardinali.it

3. DI COSA
PARLERÓ
PERCHÉ È IMPORTANTE LA VELOCITÀ
VELOCITÀ & SEO
CORE WEB VITALS
BEST PRACTICES E PLUGIN

4. PERCHÉ È IMPORTANTE
LA VELOCITÁ
#SGwebinar
@siteground_it
it.siteground.com

5. LA VELOCITÁ
IMPATTA SULLA
USER EXPERIENCE
#SGwebinar
@siteground_it
it.siteground.com

6. LA USER EXPERIENCE
IMPATTA SUL
TASSO DI CONVERSIONE
#SGwebinar
@siteground_it
it.siteground.com

7. LA USER EXPERIENCE
IMPATTA SUI
PROFITTI
#SGwebinar
@siteground_it
it.siteground.com

8. SITO VELOCE
=
MIGLIOR USER EXPERIENCE
=
MAGGIORI PROFITTI
#SGwebinar
@siteground_it
it.siteground.com

9. LA VELOCITÁ
IMPATTA SULLA SEO?
#SGwebinar
@siteground_it
it.siteground.com

10. LA VELOCITÁ È UN
FATTORE DI
#SGwebinar
@siteground_it
it.siteground.com
Aprile 2010 Speed is a Ranking Signal
Luglio 2018 PageSpeed Update
Settembre 2021 Page Experience Update (mobile)
Febbraio 2022 Page Experience Update (desktop)

11. DIVENTA AUTOMATICAMENTE
PRIMO SU GOOGLE
#SGwebinar
@siteground_it
it.siteground.com

12. COME MISURARE LA
VELOCITÁ
USER EXPERIENCE?
#SGwebinar
@siteground_it
it.siteground.com

13. #SGwebinar
@siteground_it
it.siteground.com
GOOGLE PAGE EXPERIENCE UPDATE

14. CORE
WEB
VITALS
I CORE WEB VITALS SONO IL
TENTATIVO DI GOOGLE DI MISURARE

15. CORE
WEB
VITALS
VELOCITÁ DI CARICAMENTO (LCP)
STABILITÁ VISUALE (CLS)
REATTIVITÁ (FID)

16. CORE
WEB
VITALS
I CORE WEB VITALS SONO IL
TENTATIVO DI GOOGLE DI MISURARE
ATTRAVERSO 3 METRICHE

17. Cosa serve sapere sui Core Web Vitals
Impattano sul posizionamento
Sono degli intervalli (non dei punteggi)
Sono reali
Non rappresentano la verità assoluta
Non sono in tempo reale
Non sono sempre disponibili
#SGwebinar
@siteground_it
it.siteground.com

18. CORE
WEB
VITALS
LARGEST CONTENTFUL PAINT (LCP)
CUMULATIVE LAYOUT SHIFT (CLS)
FIRST INPUT DELAY (FID)

19. LARGEST
CONTENTFUL
PAINT
(LCP)
MISURA IL TEMPO NECESSARIO A
PRESENTE NEL VIEWPORT
Immagine (<img> <svg> background)
Video
Elemento blocco (display:block)
contenente testo

20. #SGwebinar
@siteground_it
it.siteground.com
LARGEST CONTENTFUL PAINT

21. DA COSA È
IMPATTATO
IL
LARGEST
CONTENTFUL
PAINT
(LCP)
TEMPO DI RISPOSTA DEL SERVER (TTFB)
RISORSE BLOCCANTI
TEMPO DI CARICAMENTO DELLE
ALTRE RISORSE (ABOVE THE FOLD)

22. #SGwebinar
@siteground_it
it.siteground.com
LARGEST CONTENTFUL PAINT

23. FIRST
INPUT
DELAY
(FID)
MISURA
PAGINA OVVERO IL TEMPO
NECESSARIO AL BROWSER PER
Non può essere misurato attraverso i

24. #SGwebinar
@siteground_it
it.siteground.com
FIRST INPUT DELAY

25. DA COSA È
IMPATTATO
IL
FIRST INPUT
DELAY
(FID)
LAVORO DEL MAIN THREAD
CODICE JAVASCRIPT

26. #SGwebinar
@siteground_it
it.siteground.com
FIRST INPUT DELAY

27. CUMULATIVE
LAYOUT
SHIFT
MISURA LA STABILITÁ VISUALE DEGLI
ELEMENTI VISIBILI IN PAGINA
OVVERO LA SOMMA DI PERCENTUALI
DI SPOSTAMENTO DOPO CHE SONO
STATI MOSTRATI PER LA PRIMA VOLTA
Il CLS aumenta ogni volta che un elemento
Maggiore è lo spostamento e maggiore
sarà il CLS

28. #SGwebinar
@siteground_it
it.siteground.com
CUMULATIVE LAYOUT SHIFT

29. DA COSA È
IMPATTATO
IL
CUMLATIVE
LAYOUT
SHIFT
(CLS)
(CAMBIO DI) DIMENSIONE DEGLI ELEMENTI
(CAMBIO DI) POSIZIONE DEGLI ELEMENTI
FONT ESTERNI

30. #SGwebinar
@siteground_it
it.siteground.com
CUMULATIVE LAYOUT SHIFT

31. COME MISURARE I CORE
WEB VITALS QUANDO
GOOGLE NON CI FORNISCE
I CORE WEB VITALS
#SGwebinar
@siteground_it
it.siteground.com

32. MISURARE I
CORE WEB
VITALS
SENZA
GOOGLE
JAVASCRIPT + GOOGLE ANALYTICS
https://github.com/GoogleChrome/web-vitals
ESTENSIONE WEB VITALS PER GOOGLE CHROME
https://chrome.google.com/webstore/detail/web-
vitals/ahfhijdlegdabablpippeagghigmibma
SOFTWARE APM
(es. BrowserInsights NewRelic, CloudFlare)

33. OTTIMIZZARE PER I CORE
WEB VITALS
#SGwebinar
@siteground_it
it.siteground.com

34. COSA
SIGNIFICA
OTTIMIZZARE
OTTIMIZZARE SIGNIFICA
OTTENERE
GOOGLE PAGESPEED 100

35. OTTIMIZZARE
PER I CORE
WEB VITALS

36. OTTIMIZZARE
PER I CORE
WEB VITALS

37. COSA
SIGNIFICA
OTTIMIZZARE
OTTIMIZZARE SIGNIFICA
MIGLIORARE
E
AUMENTARE
LA VELOCITÁ PERCEPITA
DAGLI UTENTI

38. 1. Evita di caricare risorse inutili
2. Restituisci il codice html il più velocemente possibile
3. Pre-carica le risorse critiche
4. Rimanda il caricamento di tutte le altre risorse
4 regole per ottimizzare il tuo sito web
#SGwebinar
@siteground_it
it.siteground.com

39. OTTIMIZZARE
IL SERVER
http/2
Compressione gzip/brotli
Ultima versione di php
Full Page Cache
Object Cache
Immagini webp

40. OTTIMIZZARE
IL
LARGEST
CONTENTFUL
PAINT
(LCP)
MOSTRARE IL PIÚ VELOCEMENTE
GRANDE PRESENTE NEL
VIEWPORT
Dichiara correttamente la dimensione
effettiva degli elementi
Aggiungi gli attributi width / height agli
elementi

41. OTTIMIZZARE
IL
FIRST
INPUT
DELAY
(FID)
IL MAIN THREAD DEVE PASSARE
NELLO STATO DI INATTIVITÁ IL
PRIMA POSSIBILE.
Riduci il javascript (bloccante e non)
Rimanda del js fino a quando
non è necessario ci interagisce)

42. OTTIMIZZARE
IL
CUMULATIVE
LAYOUT
SHIFT
(CLS)
RIDURRE AL MINIMO GLI
SPOSTAMENTI DEGLI ELEMENTI
VISIBILI
Aggiungi attributi width/height per immagini,
video e iframe
Rimuovi il javascript che manipola il DOM
Preload dei web font

43. PLUGIN
#SGwebinar
@siteground_it
it.siteground.com

44. PLUGIN
LE PERFORMANCE PARTONO DAL CODICE
I PLUGIN NON FANNO MIRACOLI
NON FARTI FREGARE DAI BENCHMARK

45. SG
OPTIMIZER
Permette di abilitare la page cache
Permette di abilitare cache
Abilita supporto webp
Lazy load di immagini video e iframe
Preload dei Google Fonts
Defer dei file javascript bloccanti
https://it.wordpress.org/plugins/sg-cachepress/

46. ASSET
CLEANUP
PRO
Caricamento condizionale di css e js
Disattivazione condizionale dei plugin
Permette di aggiungere gli attributi async e
defer
Permette di rendere le risorse non bloccanti
Inline di css e javascript
https://www.gabelivan.com/items/wp-asset-cleanup-pro/

47. BONUS
#SGwebinar
@siteground_it
it.siteground.com

48. #SGwebinar
@siteground_it
it.siteground.com
https://bit.ly/SiteGroundCheatSheetAC
Vuoi migliorare i Core Web Vitals
senza perdere ore a decifrare le
indicazioni di Google
Lighthouse?
>>RICHIEDI GRATIS IL CHEATSHEET<<

49. #SGwebinar
@siteground_it
it.siteground.com
WORKSHOP
OTTIMIZZARE SITI FA SE NON SAI
COME FARLO
28-29 Gennaio 2022 + 4 Febbraio 2022
Ideale per SEO, programmatori, web designer
e consulenti digital
OFFERTA ESCLUSIVA:
https://bit.ly/SiteGroundWS3

50. GRAZIE
Andrea Cardinali
CHEATSHEET: https://bit.ly/SiteGroundCheatSheetAC
WORKSHOP: https://bit.ly/SiteGroundWS3
CEO @ Performize
#SGwebinar
@siteground_it
it.siteground.com