Nello script #432 abbiamo parlato dei concetti di Repaint, Reflow e Compositing e di come questi interagiscano sui tempi e le performance del browser. Oltre a lavorare su questi aspetti possiamo agire anche su un concetto semplice, ma, al tempo stesso, complesso da implementare correttamente: non disegnare ciò che a video non è visibile.

Questo approccio che impatta in primo luogo la viewport, trasforma il processo da "rendering eager" (anticipato) e "rendering on-demand" (a richiesta): che tutto cioè non mostrato nella viewport non verrà nè disegnato nè colorato, andando indubbiamente a migliorarne le prestazioni.

Per ottenere questo risultato possiamo creare una classe di utility che andremo ad applicare agli elementi che sappiamo potrebbero risultare fuori dalla schermata.

.lazy-load-section {
  content-visibility: auto;
}

Gli use case più comuni sono i siti-ecommerce, blog-notiziari e dashboard di applicazioni complesse: pagine dove la probabilità che vi sia del contenuto fuori dalla viewport è elevata, e dunque il non dipingere un contenuto può trovare un pieno vantaggio nell'esperienza utente finale.