Optimizar el proceso de envío de CSS

Esta regla se activa cuando PageSpeed ​​​​Insights detecta que una página web contiene una hoja de estilo externa que bloquea el procesamiento (que retrasa el tiempo que tarda el contenido en aparecer en la pantalla).

descripción general

Los navegadores bloquean archivos CSS externos hasta que el contenido se muestra en la pantalla. Esto provoca una latencia de red adicional y aumenta la cantidad de tiempo que el contenido se muestra en la pantalla.

sugerencia

Si los recursos CSS externos son pequeños, puede insertarlos directamente en el documento HTML, lo que se denomina "inlining". Al incorporar recursos CSS más pequeños de esta manera, el navegador puede continuar representando la página web. Tenga en cuenta que la incorporación completa de CSS puede hacer que PageSpeed ​​​​Insights pase si el archivo CSS es grande.Priorizar el contenido visibleLe advierte que la parte superior de su página es demasiado grande. Si el archivo CSS es grande, debe identificar e incrustar el CSS necesario para presentar el contenido de la mitad superior de la página y suspender la carga del resto de los estilos hasta que se muestre el contenido de la mitad superior de la página.

• Ejemplo de archivos CSS más pequeños en línea
• No incrustar URI de datos grandes
• No incluir propiedades CSS en línea

Ejemplo de archivos CSS más pequeños en línea

Si el documento HTML se ve así:
 
   
 
 
   
¡Hola Mundo!
   
 

ypequeño.cssLos recursos son los siguientes:

.amarillo {color de fondo: amarillo;}
.azul {color: azul;}
.grande {tamaño de fuente: 8em; }
.bold {peso de fuente: negrita; }

Luego puede insertar CSS crítico de la siguiente manera:

 
   
  .azul{color:azul;}
   
   
 
   
¡Hola Mundo!
   
 

El pequeño.css original no se carga hasta que se carga la página. Pasar todoyLos elementos se insertan en el documento para mantener el orden en el que se aplican las reglas CSS.

No incrustar URI de datos grandes

Tenga cuidado al incrustar URI de datos en archivos CSS. Puede optar por utilizar URI de datos más pequeños en CSS, porque incorporar URI de datos más grandes hará que el CSS de la mitad superior de la página se haga más grande, lo que retrasará el tiempo de representación de la página web.

No incluir propiedades CSS en línea

Debería intentar evitar elementos HTML (por ejemplo,

) propiedades CSS en línea, ya que esto a menudo conduce a la duplicación de código redundante. también,Política de seguridad de contenido(CSP) evita CSS en línea en elementos HTML de forma predeterminada.

 

Salvo que se indique lo contrario, el contenido de esta página tiene licencia bajo laLicencia Creative Commons Atribución 3.0y los ejemplos de código tienen licencia bajo laLicencia Apache 2.0Para más detalles, consulte nuestraPolíticas del sitio.