Como Renderizar bloqueo de CSS y JavaScript

Si va y mide el rendimiento de su sitio web a través de herramientas en línea como Google PageSpeed ​​Insights , puede encontrarse con un pequeño problema conocido como Render Blocking CSS. También le indicará que debe resolver este problema si desea un rendimiento óptimo para su sitio web.

Pero, ¿qué es Renderizar bloqueo de CSS en primer lugar?

En pocas palabras, se refiere a los scripts 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é sucede esto? ¿Y cómo lo arreglas?

Bueno, para ayudarlo con todas sus consultas, hemos reunido una publicación detallada que cubre todo lo que necesita saber sobre Render Blocking CSS junto con diferentes métodos para solucionar este problema.

Entonces, sin más preámbulos, comencemos:

¿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 web primero leerá todo el texto HTML y luego generará la página web para que el visitante la vea y use. Como tal, cuanto más CSS tenga en su sitio web, más tiempo le tomará al navegador analizarlo, lo que resulta en velocidades de carga más largas.

Esta es la razón por la cual CSS generalmente se considera como un recurso de bloqueo de renderizado. Pero al mismo tiempo, CSS es importante si desea crear un sitio web moderno y atractivo. Por lo tanto, el truco es lograr un equilibrio.

No exagere con demasiados archivos CSS o archivos CSS grandes. Manténgalo delgado y use trucos ingeniosos para entregarlos lo más rápido posible. Discutiremos todas estas técnicas en profundidad a continuación. Pero primero, comprendamos por qué es tan importante eliminar Render Blocking CSS.

¿Por qué debería ser eliminado?

Como se discutió anteriormente, Render Blocking CSS retrasará las velocidades de carga, y lo creas 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 sus clientes potenciales sino que también afectará su puntaje de SEO.

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

Alrededor de 3 segundos, la tasa de rebote sube hasta el 11%. Y en la marca de 5 segundos, alcanza hasta el 38%, es decir, más de un tercio de todo el tráfico entrante perdido en un sitio web de carga lenta. Además, si su sitio web tarda más en cargarse, obstaculizará su puntaje de SEO, lo que dificultará la clasificación en los motores de búsqueda.

Entonces, no solo 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. Como tal, es muy importante que solucione rápidamente cualquier problema de CSS de bloqueo de procesamiento que tenga en su sitio web.

Ahora que se dice eso, vale la pena señalar que hay muchas cosas que debe hacer para mejorar el rendimiento del sitio web , y arreglar Render Blocking CSS es solo una parte de esto. Sin embargo, es uno de los problemas más fáciles que se pueden resolver rápidamente con algunos ajustes menores.

Cómo eliminar CSS de bloqueo de renderizado

Como dijimos anteriormente, CSS se considera un recurso de bloqueo de renderizado, pero no podemos abandonar por completo su uso, ya que sigue siendo crucial para la apariencia 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.

Puedes hacer esto:

Usando CSS en línea

Combinando archivos CSS

Y usando menos CSS

Si tiene conocimientos básicos de codificación, entonces hacer estos ajustes no será un gran problema. Alternativamente, si un desarrollador web diseñó su sitio web, puede conversar con ellos sobre la implementación de estos cambios.

Nota : También hemos incluido una sección dedicada para los usuarios de WordPress, repasando algunos plugins increíbles que pueden ayudar a corregir CSS Render Blocking.

Usar CSS en línea

Cuantos más archivos CSS tenga su página, más tiempo le tomará al navegador cargarlos. La mejor solución aquí es colocar los scripts CSS directamente en su HTML. Esto se llama alinear el CSS.

Todo lo que tiene que hacer es abrir uno de los archivos CSS y copiar el código. Luego debe pegar el CSS en su archivo HTML. Recuerde que CSS en línea va en la cabeza del documento HTML y usa la etiqueta Style. 

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

Tenga en cuenta que este método solo es aplicable a pequeños scripts CSS que utilizan algunas líneas de código. La inclusión de archivos grandes solo aumentará el tamaño del archivo HTML, lo que, a su vez, contribuirá a un mayor tiempo de carga.

Cuando vea archivos CSS grandes, se recomienda que utilice uno de los siguientes métodos:

Combinar archivos CSS

Si su sitio tiene demasiados archivos CSS, entonces cada uno de ellos contribuirá a velocidades más lentas a medida que el navegador cargue cada uno de ellos por separado. Una solución fácil a este problema sería combinar los múltiples archivos CSS en un solo archivo (o en algunos casos dos, según el tamaño de los archivos).

Debes notar que tu sitio web tiene un archivo CSS grande acompañado de varios archivos CSS más pequeños. Los archivos más pequeños generalmente son generados por los diferentes widgets y plugins que ha instalado en su sitio web. A algunos diseñadores también les gusta segmentar su CSS en varios archivos, ya que es más fácil administrarlos.

Ahora, dicho esto, ¿cómo combinas estos múltiples archivos CSS?

Bueno, es bastante similar a cómo alineas CSS. Abra uno de los archivos CSS compatibles y copie el código. Luego vaya al archivo CSS principal y pegue el código allí.

Solo recuerde eliminar la llamada para el archivo CSS inicial ya que ya no lo usará.

Si esto te parece un poco complicado, hay plugins que pueden hacer lo mismo y ayudarte.

Use menos CSS en general

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

Bueno, el mayor culpable en esta área son los temas multipropósito de WordPress, especialmente aquellos con 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, lo ralentiza.

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

Ahora arreglar esto requiere que seas técnico. 
Tendrá que investigar el código de su sitio y comenzar a eliminar CSS de bloqueo de procesamiento manualmente. Sin embargo, para los usuarios de WordPress, también hay plugins dedicados de WordPress que también pueden ayudarlo.

Renderizar bloqueo de JavaScript: una descripción general
Antes de comenzar a analizar cómo resolver este problema de JavaScript de bloqueo de procesamiento, primero vamos a comprender mejor qué es en primer lugar.

¿Qué es el JavaScript de bloqueo de procesamiento?

En la mayoría de los casos, los temas y complementos que usa en su sitio web de WordPress agregarán archivos JavaScript (JS) y de hojas de estilo en cascada (CSS) a la interfaz. Ahora, cuando un usuario intenta acceder a su sitio web desde su navegador, todos estos scripts se cargarán primero antes de que su sitio sea visible.

En términos generales, el navegador necesita cargar una cola de archivos JS, CSS y HTML antes de que el usuario pueda ver el contenido principal. Ahora, si tiene demasiados scripts JS que retrasarán la carga del contenido HTML principal. Esto, a su vez, ralentiza su sitio web y obliga a los usuarios a esperar.

Ahora, si la velocidad de carga de su sitio se ve afectada por JavaScript, estos fragmentos de código se denominan Render Blocking JavaScript.

¿Por qué deberías eliminarlo?
Render Blocking JavaScript hace que su sitio se cargue lentamente, lo que no solo quita la experiencia del usuario (UX) sino que también afecta su rendimiento de SEO.

Verás, a la gente no le gusta esperar. Si un sitio tarda más de 3 segundos en cargarse completamente, puede sufrir una tasa de rebote del 11% . El número sube al 38% si el tiempo de carga de su sitio es más de 5 segundos.

Con más personas rebotando en su sitio web, eventualmente los motores de búsqueda como Google moverán su sitio más abajo en sus resultados de búsqueda, lo que generará menos tráfico y menos personas en su sitio.

Ahora, solo solucionar su problema de bloqueo de procesamiento de JavaScript no lo llevará a la página principal de Google. Tampoco le ayudará a mejorar drásticamente sus velocidades de carga. De hecho, hay muchos factores que pueden tener un impacto en el tiempo de carga de su sitio. Sin embargo, te ayudará a dar un paso adelante.

La regla general es mantener el código de su sitio lo más mínimo y limpio posible. Además, asegúrese de que el contenido de la mitad superior de la página (la parte de su sitio web visible para sus visitantes de inmediato) se carga sin obstáculos.

Por lo tanto, para disfrutar de un tiempo de carga óptimo y ofrecer una mejor experiencia de usuario, se recomienda que resuelva sus problemas de JavaScript de bloqueo de procesamiento lo antes posible.

¿Cómo eliminar el bloqueo de renderizado de JavaScript?

Hay muchas formas diferentes de resolver el JavaScript de bloqueo de procesamiento que afecta a su sitio web. Algunos implican poner manos a la obra con un poco de codificación. Sin embargo, como sucede con WordPress, también puedes usar complementos para ayudarte.

Pero primero, veamos las cosas que podemos hacer manualmente, es decir, si y solo si ya sabe lo que está haciendo. Dado que cambiar estos archivos, especialmente en WordPress, puede indudablemente romper su sitio, le aconsejamos precaución.

Los 3 plugins principales para eliminar CSS  y JavaScript de bloqueo 

Resolver problemas de CSS   y JavaScript de Render Blocking jugando directamente con 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 use uno de los siguientes plugins para ayudarlo.

Limpieza de activos

Asset CleanUp es un plugin gratuito súper popular y potente que escaneará automáticamente todas sus publicaciones y páginas y detectará todos los archivos CSS y JavaScript (JS) que se están cargando. Una vez hecho esto, le dará acceso a un tablero dedicado desde donde puede deshabilitar manualmente los archivos CSS que no necesita.

Para saber qué archivos no están siendo utilizados por su sitio web y están marcados como CSS Render Blocking, simplemente use una herramienta de medición de rendimiento en línea como Google PageSpeed ​​Insights. Una vez que sepa qué archivos CSS están causando el problema, simplemente desactívelos usando los siguientes pasos:

Paso 1 : instala el plugin. Para hacer esto, inicie sesión en su panel de WordPress y diríjase a plugins> Agregar nuevo . Ahora busque Asset CleanUp y presione el botón Instalar ahora, seguido de Activar.

Paso 2 : con el plugin instalado en su sitio web, busque la opción Asset CleanUp> CSS / JS Load Manager en la barra lateral izquierda. Aquí encontrará todo el contenido de su sitio web: página de inicio, páginas, publicaciones y tipos de publicaciones personalizadas. Selecciona cualquiera de ellos.

Página de configuración de limpieza de activos

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

Simplemente deshabilita el CSS Render Blocking y listo. Una vez hecho esto, haga clic en Actualizar .

Paso 4 : pasa a otra publicación o página y repite el paso 3.

Siga repitiendo hasta que haya deshabilitado todos los archivos CSS de bloqueo de procesamiento.

Nota : El plugin también viene con un modo de prueba dedicado . Se recomienda que primero desactive / desactive los archivos CSS en el modo de prueba y vea si rompe su sitio web.

2. WP Rocket

WP Rocket es un plugin de optimización premium para WordPress con toneladas de campanas y silbatos para mejorar el rendimiento y la velocidad de carga de su sitio. Además de ayudarlo a lidiar con Render Blocking CSS, el plugin también puede ayudarlo con la minificación de JS, las imágenes de carga diferida, diferir las solicitudes de JS y mucho más.

Tenemos una revisión dedicada de WP Rocket que analiza todas sus características y funcionalidades.

Aquí, repasaremos rápidamente una guía paso a paso sobre cómo puede usar el plugin para ayudarlo a resolver sus problemas de CSS Render Blocking.

Paso 1 : Instala el plugin en tu sitio web de WordPress. Como es un plugin premium, primero deberá comprarlo y luego descargarlo en su 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> Agregar nuevo y haga clic en el botón Cargar plugin . Ahora busque el archivo .zip y cárguelo en su sitio web. La instalación demorará unos minutos.

Paso 2 : Una vez instalado y activado, navega hasta Configuración> WP Rocket . Aquí encontrarás todas las opciones de plugins.

Paso 3 : busque la configuración de optimización de archivos . Debajo de aquí debería ver una sección para archivos CSS .

Archivos CSS de WP Rocket

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

Solo recuerde que el uso de estas opciones puede potencialmente romper su sitio web. Por lo tanto, se recomienda que cree una copia de seguridad de antemano.

WP Rocket

3 . Colibrí

Y, por último, tenemos Hummingbird , un plugin de optimización de uso gratuito y lleno de funciones para WordPress. Viene con una gran cantidad de características que comienzan desde el almacenamiento en caché y la minificación, hasta diferir archivos CSS y JS críticos, carga diferida y más.

Uno de los mejores aspectos del plugin es su opción de optimización con un clic que escanea automáticamente su sitio web y corrige problemas de rendimiento comunes sin que tenga que meter un dedo.

Sin embargo, para solucionar los problemas de CSS de Render Blocking, debe obtener un poco más de manual.

Paso 1 : Primero, debe instalar y activar Hummingbird en su sitio web.

Paso 2 : Una vez hecho esto, debería notar una nueva sección "Hummingbird" en la barra lateral izquierda de su panel de WordPress. Haga clic en él para acceder a todas sus opciones y configuraciones.

Paso 3 : vaya a la opción Optimización de activos y active Habilitar modo avanzado .

Paso 4 : ahora desplácese hacia abajo y debería ver una lista de todos los archivos CSS en su sitio web. Además de cada archivo CSS, hay opciones que le permiten comprimirlos , combinarlos e incluso alinearlos . También existe la opción de "no cargar el archivo".

Habilitar opciones avanzadas en HummingBird

Paso 5 : busque los archivos CSS de bloqueo de procesamiento que están causando el problema. Si no es necesario, seleccione la opción "No cargar el archivo". Si es necesario, puede comprimirlo, combinarlo o en línea.

Recuerde que habilitar cualquiera de estas opciones tiene la posibilidad de romper su sitio web. Por lo tanto, siempre se recomienda que realice una copia de seguridad de su sitio web antes de continuar.

Terminando

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