Descripción general
Antes de que el navegador pueda renderizar el contenido, debe procesar toda la información de estilo y diseño de la página actual. Como resultado, el navegador bloqueará la representación hasta que se agreguen las hojas de estilo externas la descarga y el procesamiento, lo que puede requerir varios recorridos y retrasar el tiempo de la primera renderización. Consulta construcción, diseño y pintura del árbol de renderización para obtener más información sobre la ruta de acceso de renderización crítica. y renderizar cómo bloquear CSS y obtener sugerencias para desbloquear la renderización y mejorar la publicación de CSS.Recomendaciones
Si los recursos CSS externos son pequeños, puedes insertarlos directamente en el documento HTML, que se denomina “en línea”. De esta manera, intercalar código CSS pequeño permite que el navegador continúe con la renderización de la página. Ten en cuenta que, si el archivo CSS es grande y está completamente integrado, es posible que PageSpeed Insights advierta que la mitad superior de la página es demasiado grande en la sección Priorizar el contenido visible. En el caso de un archivo CSS grande, tendrás que identificar e integrar el código CSS necesario para renderizar el contenido de la mitad superior de la página y aplazar la carga de los estilos restantes hasta después del contenido de la mitad superior de la página.- Ejemplo de intercalación de un pequeño archivo CSS
- No intercalar URI de datos grandes
- No insertes atributos CSS
Ejemplo de cómo intercalar un archivo CSS pequeño
Si el documento HTML se ve así:
<html>
<head>
<link rel="stylesheet" href="small.css">
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
Y el recurso small.css es así:
.yellow {background-color: yellow;}
.blue {color: blue;}
.big { font-size: 8em; }
.bold { font-weight: bold; }
Luego, puedes intercalar CSS crítica de la siguiente manera:
<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>
Esta transformación, incluida la determinación de CSS crítico o no crítico, incorporación de CSS crítica y carga diferida de CSS no crítico pueden crearse automáticamente Módulos de PageSpeed Optimization para nginx, apache, IIS, ATS y Open Lightspeed cuando habilites la función prioritize_critical_css.
Consulta también la loadCSS para ayudar a cargar CSS de forma asíncrona, que puede funcionar con Fundamentales, una herramienta para extraer el CSS crítico de una página web.
Los estilos críticos necesarios para aplicar estilo al contenido de la mitad superior de la página se intercalan y se aplican al documento de inmediato. El archivo small.css completo se carga después de la pintura inicial de la página. Sus estilos se aplican a la página una vez que termina de cargarse, sin bloquear la representación inicial del contenido crítico.
Ten en cuenta que la plataforma web pronto admitirá la carga de hojas de estilo de una manera que no bloquee la renderización, sin tener que recurrir a JavaScript, mediante importaciones de HTML.
No intercalar URI de datos grandes
Ten cuidado cuando integres URI de datos en archivos CSS. Si bien el uso selectivo de URI de datos pequeños en tu CSS puede tener sentido, la alineación Los URI de datos grandes pueden aumentar el tamaño de la CSS de la mitad superior de la página, lo que ralentiza el tiempo de renderización de la página.
No intercalar atributos CSS
Cómo intercalar atributos CSS en elementos HTML
(p.ej., <p style=...>) deben evitarse siempre que sea posible, ya que suelen generar una duplicación innecesaria del código.
Además, el código CSS intercalado en los elementos HTML se bloquea de forma predeterminada con
Política de Seguridad del Contenido (CSP).
Comentarios
¿Te sirvió esta página?