Puntos clave
Técnicas CSS críticas que permiten que el contenido de la mitad superior de la página se cargue instantáneamente. Entregue contenido visible a sus usuarios en milisegundos.
¿Qué es CSS crítico?
CSS crítico es la determinación de las reglas CSS requeridas para la primera área de una página web que el usuario ve cuando abre la página, llamada arriba de la página y presentada en línea en HTML. Esta técnica permite que el navegador pinte la página sin esperar archivos CSS externos.
Solución del problema de bloqueo de renderizado
Los navegadores, de forma predeterminada, esperan a que se pinte la página hasta que se hayan descargado todos los archivos CSS. Esto provoca graves retrasos, especialmente en proyectos con archivos CSS de gran tamaño. Eliminamos esta espera con la técnica CSS crítica:
- Determine las reglas CSS necesarias para la parte superior de la página.
- Agregue estas reglas en línea en la parte
del HTML. - Cree el archivo CSS principal de forma asíncrona con
media="print" onload="this.media='all'"install it.
Las herramientas
Critical (paquete npm), Penthouse y PurgeCSS lo ayudan a automatizar este proceso. Puedes integrarlo en tu canal Laravel Mix o Vite.
Beneficios
- Disminución del 40 % al 60 % en el tiempo de la primera pintura de contenido (FCP).
- El usuario siente instantáneamente que el sitio se está cargando.
- Aumento de 10 a 20 puntos en las puntuaciones de rendimiento de Lighthouse.
Meta Ads y Rendimiento
Detén la fuga de inversión con tracking server CAPI y escalado medible de ROAS
