Elimina los recursos que bloqueen el renderizado fácilmente

Existen muchas herramientas en Internet que pueden ayudarte con el mantenimiento de tu sitio web, y uno de ellos es el renderizado en WordPress. Seguramente te parecerá un término desconocido, sin embargo es importante para el funcionamiento de un blog, por este motivo vamos a mostrarte qué es y cómo eliminar los recursos que bloqueen el renderizado wordpress.

Elimina los recursos que bloqueen el renderizado en WordPress

Cuando un blog se encuentra en funcionamiento mediante Google PageSpeed Insights, seguramente en algún momento será notificado que debe eliminar los recursos que bloqueen el renderizado plugin wordpress. Y seguramente es la razón por la que te encuentres aquí, sin embargo si eres una persona que está indagando para mejorar su blog, no te preocupes que vamos a explicar todo con detalle.

En primer lugar estarás preguntándote lo siguiente:

  • ¿Qué son los recursos de bloqueo y por qué se consideran un inconveniente?
  • ¿Cómo puede eliminar los recursos de bloqueo de renderizado en WordPress?
  • ¿Cómo utilizar plugin para solucionar el problema?

Para poder entender lo que estamos por explicarles, primero debemos describir brevemente el funcionamiento de un blog. En primera instancia un blog es un sitio que se encuentra establecido en la red, y proporciona un sin fin de contenidos diversos.

Ahora bien, un blog de éxito se mide por la calidad de su contenido, por los backlinks que tenga, por el posicionamiento orgánico SEO y por el tráfico web. Sin embargo, estos cuatro puntos ocultan un sin fin de estrategias de marketing y de elementos que hacen que un blog sea lo que és, y en este caso en particular nos vamos a enfocar en la velocidad de carga.

La velocidad de carga es el tiempo en la que responde un blog, y aunque suene trivial es una métrica que Google considera importante en todo blog exitoso. Por ese motivo es que la compañía de Google tomó medidas para proporcionar herramientas que agilicen el tiempo de carga, para desarrolladores y webmasters, con la finalidad de incrementar la tasa de conversión de los usuarios.

En este caso, una de estas herramientas se llama PageSpeed ​​Insights, y como dijimos antes es una creación de Google que muchos blog han adoptado para incrementar su posicionamiento SEO.

PageSpeed ​​Insights es un servicio online, que es usado para identificar los inconvenientes que puedas tener con el rendimiento de tu web, sin embargo esta herramienta entrega mucho más como por ejemplo: Puedes analizar otros factores dentro de tu blog que traten sobre problemas con el SEO en general, y medir la experiencia que tengan los usuarios con tu blog.

Es como Google Analytics, la diferencia está en su propósito y funcionamiento, sin embargo ambas son herramientas que se implementan para optimizar el contenido de una web. En este caso, PageSpeed ​​Insights da un reporte con todos los factores que causan el mal rendimiento de tu página, y además te proporciona un valor basado en la rapidez de tu interfaz.

Sin embargo muchas veces la velocidad de carga no depende del contenido que tengas en la web, la velocidad está influenciada por factores que pueden ser externos, como: el rendimiento del servidor, el tipo de conexión, el proveedor del Internet, el paquete que hayas adquirido, la potencia del procesamiento, el navegador que uses, etc.

No obstante, medir cada uno de ellos sería imposible, por ese motivo es que este programa solo mide el funcionamiento de tu web y del servidor de alojamiento web.

Ahora la cuestión es, ¿esto qué tiene que ver con el renderizado y el bloqueo de ellos? seguramente en este punto no puedes unir los puntos, sin embargo el renderizado es un término técnico que hace referencia a la velocidad de una web. Más adelante te explicaremos todo con detalle.

¿Qué significa?

Explicamos brevemente la importancia de la velocidad de carga de una página web, y la semejanza que tiene con el renderizado. Sin embargo es necesario explicar la razón por la que perjudica la interfaz, y para ello vamos a iniciar por lo básico es decir, cómo un navegador web renderiza un blog.

Cuando un usuario visita una página, el navegador que está utilizando lee los códigos del sitio desde arriba hacia abajo, hasta aquí claro ¿verdad? Bueno cuando dicho sitio tiene instalado cierta cantidad de ficheros CSS o JavaScript, el navegador deja de leer los códigos para procesar esos ficheros para que el usuario los pueda ver.

Ese tiempo de espera, es lo que causa que las páginas tarden en cargarse, y lo que hace que baje el rendimiento de un blog. Por ese motivo es que los plugin y programas que se instalen, deben ser los que verdaderamente se necesiten en un blog, porque ellos pueden ser los causantes de la pesadez de una página.

Si esto ocurre, es decir que un visitante espera para leer el contenido, este se encontrará insatisfecho con el servicio final otorgado por el blog.

Ahora bien, todo este problema que hemos mencionado es la razón por la cual Google notifica la eliminación de los recursos que bloquean el renderizado, que en término humanos significa lo siguiente: eliminar renderizado es quitar los recursos que no sirvan de la parte inicial de los códigos de la web, ya que ellos causan que los navegadores de los usuarios pierdan más tiempo para mostrar el contenido de un sitio.

Con eso claro, existen herramientas que paralizan alguno de estos elementos CSS y JavaScript, hasta que todos los códigos que hacen visible tu contenido se hayan cargado. Pero antes de hablar de ellos, vamos a explicar rápidamente en el siguiente punto qué son estos recursos y de que tratan.

¿Qué son los recursos para bloquear el renderizado?

Hasta este punto debes conocer la terminología: renderizado y los recursos que la bloquean, que básicamente son herramientas que incrementan la velocidad de carga de una página web. Ahora bien, cuando hacemos mención de herramientas que bloquean, generalmente estamos hablando de las siguientes:

  • CSS
  • JavaScript

No obstante, no todas cumplen con este propósito, es decir bloquear el renderizado. Por ese motivo, es importante identificar cuáles son, ya que instalar algunos podrían afectar el rendimiento de tu blog e incluso causar un efecto flash de contenido sin estilo, o FOUC por sus siglas en inglés.

¿Pero qué es FOUC? es un error que causa un fichero CSS en un blog, dándole el aspecto de una hoja de estilos CSS externa. Sin embargo no es permanente, ya que el blog se corrige una vez cargado el contenido, pero la aparición de este efecto causa distracción a los visitantes.

¿Las imágenes son recursos que bloquean el renderizado?

Algunas personas tienen duda de qué elemento puede causar bloqueo del renderizado, como por ejemplo las imágenes. Sin embargo ellas no disminuyen la velocidad de carga de un contenido, pero el tamaño y su peso pueden afectar su visualización en un blog.

Por este motivo siempre se deben optimizar, porque una web que desea buen posicionamiento SEO necesita de imágenes que se carguen rápidamente, y no lo contrario.

¿Cómo probar si su sitio web tiene estos recursos?

Para identificar si tu página posee algún recurso de bloqueo de renderizado, es decir, alguna herramienta que impida la velocidad de carga de tu sitio web, necesitas recurrir a un programa externo como Google PageSpeed Insights. Si lo ubicaste, lo único que debes hacer es colocar el enlace principal de tu página, y si tienes algún problema existente el programa te lo reflejará en una lista.

Además, en dicha lista podrás visualizar una sección llamada «Eliminar», una opción que podrás usar en el caso que desees eliminar aquellos programas que bloquean el renderizado de tu blog.

¿Cómo se eliminan?

Si obtuviste una lista con cierta cantidad de programas que debes eliminar, no te angusties, Google PageSpeed Insights facilita mucho el proceso para que no tengas que hacerlo manualmente, es decir ubicar los archivos uno por uno para eliminarlos.

Sin embargo esto requiere de otras herramientas externas, a parte de Google PageSpeed Insights, pero todos estos plugins puedes ubicarlos fácilmente en el repertorio de WordPress. Pero antes de conocerlos primero debes saber cómo funcionan, para que comprendas realmente de qué se trata el bloque de renderizado y su eliminación.

Mediante JavaScript

Como mencionamos antes, los bloqueos de renderizado generalmente son dos, y uno de ellos es mediante JavaScript. Como sabemos JavaScript es un lenguaje usado en programación, para dar dinamismo a ciertos objetos o programas.

A pesar de sus enormes aportes a una web, JavaScript muchas veces usa códigos de programación que son sumamente pesados y que ralentizan a una web, logrando de esta forma un bloqueo del renderizado.

Ahora bien, para impedir que un navegador web se detenga a leer JavaScript, antes de terminar de leer los códigos de la web, sería mediante las siguientes técnicas:

  • Async: es un código que se implementa, para que el analizador de HTML del usuario que visita tu web no se detenga cuando encuentra un archivo Java. De esta forma permite que se descargue los ficheros, mientras continúa la lectura de códigos. Sin embargo es necesario destacar, que Async realiza una pequeña pausa al analizar HTML para que los script descargados se pongan en marcha.
  • Defer: Otro recurso importante es este programa, y a diferencia del anterior Defer permite que el analizador HTML descargue los archivos Java mientras aún realiza la lectura de los códigos del blog, y estos únicamente se ejecutarán cuando se haya finalizado la lectura de los códigos.

Entre ambas, se podría decir que Defer es mejor, ya que ejecuta el análisis en el orden que se encuentra establecido los códigos del blog. En cambio Async se detiene momentáneamente para ejecutar los ficheros JavaScript, que puede ser un problema si tienes muchos en un sitio web.

Además, el cambio constante de etapas puede causar una rotura de los recursos que se encuentran dentro de esos mismos recursos, afectando de esta manera en el funcionamiento de los ficheros JavaScript. ¿Por qué razón? porque al analizar, descargar, analizar, ejecutar y terminar, pueden generar que un archivo no se cargue bien, y por ende no se lea correctamente sus códigos.

Mediante CSS

Suprimir un bloqueo de renderizado para CSS es mucho más difícil que el método anterior, ya que CSS son los códigos responsables que sustentan a una web, o por lo menos algunas de ellas, y por ende es necesario no impedir o retrasar la lectura CSS que renderiza el contenido de un blog. Teniendo eso en cuenta, para eliminar los bloqueos generados por CSS sería mediante las siguientes técnicas:

Debes reconocer qué estilos son los que utiliza CSS para renderizar el contenido, para posteriormente entregarlos en códigos HTML.

Una vez hecho eso, debes usar el atributo de medios de HTML en los enlaces que utilizan estos ficheros CSS, para poder reconocer los recursos CSS que son necesarios para la web.

El resto de los elementos CSS que quedaron, deberán ser cargados asincrónicamente, un proceso donde añades un código javascript en tu HTML del blog. En términos sencillos, cuando un navegador se encuentra procesando y ejecutando una web, en esos momentos le es entregado los códigos fuentes HTML que debe mostrar.

Esta lectura es progresiva, y por ello las páginas no cargan todo de golpe, nuestro navegador recibe un código, lo lee y luego lo procesa para mostrarlo en la pantalla del dispositivo. Sin embargo, cuando el navegador se topa con un archivo Javascript dentro de los códigos, es cuando suspende la lectura y la ejecución de los códigos HTML, y retoma nuevamente la lectura hasta que el navegador termina con la descarga y ejecución de dicho archivo. Una vez finalizado, el proceso se retoma nuevamente, hasta que finaliza la carga total de la web.

Pero vamos a detenernos un momento, hasta este punto debes estar hecho un lío y preguntándote qué loco hace todo esto ¿no? pues la verdad únicamente expertos en el campo.

La mayoría recurre a los recursos tradicionales, como por ejemplo los plugin de WordPress, herramientas que fácilmente te ayudan a eliminar o a disminuir los recursos Java o CSS que impiden el desarrollo completo del renderizado.

Sin embargo es importante conocer el funcionamiento de estos programas, así que no te preocupes que no vas a tener que desmantelar tu sitio web para resolver el problema.

¿Cómo eliminar los recursos CSS y JavaScript con los plugins de WordPress?

Ya conociste la importancia del renderizado, y la razón por la cual debes impedir que algún programa impida su funcionamiento. Ahora es momento de saber cómo hacerlo, y que no requiera de 5 años de carrera universitaria, y por ello vamos a recurrir a la fuente que siempre nos solventa los problemas de nuestra web: los plugins de WordPress.

Para ello, vamos a mostrarles ambos casos de bloqueo de renderizado, es decir CSS y JavaScript, y le plantearemos dos soluciones diferentes para solventar el problema:

  • Autoptimize + Async JavaScript (gratis)
  • Cohete WP (pagado)

Ahora bien, toma en cuenta que el programa Google PageSpeed Insights debes pasarlo en dos oportunidades, al inicio para que detectes si existe bloqueo, y la segunda para que midas la efectividad de los cambios. Además, debes estar al tanto que Google almacena el caché y por ende debes esperar a que restablezca los valores reales de los cambios generados, antes de que pienses que el plugin no funciona.

Con eso en mente, vamos a mostrarte dos recursos o plugins diferentes para que los pruebes en tu sitio, en el caso de que uno de ellos no te funcione.

Mediante plugin JavaScript de Autoptimize + Async

La siguiente solución que estamos por darles, es un dos por uno, lo que significa que no es un solo plugin sino dos, y la razón es que ambas se complementan entre sí. ¿De quién estamos hablando? de Autoptimize y Async JavaScript, dos extensiones de uso libre y que pertenecen al mismo desarrollador, lo que significa que no tendrás problema con las actualizaciones o compatibilidad.

Ahora bien, estos dos plugin trabajan en conjunto para que la lectura de HTML de un navegador no se vea pausada por archivos CSS y JavaScript. Con eso aclarado, lo único que debes hacer es ubicarlo en WordPress e instalarlo, si ya lo hiciste dirígete a «Settings» en la sección «Async JavaScript».

Allí deberás marcar la única opción disponible, para de esa forma activar el javaScript Async. En configuración rápida debes escoger entre sinconización y Defer.

Si esta opción (Async) no responde como se debe, lo más aconsejable es que intentes con Defer o en tal caso, busca la opción que excluya jQuery en el plugin de Async.

Si ya realizaste las configuraciones pertinentes de JavaScript Async, entonces dirígete nuevamente a «Settings», pero en esta oportunidad vas a ir a la sección «Autoptimize». En ese lugar debes marcar las casillas que sean para:

  • Optimizar el código JavaScript
  • Optimizar el código CSS

Si eres una persona experta en el tema, los ajustes adicionales pueden ser modificados libremente de acuerdo a tus necesidades, sin embargo si este no es el caso, mantén los valores predeterminados por el plugin.

Una vez configurado ambos plugin (Autoptimize y Async JavaScript), deberías aprobar la parte inicial de PageSpeed Insights, y por ende deberías poder visualizar la opción «elimina los recursos que bloqueen el renderizado».

Ahora bien, también tienes la opción de eliminar más ficheros que los mostrados, sin embargo se necesita de experiencia en el tema como desarrollador, ya que estarías utilizando códigos CSS.

También tienes la opción de usar los plugin individualmente, pero como pertenecen al mismo proveedor y fueron creados para trabajar en conjunto, lo más aconsejable es usarlos combinados.

Mediante WP Rocket

El segundo plugin que vamos a recomendarles, y de entre los más conocido entre la comunidad, es WP Rocket, una extensión que no solo te ayuda a corregir el bloqueo de renderizado, sino que puede medir el rendimiento y cacheo de tu sitio web.

Pero para efectos de este artículo, vamos a enfocarnos en el renderizado, sin embargo si deseas explotar su máximo potencial, ya sea porque quieres aumentar el rendimiento para mejorar tu posicionamiento, te recomendamos primero saber cómo borrar caché de WordPress y su importancia.

Con eso en mente, en esta oportunidad la instalación de WP Rocket es igual que el paso anterior, solo debes ir a WordPress y buscar en su repertorio la extensión.

Una vez que lo tengas, busca la sección «Optimización de Archivos» y marca o habilita las siguientes casillas:

  • Optimizar la entrega de CSS en la pestaña de archivos CSS.
  • Cargar JavaScript diferido en la sección de archivos de JavaScript.

Con esta última opción también puedes probar desactivando jQuery, pero si visualizas que con el plugin tienes problemas con la carga, entonces lo más recomendable es que vuelvas a conectar el modo seguro de jQuery. De esta forma puedes saber si es el culpable o no del problemas.

Ahora retomando nuevamente el tema, si ya activaste las casillas el blog debería pasar por la primera etapa de PageSpeed Insights, lo que significa que ya tienes habilitada la opción de eliminar los recursos que bloqueen el renderizado.

Resumen

Cuando lees recurso de bloqueo de renderización, ya sabemos que son extensiones o ficheros que tienes en tu blog y que causa la baja velocidad de carga de un sitio web. También sabemos que esto causa que los navegadores de los usuarios se abstengan de visualizar rápidamente el contenido o la renderización, ya que el análisis de códigos HTML se encuentra descargando y procesando ficheros que tienes instalado en tu blog.

Para que esto no ocurra, ya sea porque quieres mejorar tu posicionamiento o quieres proveer de un buen servicio, entonces es momento de adquirir herramientas que te ayuden a retrasar la carga de elementos que no son requeridos inmediatamente en tu blog.

A esto se le llama eliminar los recursos que bloqueen el renderizado, y para lograrlo solo necesitas de algunas extensiones como por ejemplo Autoptimize y Async JavaScript, dos buenas opciones para aumentar la velocidad de carga y sin necesidad de dar nada a cambio.

Pero si buscas algo mejor, y no tienes problemas de pagar, entonces la mejor opción para ti es WP Rocket. Un plugin que no solo te ayuda con el problema de carga, sino que también te muestra otras métricas como el rendimiento y el cacheo.

Además, no solo existe la oportunidad de eliminar estos bloqueos por medio de plugin sino que también puedes hacerlo técnicamente mediante códigos HTML y CSS. Sin embargo el procedimiento es complicado, y solo se puede realizar por un experto, porque los cambios que se harán no será a nivel superficial de un blog, sino en los códigos principales que le dan forma.

De igual forma existen expertos en el tema que te pueden ayudar, y tampoco está de más que investigues sobre el tema. Por esa razón te dejamos los siguientes artículos de interés:

Deja un comentario