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.
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 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.
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.
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.
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.
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.
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.
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.
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".
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.
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.
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.
È 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
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.
Vedi tutti i tag.