0
Esta regla se activa cuando PageSpeed Insights detecta que una página incluye hojas de estilo externas que demoran la aparición del formato del contenido.
Información general
Los navegadores bloquean los archivos CSS externos antes de que apliquen formatos al contenido de la pantalla. Esto conlleva latencia de red adicional y aumenta el tiempo de carga del contenido.
Recomendaciones
Si los recursos CSS externos son pequeños, puedes insertarlos directamente en el documento HTML. De este modo, el navegador procede a mostrar la página. Ten en cuenta que, si el archivo CSS es grande, al insertar todo el código CSS, es posible que PageSpeed Insights advierta a través de Prioriza el contenido visible que la mitad superior de la página es demasiado extensa. Si se trata de un archivo CSS grande, tendrás que identificar e insertar en el HTML el código CSS necesario para mostrar el contenido de la mitad superior de la página y aplazar la carga de los otros estilos hasta después de que el contenido principal se haya cargado.
Ejemplo de cómo insertar un archivo CSS pequeño
Si el documento HTML es 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; }
Puedes insertar el código CSS más importante de la siguiente manera:
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<link rel="stylesheet" href="small.css">
El archivo small.css original se carga después de que se haya cargado la página. El orden de aplicación de las reglas CSS se mantiene insertando todos los elementos <style> y <link> en el documento a través de jаvascript.
No insertes URIs de datos de tamaño grande
Ten cuidado al insertar URIs de datos en los archivos CSS. Aunque usar selectivamente URIs de datos de tamaño pequeño en el código CSS puede tener sentido, si insertas URIs de tamaño grande, podría aumentar el tamaño del código CSS de la mitad superior de la página, lo que ralentizaría la carga.
No insertes atributos CSS
Se debe evitar insertar atributos CSS en elementos HTML (como < p style=...>) siempre que sea posible, ya que se produciría una duplicación innecesaria del código. Además, la inserción del CSS en los elementos HTML está bloqueada de manera predeterminada mediante la política de seguridad en el contenido (CSP).
Comentarios