Optimizar la entrega de CSS

Esta regla se activa cuando PageSpeed Insights detecta que en una página se incluyen hojas de estilo externas que bloquean el renderizado, lo que aumenta el tiempo que tarda la página en renderizarse por primera vez.

Descripción

Para renderizar el contenido de las páginas, los navegadores deben procesar primero toda la información sobre el estilo y el diseño de dichas páginas. Por tanto, no pueden empezar a renderizar el contenido hasta que descarguen y procesen todas las hojas de estilo externas, lo que puede requerir varios ciclos de ida y vuelta y, en consecuencia, retrasar el primer renderizado. Para obtener más información sobre la ruta de renderizado crítica, consulta el artículo Construcción, diseño y pintura del árbol de representación. Si quieres recibir consejos sobre cómo desbloquear el renderizado y mejorar la entrega de CSS, consulta el artículo CSS que bloquea el renderizado.

Recomendaciones

Si los recursos CSS externos son pequeños, puedes insertarlos directamente en el documento HTML. De este modo, los navegadores pueden mostrar directamente la página en cuestión. Ten en cuenta que si el archivo CSS es grande, es posible que al insertar todo el código CSS, PageSpeed Insights te avise de que la parte superior de la página es demasiado extensa con la regla Prioriza el contenido visible. En este caso, tienes 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 retrasar la carga de los otros estilos hasta que el contenido de la mitad superior 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>
    <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>

Estos cambios (decidir qué parte del código CSS es importante y cuál no, insertar el código importante y retrasar la carga del resto) pueden hacerse automáticamente con los módulos de optimización de PageSpeed de nginx, Apache, IIS, ATS y Open Lightspeed, si se habilita el filtro prioritize_critical_css.

Echa un vistazo también a la función loadCSS, con la que se carga fácilmente el código CSS de forma asíncrona y que puede funcionar con Critical, una herramienta con la que se extrae el código CSS importante de las páginas web.

En el ejemplo, los estilos que se necesitan para aplicar formato al contenido de la mitad superior de la página se insertan en el código y se aplican al documento de inmediato. El archivo small.css, por su parte, se carga después del renderizado inicial de la página; de este modo, los estilos que incluye se aplican una vez que la página haya terminado de cargarse y no bloquean el renderizado inicial del contenido importante.

Ten en cuenta que, mediante la herramienta de importaciones de HTML, en la plataforma web pronto podrán cargarse hojas de estilo de manera que no bloqueen el renderizado, por lo que ya no será necesario cargarlas con JavaScript.

No insertes URIs de datos de tamaño grande

Ten cuidado al insertar URIs de datos en archivos CSS. Aunque en ocasiones usar URIs de manera selectiva en tu código CSS puede resultar útil, si insertas URIs de datos grandes, es posible que el tamaño del código CSS de la mitad superior de las página aumente, lo que ralentizaría el renderizado.

No insertes atributos CSS

Siempre que puedas, evita insertar atributos CSS en elementos HTML (por ejemplo, <p style=...>) ya que, al hacerlo, a menudo se duplica código de manera innecesaria. Además, la política de seguridad de contenido (CSP) bloquea estos atributos de manera predeterminada.