Optimizar el CSS crítico de su sitio WordPress con LWSOptimize

Procédure

El CSS crítico permite mostrar más rápidamente el contenido visible de tus páginas. Cuando un visitante abre una página, su navegador debe primero descargar diferentes archivos (imágenes, scripts, hojas de estilo CSS, etc.). [PERSON_NAME] son [PERSON_NAME], la visualización puede retrasarse. Con el CSS crítico, los estilos indispensables para la visualización inmediata de la página se cargan con prioridad. El resto de los estilos se carga después, en segundo plano.

¿Por qué utilizarlo?

La activación del CSS crítico puede mejorar la velocidad de visualización de tu sitio, especialmente en móvil o con una conexión a Internet lenta.

Los beneficios más comunes son:

• Visualización más rápida del contenido principal de la página.

• Mejor experiencia de usuario.

• Mejora potencial de indicadores de rendimiento como el LCP (Largest Contentful Paint).

Según la configuración del sitio, la ganancia observada puede alcanzar varios cientos de milisegundos.

Activar el CSS crítico

WordPress no propone, por el momento, optimizar el CSS de las páginas y artículos. [PERSON_NAME], existen decenas de plugins de WordPress diferentes para responder a esta necesidad, entre ellos el plugin LWS Optimize, creado por LWS.

Por defecto, la opción está desactivada en este último porque aumenta el tiempo de generación de la caché, [PERSON_NAME] además si la página carga un gran número de archivos CSS, y puede provocar problemas de visualización en casos raros.
Para activarla, ve al panel de control de LWS Optimize y luego, desde aquí, elige los parámetros Máximo y guarda; [PERSON_NAME] acciones del plugin, incluido el CSS crítico.

[PERSON_NAME] deseas activar solo el CSS crítico, también puedes ir a los ajustes avanzados, en la sección Front-End, donde encontrarás la línea CSS Crítico.

Al marcar la opción, se te pedirá que elijas entre 3 modos de funcionamiento: Auto - local, Auto y Manual. Una vez hecha la elección, guarda tus modificaciones, [PERSON_NAME] del CSS crítico y vaciará la caché actual.

Cada modo tiene un funcionamiento diferente:

• Auto — generación local

Es el modo predeterminado del plugin; el CSS de las páginas se analiza y luego lo procesa el PHP de tu sitio, generando directamente el CSS crítico. Tiene la ventaja de funcionar completamente en local y de ser razonablemente rápido, pero a cambio consume más recursos en el servidor que el otro modo. No obstante, sigue siendo recomendable para la mayoría de los sitios.

Si el rendimiento de tu alojamiento [PERSON_NAME], [PERSON_NAME] provocar ralentizaciones para tus visitantes durante la generación del CSS. [PERSON_NAME], el rendimiento puede degradarse durante el tiempo de la generación.

• Auto — servicio LWS

Este modo utiliza el servicio de generación de CSS crítico de LWS. Algo más lento que hacerlo en local, especialmente si la API de generación está sobrecargada, su principal ventaja es que toda la generación se realiza fuera del servidor, ofreciendo un rendimiento mucho mejor que la generación local. En caso de alta demanda, la generación puede, sin embargo, no estar disponible, por lo que no es tan fiable como en local.

En caso de indisponibilidad temporal del servicio, el plugin cambia automáticamente a la generación local. Además, al realizarse la generación de forma diferente al modo local, esta puede ofrecer mejores resultados según los sitios.

Manual

Este modo está destinado a usuarios avanzados.
Permite introducir manualmente tu propio CSS crítico [ADDRESS] prevista para tal efecto. El CSS añadido se utilizará en todo el sitio.

¿Cuándo se activa el CSS crítico?

En modo automático, el CSS crítico se genera al mismo tiempo que el resto de la caché y de las opciones ([PERSON_NAME]); [PERSON_NAME], las próximas visitas utilizarán la caché generada.

Puntos a tener en cuenta

Algunos elementos pueden perder su formato

Tras la activación, algunos componentes que cargan sus estilos de forma dinámica (carruseles, ventanas modales, popups, etc.) pueden no mostrarse correctamente.

[PERSON_NAME] produce:

1. [PERSON_NAME] modo Auto — servicio LWS.

2. Si el problema persiste, utiliza el modo Manual para añadir los estilos que faltan.

Estilos externos

La generación automática solo tiene en cuenta las hojas de estilo alojadas en tu dominio.

Los estilos cargados desde servicios externos (CDN, Google Fonts, etc.) no se incluyen en el CSS crítico generado automáticamente.

Conclusión

El CSS crítico es una excelente palanca para acelerar la visualización de tus páginas y mejorar la experiencia de tus visitantes 🚀. Al priorizar los estilos esenciales, reduces el tiempo de carga del contenido visible y optimizas potencialmente tus indicadores de rendimiento, [PERSON_NAME] LCP 📈.

Ahora ya sabes cómo: comprender el interés del CSS crítico, activarlo en WordPress con LWS Optimize, elegir entre los modos Auto — generación local, Auto — servicio LWS y Manual, determinar cuándo se vuelve activo y anticipar los puntos de atención relacionados con los componentes dinámicos y los estilos externos 😉.

Aplicando estas buenas prácticas, podrás disfrutar de un sitio más rápido, más fluido y más agradable de navegar para tus usuarios ✨.

Gracias por tu lectura 🙏 No dudes en dejar un comentario sobre el servicio y compartir tu experiencia 🙂.