Elimina los recursos que bloqueen el renderizado en WordPress

Usando Google PageSpeed Insights

En primer lugar, deberás acceder a la página de Google PageSpeed Insights.

Una vez dentro verás algo como lo siguiente, con un campo en el que deberás escribir la url de tu web y clicar en “ANALIZAR”.

NOTA: Es importante hacer este tipo de pruebas con la web en producción, ya que si tienes tu web con algún modo mantenimiento o similar, los resultados no se corresponderán con la parte de tu web que necesitas analizar.

Una vez terminado el análisis, verás dos pestañas, una para el análisis de rendimiento en dispositivos móviles y otra para ordenador, cada una de ellas con una puntuación asignada en función de las auditorias pasadas.

Como te decía, voy a centrarme en el error de eliminar los recursos que bloqueen el renderizado, por lo que, haciendo scroll, llegarás a la sección con los errores, o como llama PageSpeed Insights, “Oportunidades”. En este apartado no te asustes si ves múltiples errores, ya que, en mayor o menor medida, todo tiene solución. No obstante, el error ya comentado te aparecerá de la siguiente manera.

¿Porqué mi web tiene este error?

No es sólo tu web, este error de bloqueo del renderizado es provocado por elementos de JavaScript y CSS que impiden que tu web muestre la página web hasta que estos han terminado de cargar.

Insisto, no te preocupes, ya que es un problema bastante común en páginas web desarrolladas con WordPress, puesto que se compone de varios complementos o plugins, además del tema elegido para la web. Todos estos elementos, se componen de una serie de scripts que aumentan el tiempo de carga de esta, a la par que pueden bloquear la presentación de la página web.

Los navegadores de los usuarios tendrán que cargar previamente los scripts comentados antes de poder visualizar la web. Y los visitantes con conexiones más lentas tendrán que esperar para poder acceder al contenido, algo que Google odia profundamente y, por tanto, penaliza.

Dicho esto, voy a mostrarte como arreglarlo y que el error “Elimina los recursos que bloqueen el renderizado” desaparezca del análisis de tu web.

Solucionar el error «Elimina los recursos que bloqueen el renderizado en WordPress»

Principalmente, voy a enseñarte dos métodos para poder arreglarlo, y ninguno de ellos requiere un alto nivel técnico, por lo que no tocaremos código en la web ni nada parecido.
Como siempre digo, para cada necesidad dispones de un plugin que la cubre y este caso no es distinto. Así que, ¡vamos a ello!

Arreglar bloqueo de renderizado con WP Rocket

Antes de comenzar este punto, por si no conoces este plugin, comentarte que es un plugin premium, por tanto, sus funcionalidades son geniales y los resultados muy buenos, pero habrá que rascarse el bolsillo.

Con el plugin ya descargado desde la web del autor e instalado/activado en tu WordPress, deberás dirigirte al menú de la izquierda en Ajustes-> WP Rocket

En la siguiente ventana, clic en la pestaña de ‘Optimizar archivos’.

Aquí encontrarás las opciones a marcar de Minificar CSS, Combinar archivos CSS y Optimizar la entrega de CSS.

Igualmente, en el apartado de JavaScript, verás las opciones de minimizar y combinar archivos de JavaScript.

Tras marcar estas opciones, clic en «Guardar cambios» y también borramos la caché con WP Rocket.

Arreglar bloqueo de renderizado con Autoptimize

Con este método podremos arreglar el problema de “Eliminar los recursos que bloqueen el renderizado” gracias al plugin Autoptimize.

En este caso, nos servirá con la versión gratuita del plugin. Aunque, lógicamente, no tendremos la potencial mejora de rendimiento que nos aporta WP Rocket.

Primer paso, instalar y activar Autoptimize.

Con el plugin ya activado, dirígete a Ajustes-> Autoptimize

Aquí deberás marcar la opción de ‘Optimizar el código JavaScript’ y dejar desmarcada la opción ‘Unificar archivos JS’.

A continuación, baja hasta el apartado de CSS y marca la opción de ‘Optimizar el código CSS’ e igualmente, deja desmarcada la opción ‘Agregar archivos CSS’ como en la siguiente imagen.

Clic en «Guardar cambios y vaciar la caché» para probar de nuevo.

El resultado

Ahora toca volver a la página de Google PageSpeed Insights, analizar tu web nuevamente y… ¡Voilá! Problema solucionado con el correspondiente aumento en la puntuación para tu WordPress como puedes comprobar en la imagen.

Conclusión

Si bien PageSpeed Insights es una muy buena herramienta de análisis web, no conviene obsesionarse con lograr un 100 de puntuación (en la web de ejemplo con la que he trabajado para este artículo he logrado un 93). Mi recomendación es que optimices tu WordPress lo máximo posible dentro de tus posibilidades, y arreglar el problema de los elementos que bloquean el renderizado es un buen comienzo.

Si necesitas ayuda para arreglar este u otros errores en tu web no dudes en contactarnos.

Como siempre, ante cualquier duda o comentario estaremos encantados de leerte y responderte.

¡Hasta la próxima!