¿Le agradaría optimar la entrega de CSS de WordPress? Los ficheros CSS controlan el formato visual y el estilo de su sitio de WordPress. Mas si su código CSS no se entrega de forma inmejorable, podría frenar su sitio. En el artículo, le vamos a mostrar 2 formas fáciles de optimar la entrega de CSS de WordPress.
Cómo la entrega de CSS de WordPress afecta el desempeño de WordPress
Contents
Los ficheros CSS se usan para delimitar la apariencia visual de su lugar de WordPress. Su tema de WordPress contiene un fichero de hoja de estilo CSS, y ciertos de sus complementos asimismo pueden emplear hojas de estilo CSS. CSS es preciso para los sitios modernos, mas los ficheros CSS pueden frenar la velocidad y el desempeño de su lugar conforme su configuración. Aun un pequeño retraso en la velocidad del lugar crea una mala experiencia de usuario y puede afectar sus clasificaciones de busca y conversiones, lo que resulta en menos tráfico y ventas.
Los ficheros CSS pueden frenar su sitio si es preciso cargarlos antes que se pueda ver la página. Esto quiere decir que sus visitantes van a ver una página en blanco hasta el momento en que se cargue el fichero CSS. Esto se llama CSS de bloqueo de renderizado. Otra razón común por la que los ficheros CSS pueden frenar su sitio es cuando poseen más código del preciso para enseñar la parte perceptible de la página actual. Este código auxiliar quiere decir que van a tardar más en cargarse. La buena nueva es que puede progresar el desempeño de su lugar de WordPress optimando la manera en que se entrega el código CSS. Esto se hace identificando el código CSS mínimo preciso para enseñar la primera una parte de el sitio web actual. Esto se conoce como CSS crítico. Entonces, este código crítico se añade online al código HTML de la página, en vez de en hojas de estilo separadas, con lo que el código se puede representar sin precisar cargar el fichero CSS primero. El resto del CSS se puede cargar una vez que sus visitantes hayan visto el contenido de la página. Esto lleva por nombre «carga aplazada». En este tutorial, le vamos a mostrar 2 métodos para optimar la entrega de CSS de WordPress, y puede seleccionar el que sea conveniente para .
Método 1: Optimice la entrega de CSS de WordPress con WP Rocket
WP Rocket es el mejor complemento de almacenaje en caché de WordPress del mercado. Ofrece la manera más fácil de optimar la entrega de CSS de WordPress. En verdad, es tan simple como marcar una casilla. WP Rocket es un complemento premium, mas la mejor parte es que todas y cada una de las funciones están incluidas en su plan más bajo. La primera cosa que debe hacer es instalar y activar el complemento WP Rocket. Para conseguir más detalles, consulte nuestra guía punto por punto sobre de qué forma instalar un complemento de WordPress. Una vez activado, debe navegar a la Configuración »WP Rocket y vaya a la pestañita «Optimización de ficheros».
Ahora, debe desplazarse cara abajo hasta la sección de ficheros CSS. Una vez allá, debe marcar la casilla al lado de la opción «Optimar la entrega de CSS».
Esta función identificará de forma inteligente el CSS crítico preciso para formatear la una parte de el sitio web que sus visitantes ven primero. Sus páginas se van a cargar más veloz y el resto del CSS se va a cargar una vez que sus visitantes puedan ver su contenido. Todo cuanto precisa hacer ahora es hacer click en el botón Guardar cambios y aguardar a que WP Rocket produzca el fichero CSS preciso para sus publicaciones y páginas. Asimismo borrará de forma automática la memoria caché de su sitio, con lo que sus visitantes van a ver la nueva versión optimada de su lugar en vez de las versiones no optimados guardadas en la memoria caché. Hay otras muchas formas en que WP Rocket puede asistirlo a progresar el desempeño de su sitio. Para conseguir más información, consulte nuestra guía sobre de qué forma instalar y configurar apropiadamente WP Rocket en WordPress.
Método 2: Optimice la entrega de CSS de WordPress con Autoptimize
Autoptimize es un complemento gratis desarrollado para progresar la entrega de los ficheros CSS y JS de su sitio. Si bien Autoptimize es un complemento gratis, no tiene tantas funciones como WP Rocket y tarda más en configurarse. Por poner un ejemplo, no puede identificar de forma automática CSS crítico como lo hace WP Rocket. En cambio, Autoptimize requiere la ayuda de un servicio de terceros premium, que tiene un costo auxiliar y requiere tiempo de configuración auxiliar. No obstante, esta podría ser una buena opción si tiene un presupuesto ajustado y no precisa todas las otras funciones de WP Rocket para apresurar su lugar. La primera cosa que debe hacer es instalar y activar el complemento Autoptimize. Para conseguir más detalles, consulte nuestra guía punto por punto sobre de qué forma instalar un complemento de WordPress. Tras la activación, debe visitar el Configuración »Optimización automática página para configurar los ajustes del complemento. Una vez allá, debe desplazarse cara abajo hasta la sección Opciones de CSS y marcar la casilla Optimar código CSS en la parte superior.
En el momento en que haya hecho eso, debe cerciorarse de que la opción «Añadir ficheros CSS» no esté marcada y después marcar «Quitar el procesamiento de bloqueo de CSS». Ahora puede hacer click en el botón «Guardar cambios y borrar caché» para guardar su configuración. Mas el complemento no va a funcionar apropiadamente hasta el momento en que cree una cuenta Critical CSS. Este es un servicio de subscripción premium que dará a Autoptimize el código CSS crítico que precisa para optimar la entrega de CSS de WordPress. Para hacer esto, vaya a la pestañita Critical CSS en la configuración de Optimización automática. Acá hallará la información que precisa para darse de alta en Critical CSS. Puede iniciar haciendo click en el link de registro en el tercer parágrafo.
En el momento en que haya recibido su clave API CSS crítica, desplácese cara abajo hasta la sección Clave API para poder pegarla en el cuadro de texto «Su clave API». Tras eso, asegúrese de hacer click en el botón Guardar cambios.
Autoptimize ahora tiene toda la información que precisa para añadir el CSS online crítico y postergar la carga de hojas de estilo hasta el momento en que la página se haya renderizado. Como resultado, su sitio se va a cargar más veloz. Aguardamos que este tutorial le haya ayudado a aprender a optimar la entrega de CSS de WordPress. Asimismo puede preguntar nuestra guía terminante sobre el costo real de crear un sitio de WordPress y nuestra comparación de las compañías de alojamiento de WordPress mejor administradas. Si le agradó este artículo, subscríbase a nuestro canal de YouTube para poder ver tutoriales en vídeo de WordPress. Asimismo puede toparnos en Twitter y Fb.
){kind=link}