Que es css critico

¿Qué es CSS crítico? ¡Genéralo!

¿Qué es CSS crítico?

Los archivos de hojas de estilo en cascada (CSS crítico) son la prioridad de carga para la mayoría de los navegadores web modernos. La mayoría de los sitios web tienen varios archivos CSS que el navegador debe descargar y analizar antes de que pueda comenzar a representar o pintar la página web. Junto con los scripts JS, esto hace que CSS sea uno de los recursos de bloqueo de renderización más comunes y la razón principal de un sitio web lento. Esto hace que sea crucial identificar estilos CSS críticos que se pueden utilizar para representar la mayor parte del contenido de la página web. La carga de estos archivos CSS de forma asíncrona (junto con sus archivos JavaScript) permite que el navegador comience a mostrar contenido más rápido, pero debe tener  algo allí para que los usuarios lo vean mientras se cargan sus archivos CSS.

La primera parte de la página web que ven los usuarios es el contenido de la mitad superior de la página (o del desplazamiento): el área visible total de una página web que un usuario ve en la primera visita. CSS crítico es el estilo necesario para mostrar solo este contenido crítico. Identificar el CSS crítico e incluirlo en la etiqueta <head> garantiza que el usuario pueda participar mientras el resto del sitio web y sus archivos CSS se cargan en segundo plano.

Mejora de la velocidad percibida

La navegación web moderna tiene que ver con las primeras impresiones. El índice de referencia PageSpeed ​​Insights de Google declara que un sitio web es lento si la reproducción de la primera pintura con contenido (FCP) es superior a 3 segundos. Por el contrario, un FCP rápido es de 1 segundo o menos. Como tal, ahora más que nunca, es vital centrarse en el rendimiento de la página tanto como en el contenido. Incluso un sitio web inflado puede atraer a una audiencia relativamente mayor si prioriza primero el contenido visible y da una mejor primera impresión en términos de velocidad y capacidad de respuesta.

Tamaños de ventana gráfica

Sin embargo, se vuelve un poco más complicado porque sus usuarios usarán todo tipo de dispositivos de diferentes tamaños, cada uno con diferentes tamaños de ventana. El tamaño de una ventana gráfica es ligeramente diferente de la cantidad de píxeles disponibles en la pantalla de su dispositivo. El tamaño de la ventana gráfica es como una resolución de pantalla «virtual», que a menudo es menor que la cantidad de píxeles disponibles para asegurarse de que el texto en su pantalla no sea demasiado pequeño para leerlo. Es importante generar CSS crítico para algunos tamaños de ventana gráfica porque si simplemente generó su CSS crítico para una ventana gráfica de tamaño de escritorio, es posible que sus usuarios móviles no vean sus estilos de respuesta en el contenido de la mitad superior de la página mientras la página aún se está cargando.

¿Por qué es importante incluir CSS crítico?

Insertar CSS crítico significa identificar el CSS crítico e incluirlo en una etiqueta <style> dentro de la sección <head> de la página web. Identificar e incorporar CSS crítico es un paso clave para mejorar el rendimiento de una página web. También es uno de los métodos básicos para resolver el mensaje de error «eliminar los recursos que bloquean el procesamiento» en las herramientas comunes de evaluación comparativa de rendimiento en línea, como PageSpeed ​​Insights y WebPageTest. Cargar el contenido crítico dentro del buen umbral (menos de 1) generalmente se traduce en una mayor participación del usuario y tasas de conversión.

Cuándo insertar CSS crítico

Incluir todos los CSS críticos puede parecer la mejor idea, pero aquí es donde entran en juego los estándares web. El límite de tamaño para el primer paquete del Protocolo de control de transmisión (TCP) es de 14,6 KB. Como regla general, la primera solicitud del navegador debe devolverse con los datos más importantes. Para una página web, esto significa que todo el código HTML, incluido el CSS crítico en línea, debe ser menor que el límite de tamaño de 14,6 KB después de la compresión gzip, deflate o brotli. Esto le proporciona aproximadamente 70 KB (para gzip) u 85 KB (para brotli) de HTML sin procesar, según su contenido. Si bien algunos desarrolladores de frontend prefieren minimizar solo los archivos CSS para mejorar el rendimiento, debe entenderse que, dado que tanto el CSS crítico en línea como el archivo CSS externo pueden cargarse juntos.

La buena noticia es que no necesita insertar CSS crítico para todo su sitio web. Una vez que el usuario ha visitado su página de destino (y se cargó rápidamente porque incluyó su CSS crítico), habrá descargado y almacenado en caché sus archivos CSS externos en su navegador (está utilizando el almacenamiento en caché del navegador, ¿verdad?) El almacenamiento en caché en navegadores es la habilidad de un navegador web para almacenar archivos en tu computadora y luego cargar esos archivos de ahí mismo la próxima vez que visitas esa página. Cada página subsiguiente que visitan ya no necesita CSS crítico en línea porque ya está toda descargada. Por lo tanto, tiene sentido insertar solo CSS crítico en sus páginas de destino más importantes y dejar la caché del navegador para manejar sus otras páginas.

Cómo generar CSS crítico

Identificar CSS crítico parece una tarea abrumadora. Leer cientos o miles de líneas de código CSS lleva mucho tiempo. Afortunadamente, existen numerosas herramientas gratuitas para automatizar el proceso, siendo UnusedCSS una de ellas. UnusedCSS tiene el beneficio adicional de generar el CSS crítico para múltiples tamaños de ventana gráfica.

Puede mejorar el rendimiento de la página de destino de su sitio web (o también de cualquier otra página) en cuatro sencillos pasos utilizando la nueva función de páginas de destino en UnusedCSS:

  1. Navegue a su panel de control UnusedCSS y haga clic en el botón «Páginas de destino» en la esquina superior derecha de su pantalla:Primer paso de la función de páginas de destino en UnusedCSS
  2. En la pantalla Páginas de destino, haga clic en el botón «Agregar una nueva página de destino» en la sección superior izquierda.
  3. En la pantalla Agregar una nueva página de destino, tiene dos secciones:Tercer paso de la nueva función de páginas de destino en UnusedCSS

A) Configurar página de destino

      • Nombre de la página de destino: introduzca un nombre personalizado para su página de destino. Esta es una identificación única para la página de destino. Esto se puede editar más tarde.
      • URL de la página: la URL de su página de destino va aquí. Esto permite que UnusedCSS obtenga la página de destino de su sitio web para su procesamiento.

B) Tamaños de ventana gráfica (consulte Tamaños de ventana gráfica)

      • Usar tamaños de vista común: este botón crea tres tamaños de vista estándar preestablecidos para computadora portátil (1366×768), iPhone 11 (414×896) y 1080p (1920×1080). También puede editarlos.
      • Alternativamente, también puede completar el nombre del dispositivo manualmente con el ancho y alto de la ventana gráfica en píxeles. Puede agregar hasta tres ventanas gráficas para generar CSS crítico en la cuenta gratuita. Las cuentas pagas pueden agregar más.

4. Una vez que haya completado todas las opciones requeridas, haga clic en el botón Guardar.

Ahora debería estar en la página Critical CSS. Espere unos momentos mientras UnusedCSS genera su CSS crítico en línea:

Generando css critico con UnusedCSS

El CSS crítico generado debe pegarse en la sección <head> de su documento HTML. Asegúrese de reemplazar cualquier CSS crítico generado previamente.

Dado que todos los demás archivos CSS deben cargarse de forma asincrónica, recomendamos utilizar una herramienta como loadCSS para hacerlo de forma compatible con el navegador. Para copiar y pegar rápidamente para incluir loadCSS, haga clic en «¿Qué debo hacer con mis resultados?». Siga las instrucciones aquí para configurar la carga asincrónica de sus archivos CSS externos.

Los cuatro pasos anteriores describen un método simple para mejorar el rendimiento percibido de sus páginas de destino. También puede optar por mejorar el rendimiento de otras páginas de su sitio web.

Generar e insertar CSS crítico es una característica útil para mejorar el rendimiento de la mayoría de los sitios web, especialmente las páginas de destino. La nueva función de página de destino de UnusedCSS le permite generar CSS crítico automáticamente mediante cuatro sencillos pasos. Las opciones de la cuenta son gratuitas (hasta 3 páginas de destino en total, con 3 tamaños de ventana gráfica), básicas (hasta 8 páginas de destino por sitio, con 8 tamaños de ventana gráfica) y premium (hasta 40 páginas de destino por sitio, con 16 tamaños de ventana gráfica).

Si desea ver la nueva función de páginas de destino de UnusedCSS en acción, regístrese para obtener una cuenta gratuita y comience hoy mismo.

 

Contenido Relacionado:

 

Speed Index. Indice De Velocidad De Página
Servicios de SEO En La Página Para Conducir Tráfico Valioso
Precargue Los Activos Críticos y Mejore La Velocidad De Carga
Páginas En Cache Optimizan El Rendimiento Del Sitio
Optimice La Página De Inicio Para Convertir Visitas En Clientes
Beneficios De Las Aplicaciones Web Progresivas
Elementos Seo On Page Que Clasifican.
Cómo Eliminar CSS No Usado
Importancia De Clasificar En Los SERPs
Optimice La velocidad De Carga Con Lighthouse
Preguntas De Posicionamiento SEO
Errores De Interlinking

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

This function has been disabled for Blog de Marketing.