Cómo optimizar fácilmente la entrega de WordPress CSS (2 métodos)

¿Le gustaría optimizar su entrega de WordPress CSS? Los archivos CSS controlan el formato visual y el estilo de su sitio de WordPress. Pero si su código CSS no se entrega de manera óptima, entonces podría ralentizar su sitio web. En este artículo, le mostraremos dos métodos fáciles para optimizar la entrega de WordPress CSS.

Cómo entregar CSS WordPress WordPress Performance Los archivos CSS se utilizan para definir el aspecto visual de su sitio de WordPress. Su tema de WordPress contiene un archivo de hoja de estilo CSS, y algunos de sus complementos también pueden usar hojas de estilo CSS.
CSS es necesario para los sitios web modernos, pero los archivos CSS pueden ralentizar la velocidad y el rendimiento de su sitio dependiendo de cómo estén configurados. Incluso un pequeño retraso en la velocidad del sitio crea una mala experiencia del usuario y puede afectar sus clasificaciones de búsqueda y conversiones, lo que lleva a menos tráfico y ventas.

Una forma en que los archivos CSS pueden ralentizar su sitio es si se puede cargar antes de que se pueda mostrar la página. Esto significa que sus visitantes verán una página vacía hasta que se haya cargado el archivo CSS. Esto se conoce como el CSS que bloquea la representación.
Otra razón común por la cual los archivos CSS pueden ralentizar su sitio es cuando contienen más código de lo que es necesario para mostrar la parte visible de la página actual. Este código adicional significa que tardarán más en la carga. La buena noticia es que puede mejorar el rendimiento de su sitio de WordPress optimizando cómo se entrega el código CSS. Esto se logra identificando el código CSS mínimo requerido para mostrar la primera parte de la página web actual. Esto se conoce como crítico de CSS. Este código crítico se agrega en línea en la página HTML, en lugar de hojas de estilo separadas, para que el código se pueda representar sin tener que cargar el CS. El reinstalación de CSS se puede cargar después de sus visitantes. Puedo ver el contenido. de la página. Esto se llama “carga pospuesta”. En este tutorial, le mostraremos dos formas de optimizar la entrega de WordPress CSS y puede elegir el que mejor funcione para usted.
Método 1: Optimización de la entrega de WordPress CSS con WP Rocket
Método 2: Optimización de la entrega de WordPress CSS con AutOptimize
Método 1: Optimización de la entrega de CSS WordPress con WP Rocket WP Rocket es el mejor complemento de caché de WordPress. Proporciona la forma más fácil de optimizar su entrega de WordPress CSS. De hecho, es tan fácil como marcar una casilla.
WP Rocket es un complemento premium, pero la mejor parte es que todas las características están incluidas en el plan más pequeño. Lo primero que debe hacer es instalar y activar el complemento WP Rocket. Para obtener más detalles, consulte nuestra guía paso por paso sobre cómo instalar un complemento de WordPress. Una vez activado, debe navegar por la página de configuración »WP Rocket y pasar a la pestaña” Optimización de archivos “. Luego debe ejecutar la sección del archivo CSS. Una vez que llegue allí, debe verificar la casilla junto a la opción “Optimizar la entrega CSS”.
Esta característica identificará de manera inteligente el CSS crítico necesario para formatear la parte de la página web que sus visitantes ven primero. Sus páginas se cargarán más rápido y el resto de CSS se cargará después de que sus visitantes puedan ver su contenido.

Todo lo que tiene que hacer ahora es hacer clic en Guardar los cambios y esperar a que WP Rocket genere el archivo CSS necesario para todas sus publicaciones y páginas eliminará automáticamente su sitio web. Sus visitantes para ver la nueva versión optimizada de su sitio en lugar de Cualquier versiones neo solo almacenadas en caché. Hay muchas otras formas en que WP Rocket puede ayudarlo a mejorar el rendimiento de su sitio. Para obtener más información, consulte nuestra guía sobre cómo instalar y configurar el cohete WP correctamente en WordPR.

Método 2: La optimización de la entrega de WordPress de CSS con autooptimizado autooptimizado es un complemento gratuito diseñado para mejorar la entrega de archivos CSS y JS de su sitio web. Si bien AutoPtimize es un complemento gratuito, no tiene tantas funciones como WP Rocket y requiere más tiempo para configurar. Por ejemplo, no puede identificar automáticamente los CSS críticos, cómo puede el cohete WP. En cambio, la autoevaluación requiere la ayuda de un servicio premium de terceros, que representa un costo adicional y requiere tiempo adicional para la configuración. Sin embargo, podría ser una buena opción si tiene un presupuesto bajo y no necesita todas las otras características de cohete WP para acelerar su sitio. Lo primero que debe hacer es instalar y activar la autoevaluación del complemento. Para obtener más detalles, consulte nuestra guía paso por paso sobre cómo instalar un complemento de WordPress. Después de la activación, debe visitar la página Configuración »Optimización automática para configurar la configuración del complemento. Una vez que llegue allí, debe desplazarse hacia abajo hasta la sección Opciones de CSS y marcar el cuadro de optimización del código CSS en la parte superior.

Después de hacer esto, debe asegurarse de que la opción “Agregación de archivos CSS” esté descargada y luego marque “Eliminar CSS que bloquea la reproducción”.
Ahora puede hacer clic en “Guardar los cambios y vaciar el caché” para almacenar la configuración. Pero el complemento no funcionará correctamente hasta que se registre en una cuenta de crítico CSS. Este es un servicio de suscripción premium que proporcionará optimización automática de código de crítico CSS para optimizar su entrega de WordPress CSS. Para hacer esto, navegue por la pestaña CSS desde la configuración autoaptizada. Aquí encontrará la información que necesita registrar para CSS crítico. Puede comenzar haciendo clic en el enlace de registro en el tercer párrafo. Después de recibir la tecla CSS CSS CSS, ejecute la sección de la clave API, para que pueda pegarlo al cuadro de texto “Clave API”. Después de eso, asegúrese de hacer clic en Guardar los cambios.
La autoevaluación ahora tiene toda la información que necesita para agregar la línea CSS Critic y posponer la carga de hojas de estilo hasta que se haya renderizado la página. Como resultado, su sitio web se cargará más rápido. Esperamos que este tutorial lo ayude a aprender cómo optimizar la entrega de WordPress CSS. También es posible que desee ver nuestra guía final sobre cuánto la construcción de un sitio web de WordPress y nuestra comparación con las compañías de alojamiento de WordPress mejor administradas. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para los tutoriales de video de WordPress. También puede encontrarnos en Twitter y Facebook.