Ottimizza la pubblicazione di file CSS

Questa regola viene attivata quando PageSpeed Insights rileva che una pagina include fogli di stile esterni che bloccano la visualizzazione, che ritardano il primo rendering.

Panoramica

Prima che il browser possa eseguire il rendering dei contenuti, deve elaborare tutte le informazioni su stile e layout della pagina corrente. Di conseguenza, il browser bloccherà il rendering finché i fogli di stile esterni non vengono scaricati ed elaborati, il che potrebbe richiedere più round trip e ritardare il primo rendering. Per ulteriori informazioni sul percorso di rendering critico, consulta la sezione Costruzione, layout e colorazione degli alberi di rendering per ulteriori informazioni sul percorso di rendering critico e per suggerimenti su come sbloccare il rendering e migliorare la pubblicazione CSS.

Suggerimenti

Se le risorse CSS esterne sono di piccole dimensioni, puoi inserirle direttamente nel documento HTML: questa procedura prende il nome di incorporamento. Questo metodo di incorporamento di risorse CSS di piccole dimensioni consente al browser di procedere al rendering della pagina. Tieni presente che se il file CSS è di grandi dimensioni e viene incorporato completamente, PageSpeed Insights potrebbe avvisarti che la porzione above the fold della pagina è troppo grande tramite l'opzione Dai priorità ai contenuti visibili. Nel caso di un file CSS di grandi dimensioni, dovrai individuare e incorporare le risorse CSS necessarie a visualizzare i contenuti above the fold posticipando il caricamento degli stili rimanenti dopo che il rendering di tali contenuti è stato completato.

Esempio di incorporamento di un file CSS di piccole dimensioni

Se il documento HTML ha il seguente aspetto: 
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
E la risorsa small.css ha il seguente aspetto: 
  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }
Poi puoi incorporare codice CSS fondamentale nel seguente modo: 
<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

Questa trasformazione, che include la determinazione di CSS critici/non critici, l'incorporamento del CSS critico e il caricamento differito del CSS non critico, può essere eseguita automaticamente dai moduli di ottimizzazione PageSpeed per nginx, apache, IIS, ATS e Open Lightspeed, quando attivi il filtro prioritize_critical_css.

Consulta anche la funzione loadCSS per caricare il codice CSS in modo asincrono; può essere compatibile con Critical, uno strumento per estrarre il codice CSS critico da una pagina web.

Gli stili fondamentali necessari per applicare uno stile ai contenuti above the fold vengono incorporati e applicati immediatamente al documento. Il file small.css completo viene caricato dopo il disegno iniziale della pagina. Gli stili vengono applicati alla pagina al termine del caricamento, senza bloccare la visualizzazione iniziale dei contenuti critici.

Tieni presente che la piattaforma web supporterà presto il caricamento dei fogli di stile senza blocco del rendering, senza dover ricorrere a JavaScript mediante Importazioni HTML.

Non incorporare URI dati di grandi dimensioni

Fai attenzione quando incorpori URI dati nei file CSS. Sebbene l'uso selettivo di URI di dati di piccole dimensioni nel CSS possa avere senso, l'incorporamento di URI di dati di grandi dimensioni può far sì che le dimensioni del CSS above the fold siano maggiori, rallentando così il tempo di rendering della pagina.

Non incorporare attributi

Incorporare attributi CSS in elementi HTML (ad es. <p style=...>) dovrebbe essere evitato, ove possibile, poiché questo porta spesso a una duplicazione superflua di codice. Inoltre, il CSS incorporato negli elementi HTML è bloccato per impostazione predefinita con Content Security Policy (CSP).

Feedback

Hai trovato utile questa pagina?