{"id":44161,"date":"2021-10-04T11:47:51","date_gmt":"2021-10-04T09:47:51","guid":{"rendered":"https:\/\/kinsta.com\/?p=102244"},"modified":"2023-08-23T11:10:09","modified_gmt":"2023-08-23T09:10:09","slug":"optimizar-css","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/optimizar-css\/","title":{"rendered":"C\u00f3mo Optimizar el CSS para Sacar el M\u00e1ximo Rendimiento del Sitio"},"content":{"rendered":"

Incluso en 2021, el rendimiento de la web sigue siendo un problema. Seg\u00fan HTTP Archive, la p\u00e1gina media requiere una descarga de 2 MB<\/a>, realiza m\u00e1s de 60 peticiones HTTP y puede tardar 18 segundos<\/a> en cargarse completamente en un dispositivo m\u00f3vil. Las hojas de estilo suponen 60 kB repartidos en siete peticiones, por lo que no suelen ser una prioridad cuando se intenta solucionar los problemas de rendimiento.<\/p>\n

Sin embargo, el CSS s\u00ed tiene un efecto, por m\u00ednimo que parezca. Una vez que hayas abordado tu JavaScript<\/a>, aprender a optimizar el CSS correctamente deber\u00eda ser la siguiente prioridad.<\/p>\n

\u00a1Vamos a sumergirnos en el tema!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

C\u00f3mo afecta el CSS al rendimiento de la p\u00e1gina<\/h2>\n

El CSS parece inocente, pero puede requerir un procesamiento pesado.<\/p>\n

El CSS bloquea el renderizado<\/h3>\n

Cuando tu navegador encuentra una etiqueta <link><\/code>, detiene otras descargas y procesamientos del navegador mientras obtiene y analiza el archivo CSS.<\/p>\n

JavaScript tambi\u00e9n puede bloquear el renderizado del navegador<\/a>, pero el procesamiento as\u00edncrono es posible con:<\/span><\/p>\n

    \n
  1. El atributo async<\/code> para descargar scripts en paralelo, que se ejecutan inmediatamente cuando est\u00e1n listos.<\/li>\n
  2. El atributo defer<\/code> para descargar en paralelo, y luego ejecutar en orden cuando el DOM est\u00e1 listo.<\/li>\n
  3. El atributo type=\"module\"<\/code> para cargar un m\u00f3dulo ES (que se comporta como defer<\/code>).<\/li>\n<\/ol>\n

    Los activos como las im\u00e1genes suelen requerir m\u00e1s ancho de banda, pero existen formatos eficientes<\/a> y pueden cargarse de forma diferida<\/a> (atributo loading=\"lazy\"<\/code>) sin bloquear la renderizaci\u00f3n del navegador.<\/p>\n

    Nada de esto es posible con CSS. El archivo se almacena en la cach\u00e9, por lo que las siguientes cargas de la p\u00e1gina deber\u00edan <\/em>ser m\u00e1s r\u00e1pidas, pero el proceso de bloqueo de la renderizaci\u00f3n permanece.<\/p>\n\n

    Los archivos CSS grandes tardan en procesarse<\/h3>\n

    Cuanto m\u00e1s grande sea tu hoja de estilos, m\u00e1s tiempo tardar\u00e1 en descargarse y procesarse en un modelo de objetos CSS (CSSOM), que el navegador y las API de JavaScript pueden utilizar para mostrar la p\u00e1gina. Aunque las hojas de estilo CSS son m\u00e1s peque\u00f1as que la mayor\u00eda de los archivos de un sitio web, no son inmunes a la regla de \u00abm\u00e1s peque\u00f1o es mejor\u00bb.<\/p>\n

    Los archivos CSS crecen<\/h3>\n

    Puede ser dif\u00edcil identificar los estilos que ya no se utilizan, y eliminar los equivocados puede causar estragos en un sitio. Los desarrolladores suelen optar por el enfoque m\u00e1s seguro de \u00abconservar todo\u00bb. Los estilos de p\u00e1gina<\/a>, los componentes<\/a> y los widgets que ya no se utilizan siguen existiendo en CSS. \u00bfEl resultado? El tama\u00f1o del archivo, la complejidad y el esfuerzo de mantenimiento aumentan exponencialmente, haciendo que los desarrolladores sean cada vez menos propensos a eliminar el c\u00f3digo redundante.<\/p>\n

    Las hojas de estilo pueden hacer referencia a otros activos<\/h3>\n

    El CSS puede hacer referencia a otras hojas de estilo utilizando reglas @import. Estas importaciones bloquean el procesamiento de la hoja de estilo actual y cargan otros archivos CSS en serie<\/strong>.<\/p>\n

    Tambi\u00e9n se pueden referenciar otros activos, como fuentes e im\u00e1genes. El navegador intentar\u00e1 optimizar las descargas, pero en caso de duda, las obtendr\u00e1 inmediatamente. Los archivos codificados en base64 que se encuentran dentro de la p\u00e1gina a\u00fan requieren un mayor procesamiento.<\/p>\n

    Renderizaci\u00f3n de efectos CSS<\/h3>\n

    Los navegadores tienen tres fases de representaci\u00f3n<\/a>:<\/p>\n

      \n
    1. La fase de maquetaci\u00f3n <\/strong>(o reflujo<\/strong>) calcula las dimensiones de cada elemento y c\u00f3mo afecta al tama\u00f1o o posicionamiento de los elementos que lo rodean.<\/li>\n
    2. La fase de pintura <\/strong>dibuja las partes visuales de cada elemento en capas separadas: texto, colores, im\u00e1genes, bordes, sombras, etc.<\/li>\n
    3. El compuesto <\/strong>dibuja cada capa en la p\u00e1gina en el orden correcto seg\u00fan los contextos de apilamiento, posicionamiento, \u00edndices z, etc.<\/li>\n<\/ol>\n

      Si no tienes cuidado, los cambios de propiedades CSS y las animaciones pueden hacer que las tres fases se vuelvan a renderizar. Algunas propiedades, como las sombras y los degradados, tambi\u00e9n son computacionalmente m\u00e1s caras que los colores de los bloques y los m\u00e1rgenes.<\/p>\n

      Herramientas de an\u00e1lisis del rendimiento de CSS<\/h2>\n

      Admitir que tienes un problema de rendimiento de CSS es el primer paso en el camino de la recuperaci\u00f3n. Encontrar y solucionar las causas es otra cuesti\u00f3n.<\/p>\n

      Las siguientes herramientas y servicios (no clasificados en ning\u00fan orden) pueden ayudarte a identificar los cuellos de botella en tu c\u00f3digo.<\/p>\n

      1. DevTools Network Panel<\/h3>\n

      Los especialistas en rendimiento web pasan mucho tiempo en DevTools<\/a> y en el panel de Network <\/strong>en particular. DevTools es nativo en la mayor\u00eda de los navegadores modernos<\/a>, aunque en nuestros ejemplos utilizaremos Google Chrome.<\/p>\n

      DevTools puede abrirse desde el men\u00fa del navegador, normalmente en M\u00e1s herramientas <\/strong>> Herramientas de desarrollo<\/strong>, o mediante los atajos de teclado Ctrl | Cmd + Shift + I <\/strong>o F12<\/strong>.<\/p>\n

      Cambia a la pesta\u00f1a Network <\/strong>y aseg\u00farate de que la opci\u00f3n Desactivar la cach\u00e9 <\/strong>est\u00e1 marcada para evitar que los archivos en cach\u00e9 afecten al informe. Tambi\u00e9n puedes cambiar la opci\u00f3n de throttling para simular redes m\u00f3viles m\u00e1s lentas.<\/p>\n

      Actualiza la p\u00e1gina para ver el gr\u00e1fico de cascada de descarga y procesamiento:<\/p>\n

      \"Panel<\/a>
      Panel de DevTools Network.<\/figcaption><\/figure>\n

      Cualquier barra larga es motivo de preocupaci\u00f3n, pero debes tener especial cuidado con las barras largas bloqueadas\/estancadas (mostradas en blanco). En este ejemplo, la fila resaltada y todas las filas siguientes no pudieron comenzar a descargarse hasta que se procesaron los archivos CSS y JavaScript que bloquean la representaci\u00f3n en la parte superior de la p\u00e1gina HTML.<\/p>\n

      El cuadro de filtrado le permite <\/strong>mostrar u ocultar activos espec\u00edficos:<\/p>\n