Panoramica
Prima che il browser possa visualizzare i contenuti, deve elaborare tutte le informazioni su stile e layout la pagina corrente. Di conseguenza, il browser bloccherà il rendering finché non verranno visualizzati fogli di stile esterni scaricati ed elaborati, che potrebbero richiedere più round trip e ritardare il primo rendering. Vedi struttura, layout e colorazione dell'albero di rendering per scoprire di più sul percorso di rendering critico. ed eseguire il rendering bloccare CSS per suggerimenti su come sbloccare il rendering e migliorare la pubblicazione dei CSS.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. Tieni presente che, se il file CSS è di grandi dimensioni e viene incorporato completamente, PageSpeed Insights potrebbe avvisarti che la pagina above the fold della pagina è troppo grande tramite Assegna 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
- Non incorporare URI di dati di grandi dimensioni
- Non incorporare gli attributi CSS
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 è così:
.yellow {background-color: yellow;}
.blue {color: blue;}
.big { font-size: 8em; }
.bold { font-weight: bold; }
Quindi, 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>
<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, inclusa la determinazione di CSS critici/non critici, incorporamento del CSS critico e caricamento posticipato del CSS non critico, può essere eseguita automaticamente Moduli di ottimizzazione PageSpeed per nginx, apache, IIS, ATS e Open Lightspeed, quando attivi filtro prioritize_critical_css.
Vedi anche loadCSS per caricare i file CSS in modo asincrono, che può funzionare con Critica, uno strumento per estrarre il codice CSS fondamentale 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 la colorazione iniziale della pagina. Gli stili vengono applicati alla pagina al termine del caricamento, senza bloccare la visualizzazione iniziale dei contenuti critici.
Tieni presente che a breve la piattaforma web supporterà il caricamento dei fogli di stile senza blocchi del rendering, senza dover ricorrere a JavaScript, tramite le 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 tuo CSS possa avere senso, incorporare URI di dati di grandi dimensioni possono aumentare le dimensioni del CSS above the fold, il che rallenta il tempo di rendering della pagina.
Non incorporare attributi
Incorporare gli attributi CSS negli elementi HTML
(ad es. <p style=...>) devono essere evitate se possibile, poiché spesso ciò comporta una duplicazione non necessaria del codice.
Inoltre, l'incorporamento di codice CSS negli elementi HTML è bloccato per impostazione predefinita con
Criterio di sicurezza del contenuto (CSP).
Feedback
Hai trovato utile questa pagina?