Rendo il web più veloce e più usabile
Come la definizione di "responsive" di Ethan Marcotte del 2010 si scontra con le linee guida delle app mobili sulla "adattabilità" e con le metriche di interattività delle performance web.
Ho parlato al CSS Day Bologna di Chrome DevTools for Agents (DTA), mostrando come utilizzare il Model Context Protocol (MCP) per fare il debug di layout, visualizzazioni responsive e accessibilità in linguaggio naturale.
Google Antigravity 2 e Gemini 3.5 Flash hanno completamente trasformato il mio flusso di lavoro di sviluppo. Ecco la mia esperienza diretta con questa accoppiata IA incredibilmente veloce.
Un singolo file d'immagine contenente ogni risoluzione potrebbe finalmente rendere il tag `<img>` di nuovo semplice. Un appello alla web community per creare un formato d'immagine contenitore.
Ho tenuto un talk sul miglioramento della reattività del web al Web Day 2026 a Milano, condividendo consigli pratici per fare il debug ed evitare interazioni lente tramite l'Interaction to Next Paint (INP).
Ho co-presentato con Giulia Naponiello un talk sui bias inconsci di genere nel mondo tech in occasione di due meetup a Bologna e Imola. Ecco di cosa abbiamo parlato e perché è importante.
Ho partecipato al podcast GitBar con Mauro "Brainrepo" Murru per parlare di web performance, Core Web Vitals, ottimizzazione delle immagini e dei danni silenziosi di Google Tag Manager.
Ho mostrato come utilizzare il server MCP per Chrome DevTools per connettere l'IA a Chrome DevTools per test visivi, analisi delle prestazioni e automazione del browser.
Ho mostrato in anteprima il server MCP per Chrome DevTools, in grado di trasformare il terminale in un assistente IA per test responsivi, audit di accessibilità e debugging front-end.
Google Antigravity trasforma l'assistenza dell'IA da semplice strumento a partner attivo. Scopri come questo nuovo IDE sfrutta Gemini 3 e gli agenti autonomi per cambiare il modo in cui sviluppiamo software.
La velocità di interazione è un aspetto chiave della reattività di un sito alle azioni dell'utente. Questo talk mostrerà tecniche pratiche per migliorare le interazioni lente attraverso casi di studio reali di debugging e ottimizzazione di scarsa velocità di interazione.
Hai presente quando copi un pezzo di codice, poi ne copi un altro e perdi quello precedente? O quando sai di avere qualcosa negli appunti, vorresti copiare qualcos'altro, ma devi prima incollare quello che hai negli appunti altrimenti lo perderai? Niente più stress da appunti. Finalmente gli appunti multipli sono arrivati su macOS.
Il 16 aprile 2025 ho tenuto una presentazione a un meetup di Performance Observer, condividendo spunti su come fare il debug e ottimizzare l'Interaction to Next Paint (INP). Questo post include la registrazione video del talk.
Una piccola utility per elaborare cicli di grandi dimensioni in JavaScript senza bloccare l'interfaccia utente. Ispirato all'articolo di Rick Viscomi “Breaking up with long tasks, or how I learned to group loops and wield the yield”, yieldy-for-loop cede periodicamente il controllo al browser in modo che l'app rimanga reattiva.
Confronto tra varie tecniche per renderizzare gli SVG: SVG inline, tag `<img>`, sfondi CSS e sprite SVG. Ecco una sintesi delle principali considerazioni e raccomandazioni dal punto di vista del design e delle performance web.
Il 17 settembre 2024 ho parlato alla conferenza We Love Speed 2024 su come migliorare la reattività del web. In particolare, ho spiegato come fare il debug ed evitare le interazioni lente sulla base della mia esperienza nell'audit dell'Interaction to Next Paint (INP) sui siti web dei clienti. Questo è il video del mio talk.
“La pubblicazione online come l'abbiamo conosciuta negli ultimi vent'anni è ormai morta e sepolta”. Condivido un articolo del mio amico Antonio Moro, in arte Itomi, uno di quelli che ha fatto parte dell'“editoria online” in Italia fin dagli albori.
Un resoconto dettagliato della mia partecipazione e delle idee emerse frequentando e contribuendo a performance.now(), la più importante conferenza sulla web performance in Europa.
Scopri come migliorare la tua esperienza con Google Meet utilizzando la modalità Companion per separare i contenuti condivisi e i volti dei partecipanti su due schermi, per una maggiore concentrazione e coinvolgimento.
Stanco della mancanza di un'opzione di schermo intero reale per i contenuti condivisi su Google Meet, ho creato un bookmarklet per risolvere il problema, disponibile su GitHub.
Dopo anni di lavoro sia da remoto che in ufficio, ho capito che se da un lato il lavoro da remoto offre flessibilità e concentrazione, dall'altro può far mancare quelle connessioni spontanee che stimolano la creatività e cementano il team.
A partire da maggio 2024 ho iniziato a parlare a conferenze e meetup su come migliorare la reattività del web. Nello specifico, parlo di come fare il debug ed evitare interazioni lente sulla base della mia esperienza di audit dell'Interaction to Next Paint (INP) sui siti web dei clienti. Video, slide, date e location del mio talk.
Con ogni nuova versione di iOS, non vedo l'ora di esplorare le ultime funzionalità offerte da Apple. iOS 18 ha introdotto diversi cambiamenti, alcuni piccoli e discreti, altri più profondi, che hanno migliorato notevolmente la mia esperienza d'uso. Ecco le mie nuove funzioni preferite in iOS 18 e perché penso che rappresentino una svolta.
Esploriamo una soluzione pratica per mitigare il Cumulative Layout Shift (CLS) causato dai banner promozionali. Evita spostamenti di layout imprevisti usando sessionStorage per memorizzare il contenuto e lo stato di visualizzazione del banner tra i caricamenti di pagina.
Come l'anno scorso, sono stato invitato al Google I/O Connect EMEA 2024. E in qualità di Google Developer Expert (GDE), il giorno successivo ho partecipato anche al GDE Forum presso gli uffici Google di Berlino. In questo post condivido le mie impressioni.
Il talk di Jake Archibald "In the loop" è ancora una delle migliori fonti di informazioni su come i browser gestiscono i task e rispondono all'input dell'utente. Poiché non ho trovato nulla di così chiaro in formato testuale, ho deciso di trascrivere il suo intervento in questo articolo.
Dopo averli tenuti sul mio computer per alcuni giorni, ho deciso di pubblicare su GitHub questa raccolta di snippet di web performance per fare il debug dell'INP in Chrome Developer Tools, o per inviare i dati ai tuoi sistemi di analytics.
Google Chrome sta introducendo una nuova funzionalità chiamata scheduler.yield. Questa funzione consente agli sviluppatori web di cedere esplicitamente il controllo al thread principale. Ecco i punti chiave.
Come consulente di web performance, sono sempre attento alle novità che influenzano l'esperienza utente dei siti web. Una di queste novità è l'introduzione da parte di Google di una nuova metrica chiamata Interaction to Next Paint (INP). Destinata a diventare una Core Web Vital a marzo 2024, l'INP è progettata per misurare il tempo impiegato da un sito web per rispondere alle interazioni dell'utente. In questo articolo approfondiremo cos'è l'INP, perché è importante e come le aziende possono prepararsi per garantire che i loro siti soddisfino questa metrica fondamentale.
Nel 2023 ho parlato di web performance in conferenze, Google Developer Groups (GDG) e meetup locali in tutta Europa. Il titolo di questo talk è "Come e perché ($) migliorare le prestazioni web: consigli pratici per il 2023".
Nel dicembre 2023 sono diventato un Google Developer Expert (GDE) per le Web Performance. Google Developer Experts è un programma di Google volto a creare una rete globale di professionisti, influencer e opinion leader, per consentire loro di condividere le proprie conoscenze con la community di sviluppatori, ad esempio parlando ad eventi, condividendo best practice e offrendo mentorship.
Per evitare lo spostamento del layout (layout shifting) e ottimizzare la metrica Web Vital Cumulative Layout Shift (CLS) nelle tue pagine web, è necessario riservare spazio per qualsiasi contenuto che potrebbe essere renderizzato in un secondo momento. Questo è il caso di immagini, video e qualsiasi contenuto caricato in modo asincrono (ad esempio con chiamate AJAX). Ecco un nuovo modo per farlo.
Mi piace partecipare ai meetup locali. Sono informativi, divertenti e allo stesso tempo stimolanti dal punto di vista sociale. A volte viene chiesto agli organizzatori dei meetup di trasmettere gli eventi online. Sarebbe una bella funzionalità, ma a mio parere farebbe più male che bene alla community. Vi spiego perché.
In passato, quando il supporto dei browser per il lazy loading nativo non era diffuso, la best practice consisteva nell'usare gli attributi `data-src` e una libreria JavaScript come vanilla-lazyload per caricare le immagini man mano che entravano nella viewport. Questa è ancora la best practice oggi?
Il 24 giugno 2022 ho parlato di come automatizzare l'ottimizzazione delle immagini responsive alla LazyLoad Conference 2022. Ecco il video del mio talk.
Il 1° aprile 2022 ho parlato di ottimizzazione delle immagini responsive 4.0 alla conferenza CSS Day 2022 a Faenza, in Italia. Questo talk spiega come essere più produttivi automatizzando le immagini responsive.
Ora che zsh è la shell predefinita sul terminale di Mac OS, potresti voler configurare il tuo nuovo Mac o il terminale di VS Code per avere un'integrazione intelligente con git, simile a git bash per Windows.
Immagina di avere più caroselli in una pagina, ognuno contenente più immagini, e di voler scaricare solo le immagini che si trovano all'interno della porzione visibile della pagina, magari risparmiando tempo di CPU creando le istanze del carosello in modalità lazy. Credo di aver trovato una tecnica valida ed elegante per farlo.
Come autore di vanilla-lazyload, non è la prima volta che mi viene posta questa domanda: quali sono le differenze tra vanilla-lazyload e lazysizes? Questo post è la risposta a tale domanda.
Quicklink è una libreria leggera creata da Addy Osmani (Google) che esegue il prefetch delle pagine collegate alla pagina corrente non appena i link a tali pagine entrano nella porzione visibile della pagina (viewport). Ecco un case study al riguardo.
Prima che Safari iniziasse a supportare le immagini WebP, eravamo costretti a usare il tag picture per servire le immagini WebP ai browser che le supportavano. Oggi tutti i browser moderni supportano il formato WebP, quindi c'è probabilmente un modo intelligente per farlo usando un singolo tag: img.
Con la diffusione di schermi ad altissima densità “super retina” nei dispositivi di fascia alta più recenti, limitare la fedeltà delle immagini a 2x porta a un notevole miglioramento nei tempi di rendering, senza alcuna perdita di qualità percepibile per gli utenti. Ecco una nuova best practice su come fare.
Il Cumulative Layout Shift (CLS) è un'importante metrica incentrata sull'utente per misurare la stabilità visiva, poiché aiuta a quantificare la frequenza con cui gli utenti riscontrano spostamenti imprevisti del layout — un CLS basso aiuta a garantire che l'esperienza sulla pagina sia piacevole.
Vuoi migliorare le prestazioni del tuo sito web? Puoi farlo utilizzando le immagini responsive e il lazy loading! In questo articolo troverai il codice HTML, JavaScript e CSS per caricare le immagini responsive in modalità lazy, per fare in modo che i browser utilizzino formati di immagine moderni come WebP e Jpeg2000, e per abilitare il lazy loading nativo dove supportato.
Una guida pratica su come usare in modo produttivo il nuovo browser Microsoft Edge basato su Chromium
In passato il mio blog era gestito da Jekyll su GitHub Pages e il suo CSS era compilato usando SASS. Oggi ho deciso di migliorare ulteriormente le prestazioni integrando inline il critical CSS che blocca il rendering, ma anche cercando su internet ho faticato a trovare un modo semplice per farlo. Questo post fa al caso tuo, se vuoi fare la stessa cosa.
Oggi ho sperimentato con la Web Share API e l'ho implementata su questo sito, tanto per iniziare. Ecco cosa ho fatto e come puoi implementarla sul tuo sito.
Alcuni colleghi ed io abbiamo partecipato a un Hackathon di Google sulle Progressive Web Application e abbiamo imparato molto, così ho deciso di abilitare questo sito web come PWA. Ecco cosa ho fatto.
Il 6 maggio 2019 ho scritto il mio primo articolo su Smashing Magazine: Lazy Loading Ibrido, Una Migrazione Progressiva Al Lazy Loading Nativo.
Il 6 aprile 2019, Addy Osmani ha scritto del lazy loading nativo delle immagini. Due giorni dopo Yvain, uno sviluppatore front-end di Parigi, mi ha chiesto se il mio vanilla-lazyload potesse essere usato come polyfill per l'attributo loading, ispirandomi a sviluppare e rilasciare la versione 12 del mio script, che introduce la nuova opzione use_native per abilitare il lazy loading nativo dove supportato. Puoi già provarlo oggi stesso.
Come far adattare una tabella potenzialmente larga ai dispositivi più piccoli, senza perdere leggibilità e accessibilità? Ecco semplici soluzioni per far apparire le tabelle come liste e le liste come tabelle, in un design responsive e accessibile.
Negli ultimi anni, sia per lavoro che come manutentore di uno script LazyLoad, mi sono specializzato nel caricamento lazy delle immagini responsive. Oggi ti mostrerò quale codice HTML, CSS e JavaScript devi scrivere nel 2019 per servire immagini responsive e caricarle in modalità lazy.
Cosa faresti se qualcuno ti chiedesse di caricare un elemento DOM solo se rimane all'interno della viewport per un determinato periodo di tempo? Utilizzeresti vanilla-lazyload, giusto?
Vediamo come scrivere una libreria JavaScript in ES2015 transpilata con Babel, utilizzando i moduli ES impacchettati con Rollup tramite Gulp, e Jest per testare il codice.
Ad agosto 2017 l'API Intersection Observer, una nuova ed entusiasmante API del browser, ha finalmente ottenuto un supporto piuttosto ampio. Possiamo usarla per sapere quando due elementi DOM si intersecano, o quando un determinato elemento DOM entra nella viewport del browser. Il caricamento lazy delle immagini è proprio il caso d'uso ideale.
In questo articolo ti mostro come utilizzare le variabili CSS, note popolarmente come proprietà personalizzate (CSS custom properties), per scalare gli spazi del tuo layout su diverse media query.
Se dovessi cambiare il colore di un testo con posizionamento fisso in base alla luminosità del suo sfondo durante lo scorrimento, come faresti? Filtri CSS, blend mode? E se dovessi supportare tutti i browser, incluso Internet Explorer? Ecco un paio di modi per farlo utilizzando le proprietà CSS clip e clip-path.
È ufficiale. Le immagini responsive sono una raccomandazione W3C da novembre 2016, con il nuovissimo tag picture e nuovi attributi per il tag img: srcset e sizes
Supponiamo di avere un layout di sito web responsive in cui le immagini sono dimensionate al 100% del loro contenitore, ma il contenitore non è sempre largo quanto la viewport. Dobbiamo usare il tag picture o il tag img è sufficiente?
Ora è possibile avere il caricamento lazy (lazy loading) sulle immagini responsive per fare in modo che si adattino agli schermi degli utenti e mantenere veloce il nostro sito web. In questo articolo vedremo quale markup dobbiamo scrivere e quali librerie Javascript ci serviranno.
Creare sprite (spriting) è un modo per migliorare le prestazioni del tuo sito web raggruppando molte immagini (o icone) in un'unica immagine più grande, al fine di effettuare una singola richiesta HTTP anziché molte. Ecco come puoi creare sprite utilizzando Compass.
Negli ultimi giorni ho lavorato all'ottimizzazione delle prestazioni dei siti web e mi sono reso conto che non c'è modo di sfruttare il formato immagine JPEG progressivo sui siti web se si utilizza jQuery_lazyload di Mika Tuupola, così ho deciso di scrivere il mio lazy load personale, che si è rivelato migliore per molteplici motivi.
Abbiamo usato immagini GIF per creare animazioni per anni, ma non sono belle da usare sopra gradienti o immagini (niente canale alfa, niente anti-aliasing) di cui i siti web moderni sono pieni. Esistono molte soluzioni alternative per animare invece immagini PNG, ma...