Rendering asincrono dei CSS

Far convergere le esigenze di sviluppo web con le indicazioni di Google PageSpeed Insights è una vera sfida, soprattutto se si ha a che fare con piattaforme di gestione contenuti o ecommerce preconfezionati da customizzare. La condotta da adottare nell'integrare script o css dovrebbe rispettare le seguenti regole:

  • Evitare collegamenti a file esterni, perchè ogni blocco esterno rallenta la velocità di caricamento
  • Trovare un metodo per renderizzare subito i fogli di stile o gli script relativi alla zona della pagina above the fold, contemporaneamente al caricamento della stessa
  • Caricare in modo asincrono css e script relativi alla zona non above the fold

Per gli script lato client, il problema è superabile aggiungendo async o defer come attributo al tag <script>. Mentre per i CSS il problema si complica: Spesso si ha a che fare con piattaforme che aggiungono css dentro la sezione <head> con il tag

<link rel="stylesheet" href="path/fogliodistile.css" />

Riuscire ad individuare il codice lato server che si preoccupa di fare questa aggiunta, è già un lavoraccio. Individuato il punto, si pongono i problemi di ottimizzazione: come spostare il caricamento del css in fondo alla pagina? renderlo asincrono e contemporaneamente evitare una chiamata di blocco HTML esterno? ...