Articoli con tag “techniques”

aspect-ratio: Un modo moderno per riservare spazio a immagini e contenuti asincroni nel responsive design

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.

Leggi tutto →

Una tecnica elegante per il lazy loading delle immagini in Swiper e la creazione lazy delle istanze di Swiper

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.

Leggi tutto →

Un modo intelligente per servire immagini WebP ai browser moderni e JPG a Internet Explorer

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.

Leggi tutto →

Come limitare la fedeltà delle immagini a 2x e risparmiare il 45% del peso sui telefoni cellulari di fascia alta

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.

Leggi tutto →

Come ottimizzare il CLS quando si caricano altri contenuti in modo asincrono

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.

Leggi tutto →

Lazy loading delle immagini responsive nel 2020

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.

Leggi tutto →

Critical CSS con Jekyll e SASS

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.

Leggi tutto →

Web Share API, il passo successivo alla PWA

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.

Leggi tutto →

Trasformare il mio blog in una Progressive Web Application

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.

Leggi tutto →

Un fantastico articolo sul lazy loading ibrido

Il 6 maggio 2019 ho scritto il mio primo articolo su Smashing Magazine: Lazy Loading Ibrido, Una Migrazione Progressiva Al Lazy Loading Nativo.

Leggi tutto →

Lazy loading nativo e fallback js con vanilla-lazyload 12

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.

Leggi tutto →

Design di tabelle responsive e accessibili

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.

Leggi tutto →

Caricamento lazy di immagini responsive nel 2019

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.

Leggi tutto →

Verificare se un elemento è ancora nella viewport dopo un certo tempo

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?

Leggi tutto →

Intersection Observer e il caricamento lazy degli elementi

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.

Leggi tutto →

Usare le variabili CSS come unità di spaziatura

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.

Leggi tutto →

Cambiare il colore del testo per contrasto in base alla luminosità dello sfondo

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.

Leggi tutto →

Immagini responsive, uno standard HTML 5.1

È 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

Leggi tutto →

Immagini responsive? Il tag picture non serve

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?

Leggi tutto →

Caricamento lazy di immagini responsive con srcset e LazyLoad

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.

Leggi tutto →

Vedi tutti i tag.