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?

Ho pensato ad una soluzione che Google PageSpeed insights ritiene valida, ma non so quanto efficace in termini di velocità ed accessibilità. Fatto sta, che questa sembra coniugare le tre esigenze pur richiedendo l'uso di javascript (e nel caso specifico ho cercato di agevolare l'implementazione con jquery). Questa tecnica consiste nell'inserire il link del file css all'interno di un metatag rendendolo di fatto un "dato dormiente" fino al caricamento della pagina. Appena la pagina è pronta, una chiamata asincrona legge il contenuto del css mendiante un file php e lo inserisce, come se fosse un blocco interno, in fondo alla pagina prima della chiusura del tag body.

Dunque nella sezione head si inserisce staticamente (o dinamicamente a seconda dei casi) un metatag dal nome inventato, sostituendolo al classico <link>:

<meta name="scriptasync" content="path/fogliodistile.css" />

Subito dopo si aggiunge il codice javascript/jquery che mantiene dormiente il file fino allo stato ready della pagina

jQuery(document).ready(function() {
 indirizzo = jQuery("head").find("meta[name=scriptasync]").attr("content");
 jQuery.ajax({
      url: "loadcss.php",
      method: 'POST',
      cache: false,
      data: {url_addr : indirizzo},
			success: function(output){
        jQuery("body").append(output);     
      }
 });
});

Ed infine il file loadcss.php che deve leggere e scrivere il contenuto del file css inserendolo in blocco in fondo al body

<? echo "<style>".file_get_contents($_POST["url_addr"])."</style>"; ?>

Lascia un commento