COME VELOCIZZARE UN SITO WEB

Condividi il Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

SEO e CSS : velocizzare un sito web con [content visibility]

Chrome 85 in ottica SEO, visibilità dei contenuti e tempi di caricamento

Non so se arrivo un po’ in ritardo per parlare delle novità di Chrome 85, rilasciato lo scorso Agosto da Google. In ogni caso spesso si pensa, a mio parere erroneamente, che questi aggiornamenti riguardino in primo luogo i programmatori ma in questo caso credo che sia importante parlarne anche in ambito SEO.

Come velocizzare un sito web con il CSS

Uno degli elementi fondamentali della SEO, insieme a tanti altri, è la velocità di caricamento di un sito unito al tempo di interazione.

Velocizzare un sito web è fondamentale per scalare le SERP

In altre parole, cliccando su un url quanto tempo passa prima che si possa vedere il contenuto? E quanto tempo passa perché tale contenuto sia cliccabile?

Si può rapidamente scoprire la velocità del proprio sito, o di quella dei competitors grazie a uno strumento fornito da Google PageSpeed Insights.
Grazie a questo “cattivissimo” strumento si può capire quanto LENTAMENTE carica un sito sia in versione dekstop che in versione mobile.

Sono molte le cose che si possono fare per velocizzare un sito web, in questo articolo però voglio soffermarmi su uno dei suggerimenti dati proprio da PageSpeed :

Riduci al minimo Javascritp e CSS!

E la terra trema … questa cosa, spesso, viene presa in esame per ultima, infatti questo è forse il più trascurato dei problemi in ambito SEO e un sondaggio condotto da SEMrush ha rivelato che il 68% dei siti, a livello mondiale, ha file JavaScript e CSS non minimizzati.

Ridurre al minimo, significa ridurre o semplificare questi codici, qualcosa che può essere fatto rimuovendo righe non necessarie, commenti non necessari e spazi vuoti.

Questi file sono alla base dell’intera visualizzazione del sito e talvolta sono scritti con eccessi per facilitare l’editing futuro.

Per molti SEO mettere le mani nel codice fa paura e contemporaneamente fa drizzare i capelli ai programmatori.
Quindi non sono qui a dire di mettere mano direttamente al codice, se non in minima parte.

Ed eccoci giunti al fulcro dell’articolo, quello che mi ha fatto dire WOW quando l’ho scoperto.
(mi scuso se per chi mi legge l’effetto sarà : hai scoperto l’acqua calda).

Torniamo ad Agosto 2020 e a Google che rilascia Chrome 85. Tra i vari aggiornamenti c’è una nuova, meravigliosa proprietà CSS:

[conten visibility]

Questa proprietà CSS permette di velocizzare tantissimo il contenuto di una pagina.

Vediamo come.

Trasformare l’html in qualcosa che l’utente può vedere, richiede al browser di eseguire una serie di passaggi. E lo fa per l’intera pagina. Anche per i contenuti che non sono visibili nel viewport (area di visualizzazione).
Applicare la proprietà [content-visibility] ad un elemento indica al browser che può saltare il lavoro di rendering per quell’elemento fino a quando non appare nell’area visualizzata, fornendo un rendering iniziale molto più veloce.

[Content-visibility] la nuova proprietà CSS che aumenta le prestazioni di rendering Migliora il tempo di caricamento iniziale saltando il rendering del contenuto fuori schermo.

 Poiché il rendering viene saltato, se gran parte del contenuto è fuori dallo schermo, sfruttare la proprietà [Content-visibility] rende il caricamento iniziale dell’utente molto più veloce. Consente inoltre interazioni più rapide con il contenuto sullo schermo. 

Contenimento CSS

L’obiettivo principale e generale del contenimento CSS è consentire il miglioramento delle prestazioni di rendering del contenuto e di conseguenza permette di velocizzare un sito web.

Esistono quattro tipi di contenimento CSS, ciascuno un valore potenziale per la proprietà CSS : size, layout, style e paint.

Il rendering con la proprietà [content-visibility]

Potrebbe essere difficile capire quali valori di contenimento utilizzare, poiché le ottimizzazioni del browser possono essere attivate solo quando viene specificato un set appropriato. Si può quindi usare la proprietà [content-visibility] attribuendogli il valore [auto].

La proprietà [content-visibility] accetta diversi valori, ma [auto] è quello che fornisce miglioramenti immediati delle prestazioni. Un elemento che ha [content-visibility: auto] ottiene automaticamente il contenimento di  Layout, Style Paint. Se l’elemento è fuori dallo schermo , ottiene anche un contenimento delle dimensioni.

In che modo questo può velocizzare un sito web?

In breve, se l’elemento è fuori schermo i suoi figli non vengono renderizzati. Il browser determina la dimensione dell’elemento senza considerare nessuno dei suoi contenuti e si ferma lì. La maggior parte del rendering, come lo stile e il layout della sotto-struttura dell’elemento, viene saltata.

Quando l’elemento si avvicina alla visualizzazione, il browser non si avvale più del contenimento delle dimensioni e inizia l’hit testing del contenuto dell’elemento. Ciò consente al lavoro di rendering di essere eseguito appena in tempo per essere visto dall’utente.

Quando il contenuto si sposta dentro e fuori dalla viewport, inizierà e smetterà di essere renderizzato secondo necessità.

Tuttavia, ciò non significa che il browser dovrà eseguire il rendering e rieseguire il rendering dello stesso contenuto più e più volte, poiché il lavoro di rendering viene salvato quando possibile.

E la dimensione?

Specificare la dimensione naturale di un elemento con la proprietà [contain-intrinsic-size]

Par quanto riguarda il valore da attribuire a [size] c’è da fare un discorso a parte, perché applicando a un elemento [content-visibility: auto] per quanto riguarda [size] succede che il browser va a applicare il contenimento della dimensione leggendo un elemento, che si trovi fuori dalla viewport, come vuoto. Questo va a creare un problema sulla barra di scorrimento che andrà a variare scorrendo la pagina.

Per evitare questo inconveniente per fortuna esiste un’altra proprietà CSS [contain-intrinsic-size] che specifica la dimensione naturale di un elemento anche se l’elemento è influenzato dal contenimento delle dimensioni.

Per esempio si può impostare su 1000px come stima per l’altezza e la larghezza delle sezioni.

In altre parole la proprietà [contain-intrinsic-size] funge da dimensione “segnaposto” in luogo del contenuto non ancora visualizzato.

Nascondere il contenuto con [content-visibility: hidden]

Cosa succede se si desidera mantenere il contenuto non sottoposto a rendering indipendentemente dal fatto che sia o meno sullo schermo?

Si immette: [content-visibility: hidden]

La proprietà [content-visibility: hidden] offre tutti gli stessi vantaggi del contenuto non sottoposto a rendering ma, a differenza di [auto], non inizia automaticamente il rendering sullo schermo.

Questo permette di nascondere i contenuti di un elemento e poi mostrarli rapidamente.

[Content-visibility: hidden] nasconde l’elemento preservando il suo stato di rendering, quindi, se ci sono dei cambiamenti che devono avvenire, si verificano solo quando l’elemento viene nuovamente mostrato , ovvero quando la proprietà  [content-visibility: hidden] viene rimossa.

Velocizzare un sito web per la SEO

La proprietà content-visibility può essere di grande aiuto per la SEO. 

Potrebbe sorgere la domanda… 

Un SEO deve saper programmare?

No! A mio parere di Leonardo Da Vinci ne abbiamo avuto uno e dopo di lui sono ben poche le persone che riescono a ad eccellere su più fronti in modo uguale, e comunque anche il grande Leonardo per star dietro a tutto ha lasciato una grande quantità di opere non compiute.

Un SEO deve conoscere l’html?

Sì!

Un SEO deve conoscere il CSS?

Quanto basta per potersi orientare e, per lo meno, poter comunicare con i programmatori.

Cosa ne pensate?

Altri articoli sulla SEO e sul Digital marketing