Durante questo talk sulle prestazioni web, scoprirai come rendere il tuo sito web più veloce ed usabile, e come questo comporti un miglioramento dell’esperienza utente e l’aumento della visibilità del tuo sito sui motori di ricerca, riducendo persino i costi di marketing digitale.
Andrea condividerà la sua esperienza nel campo delle web performance e fornirà suggerimenti pratici, ad alto impatto e facilmente applicabili alla maggior parte dei siti web su come migliorare le performance nel 2023.
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptxAndrea Verlicchi
Durante questo talk sulle prestazioni web, scoprirai come rendere il tuo sito web più veloce ed usabile, e come questo comporti un miglioramento dell’esperienza utente e l’aumento della visibilità del tuo sito sui motori di ricerca, riducendo persino i costi di marketing digitale.
Andrea condividerà la sua esperienza nel campo delle web performance e fornirà suggerimenti pratici, ad alto impatto e facilmente applicabili alla maggior parte dei siti web su come migliorare le performance nel 2023.
Andrea Verlicchi, web performance consultant @ Cognizant Netcentric, ha acquisito una vasta esperienza nel settore lavorando ad ottimizzare le prestazioni web, prima di alcuni tra i più grandi brand nel settore e-commerce della moda e del lusso, poi di clienti nel settore della chimica e dell'automotive.
Andrea è da qualche mese Google Developer Expert per le Web Performance, ha scritto di web su importanti riviste online specializzate, e condivide regolarmente quello che ha imparato a conferenze e Meetup, in Italia e all'estero.
L'importanza dei Core Web Vitals per l'ecommerce - Ivano Di Biasi.pptxEcommerce HUB
Un aspetto che per l’e-commerce vale più di qualsiasi strategia dei prezzi, UX o processo di acquisto.
Come risolvere i problemi con i Core Web Vitals ed un caso studio che mostra come Google escluda quasi totalmente dalle ricerche importanti i siti web non ottimizzati.
SMConnect 2022 - Con lo sviluppo del web, delle nuove tecnologie e web API, i motori di ricerca hanno iniziato ad utilizzare veri e propri browser per il rendering delle pagine web, creare un Web Rendering Service per il rendering su larga scala nasconde però molte insidie. In questo talk parliamo della session isolation nel rendering delle pagine web, da parte di motori di ricerca e tool, e di come questa può influenzare i dati di crawling.
Il Link Building Oggi: Valore dei Link, Strumenti e Strategie Semrush
L’evoluzione continua di Google e degli altri motori di ricerca fa’ si che le strategie SEO - tanto on-site quanto off-site - debbano aggiornarsi costantemente. La presentazione mostrerà il valore che hanno i link e di conseguenza le attività di link-building e link-earning nel panorama SEO attuale, come determinare il valore passato da un determinato link e quali strategie adottare per ottenere risultati positivi e di lunga durata dalle propre attività di SEO off-site.
Il Webinar illustrerà:
- Il rapporto tra SEO e link-building
- Quali sono i principali fattori che determinano il valore di un link
- Quali strumenti utilizzare per verificare il valore di un link
- Come si sono evolute le policy e gli algoritmi di Google nei confronti dei link
- Che tecniche di link-building adottare oggi per ottenere risultati significativi e di lungo periodo
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptxAndrea Verlicchi
Durante questo talk sulle prestazioni web, scoprirai come rendere il tuo sito web più veloce ed usabile, e come questo comporti un miglioramento dell’esperienza utente e l’aumento della visibilità del tuo sito sui motori di ricerca, riducendo persino i costi di marketing digitale.
Andrea condividerà la sua esperienza nel campo delle web performance e fornirà suggerimenti pratici, ad alto impatto e facilmente applicabili alla maggior parte dei siti web su come migliorare le performance nel 2023.
Andrea Verlicchi, web performance consultant @ Cognizant Netcentric, ha acquisito una vasta esperienza nel settore lavorando ad ottimizzare le prestazioni web, prima di alcuni tra i più grandi brand nel settore e-commerce della moda e del lusso, poi di clienti nel settore della chimica e dell'automotive.
Andrea è da qualche mese Google Developer Expert per le Web Performance, ha scritto di web su importanti riviste online specializzate, e condivide regolarmente quello che ha imparato a conferenze e Meetup, in Italia e all'estero.
L'importanza dei Core Web Vitals per l'ecommerce - Ivano Di Biasi.pptxEcommerce HUB
Un aspetto che per l’e-commerce vale più di qualsiasi strategia dei prezzi, UX o processo di acquisto.
Come risolvere i problemi con i Core Web Vitals ed un caso studio che mostra come Google escluda quasi totalmente dalle ricerche importanti i siti web non ottimizzati.
SMConnect 2022 - Con lo sviluppo del web, delle nuove tecnologie e web API, i motori di ricerca hanno iniziato ad utilizzare veri e propri browser per il rendering delle pagine web, creare un Web Rendering Service per il rendering su larga scala nasconde però molte insidie. In questo talk parliamo della session isolation nel rendering delle pagine web, da parte di motori di ricerca e tool, e di come questa può influenzare i dati di crawling.
Il Link Building Oggi: Valore dei Link, Strumenti e Strategie Semrush
L’evoluzione continua di Google e degli altri motori di ricerca fa’ si che le strategie SEO - tanto on-site quanto off-site - debbano aggiornarsi costantemente. La presentazione mostrerà il valore che hanno i link e di conseguenza le attività di link-building e link-earning nel panorama SEO attuale, come determinare il valore passato da un determinato link e quali strategie adottare per ottenere risultati positivi e di lunga durata dalle propre attività di SEO off-site.
Il Webinar illustrerà:
- Il rapporto tra SEO e link-building
- Quali sono i principali fattori che determinano il valore di un link
- Quali strumenti utilizzare per verificare il valore di un link
- Come si sono evolute le policy e gli algoritmi di Google nei confronti dei link
- Che tecniche di link-building adottare oggi per ottenere risultati significativi e di lungo periodo
Il 22-24 maggio @alecuomo, il SEO Manager di TSW, ha partecipato all'evento TBNetalks Travel Media Forum di Milano per dare dei consigli operativi ai blogger del settore in ottica di SEO e content writing, descrivendo nel dettaglio i tool da utilizzare, quali errori non si possono più commettere nel 2015, e come essere rilevanti ed interessanti per il proprio audience!
La SEO può essere suddivisa approssimativamente in tre sotto-gruppi: SEO On-Page, SEO Off-Page e SEO Tecnica (Technical SEO). La SEO On-Page è il contenuto e i tag HTML. La SEO Off-Page è principalmente costituita dall’implementazione di strategie che servono ad ottenere backlink. La SEO Tecnica riguarda l’accessibilità del tuo sito web.
"Alla ricerca della formula magica". Presentazione usata per il ciclo di webinar su traduzione e adattamento di siti web per AITI Emilia Romagna, novembre-dicembre 2016.
Lezione #4 di Paolo Gatti all'Università degli Studi di Teramo, Facoltà di Scienze della Comunicazione, avente come tema "SEO: Search Engine Optimization & Cloud computing".
Analizzare il valore dei link, scegliere le metriche con cui misurarli e adattare le proprie strategie di acquisizione al fine di generare traffico organico di valore per il proprio sito.
Google PageSpeed Insights è uno degli strumenti di misurazione della performance web più utilizzati al mondo: i suoi suggerimenti possono darti degli indizi preziosi per migliorare le prestazioni del tuo sito. Peccato che il suo sistema di “punteggi e semafori“ tenda a far trarre conclusioni affrettate sullo stato di salute di un sito web.
Technical SEO Audit Checklist - Giovanni Sacheli Search Marketing Connect 2018Giovanni Sacheli
In questo intervento avanzato ti mostro la mia SEO checklist completa. Partiamo dall'organizzazione dell'audit, per poi passare in rassegna oltre 90 elementi tecnici e contenutistici da studiare e valutare.
Tre modi per aumentare la velocità del tuo Business Website e guadagnare on...Matteo Stefan
Ti spiego tre metodi semplici ed economici per aumentare incredibilmente la velocità del tuo sito web, essere più visibile sui motori di ricerca e generare più contatti
Come strutturare un design semplice ed efficace per WordPressSiteGround.com
Guarda il webinar qui: https://youtu.be/WpxuDepDDbg
Come si può fare a dare un aspetto chiaro e professionale al proprio sito WordPress senza avere competenze specifiche di design?
WordPress è ormai il CMS più utilizzato al mondo per la realizzazione e gestione di blog, siti web ed eCommerce: è quindi importante conoscerlo e rimanere aggiornati su tutte le novità che offre.
Con Laura Lonighi, web designer e brand stylist freelance, vediamo:
- L’importanza di una buona Visual Identity per il proprio progetto web
- I 3 livelli di design attraverso i quali realizzare un’interfaccia web
- Come può venirci in aiuto WordPress per realizzare in maniera più semplice il design del nostro sito
- Alcuni strumenti utili per lavorare meglio
Impara React sfruttando le tecnologie più recenti (Eduard Capanu).pptxEduardCapanu
React evolve velocemente con strumenti come Vite.js, Remix, e Next.js, richiedendo aggiornamenti continui delle competenze per gestire nuovi progetti con successo.
Che tu abbia già esperienza con React o che sia alle prime armi, questo talk ti offrirà una nuova prospettiva sulle ultime tendenze di questo framework e ti mostrerà le best practice per la creazione e la configurazione di un progetto.
Esploreremo le ultime innovazioni di React e scopriremo come sfruttare efficacemente le nuove funzionalità per lanciare un nuovo progetto senza intoppi, dalla scelta del framework e della tecnologia, alla configurazione iniziale più adatta.
Vedremo tutti i passaggi chiave per realizzare un progetto React in modo efficiente e impareremo, tra le altre cose, che non sempre ‘create-react-app’ è l’opzione migliore per iniziare un nuovo progetto.
Event link: https://thecmmbay.com/eventi/impara-react-sfruttando-le-tecnologie-piu-recenti-r97r9y7l6
During this talk about web performance, you will discover how to make your website faster and more usable, and how this leads to an improvement in user experience and an increase of visibility of your site on search engines, even reducing digital marketing costs.
Andrea will share his extensive web performance experience and provide practical, high-impact, and easily applicable tips on how to improve performance in 2023.
Andrea Verlicchi is a Google Developer Expert for Web Performance, he has extensive experience in this sector, having worked with some of the largest companies in the world to improve their web performance. Andrea writes about the web in important specialized magazines and regularly shares his know-how in conferences and Meetups all over Europe.
Il 22-24 maggio @alecuomo, il SEO Manager di TSW, ha partecipato all'evento TBNetalks Travel Media Forum di Milano per dare dei consigli operativi ai blogger del settore in ottica di SEO e content writing, descrivendo nel dettaglio i tool da utilizzare, quali errori non si possono più commettere nel 2015, e come essere rilevanti ed interessanti per il proprio audience!
La SEO può essere suddivisa approssimativamente in tre sotto-gruppi: SEO On-Page, SEO Off-Page e SEO Tecnica (Technical SEO). La SEO On-Page è il contenuto e i tag HTML. La SEO Off-Page è principalmente costituita dall’implementazione di strategie che servono ad ottenere backlink. La SEO Tecnica riguarda l’accessibilità del tuo sito web.
"Alla ricerca della formula magica". Presentazione usata per il ciclo di webinar su traduzione e adattamento di siti web per AITI Emilia Romagna, novembre-dicembre 2016.
Lezione #4 di Paolo Gatti all'Università degli Studi di Teramo, Facoltà di Scienze della Comunicazione, avente come tema "SEO: Search Engine Optimization & Cloud computing".
Analizzare il valore dei link, scegliere le metriche con cui misurarli e adattare le proprie strategie di acquisizione al fine di generare traffico organico di valore per il proprio sito.
Google PageSpeed Insights è uno degli strumenti di misurazione della performance web più utilizzati al mondo: i suoi suggerimenti possono darti degli indizi preziosi per migliorare le prestazioni del tuo sito. Peccato che il suo sistema di “punteggi e semafori“ tenda a far trarre conclusioni affrettate sullo stato di salute di un sito web.
Technical SEO Audit Checklist - Giovanni Sacheli Search Marketing Connect 2018Giovanni Sacheli
In questo intervento avanzato ti mostro la mia SEO checklist completa. Partiamo dall'organizzazione dell'audit, per poi passare in rassegna oltre 90 elementi tecnici e contenutistici da studiare e valutare.
Tre modi per aumentare la velocità del tuo Business Website e guadagnare on...Matteo Stefan
Ti spiego tre metodi semplici ed economici per aumentare incredibilmente la velocità del tuo sito web, essere più visibile sui motori di ricerca e generare più contatti
Come strutturare un design semplice ed efficace per WordPressSiteGround.com
Guarda il webinar qui: https://youtu.be/WpxuDepDDbg
Come si può fare a dare un aspetto chiaro e professionale al proprio sito WordPress senza avere competenze specifiche di design?
WordPress è ormai il CMS più utilizzato al mondo per la realizzazione e gestione di blog, siti web ed eCommerce: è quindi importante conoscerlo e rimanere aggiornati su tutte le novità che offre.
Con Laura Lonighi, web designer e brand stylist freelance, vediamo:
- L’importanza di una buona Visual Identity per il proprio progetto web
- I 3 livelli di design attraverso i quali realizzare un’interfaccia web
- Come può venirci in aiuto WordPress per realizzare in maniera più semplice il design del nostro sito
- Alcuni strumenti utili per lavorare meglio
Impara React sfruttando le tecnologie più recenti (Eduard Capanu).pptxEduardCapanu
React evolve velocemente con strumenti come Vite.js, Remix, e Next.js, richiedendo aggiornamenti continui delle competenze per gestire nuovi progetti con successo.
Che tu abbia già esperienza con React o che sia alle prime armi, questo talk ti offrirà una nuova prospettiva sulle ultime tendenze di questo framework e ti mostrerà le best practice per la creazione e la configurazione di un progetto.
Esploreremo le ultime innovazioni di React e scopriremo come sfruttare efficacemente le nuove funzionalità per lanciare un nuovo progetto senza intoppi, dalla scelta del framework e della tecnologia, alla configurazione iniziale più adatta.
Vedremo tutti i passaggi chiave per realizzare un progetto React in modo efficiente e impareremo, tra le altre cose, che non sempre ‘create-react-app’ è l’opzione migliore per iniziare un nuovo progetto.
Event link: https://thecmmbay.com/eventi/impara-react-sfruttando-le-tecnologie-piu-recenti-r97r9y7l6
Similar to Come e perché ($) migliorare le prestazioni web.pdf (20)
During this talk about web performance, you will discover how to make your website faster and more usable, and how this leads to an improvement in user experience and an increase of visibility of your site on search engines, even reducing digital marketing costs.
Andrea will share his extensive web performance experience and provide practical, high-impact, and easily applicable tips on how to improve performance in 2023.
Andrea Verlicchi is a Google Developer Expert for Web Performance, he has extensive experience in this sector, having worked with some of the largest companies in the world to improve their web performance. Andrea writes about the web in important specialized magazines and regularly shares his know-how in conferences and Meetups all over Europe.
CSS Day 2017 Faenza, Italy.
They are a W3C recommendation since novembre 2016, featuring the new "picture" tag and the "srcset" and "sizes" attributes in the "img" tag.
In this talk we'll see what they are, how to use them in which cases to prefer what usage, and some best practices to give a boost you your web applications or websites.
4. 1 secondo
di tempo di
caricamento
-14%
utenti che
lasciano il sito
all'atterraggio
(frequenza di rimbalzo)
+13%
utenti che raggiungono
gli obiettivi del sito
(tasso di conversione)
Source: How Renault improved its bounce and conversion rates by measuring and optimizing Largest Contentful Paint
5.
6. ● Cosa sono le prestazioni web
● Impatto sul business
● Suggerimenti per il miglioramento
delle prestazioni web
12. Google Core Web Vitals
Good Ok Poor
2.5 s 4.0 s
Good Ok Poor
100 ms 300 ms
Largest Contentful Paint (LCP)
Caricamento
Buy now
First Input Delay (FID)
Interattività
Buy now
👆
Good Ok Poor
0.10 0.25
Cumulative Layout Shift (CLS)
Stabilità visiva
Ad
Buy now
13. Google Core Web Vitals - Novità!
Good Ok Poor
2.5 s 4.0 s
Good Ok Poor
100 ms 300 ms
Largest Contentful Paint (LCP)
Caricamento
Buy now
First Input Delay (FID)
Interattività
Buy now
👆
Good Ok Poor
0.10 0.25
Cumulative Layout Shift (CLS)
Stabilità visiva
Ad
Buy now
Good Ok Poor
200 ms 500 ms
Interaction to Next Paint (INP)
Marzo 2024
14. Come fa Google a conoscerne i valori?
Chrome User Experience
(CrUX)
Google Chrome CrUX Report
15. I Core Web Vitals impattano il posizionamento in Google Search
Source: https://developers.google.com/search/blog/2020/11/timing-for-page-experience
Core
Web
Vitals
Mobile friendly
HTTPS
No intrusive interstitials
Search signals for
page experience
Loading
Largest Contentful Paint (LCP)
Interactivity
First Input Delay (FCP)
Visual stability
Cumulative Layout Shift (CLS)
20. Sul sito - Real User Monitoring In laboratorio - Synthetic
Quadro generale,
scovare anomalie
Investigarne le cause,
testare le soluzioni
21. Sul sito - Real User Monitoring In laboratorio - Synthetic
Pagespeed
insights
Lighthouse
Chrome User
Experience Report
(CrUX)
Quadro generale,
scovare anomalie
Investigarne le cause,
testare le soluzioni
22. Sul sito - Real User Monitoring In laboratorio - Synthetic
● Su tutte le pagine, mentre
gli utenti navigano
● Utenti reali, dispositivi reali,
connessioni, posizioni reali
● Interazioni utente incluse
● Dati in una dashboard
● Un determinato URL
● Emulazione, singola località
● Dettagli! Fotogrammi, video,
waterfall di rete, CPU, etc.
● Nessuna interazione utente
● Risultati immediati
Quadro generale,
scovare anomalie
Investigarne le cause,
testare le soluzioni
26. ● Maggiore impatto nel mondo reale
● Pertinenti e applicabili a tutti i siti
● Realistici da implementare
27. Google Core Web Vitals
Good Ok Poor
2.5 s 4.0 s
Good Ok Poor
100 ms 300 ms
Largest Contentful Paint (LCP)
Caricamento
Buy now
First Input Delay (FID)
Interattività
Buy now
👆
Good Ok Poor
0.10 0.25
Cumulative Layout Shift (CLS)
Stabilità visiva
Ad
Buy now
29. 72% delle pagine, su smartphone,
elemento LCP = un’immagine
39% di queste immagini
non è rilevabile dalla sorgente HTML
Sources: Web Almanac
30. ● Carica l'immagine usando un elemento
<img> con l'attributo src or srcset
● Preferisci il rendering lato server (SSR)
rispetto al rendering lato client (CSR)
● Se la tua immagine deve essere
referenziata da un file CSS o JS esterno,
includila nel sorgente HTML tramite tag
<link rel="preload"> tag.
31. Assicurati che la 🔺
chiamata alla risorsa LCP
abbia la massima priorità
32. ● Aggiungi fetchpriority="high" al
tag <img> della tua immagine LCP
● Non impostare mai loading="lazy"
sul tag <img> della tua immagine LCP
● Rimandare le risorse non critiche, in ogni
caso in cui è possibile farlo
33. Utilizza una CDN 🌐
per ottimizzare il tempo di
risposta del server (TTFB) di
HTML e risorse
34. Servire i tuoi contenuti dal punto più
geograficamente vicino ai tuoi utenti.
Memorizzare nella cache i contenuti
in modo che, quando richiesti nuovamente,
possano essere serviti rapidamente.
Sources: Web Almanac
35. ● Aumenta il tempo per cui i contenuti
vengono memorizzati nella cache.
● Memorizza nella cache il contenuto a
tempo indeterminato e svuota la cache
quando fai gli aggiornamenti.
● Sposta la logica dinamica, dal server di
origine (origin) all'edge server
36. Google Core Web Vitals
Good Ok Poor
2.5 s 4.0 s
Good Ok Poor
100 ms 300 ms
Largest Contentful Paint (LCP)
Caricamento
Buy now
First Input Delay (FID)
Interattività
Buy now
👆
Good Ok Poor
0.10 0.25
Cumulative Layout Shift (CLS)
Stabilità visiva
Ad
Buy now
37. Google Core Web Vitals
Good Ok Poor
2.5 s 4.0 s
Good Ok Poor
200 ms 500 ms
Largest Contentful Paint (LCP)
Caricamento
Buy now
Interaction to Next Paint (INP)
Interattività
Buy now
👆
Good Ok Poor
0.10 0.25
Cumulative Layout Shift (CLS)
Stabilità visiva
Ad
Buy now
39. Task = rendering e layouting, oltre ad
analisi, compilazione, esecuzione di script.
50 ms di blocco nel thread principale
soglia per cui un task è considerato “lungo”.
19 è il numero mediano
di long task su mobile
Sources: Web Almanac
40. ● Suddividi le attività lunghe (long task)
in attività più piccole, trasferendo spesso
l’esecuzione al thread principale
● Prendi in considerazione l'utilizzo di API
come isInputPending e Scheduler
Sources: Optimize long tasks
42. 460 kb/pagina
mediana del peso del codice JS servito
Questo Javascript crea
un ambiente in cui le le attività competono
per l’attenzione del thread principale
Sources: Web Almanac, Optimize LCP / Make it discoverable
43. ● Utilizza lo strumento Coverage in
DevTools per trovare il codice inutilizzato
● Se c’e codice inutilizzato perché verrà
utilizzato in seguito, spostalo in un un
pacchetto separato (code splitting)
● Utilizzi un gestore di tag?
Controlla periodicamente i tuoi tag.
Sources: Coverage, Code splitting, Tag best practices
45. Javascript non è l'unica cosa che può
influenzare la reattività del tuo sito web.
Rendering può essere costoso e può
interferire con la capacità del tuo sito web di
rispondere agli input dell'utente.
46. ● Evita di usare
requestAnimationFrame() per eseguire
lavoro non visivo.
● Mantieni piccole le dimensioni del tuo DOM.
● Usa il contenimento CSS
(proprietà contain)
Sources: Avoid an excessive DOM size, CSS Containment property
47. Google Core Web Vitals
Good Ok Poor
2.5 s 4.0 s
Good Ok Poor
100 ms 300 ms
Largest Contentful Paint (LCP)
Caricamento
Buy now
First Input Delay (FID)
Interattività
Buy now
👆
Good Ok Poor
0.10 0.25
Cumulative Layout Shift (CLS)
Stabilità visiva
Ad
Buy now
49. Sources: Web Almanac,
0px altezza predefinita iniziale
delle immagini non dimensionate
72% delle pagine ha
almeno un'immagine senza dimensioni
50. ● Setta in modo esplicito gli attributi width
e height (or proprietà CSS equivalenti)
nelle immagini
● Usa la proprietà CSS aspect-ratio
per riservare spazio per contenuti caricati
lazy (annunci, video incorporati, ecc.)
● Se aspetto sconosciuto, usa min-
height
51. Assicurati che le pagine
siano idonee per la cache
back/forward 💭 (bfcache)
53. ● Verifica se le tue pagine sono idonee
utilizzando lo strumento bfcache tester
(in developer tools)
● Lavora sui motivi per cui non lo sono 😊
Sources: bfcache tester in DevTools
55. 15% in meno di probabilità di avere un
buon CLS se animi qualsiasi proprietà CSS
che possa influenzare il layout
Gli elementi posizionati con absolute, di
cui si animano le proprietà top o left,
causano layout shift 🤯
Sources: Web Almanac, Optimize LCP / Make it discoverable
56. ● Mai animare o “transizionare” le proprietà
CSS che richiedono ai browser di
aggiornare il layout della pagina
● Invece di animare le proprietà top o left,
animare transform:translateX() o
transform:translateY()