Cómo optimizar la entrega de CSS en WordPress
Si está aquí, es probable que haya recibido este aviso en la prueba PageSpeed Insights de Google :
Si bien puede ser difícil eliminar todos los archivos que bloquean el procesamiento, no es tan difícil con las herramientas adecuadas.
En esta guía, le mostraré tres formas de acelerar su sitio con la entrega de CSS optimizada. Hay opciones tanto para los principiantes como para los desarrolladores de WordPress incluidos aquí.
Comencemos desde arriba: ¿qué significa exactamente optimizar la entrega de CSS en su sitio de WordPress?
¿Qué significa "optimizar la entrega de CSS"?
Permítanme ser muy claro sobre lo que quiero decir primero.
Los archivos CSS se utilizan para diseñar páginas web. Cada tema de WordPress carga un archivo style.css y es probable que tenga un puñado de hojas de estilo adicionales (archivos CSS) agregadas por complementos. Por ejemplo, si tiene un complemento que agrega un nuevo widget, deberá cargar otra hoja de estilo para darle estilo a ese widget.
Todos los archivos CSS se cargan antes de que se procese su sitio.
Esto significa que los visitantes verán una pantalla en blanco hasta entonces. Ahora aquí está la cosa …
La mayor parte del CSS cargado no es necesario para cualquier página en la que se encuentre el visitante, e incluso se necesita menos para lo que pueden ver de inmediato. Por ejemplo, ¿por qué hacer que esperen mientras cargan estilos para el pie de página? Probablemente pasarán al menos unos segundos antes de que lo vean (si es que alguna vez lo hacen).
Al aplazar nuestros archivos CSS o cargarlos de forma asincrónica, podemos permitir que el sitio se muestre en el navegador del visitante antes de que las hojas de estilo terminen de cargarse.
En esta guía, compartiré tres enfoques diferentes para diferir sus hojas de estilo y optimizar la entrega de CSS.
Rutas de renderización críticas optimizadas en acción
Si visita la página de inicio de Compete Themes, vigile el indicador de carga en la pestaña del navegador mientras se carga el sitio. Notarás que después de que el sitio sea visible y parezca estar cargado, el indicador de carga sigue girando por un momento más.
Ese es un ejemplo de cómo se ve la entrega de CSS optimizada en la práctica.
Si desea ver un ejemplo de una ruta de renderización crítica altamente optimizada, visite Amazon. El sitio completo no se carga a la vez. En cambio, en el transcurso de unos segundos, verá aparecer diferentes elementos a lo largo de la página gracias a la ruta de representación cuidadosamente optimizada.
1 cohete WP
Utilizo el complemento WP Rocket aquí en Compete Themes y lo recomiendo antes que todas las demás soluciones para la optimización de la ruta de renderización crítica.
Optimizar su entrega de CSS con WP Rocket realmente no podría ser más fácil. En el menú Optimización de archivos, hay una casilla de verificación para activar esta función.
Una vez marcado, WP Rocket aplazará automáticamente todas sus hojas de estilo para que no se carguen hasta que el sitio aparezca en el navegador del visitante. Ahora, si se aplazara todo el CSS, su sitio se vería terrible hasta que se cargara, y los desarrolladores de WP Rocket han abordado esto elegantemente con su complemento.
Cuando activa esta opción, WP Rocket encontrará automáticamente el CSS necesario para diseñar las partes de su sitio que los visitantes ven en el momento en que se carga, y ese código se agrega en línea al documento.
En otras palabras, su sitio se muestra más rápido en el navegador y parece estar completamente cargado, mientras que el CSS diferido se carga durante el siguiente o dos segundos.
En mi opinión, esta es, con mucho, la mejor solución para optimizar la entrega de CSS con WordPress.
WP Rocket es un complemento premium, pero si los tiempos de carga más rápidos le permitirán obtener más ingresos de su sitio, definitivamente consideraría obtenerlo para su sitio. Tengo un vistazo mucho más detallado a WP Rocket que puedes leer si quieres aprender más. De lo contrario, puede consultar su sitio aquí.
2 Autoptimizar
El segundo enfoque que recomendaría es el complemento Autoptimize.
Este complemento de rendimiento rico en funciones proporciona algunos enfoques para optimizar la entrega de CSS. La opción más simple es simplemente incorporar todo el CSS. Esto tomará todo el CSS que se encuentra en sus hojas de estilo y lo agregará directamente al documento de la página para que no se carguen hojas de estilo.
Para encontrar esta opción, debe hacer clic en el botón Mostrar configuración avanzada en la parte superior.
A continuación, verá la opción de insertar todo el CSS.
Si bien esta opción puede mejorar el rendimiento, si ha agregado demasiado CSS al documento de la página, en realidad puede ralentizar su sitio. Puede valer la pena experimentar con él.
De lo contrario, un buen enfoque es habilitar la opción de Inline y Aplazar CSS en su lugar. Esto aplazará todas las hojas de estilo y solo insertará el CSS crítico. Sin embargo, no encontrará automáticamente el CSS crítico para usted, como WP Rocket.
Entonces, ¿cómo se obtiene el CSS crítico de su sitio? Incluso para un desarrollador de WP experimentado, esto puede ser una especie de rasca la cabeza.
Si bien no he probado la confiabilidad de esta herramienta, esta herramienta gratuita Critical Path CSS Generator sería un enfoque viable. Ingrese la URL de su sitio y le devolverá el CSS que absolutamente necesita cargar.
Luego puede copiar y pegar ese código en el cuadro CSS de ruta crítica en Autoptimize.
Si utiliza este enfoque, es posible que deba agregar CSS adicional para diferentes páginas de su sitio, y es posible que deba conocer muy bien el CSS de su tema para garantizar un estilo coherente.
Otro enfoque
Hay un complemento llamado Autoptimize criticcss.com power-up. Es bastante complicado, pero este complemento adicional le permitirá generar automáticamente el CSS crítico de su sitio utilizando el servicio criticcss.com.
Deberá registrarse con CriticalCSS para obtener una cuenta paga para usar esta opción.
3 Acelerar
Esta última opción es muy rápida y será sencilla de implementar para un desarrollador de WordPress.
Speed Up es un complemento liviano que le permite aplazar cualquier hoja de estilo no crítica.
Si bien esto no optimizará completamente la entrega de CSS, ayudará.
Digamos que su tema agrega una hoja de estilo y luego hay cinco hojas de estilo más agregadas por complementos. Si solo es fundamental cargar la hoja de estilo del tema antes de mostrar el sitio, puede aplazar las otras cinco.
Acelerar le brinda un filtro simple que puede agregar al archivo functions.php de un tema secundario (o un complemento) para diferir las hojas de estilo que desee. Todo lo que necesita son los identificadores de cada hoja de estilo que se está cargando. Aquí puede encontrar algunas funciones simples para generar los identificadores de todas las hojas de estilo registradas en su sitio.
Nuevamente, esto será rápido y fácil para un desarrollador, pero no recomendaría esta solución si no escribe código.
Conclusión
Espero que hayas aprendido un par de cosas sobre la optimización del rendimiento de WordPress en esta publicación.
Si bien cada una de las tres soluciones anteriores puede funcionar bien, debo dar un saludo final al complemento WP Rocket. Como blogger y desarrollador de temas de WordPress, me resulta muy fácil y sencillo trabajar con él.
Si desea más consejos sobre cómo acelerar su sitio, es posible que le guste esta guía sobre optimización de imágenes o mi revisión de WP Engine en la que se basa Compete Themes para tiempos de carga rápidos.