Cómo eliminar el bloqueo de renderizado CSS en WordPress

Si mide el rendimiento de su sitio web con herramientas en línea como Google PageSpeed Insightspuede que te encuentres con un pequeño problema conocido como Render Blocking CSS. También te dirá que debes resolver este problema si quieres un rendimiento óptimo para tu sitio web.

Pero, ¿en qué consiste el bloqueo de renderizado CSS?

En pocas palabras, se refiere a las secuencias de comandos CSS que impiden que su sitio web se cargue correctamente. Como resultado, los visitantes tienen que esperar más tiempo antes de ver algo en su sitio web. Pero, ¿por qué ocurre esto? ¿Y cómo solucionarlo?

Bueno, para ayudarte con todas tus dudas, hemos elaborado un post detallado que cubre todo lo que necesitas saber sobre el Render Blocking CSS junto con diferentes métodos para solucionar este problema.

Así que, sin más preámbulos, empecemos:

Render Blocking CSS - Visión general

Antes de empezar a discutir cómo arreglar el bloqueo de renderizado CSS, primero vamos a discutir rápidamente lo que es y por qué es un problema. Con una comprensión adecuada del problema, será mucho más fácil de solucionar.

¿Qué es el bloqueo de renderizado CSS?

Técnicamente, "renderizar" por un navegador significa analizar el código HTML y mostrarlo en la pantalla. Un navegador lee primero todo el texto HTML y luego genera la página web para que el visitante la vea y la utilice. Por lo tanto, cuanto más CSS tenga en su sitio web, más tiempo tardará el navegador en analizarlo, lo que se traducirá en una mayor velocidad de carga.

Por eso se suele considerar que CSS bloquea la renderización. Pero al mismo tiempo, CSS es importante si quieres crear un sitio web moderno y atractivo. Por tanto, el truco está en encontrar un equilibrio.

No exageres con demasiados archivos CSS o archivos CSS de gran tamaño. Esfuérzate y utiliza trucos inteligentes para entregarlos lo más rápido posible. Vamos a discutir todas estas técnicas en profundidad a continuación. Pero primero, entendamos por qué es tan importante eliminar el CSS de bloqueo de renderizado.

¿Por qué debe eliminarse?

Como se ha comentado anteriormente, el CSS de bloqueo de renderizado retrasará la velocidad de carga y, lo crea o no, la velocidad de carga de un sitio tiene un gran impacto en su éxito. Si un sitio tarda demasiado en cargarse, no solo irritará a tus clientes potenciales, sino que también afectará a tu puntuación SEO.

Según los estudios, un sitio web que tarda más de 2 segundos en cargarse pierde visitantes a un ritmo exponencial. Por ejemplo, los sitios con un tiempo de carga de 2 segundos tienen un 6% tasa de rebote. Esto significa que por cada 100 personas que visitan su sitio web, usted pierde 6 de ellas porque se impacientaron.

Alrededor de los 3 segundos, la tasa de rebote sube a 11%. Y a los 5 segundos, alcanza los 38%, es decir, más de un tercio de todo el tráfico entrante perdido por un sitio web que carga lentamente. Además, si su sitio web tarda más en cargarse, su puntuación SEO se verá afectada, lo que dificultará su posicionamiento en los motores de búsqueda.

Así que no sólo está perdiendo visitantes debido a la mayor tasa de rebote, sino que también está perdiendo tráfico de los motores de búsqueda al mismo tiempo. Por lo tanto, es muy importante que arregles rápidamente cualquier problema de CSS con bloqueo de renderizado que tengas en tu sitio web.

Ahora bien, dicho esto, cabe señalar que hay muchas cosas que tienes que hacer para mejor rendimiento del sitio weby arreglar el bloqueo de renderizado CSS es sólo una parte de ello. Sin embargo, es uno de los problemas más fáciles que se pueden resolver rápidamente con algunos ajustes menores.

Cómo eliminar el bloqueo de renderizado CSS

Como hemos dicho antes, CSS se considera un recurso que bloquea la renderización, pero no podemos abandonar completamente su uso, ya que sigue siendo crucial para el aspecto y la sensación del sitio web. Por lo tanto, el truco para minimizar su efecto en la velocidad de carga de un sitio es minimizar su uso por completo.

Para ello:

• Uso de CSS en línea
• Combinación de archivos CSS
• Y usando menos CSS

Si tienes conocimientos básicos de codificación, hacer estos ajustes no será un gran problema. Si has contratado a un desarrollador web para que diseñe tu sitio web, puedes hablar con él sobre la aplicación de estos cambios.

Nota: También hemos incluido una sección dedicada a los usuarios de WordPress, repasando algunos plugins impresionantes que pueden ayudar a corregir el CSS de bloqueo de renderizado.

Utilizar CSS en línea

Cuantos más archivos CSS tenga tu página, más tiempo tardará el navegador en cargarlos. La mejor solución en este caso es colocar los scripts CSS directamente en tu HTML. Esto se llama inlining del CSS.

Todo lo que tienes que hacer es abrir uno de los archivos CSS y copiar el código. A continuación, tienes que pegar el CSS en tu archivo HTML. Recuerda que el CSS alineado va en la cabecera del documento HTML y utiliza la etiqueta Estilo. Debería tener este aspecto:

<style>
…. The Copied CSS Instructions ….
</style>

Después de inlining el código CSS, recuerde quitar la llamada para el archivo CSS.

Tenga en cuenta que este método sólo es aplicable a pequeños scripts CSS que utilicen unas pocas líneas de código. Si incrusta archivos de gran tamaño, sólo conseguirá aumentar el tamaño del archivo HTML, lo que, a su vez, contribuirá a alargar el tiempo de carga.

Cuando vea archivos CSS de gran tamaño, es recomendable que utilice uno de los siguientes métodos:

Combinar archivos CSS

Si tu sitio tiene demasiados archivos CSS, entonces cada uno de ellos va a contribuir a reducir la velocidad, ya que el navegador carga cada uno de ellos por separado. Una solución sencilla a este problema sería combinar los múltiples archivos CSS en un único archivo (o en algunos casos en dos, dependiendo de su tamaño).

Debería notar que su sitio web tiene un archivo CSS grande acompañado de múltiples archivos CSS más pequeños. Los archivos más pequeños suelen ser generados por los diferentes widgets y plugins que has instalado en tu sitio web. A algunos diseñadores también les gusta segmentar su CSS en varios archivos, ya que es más fácil gestionarlos.

Dicho esto, ¿cómo se combinan estos archivos CSS?

Bueno, es bastante similar a cómo se inline CSS. Abre uno de los archivos CSS de apoyo y copia el código. Luego ve al archivo CSS principal y pega el código allí.

Sólo recuerda eliminar la llamada al archivo CSS inicial, ya que no lo utilizarás más.

Si esto te parece demasiado complicado, existen plugins que pueden hacer lo mismo y ayudarte. Echa un vistazo a nuestra sección sobre eso a continuación.

Usar menos CSS en general

Por usar menos CSS, queremos decir que sólo debe usar el CSS que realmente se necesita y eliminar todo el CSS innecesario de su código. Pero, para empezar, ¿por qué y cómo tendrá su sitio web CSS adicional innecesario?

Bueno, el mayor culpable en esta área son los temas de WordPress multipropósito, especialmente los que tienen toneladas de opciones de personalización. Estos se basan en CSS para ayudar a los desarrolladores a realizar cambios de diseño rápidamente. Sin embargo, no todo el CSS es utilizado por el sitio web y termina hinchado, y por lo tanto, ralentizándolo.

Los sitios web diseñados con frameworks como Bootstrap y Foundation se enfrentan a un problema similar. No todo el CSS utilizado se refleja en el sitio web resultante. Por lo tanto, no contribuye al aspecto visual, el diseño o las funciones, sino que aumenta la carga.

Ahora arreglar esto requiere que te pongas técnico. Tendrás que investigar el código de tu sitio y empezar a eliminar el CSS de bloqueo de renderizado manualmente. Sin embargo, para los usuarios de WordPress, también hay plugins de WordPress dedicados que pueden ayudarte.

Los 3 mejores plugins para eliminar el CSS que bloquea el renderizado

Resolver los problemas de CSS con bloqueo de renderizado manipulando directamente el código puede ser un poco complicado e intimidante para los usuarios sin experiencia en codificación. En lugar de romper accidentalmente su sitio web, le recomendamos que utilice uno de los siguientes plugins para ayudarle.

1. Limpieza de activos

Limpieza de activos es un plugin gratuito muy popular y potente que escaneará automáticamente todos tus mensajes y páginas y detectará todos los archivos CSS y JavaScript (JS) que se están cargando. Una vez hecho esto, se le dará acceso a un panel de control dedicado desde donde se puede desactivar manualmente los archivos CSS que no son necesarios.

Para saber qué archivos no están siendo utilizados por su sitio web y están marcados como CSS de bloqueo de renderizado, simplemente utilice una herramienta de medición de rendimiento en línea como Google PageSpeed Insights. Una vez que sepas qué archivos CSS están causando el problema, simplemente desactívalos siguiendo estos pasos:

Primer paso: Instale el plugin. Para ello, inicie sesión en su panel de WordPress y diríjase a Plugins > Añadir nuevo. Ahora busque Asset CleanUp y pulse el botón Instalar ahora, seguido de Activar.

Paso 2: Con el plugin instalado en su sitio web, localice el archivo Limpieza de activos > Gestor de carga CSS/JS de la barra lateral izquierda. Aquí encontrará todo el contenido de su sitio web: página de inicio, páginas, entradas y tipos de entradas personalizadas. Seleccione cualquiera de ellos.

Paso 3: Ahora desplácese hacia abajo y debería ver todos los archivos CSS y JS activos para esa página web o entrada específica. Tendrás la opción de desactivar selectivamente cada uno de ellos.

Desactiva el CSS de bloqueo de renderizado y listo. Una vez hecho esto, haga clic en Actualización.

Paso 4: Vaya a otra entrada o página y repita el paso 3.

Siga repitiendo hasta que haya desactivado todos los archivos CSS de bloqueo de renderizado.

Nota: El plugin también viene con un Modo de prueba. Se recomienda desactivar/desactivar primero los archivos CSS en el modo de prueba y ver si se rompe su sitio web.

2. Cohete WP

Cohete WP es un plugin de optimización premium para WordPress con toneladas de campanas y silbatos para mejorar el rendimiento de su sitio y la velocidad de carga. Además de ayudarte a lidiar con el CSS de bloqueo de renderizado, el plugin también puede ayudarte con la minificación de JS, la carga perezosa de imágenes, el aplazamiento de solicitudes de JS y mucho más.

Disponemos de un revisión de WP Rocket hablar de todas sus características y funcionalidades.

Aquí, vamos a repasar rápidamente una guía paso a paso sobre cómo puede utilizar el plugin para ayudar a resolver sus problemas de Render Blocking CSS.

Primer paso: Instale el plugin en su sitio web WordPress. Dado que es un plugin premium, primero tendrás que comprarlo y luego descargarlo en tu almacenamiento local (probablemente estará en un archivo .zip).

Después de descargarlo, inicie sesión en su panel de WordPress y diríjase a Plugins > Añadir nuevo y haga clic en el botón Subir Plugin botón . Ahora localice el archivo .zip y súbalo a su sitio web. Tardará unos instantes en instalarse.

Paso 2: Una vez instalado y activado, vaya a Configuración > WP Rocket. Aquí encontrará todas las opciones del plugin.

Paso 3: Localice el Optimización de archivos configuración. Aquí debería ver una sección para Archivos CSS.

El plugin te ofrece tres opciones - Minificar archivos CSS, Combinar archivos CSS y Optimizar la entrega de CSS. Habilita las opciones y listo.

Sólo recuerde que el uso de estas opciones puede potencialmente romper su sitio web. Así que es aconsejable que cree una copia de seguridad de antemano.

3. Colibrí

Y por último, tenemos Colibríes un plugin de optimización para WordPress gratuito pero repleto de funciones. Viene con toda una serie de características que van desde el almacenamiento en caché y la minificación, hasta el aplazamiento de archivos CSS y JS críticos, la carga lenta y mucho más.

Uno de los mejores aspectos del plugin es su opción de optimización con un solo clic, que escanea automáticamente su sitio web y soluciona los problemas de rendimiento más comunes sin que usted tenga que mover un dedo.

Sin embargo, para solucionar los problemas de CSS con bloqueo de renderizado, hay que ser un poco más manual.

Primer paso: En primer lugar, es necesario instalar y activar Hummingbird en su sitio web.

Paso 2: Una vez hecho esto, debería ver una nueva sección "Colibrí" en la barra lateral izquierda de su panel de WordPress. Haz clic en ella para acceder a todas sus opciones y ajustes.

Paso 3: Ir a la página Optimización de activos y activar Activar el modo avanzado.

Paso 4: Ahora desplácese hacia abajo y debería ver una lista de todos los archivos CSS de su sitio web. Además de cada archivo CSS hay opciones que te permiten comprimir ellos, combinar e incluso en línea ellos. También existe la opción de "no cargar archivo".

Paso 5: Localice los archivos CSS de bloqueo de renderizado que están causando el problema. Si no es necesario, seleccione la opción "No cargar archivo". Si es necesario, entonces puede comprimirlo, combinarlo o inline.

Recuerde, que activar cualquiera de estas opciones tiene la posibilidad de romper su sitio web. Por lo tanto, siempre es recomendable hacer una copia de seguridad de su sitio web antes de seguir adelante.

Conclusión

Así que esta fue nuestra guía completa en profundidad sobre lo que es Render Blocking CSS y cómo puede solucionarlo para mejorar el rendimiento de su sitio web. Como puedes ver, hemos incluido tanto plugins como ajustes básicos en el código fuente para ayudarte a solucionar este problema.

Si no tienes experiencia en programación, te recomendamos que utilices un plugin. Sin embargo, si tienes problemas con esto, no dudes en dejarnos un comentario más abajo y haremos todo lo posible para ayudarte.