Contenidos
¿Qué significa tener Recursos que Bloquean el renderizado?
Cuando un sitio web se carga en el navegador, envía solicitudes a cada uno de los scripts en una cola. Generalmente, es necesario que esta cola esté vacía antes de que el sitio web sea visible en el navegador.
Los archivos de JavaScript y CSS que bloquean la representación son aquellos que pueden impedir que tu sitio web se cargue por completo.
Cuando la cola de scripts es muy extensa, puede llevar tiempo antes de que los visitantes puedan acceder a tu sitio. Con frecuencia, muchos de estos scripts no son esenciales para ver el sitio web de inmediato y podrían esperar a ejecutarse hasta después de que el propio sitio esté completamente cargado.
Este tipo de scripts ralentizan tus páginas web sin contribuir realmente a las necesidades inmediatas de tus espectadores. Cualquier script que no esté vinculado a lo que el espectador verá de inmediato debería posponerse hasta que el resto de la página esté completamente cargada.
¿Por qué deberías eliminar los Recursos que Bloquean el renderizado en WordPress?
Los scripts de JavaScript y CSS que bloquean la presentación de tu sitio provocan una ralentización en la página web, lo cual es perjudicial por diversas razones.
- La velocidad del sitio desempeña un papel crucial en muchos aspectos fundamentales de tu sitio web de WordPress, incluida la usabilidad general y la optimización para motores de búsqueda (SEO).
- Cuando tu sitio se carga lentamente, es más probable que pierdas visitantes.
Naturalmente, la velocidad del sitio y el rendimiento se ven afectados por más factores que solo los recursos que bloquean el renderizado. No obstante, este es un factor que puede marcar una diferencia significativa en los tiempos de carga.
Ten en cuenta que cada recurso en una página web ocupa bytes y más bytes pueden resultar en tiempos de carga más prolongados.
En términos generales, es recomendable asegurarse de que el código de tu sitio web sea lo más limpio y mínimo posible para mejorar la velocidad en general. Sin embargo, siempre quedará algo de código residual.
Por defecto, los navegadores intentarán cargar todo al mismo tiempo, incluidos los scripts que bloquean el renderizado.
Depende de ti asegurarte de que tu sitio cargue primero los scripts necesarios para que se visualice correctamente y sea utilizable cuando un espectador llega a tu página. Solo entonces deberían cargarse el resto de los scripts.
Cómo Eliminar Recursos que Bloquean el renderizado en WordPress
Antes de poder eliminar los scripts que bloquean la representación, es necesario identificar cuáles son los scripts que están generando problemas. Para llevar a cabo este proceso, te sugerimos utilizar PageSpeed Insights de Google.
Simplemente introduce tu URL y Google te indicará con precisión qué scripts están afectando el rendimiento de tu página:
Genera un listado de todos los scripts que aparezcan en los resultados bajo la sección «Eliminar los recursos que bloqueen el renderizado«. Ya sea que optes por abordarlos de forma manual o mediante un plugin, estos son los scripts a los que debes prestar especial atención al implementar las siguientes soluciones.
Para reducir el número de scripts que bloquean la representación en tu sitio, es necesario seguir algunas prácticas recomendadas:
- Minificar tu JavaScript y CSS. Esto implica eliminar todo espacio en blanco adicional y comentarios innecesarios en el código.
- Concatena tu JavaScript y CSS. Para hacerlo, combina varios archivos .js y .css diferentes. Idealmente, deberías tener solo unos pocos archivos de este tipo.
- Diferir la carga de JavaScript. Puede ser útil forzar a los archivos JavaScript a esperar a cargarsehasta después de que todo lo demás en la página esté listo.
Una forma confiable de diferir JavaScript es mediante el uso de la carga asíncrona.
Estos consejos pueden ser complicados de implementar manualmente en WordPress. Un solo plugin puede fácilmente agregar hasta cinco o seis scripts al frontend de tu sitio.
Afortunadamente, WordPress utiliza un filtro combinado para registrar todos los scripts frontales. Esto significa que tienes la oportunidad de identificar y manejar cualquier archivo entrante de JavaScript o CSS, incluso si no sabes exactamente qué buscar.
Claro está, esto es mucho más sencillo de lograr con un plugin en lugar de empezar desde cero.
Plugins de Wordpress para Eliminar Recursos que Bloquean el renderizado
Existen varios plugins de WordPress que pueden contribuir a la optimización de tu sitio al eliminar los scripts que bloquean la representación de JavaScript y CSS. En esta sección, exploraremos tres de las opciones más populares.
-
WP Rocket para eliminar recursos que bloquean el renderizado en WordPress
WP Rocket facilita la optimización del sitio a través de tareas como la minimización de CSS y JavaScript, la carga diferida de imágenes, el aplazamiento de solicitudes de JavaScript remotas y más.
Es la «navaja suiza» de los plugins de optimización.
Uno de los mayores beneficios de este plugin es el proceso de configuración simple. No obstante, una posible desventaja radica en la interfaz de usuario, ya que crea una experiencia diferente en el panel de control de WordPress en comparación con lo que podrías estar acostumbrado.
El propio plugin básico tiene un precio de 49€ al año para un sitio web y un año de soporte, con niveles adicionales que ofrecen más opciones.
-
Eliminación de recursos que bloquean el renderizado en WordPress con Autoptimize
Autoptimize está diseñado específicamente para abordar los problemas señalados por herramientas de análisis como PageSpeed Insights. Todas las configuraciones que te permiten ajustar el plugin para tu sitio web se encuentran en un nuevo menú en tu panel de control de WordPress.
Autoptimize abarca todas las tareas básicas de optimización, como la minimización y el almacenamiento en caché de scripts. Una característica única es que también puede optimizar y convertir imágenes al formato WebP.
Aunque esta herramienta tiene excelentes reseñas en general, es importante tener en cuenta que su configuración puede resultar algo compleja.
Aunque el plugin en sí es gratuito, puedes adquirir uno de los dos paquetes de los desarrolladores para obtener asistencia con su configuración.
Hay un plan de configuración personalizada con un precio aproximado de 149€.
-
JCH Optimize para eliminar recursos que bloquean la representación
JCH Optimize también ofrece herramientas únicas para mejorar el tiempo de carga de tus páginas. Por ejemplo, puede reducir el número de solicitudes HTTP necesarias para cargar tus páginas y disminuir el tamaño de esas páginas. Esto resulta en una carga reducida del servidor y menores requisitos de ancho de banda.
Otra característica única de JCH Optimize es su Generador de Sprites. Esto combina imágenes de fondo en ‘sprites’, lo que significa que se necesitan menos solicitudes HTTP para cargarlas en un navegador.
Una desventaja potencial de este plugin podría ser su pronunciada curva de aprendizaje. No obstante, la mayoría de los usuarios deberán depender de la documentación de soporte para asegurarse de haber configurado correctamente el plugin y evitar errores.
Dicho esto, el plugin cuenta con muchas reseñas de cinco estrellas y más de 10,000 instalaciones activas. En cuanto al precio, hay una versión gratuita del plugin disponible.
Sin embargo, si deseas acceso a soporte y funciones avanzadas como la API de Optimización de Imágenes, necesitarás adquirir una suscripción. Estas comienzan en 29€ por seis meses de soporte y acceso a la API.
