Optimiza la entrega de CSS

Esta regla se activa cuando PageSpeed Insights detecta que una página incluye hojas de estilo externas que bloquean la renderización, lo que retrasa el primer procesamiento.

Descripción general

Antes de que el navegador pueda renderizar contenido, debe procesar toda la información de estilo y diseño de la página actual. Como resultado, el navegador bloqueará la renderización hasta que se descarguen y procesen las hojas de estilo externas, lo que puede requerir varios recorridos y retrasar el tiempo de renderización inicial. Consulta la construcción, el diseño y la pintura del árbol de renderización para obtener más información sobre la ruta de acceso de renderización crítica y sobre CSS de bloqueo de renderización para obtener sugerencias sobre cómo desbloquear la renderización y mejorar la entrega de CSS.

Recomendaciones

Si los recursos externos de CSS son pequeños, puedes insertarlos directamente en el documento HTML. Este proceso se denomina “incorporación”. De esta manera, la intercalación pequeña de CSS permite que el navegador continúe con la renderización de la página. Ten en cuenta que, si el archivo CSS es grande, si se alinea completamente el CSS, es posible que PageSpeed Insights advierta que la parte de la mitad superior de la página es demasiado grande en Prioriza el contenido visible. En el caso de un archivo CSS grande, deberás identificar e intercalar el CSS necesario para renderizar el contenido de la mitad superior de la página y diferir la carga de los estilos restantes hasta después del contenido de la mitad superior de la página.

Ejemplo de cómo intercalar un archivo CSS pequeño

Si el documento HTML tiene el siguiente aspecto: 
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
Y el recurso small.css es como el siguiente: 
  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }
Luego, puedes intercalar el código CSS crítico 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, la intercalación del CSS crítico y la carga diferida de CSS no crítico, se puede realizar automáticamente mediante los módulos de optimización de PageSpeed para nginx, Apache, IIS, ATS y Open Lightspeed, cuando habilitas el filtro prioritize_critical_css.

Consulta también la función loadCSS para ayudar a cargar CSS de forma asíncrona, que puede funcionar con Critical, una herramienta para extraer la CSS crítica 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 small.css completo se carga después de la pintura inicial de la página. Los estilos se aplican a la página una vez que termina de cargarse, sin bloquear la renderización inicial del contenido crítico.

Ten en cuenta que la plataforma web pronto admitirá la carga de hojas de estilo sin bloquear el procesamiento, sin tener que recurrir a JavaScript, mediante las importaciones de HTML.

No intercalas URI de datos grandes

Ten cuidado al intercalar URI de datos en archivos CSS. Si bien el uso selectivo de URIs de datos pequeños en tu CSS puede resultar útil, integrar URI de datos grandes puede hacer que el tamaño de la CSS de la mitad superior de la página sea mayor, lo que ralentizará el tiempo de renderización de la página.

No insertes atributos de CSS

Inserción de atributos de CSS en elementos HTML (p.ej., <p style=...>) siempre que sea posible, ya que esto suele dar lugar a una duplicación innecesaria de código. Además, el CSS intercalado en elementos HTML se bloquea de forma predeterminada con la Política de Seguridad del Contenido (CSP).

Comentarios

¿Te sirvió esta página?