¿Qué es un CSS crítico y cómo trabajar? (Técnicas para la carga web rápidamente)

El verdadero problema en la vida

¿Alguna vez te has sentido así? Hace clic en un sitio web interesante. Pero lo que es bienvenido es ... pantalla blanca con un ícono suave que parece nunca terminar en segundo lugar, el segundo que esperas ... Hasta el final, ¡perderá paciencia y luego se apagará! Este tipo de irritabilidad es lo que se encuentran sus clientes todos los días y es una "matanza" que se destruye en silencio la tasa de conversión y su rango de SEO. Que quizás no sepa

Síntomas del "sitio web de descarga lenta", especialmente el primero visto (por encima del pliegue), no solo sobre sentimientos. Pero es un problema técnico llamado "recursos de bloqueo de renderizado" o recursos que bloquearon la visualización de la página web. El cual el factor importante es nuestro archivo CSS pesado, este problema es un asunto urgente que debe resolverse. Puede obtener más información sobre cómo solucionar los recursos de bloqueo de renderizado para agregar páginas a PageSpeed ​​directamente.

Solicitud de ilustraciones: la imagen del usuario muestra una expresión irritada mientras mira la pantalla del teléfono inteligente que aún es blanco. Solo hay un símbolo de carga en el medio. Transmite la sensación de esperar que el sitio web se descargue demasiado tiempo

¿Por qué ocurrió ese problema?

Para ver claramente la imagen, imagine que el navegador (como Google Chrome) funciona como un personal de entrega muy diligente. Cuando alguien llame a su sitio web, se ejecutará para obtener el archivo HTML (la estructura web) antes. Una vez que leí el comando en HTML, encontró el comando "¡Hey! Antes de mostrar cualquier cosa que tenga que descargar todos los archivos CSS antes!" El archivo CSS es como un manual de vestimenta que dice lo que la Web Color tiene que tener, pero el punto es ... El navegador "detendrá todo" para esperar a que todo el archivo CSS termine primero. Aunque algunos estilos son para el contenido inferior del sitio web que el usuario no ha visto.

El proceso que "debe esperar para terminar antes de continuar". Este es el origen de la palabra bloqueo de renderizado , cuanto más grande y complicado sus archivos CSS. La espera es solo más larga. Haciendo que el usuario mire la pantalla blanca por más tiempo, innecesariamente, a pesar del contenido importante que debe ver primero, solo puede necesitar CSS.

Solicitud de ilustraciones: Las imágenes del diario fácil muestran el proceso del navegador normal: 1. Solicitudes de navegador HTML -> 2. Consulte CSS -> 3. Deje de trabajar (con un símbolo de parada roja) para descargar todos los archivos CSS -> 4.

Si se deja, ¿cómo afectará?

Con vistas al problema de los sitios web de carga lenta porque CSS no es diferente de abrir una hermosa tienda. Pero cerró la puerta de permitir que los clientes ingresen las consecuencias son mucho más intensos de lo esperado.

• Experiencia de usuario (UX) destruida: a nadie le gusta esperar. La investigación muestra que solo 1-3 segundos ralentizan el sitio web, agrega más del 32% de las posibilidades de límites.
• Tasa de conversión. Escala: los clientes frustrados son clientes que no compran cosas. La oportunidad de cerrar la venta, obtener plomo o hacer que las personas hagan clic en botones importantes. Desaparecerá en un abrir y cerrar de ojos con una velocidad más lenta
• Rango de SEO. Drop: Google adjunta una gran importancia a la experiencia del usuario, con los vitales web centrales como uno de los factores de clasificación. Los sitios web lentos tendrán directamente un efecto negativo directo en el valor LCP (pintura contenta más grande). Una de las métricas importantes hace que sus vitales web principales mejoren Y finalmente cayó
• Pérdida de credibilidad: los sitios web lentos reflejan no profesionales. Y causando que los clientes carezcan de confianza para hacer transacciones con usted, puede escapar a los competidores en la web más rápido.

Solicitud de ilustraciones: 2 imágenes de gráficos en comparación La primera barra tiene un icono de ceño en la parte superior. El gráfico cayó con el mensaje de "tasa de conversión" y el otro tiene un icono de sonrisa. El gráfico aumenta con el mensaje "tasa de rebote" para transmitir efectos negativos.

¿Hay alguna solución? ¿Y dónde debería comenzar?

La buena noticia es ... tenemos "autopista" para resolver este problema. Esta técnica se llama "CSS crítico" o "CSS que es absolutamente necesario".

Su principio es muy fácil. En lugar de forzar al navegador a descargar todos los CSS antes de la pantalla, cambiaremos a un nuevo juego por:

1. Buscar y extraer (extraer): encontraremos solo el estilo CSS que se necesita para el contenido "por encima del pliegue".
2. Enterrado en html (en línea): traiga el CSS extraído (que es muy pequeño), coloque en la etiqueta ภายในส่วน ของไฟล์ HTML โดยตรง
3. Cargue el resto más tarde (async/diferir): todos los archivos CSS lo ordenaremos para descargar. "No bloquee la pantalla" (asíncrono) es descargar gradualmente detrás de la página después de que se haya mostrado la página web.

¿Cuál es el resultado? El navegador recibirá un archivo HTML con CSS crítico, incrustado y puede "colorear" o mostrar la primera página web para que los usuarios las vean. ¡Casi de inmediato! El usuario sentirá que su sitio web es rápido, mientras que el otro CSS se carga gradualmente más tarde. Sin perturbar a nadie, esta es una de las técnicas importantes que la revista Smashing le da al corazón de la optimización del rendimiento.

Solicitud de ilustraciones: fácil de entender Explique el concepto de CSS crítico: 1. "Identifique el CSS para el cuadro de texto anterior". 2. Coloque el código CSS para poner en el archivo HTML (en línea). 3. Los archivos CSS restantes se cargan más tarde (carga async).

Ejemplos de lo real que solía tener éxito

Imagine la tienda de decoración del hogar en línea "The Chic Décor". Hay un sitio web muy hermoso. Pero en su lugar, encontró un gran problema, las ventas en teléfonos móviles son mucho más bajas de lo que el objetivo que el equipo descubrió que el puntaje de Google PageSpeed ​​Insights es muy malo, con un LCP (pintura más grande y contentfle) de hasta 4.8 segundos, lo que significa que los clientes tienen que mirar la pantalla blanca durante casi 5 segundos para ver la primera imagen de producto!

Misión de giro: el equipo de desarrollo decidió usar técnicas críticas de CSS. Extraen el CSS necesario para el encabezado, el banner de héroe y los primeros 4 elementos que se muestran en HTML y establecen el archivo CSS principal más tarde.

Resultados tangibles: después de solo una semana, el valor web de LCP disminuyó de 4.8 segundos a solo 1.6 segundos. El usuario siente que la web "más rápida, como una historia diferente", la tasa de bonos en un teléfono móvil se ha reducido en un 25% y, lo más importante, la tasa de conversión ha aumentado en un 12% sin tener que disparar ni siquiera un baht. Este es el poder de centrarse en lo que el usuario ve primero. Lo cual está en línea con la idea de que es muy importante.

Solicitud para ilustraciones: imágenes de comparación de la pantalla/pantalla posterior. Google PageSpeed ​​Insights. La imagen muestra el rendimiento rojo y el alto LCP. La imagen posterior muestra las puntuaciones verdes y los valores de LCP que son significativamente más bajos.

Si quieres seguir, ¿qué hacer? (Se puede usar de inmediato)

CSS crítico no es demasiado difícil. Actualmente, hay muchas herramientas. Intente seguir los siguientes pasos:

Paso 1: Extracción de CSS crítico.
La mejor manera es usar herramientas automáticas. Porque hacerlo usted mismo es una pérdida de tiempo y es muy fácil.

• Herramientas en línea: hay un sitio web que proporciona CSS crítico gratuito. Simplemente coloque su URL, como el generador CSS crítico de Sitelocity.
• Paquetes NPM (para desarrolladores): si usted es un desarrollador, puede usar biblioteca como 'crítica' , que es muy popular y poderosa. Puede funcionar con su sistema de proceso de compilación.
• Plugins CMS (para WordPress/Shopify): la mayoría de las plataformas tienen enchufes de velocidad automáticos que hacen esto, como WP Rocket, Perfmatters (para WordPress), que es la forma más fácil para las personas en general.

Paso 2: Ponlo en su sitio web.

1. Traiga el código CSS que se extrae del primer paso. Ponlo en la etiqueta ที่ส่วน ของหน้าเว็บคุณ
2. Ajuste el comando original de descarga CSS de:
   En su lugar, se vuelve así para dejarlo descargar más tarde:
   

Este nuevo código le dice al navegador que "descarga este archivo con anticipación sin urgente. Y una vez que la carga esté terminada, úsela como hoja de estilo." La etiquetaEs una protección en caso de que los usuarios apaguen a JavaScript. Si necesita expertos, verifique y mejore estas estructuras. La auditoría de optimización de comercio electrónico puede ayudarlo.

Solicitud de ilustraciones: infovic, 3 pasos, CSS crítico, con icono: 1. Generar (usar computadora) 2. Inline (coloque el código en el HTML) 3. Diferir (conjunto de archivos CSS original) como un proceso que es fácil de seguir.

Preguntas que las personas tienden a preguntarse y las respuestas que se limpian

P: Hacer esto, ¿será más grande nuestro archivo HTML? ¿Hay algún efecto negativo?
Respuesta: Sí, el archivo HTML será un poco más grande. Pero este es un intercambio que "gran valor". Los beneficios del usuario ven la página web para mostrar de inmediato. Más valor que el tamaño del archivo HTML que solo ha aumentado un poco la experiencia general del usuario será enorme. Cual es nuestro objetivo principal

Pregunta: ¿Necesitamos crear un CSS crítico separado para cada página?
Respuesta: En la teoría, lo mejor es "sí" porque cada plantilla (primera página, página de producto, página de blog) con diseño y por encima del estilo de pliegue. Pero al principio puede centrarse en las páginas importantes que tienen el tráfico más alto primero, como la primera página y la página de destino principal. La mayoría de las herramientas automáticas pueden ayudar a crear un CSS.

Pregunta: Si hay una edición del diseño web ¿Cómo cuidarlo?
Respuesta: Este es el principal desafío. Cada vez que cambia el diseño en el pliegue anterior, "siempre debe" crear un nuevo CSS crítico. Esta es la razón por la cual el proceso de construcción automatizado es para desarrolladores. O el uso de enchufes confiables para los usuarios de CMS como el método más recomendado porque ayudará a reinterpretarse cada vez que hay un cambio hace que la atención sea mucho más fácil y también ayuda a promover las pautas de diseño web sostenibles también

PREPRESIÓN PARA ILUSTRACIONES: Las imágenes de la persona se sientan seriamente pensando frente a la computadora. Con un signo de interrogación (?) Flotando en los medios de comunicación sobre tener una pregunta que necesita una respuesta clara

Resumen para ser fácil de entender + quiero intentar hacer

Critical CSS no es solo una técnica para los programadores, sino el "corazón" de crear un sitio web que proporcione la mejor experiencia para los usuarios. Es una forma de cambiar la forma de pensar de "obligado a esperar todo" como "entregar lo más importante primero". Hacer que el usuario vea el contenido que desea en un segundo es la diferencia entre "pérdida de clientes" y "crear clientes regulares"

No dejes que la pantalla blanca y aburrida esperen más para destruir tu negocio, es hora de hacerlo. Intente usar varias herramientas. Recomendado para consultar su sitio web y comenzar a mejorar a partir de hoy en día la inversión es efectiva hoy. Es construir una base sólida para el crecimiento de la conversión y el SEO en el futuro

Su sitio web ... ¿listo para ser más rápido? ¡Hazlo de inmediato y definitivamente te sorprenderá los resultados!

Información de la solicitud: la imagen del cohete se apresura rápidamente al cielo. En el cohete, está la palabra "velocidad de página" y "conversión" como inspiración y aliento para que los lectores actúen.

‍