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, < p style=...>), 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).
Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog:
Commenti
Posta un commento