Cómo optimizar la entrega de CSS en WordPress

Si está aquí, probablemente recibió esta notificación en la prueba de Insights de Google PageSpeed:

Aunque puede ser difícil eliminar todos los archivos que bloquean la representación, 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 las noticias y desarrolladores totales de WordPress, incluidos aquí. Comencemos desde arriba, ¿qué significa exactamente optimizar la entrega de CSS en su sitio web de WordPress? ¿Qué significa “optimizar la entrega de CSS”? Déjame estar muy claro a qué me refiero primero.
Los archivos CSS se utilizan para páginas web elegantes. Cada tema de WordPress carga un archivo style.css y probablemente tenga una mano de hojas de estilo adicionales (archivos CSS) agregados por complementos. Por ejemplo, si tiene un complemento que agrega un nuevo widget, deberá cargar otra hoja de estilo para elegir ese widget. Todos los archivos CSS se cargan antes de que su sitio se represente. Esto significa que los visitantes verán una pantalla blanca vacía para entonces. Ahora aquí está la cosa … La mayoría de los CSS cargados no es necesario para ninguna página en la que el visitante sea y es menos necesario para lo que puede ver de inmediato. Por ejemplo, ¿por qué esperas a esperar mientras carga estilos para el sótano? Probablemente tomarán al menos unos segundos hasta que lo vean (si alguna vez lo hacen).
Al posponer nuestros archivos CSS o cargarlos asíncronos, podemos permitir que el sitio aparezca en el navegador del visitante antes de que las hojas de estilo estén terminadas. En esta guía, compartiré tres enfoques diferentes para posponer las hojas de estilo y optimizar la entrega de CSS. Representación crítica optimizada en acción Si visita la página Compete Temas de inicio, observe el indicador de carga en la pestaña del navegador mientras el sitio está cargando. Notará que, después de que el sitio sea visible y parece cargado, el indicador de carga continúa girando por un momento. Este es un ejemplo de cómo se ve la entrega de CSS optimizada en la práctica. Si desea ver un ejemplo de representación crítica extremadamente optimizada, visite Amazon. Todo el sitio no cobra una vez. En contraste, en unos pocos segundos, verá diferentes elementos que aparecen durante la página debido al rango cuidadosamente optimizado. 1. WP Rocket Utilizo el complemento WP Rocket aquí en temas de la competencia y lo recomiendo antes de todas las demás soluciones para la representación crítica.
Haga clic aquí para ver más

La optimización de la entrega de CSS con WP Rocket no podría ser realmente más fácil. En el menú de optimización de archivos, hay una casilla de verificación para activar esta función.
Una vez marcado, WP Rocket posponer automáticamente todas las hojas de estilo para que no estén cargadas hasta que el sitio aparezca en el navegador del visitante. Ahora, si el CSS se pospuso, su sitio se vería horrible hasta que se cargue, y los desarrolladores de cohetes de WP se han acercado a este elegante con su complemento. Al activar esta opción, WP Rocket encontrará automáticamente el CSS necesario para las partes elegantes de su sitio que los visitantes ven cuando su sitio está cargando, y ese código se agrega en línea en el documento. En otras palabras, su sitio parece más rápido en el navegador y parece estar completamente cargado, mientras que el CSS pospuesto se carga en los próximos dos segundos. En mi opinión, esta es, con mucho, la mejor solución para optimizar CSS de entrega con WordPress. WP Rocket es un complemento premium, pero si los tiempos de carga más rápidos le traerán más ingresos de su sitio, ciertamente consideraría obtenerlo para su sitio. Tengo una mirada mucho más detallada al cohete WP que puede leer si desea averiguarlo más. De lo contrario, puede consultar su sitio web aquí. 2. Optimización automática El segundo enfoque que recomendaría es el complemento de autocuración.

Este complemento de complemento de alto rendimiento ofrece algunos enfoques para optimizar la entrega de CSS. La opción más simple es simplemente confiar en todos los CS. Esto se hará cargo de todos los CSS que se encuentran en las hojas de estilo y las 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 de visualización de configuración avanzada en la parte superior.


Luego verá la opción de en línea todos los CS.
Aunque esta opción puede mejorar el rendimiento, si tiene demasiado CSS agregado al documento de la página, en realidad puede ralentizar su sitio. Puede que valga la pena experimentar. De lo contrario, un enfoque correcto es activar la opción en línea y diferir CSS. Esto pospondrá todas las hojas de estilo y solo incluirá 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, este puede ser un tipo de rasguño de cabeza. Aunque no probé esta herramienta para obtener confiabilidad, este generador CSS de parche crítico gratuito sería un enfoque viable. Ingrese la URL de su sitio y devolverá el CSS que necesita cargar. Luego puede copiar y pegar ese código en el cuadro CSS para la ruta crítica de autoaptizado.

Si utiliza este enfoque, es posible que deba agregar CSS adicional para diferentes páginas de su sitio y es posible que necesite conocer el CSS CSS para garantizar un estilo consistente. Otro enfoque es un complemento llamado AutoPtimize CriticalCs.com Power-Up. Está bastante lleno, pero este complemento adicional le permitirá generar automáticamente el CSS crítico de su sitio utilizando el servicio CriticalCSS.com.

Deberá registrarse para CriticalCSS para una cuenta pagada para usar esta opción. 3. Acelerar esta última opción es muy rápida y será fácil de implementar para un desarrollador de WordPress. Speed ​​Up es un complemento fácil que le permite posponer las hojas de estilo que no sean críticas.
Aunque esto no optimizará completamente su entrega de CSS, lo ayudará. Supongamos que su tema agrega una hoja de estilo y luego hay otras cinco hojas de complementos de estilo. Si solo la hoja de estilo del tema es esencial para cargar antes de mostrar el sitio, puede posponer los otros cinco. La velocidad le brinda un filtro simple que puede agregar a las funciones.php de un tema secundario (o un complemento) a posponga las hojas de estilo deseadas. Todo lo que necesitas son las manijas de cada hoja de carga. Puede encontrar algunas funciones simples aquí para mostrar las manijas de todas las hojas de estilo grabadas nuevamente en su sitio, 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 algo o dos sobre la optimización del rendimiento de WordPress en esta publicación. Si bien cada una de las tres soluciones puede funcionar bien, tengo que dar un último llanto al complemento WP Rocket. Tanto como blogger como desarrollador de WordPress, me resulta tan fácil e indoloro trabajar con él.

Si desea más consejos para acelerar su sitio, es posible que le guste esta guía de optimización de imágenes o mi revisión del motor WP que se basa en las tesis de carga rápida.