Ottimizza la pubblicazione di file CSS

Questa regola viene attivata quando PageSpeed Insights rileva che una pagina contiene fogli di stile esterni che bloccano il rendering, generando un ritardo nella visualizzazione dei contenuti sullo schermo.

Panoramica

Prima di visualizzare i contenuti sullo schermo, i browser si bloccano sui file CSS esterni. Questo determina un'ulteriore latenza a livello di rete e aumenta il tempo necessario a visualizzare i contenuti sullo schermo.

Consigli

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. Ricorda che se il file CSS è di grandi dimensioni e viene incorporato completamente, PageSpeed Insights potrebbe avvisarti che la parte above the fold della pagina è troppo grande, consigliandoti di assegnare 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 questo 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 questo aspetto:

  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }

A questo punto, puoi incorporare le risorse CSS più importanti nel seguente modo:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<link rel="stylesheet" href="small.css">

La risorsa small.css originale viene caricata dopo rispetto alla pagina. L'ordine di applicazione delle regole CSS viene rispettato inserendo tutti gli elementi <style> e <link> nel documento mediante JavaScript.

Non incorporare URI dati di grandi dimensioni

Fai attenzione quando incorpori URI dati nei file CSS. Quando è preferibile utilizzare in modo selettivo URI dati di piccole dimensioni nel file CSS, incorporare URI dati di grandi dimensioni può aumentare le dimensioni dei contenuti above the fold del file stesso e, di conseguenza, il tempo necessario a visualizzare la pagina.

Non incorporare attributi CSS

Ove possibile, dovresti evitare di incorporare attributi CSS negli elementi HTML (ad esempio, &lt p style=...&gt), poiché questo genera spesso la duplicazione superflua di codice. L'incorporamento di attributi CSS negli elementi HTML è inoltre bloccato per impostazione predefinita da Content Security Policy (CSP).