Entendiendo el CSS de WordPress
Antes de sumergirnos, comprendamos cómo funciona el CSS normal en WordPress.
Cada tema de WordPress consta de style.css que contiene todo el código necesario para diseñar su sitio. Los desarrolladores de temas deben admitir todas las funciones de WordPress, que incluyen publicaciones de blog, comentarios, página de productos, página de membresía, formularios, etc. Otros complementos que instale también pueden agregar hojas de estilo css similares.
Esto puede hacer que los archivos css se hinchen y tengan un tamaño de 200 kb o incluso más.
¿Qué es CSS de ruta crítica?
A medida que crecen sus archivos CSS, su navegador necesita descargar esos archivos grandes, analizarlos y procesarlos. También conocido como bloqueo de procesamiento. También incrementará el primer procesamiento significativo y el primer procesamiento significativo.
Critical Path CSS es el CSS necesario para representar el contenido anterior en cada página web. Como sugiere el nombre, CSS "crítico", que ayuda al navegador a dibujarlo y renderizarlo rápidamente antes de cargar archivos CSS completos.
Por lo general, el css de la ruta crítica está incrustado en el encabezado y el archivo css de origen se carga de forma asíncrona o en el pie de página para facilitar su uso.
¿Por qué es tan importante el CSS de ruta crítica?
Ya debe haber visto una advertencia de herramientas como Google PageSpeed Insights o GTmetrix que dice "optimizar la entrega de css" o "aplazar el css no utilizado".
El CSS crítico no tiene nada que ver con el tiempo de carga de la página. No aumenta/disminuye el tiempo de carga. Pero da una experiencia de usuario mucho mejor. Ayuda a "renderizar" o "colorear" rápidamente una página web.
- Mejora el primer sorteo de contenido (FCP)
- Mejora el primer pago significativo (FMP)
- Elimine el CSS no utilizado (técnicamente no lo elimine, pero priorice el CSS "útil")
Aquí hay dos capturas de pantalla de mi blog con y sin CSS crítico.
Como puede ver en la sección "sin ruta css crítica", tomó casi 5 segundos mostrarle al usuario algo útil en un dispositivo móvil. El navegador debe realizar una solicitud HTTP adicional al archivo css, descargarlo y analizarlo para comenzar a renderizar. Pero cuando se usa CSS crítico, todo el CSS necesario debe estar en línea y el navegador puede comenzar a renderizarse inmediatamente después de cargar el archivo HTML en un segundo o menos.
¿Cómo crear CSS crítico en WordPress?
Hay varias formas de generar CSS crítico en WordPress.
Uso de complementos de almacenamiento en caché
WP Rocket es un complemento de almacenamiento en caché premium que funciona muy bien.
Una de las razones por las que uso WP Rocket en cada sitio es la propia generación crítica de CSS. Generan CSS crítico por separado para la página de inicio, la página de publicaciones, la página de categoría, la página del producto, etc. y lo incrustan. Restaurarán CSS crítico si hay cambios en el tema o la configuración.
Todo se puede hacer con solo tocar un botón.
Otros complementos de almacenamiento en caché que pueden generar CSS crítico
Swift Performance y LiteSpeed (requiere el servidor LiteSpeed/OpenLiteSpeed) son complementos similares que pueden generar CSS crítico. Ambos complementos tienen la nube y el caché completo integrados en sus servidores.
Uso de Autoptimize + Generador de CSS crítico gratuito
Existen herramientas en línea de terceros que brindan CSS importante al ingresar la URL de su sitio. pegasaas es una gran herramienta gratuita.
Aquí está cómo hacerlo:
Paso 1. Vaya a https://pegasaas.com/critical-path-css-generator/ e ingrese su URL. Copie el "CSS de ruta crítica" generado.
Paso 2 En la configuración de optimización automática (habilitar la configuración avanzada), en "Opciones de CSS", marque "CSS en línea y diferido" y pegue el CSS copiado.
Ventajas:
- Es gratis
Contras:
- No hay CSS crítico separado para diferentes tipos de página (por ejemplo, página de inicio, página de publicaciones, página de categoría, página de producto, etc.)
- No reconstruir automáticamente en cambio de tema/configuración
¿Por qué WordPress no puede generar CSS crítico?
Como habrá notado, la creación de una ruta crítica css habilita los servicios externos. Entonces, ¿por qué WordPress no puede generarlo por sí mismo?
La creación de Critical CSS es posible gracias a proyectos de código abierto como Critical (de Google), CriticalCSS o penthouse. Todos estos proyectos están basados en NodeJS, no en PHP. Entonces, necesita instalar NodeJS en su servidor. La mayoría de los proveedores de alojamiento compartido/administrado no lo permiten por varias razones.
