Elimina fácilmente los recursos que bloquean el renderizado en WordPress

WordPress es el sistema de gestión de contenidos líder en el mundo y da poder a millones de sitios web. Sin embargo, uno de los retos a los que se enfrentan muchos propietarios de sitios web es el problema de los "Recursos de bloqueo de renderizado". Estos molestos elementos pueden ralentizar drásticamente los tiempos de carga de tu sitio, haciendo que los visitantes reboten antes de ver tu contenido.

Si tu empresa genera algún tipo de contacto, la velocidad es esencial. Respaldada por importantes investigaciones actuales, la velocidad influye directamente en las conversiones, la reputación y otros factores de marketing.

Si eliminas eficazmente los recursos que bloquean la renderización, mejorarás el rendimiento de tu sitio web y ofrecerás a tus visitantes una experiencia de usuario mejorada, con lo que conseguirás una mejor clasificación de tu sitio web en los motores de búsqueda.

En este post, aprenderás sobre:

¡Empecemos!

¿Qué son los recursos que bloquean el renderizado?

Los recursos que bloquean la renderización son como barricadas para tu sitio web. Son fragmentos de código, a menudo en forma de archivos CSS y JavaScript, que ralentizan las páginas de tu sitio web WordPress.

No estoy diciendo que CSS y JavaScript no sean importantes. Ambos son los componentes clave de cualquier sitio web WordPress. CSS ayuda a crear un diseño atractivo del sitio web, mientras que JavaScript ayuda a añadir un factor atractivo e interactivo al sitio web.

Sin embargo, los mismos elementos que mejoran el atractivo visual y la interactividad de tu sitio web a veces pueden dificultar su rendimiento cuando lo rastrean los motores de búsqueda. Los motores de búsqueda tienen un proceso en dos fases: primero leen el archivo y luego lo ejecutan. Esta fase de lectura puede llevar tiempo, provocando una ralentización de la velocidad de carga de tu sitio.

En este caso, si crees que el CSS y el JavaScript pueden cargarse después de que se cargue la página, entonces puedes añadir un retardo. Y, si no es necesario, entonces elimínalo.

Visita nuestro blog independiente si quieres consejos sencillos para acelerar tu sitio web WordPress.

Importancia de eliminar los recursos que bloquean el renderizado

Como he explicado anteriormente, los recursos que bloquean la renderización afectan directamente al rendimiento del sitio web. Por tanto, eliminar estos recursos que bloquean la renderización es crucial para mejorar el rendimiento de tu sitio web WordPress y la experiencia del usuario.

Factores clave que demuestran la importancia de eliminar los recursos que bloquean la renderización:

1. Carga más rápida de la página web: Si añades retardo a los recursos que bloquean la renderización, la carga inicial de la página se acelera, lo que mejora la experiencia del usuario.
2. Mejora el compromiso del usuario: Las páginas que se cargan rápidamente tienen más probabilidades de mantener el interés de los usuarios. Cuando las páginas se cargan rápidamente, es menos probable que los usuarios salgan rebotados.
3. Tasas de rebote más bajas: Los sitios web con menos tiempos de carga suelen tener tasas de rebote más bajas porque los usuarios no tienen que esperar a que se carguen los recursos que bloquean la renderización.
4. Experiencia móvil mejorada: Eliminar los recursos que bloquean la renderización garantiza que tu sitio se cargue rápidamente y funcione bien en dispositivos móviles.
5. Beneficios SEO: Todos sabemos que los motores de búsqueda, como Google, utilizan la velocidad de la página como factor de clasificación. Las páginas que se cargan más rápido se clasifican mejor en los resultados de búsqueda, lo que se traduce en una mejora de Core Web Vitals y SEO.
6. Mejores tasas de conversión: Al eliminar los recursos que bloquean la renderización, puedes crear un recorrido eficiente para el usuario, lo que repercute positivamente en las tasas de conversión.
7. Alcance global: Pocas regiones tienen una conectividad a Internet lenta. En esas regiones, los recursos que bloquean la renderización se vuelven aún más críticos. Por tanto, si los eliminas, mejorará la velocidad de las páginas y serán más accesibles para los usuarios con conexiones a Internet más lentas.

Sin duda, identificar los recursos que bloquean la renderización es una parte crucial de la optimización del rendimiento de tu sitio web WordPress. Estos recursos pueden afectar tanto a los tiempos de carga de la página como a la experiencia del usuario.

A continuación, profundizaremos en varias herramientas y técnicas que te ayudarán a identificar eficazmente los recursos que bloquean la renderización.

Herramientas

1. Google PageSpeed Insights:

PageSpeed Insights de Google es una herramienta popular y fácil de usar para evaluar el rendimiento de las páginas web.

Proporciona una sugerencia de "Eliminar JavaScript no utilizado" que identifica los recursos JavaScript que bloquean la renderización.

¿Cómo utilizar Google PageSpeed Insights?

1. Acceder a PageSpeed Insights
2. En el campo de entrada, introduce la URL de la página web que quieres probar
3. Pulsa el botón "Analizar
4. Revisar los resultados de la prueba

¿Cómo interpretar los resultados de las pruebas?

• Comprueba las recomendaciones relacionadas con la optimización de JavaScript
• Identifica en el informe el código JavaScript o las bibliotecas no utilizadas
• Revisar el ahorro potencial estimado en el tiempo de carga de la página
• Priorizar la eliminación o el aplazamiento de los recursos JavaScript no utilizados
• Vuelve a ejecutar la prueba para confirmar el impacto de los cambios en el rendimiento

2. Faro:

Lighthouse está integrado en Chrome DevTools y ofrece una auditoría de rendimiento más completa.

Incluye una auditoría "Eliminar recursos que bloquean la renderización", que proporciona detalles sobre los archivos JavaScript y CSS que causan retrasos.

¿Cómo utilizar un Faro?

1. Acceder al Faro
2. Abre Chrome DevTools utilizando estas teclas abreviadas: Ctrl+Mayús+I o Cmd+Opción+I
3. Navega hasta la pestaña "Lighthouse
4. Configura y ejecuta la auditoría
5. Haz clic en Generar informe y configura las opciones
6. Revisa el informe y examina la puntuación de rendimiento
7. Busca la auditoría "Eliminar recursos que bloquean la renderización".

A continuación se muestran algunas capturas de pantalla del antes y el después de los resultados de PageSpeed Insights.

Móvil - Antes:

Móvil - Después:

Escritorio - Antes:

Escritorio - Después:

¿Cómo interpretar los resultados de la prueba?

• Presta atención al impacto estimado en los tiempos de carga de la página
• Ver la lista de recursos específicos de JavaScript y CSS
• Observa la gravedad asignada a cada recurso, que a menudo se etiqueta como "Moderada" o "Alta".
• Revisa las sugerencias que suelen incluir la minificación, la carga asíncrona o el aplazamiento de scripts y estilos

3. Prueba de página web:

WebPageTest es una herramienta avanzada que te permite probar el rendimiento de las páginas web desde múltiples ubicaciones y dispositivos.

Proporciona una métrica de "Tiempo del primer byte" que puede ayudar a identificar los recursos que bloquean la renderización.

¿Cómo utilizar una prueba de página web?

1. Ir a Test de Página Web
2. Introduce la URL de tu sitio web
3. Selecciona una ubicación y un navegador
4. Configura opcionalmente los ajustes avanzados
5. Haz clic en "Iniciar prueba" para iniciar la prueba de rendimiento

¿Cómo interpretar los resultados de la prueba?

• Examina el gráfico de cascada
• Comprueba en "Detalles de la solicitud" si hay recursos que bloquean la renderización
• Evaluar el tiempo para primer byte (TTFB)
• Revisa las "Oportunidades" para ver las sugerencias
• Considera métricas resumidas como FCP y TTI
• Realiza pruebas repetidas.
• Pon en práctica las recomendaciones de optimización

4. Prueba de velocidad del sitio web de Pingdom:

La herramienta de prueba de velocidad de Pingdom proporciona información sobre el rendimiento de carga de tu página web, incluida la identificación de recursos que bloquean la renderización.

¿Cómo utilizar la prueba de velocidad de Pingdom?

1. Visita el sitio de Test de Velocidad de Pingdom
2. Introduce la URL de tu sitio web
3. Elige una ubicación de prueba
4. Haz clic en "Probar ahora".
5. Espera a que finalice la prueba

¿Cómo interpretar los resultados de la prueba?

• Comprueba tu nota de rendimiento
• Examinar el tiempo de carga
• Revisar el tamaño de la página
• Analizar el número de peticiones
• Estudia el gráfico de cascada
• Considera las sugerencias e ideas
• Busca solicitudes de archivos
• Optimizar los recursos que bloquean la renderización
• Volver a probar después de la optimización

5. GTmetrix:

GTmetrix ofrece un análisis detallado del rendimiento de tu sitio web, incluyendo información sobre los recursos que bloquean la renderización.

Proporciona recomendaciones para optimizar el tiempo de carga de tu página.

¿Cómo utilizar una GTmetriz?

1. Visita GTmetrix
2. Introduce la URL del sitio web
3. Iniciar la prueba
4. Espera los resultados
5. Revisa el informe completo de resultados

¿Cómo interpretar los resultados de las pruebas?

• Comprueba los resultados de PageSpeed e YSlow
• Analiza el Gráfico de Cascada en busca de recursos que bloqueen la renderización
• Sigue las recomendaciones de optimización
• Examina los tiempos de los recursos
• Observa el tiempo de carga y el tamaño de la página

Técnicas:

• Inspección manual: Revisa el código fuente e identifica los archivos CSS y JavaScript externos en la sección <head>. Utiliza las Herramientas de desarrollo del navegador para encontrar recursos que bloqueen la renderización.
• Herramientas para desarrolladores de Google Chrome: Abre DevTools, ve a la pestaña Red, recarga la página y busca en el gráfico de cascada los recursos "Bloqueados".
• Informes sobre Auditorías: Para obtener informes exhaustivos que destaquen los recursos que bloquean la renderización, utiliza herramientas como Lighthouse, PageSpeed Insights o GTmetrix.
• Validadores disponibles en línea: W3C Markup Validation Service, por ejemplo, puede detectar errores HTML como referencias a recursos que bloquean la renderización.
• Extensiones del navegador: Para facilitar la identificación, utiliza extensiones como "Page Ruler" y "Requestly" para estudiar y controlar el comportamiento de carga de los recursos.
• Herramientas para la supervisión del rendimiento en tiempo real y la elaboración de informes: Herramientas como New Relic y Datadog proporcionan supervisión del rendimiento e informes en tiempo real para descubrir y abordar los recursos que bloquean la renderización.

¿Cómo eliminar los recursos que bloquean la renderización en WordPress?

Los recursos que bloquean el renderizado pueden ralentizar el tiempo de carga de tu sitio web WordPress, afectando a la experiencia de usuario y a la clasificación SEO de tu sitio.

Por lo tanto, para garantizar que tu sitio se carga rápida y eficazmente, es esencial eliminar estos recursos que bloquean la renderización.

A continuación, he explicado las mejores prácticas para eliminar los recursos que bloquean la renderización en WordPress:

1. Utiliza un plugin de caché:

Los plugins de caché crean y sirven versiones HTML estáticas de tus páginas de WordPress. Ayudan a reducir la necesidad de cargar recursos dinámicos en cada visita. Esto reduce el tamaño del archivo y acelera los tiempos de carga. Para ello, puedes utilizar el plugin de caché Breeze.

Consejos:

• Elige un plugin de caché de confianza, como W3 Total Cache o WP Super Cache, y sigue atentamente sus instrucciones de configuración.
• Configura el plugin de caché para aprovechar la caché del navegador y garantizar un uso más eficiente de los recursos para los visitantes que regresan.
• Supervisa el rendimiento de tu sitio después de implementar el almacenamiento en caché para asegurarte de que funciona como se espera y ajusta la configuración según sea necesario.

2. Minimiza los archivos CSS y JavaScript:

Minimizar y combinar los archivos CSS y JavaScript te ayuda a reducir el número de peticiones y su tamaño total. Como resultado, puedes observar la aceleración de los tiempos de carga de la página.

Consejos:

• Utiliza un plugin dedicado como Autoptimize o WP Rocket para gestionar esta tarea automáticamente.
• Revisa y actualiza regularmente tus plugins y temas para garantizar su compatibilidad con el proceso de minificación.
• Prueba a fondo tu sitio después de la minificación para detectar posibles problemas, como fallos de funcionalidad o de estilo.

Nota: Consulta nuestra lista de los mejores plugins de velocidad para WordPress.

3. Carga JavaScript de forma asíncrona:

Al cargar JavaScript de forma asíncrona, permites que la página de tu sitio web WordPress continúe renderizándose mientras los archivos JavaScript se descargan y ejecutan.

Consejos:

• Comprueba si tu tema y tus plugins tienen opciones de carga asíncrona. Algunos lo incluyen como función integrada.
• Para un control adicional, añade explícitamente la propiedad async a las etiquetas script de los archivos JavaScript que no sean absolutamente necesarios.
• La carga asíncrona debe utilizarse con precaución porque puede afectar a los scripts que dependen unos de otros. Pruébalo con cuidado.

4. Aplaza la ejecución de JavaScript:

La ejecución diferida de JavaScript ayuda a retrasar la ejecución de scripts no críticos hasta que la página haya terminado de cargarse.

Consejos:

• Utiliza la propiedad diferir en tus etiquetas script para los scripts JavaScript que no necesiten ejecutarse inmediatamente.
• Después de aplazar los scripts, revisa cuidadosamente el funcionamiento de tu sitio web para asegurarte de que no ha afectado negativamente a las interacciones de los usuarios.
• Para garantizar que las funcionalidades básicas funcionan como es debido, da prioridad a los scripts esenciales en todo momento.

5. Inline CSS crítico:

El CSS crítico incluye los estilos necesarios para la representación de la parte visible de tu página web, que pueden alinearse directamente en el HTML.

Consejos:

• Genera el CSS crítico con una herramienta o plugin generador de CSS, como Autoptimize, para que sea una inclusión clave.
• Un enfoque automatizado a través de mod_pagespeed puede ser tu preferencia cuando consideres soluciones del lado del servidor.
• Mantener actualizado tu CSS crítico es esencial para mantener un aspecto fresco en tu sitio web. Actualizar el diseño o la maquetación de tu sitio requiere una atención constante.

6. Utiliza una Red de Entrega de Contenidos (CDN):

Una CDN distribuye los activos estáticos de tu sitio web entre varios servidores de todo el mundo para reducir la latencia y acelerar la entrega de recursos. La mejor CDN que existe es sin duda Cloudflare. Puedes aprovechar esta CDN con un presupuesto reducido si optas por la Cloudways Cloudflare Enterprise CDN.

Si quieres utilizar Cloudflare, consulta nuestra guía de configuración de Cloudflare WordPress CDN.

Consejos:

• Sigue las instrucciones de configuración proporcionadas por servicios CDN fiables, como StackPath o Cloudflare, para garantizar la fiabilidad. Es necesario registrarse para acceder a sus funciones.
• Almacena en caché tus archivos CSS y JavaScript con una CDN configurada para un almacenamiento en caché óptimo de los recursos estáticos.
• Optimiza la entrega de recursos vigilando regularmente la configuración de seguridad y rendimiento de tu CDN.

7. Optimiza las imágenes:

La optimización de imágenes reduce el tamaño de los archivos de imagen sin comprometer la calidad, lo que puede afectar significativamente a los tiempos de carga de las páginas.

Consejos:

• Comprime y redimensiona automáticamente las imágenes utilizando los mejores plugins de optimización de imágenes de WordPress, como Smush o EWWW Image Optimizer, cuando subas fotos.
• Revisa manualmente las imágenes de tu sitio, ¡y comprime las que se puedan!
• Utiliza técnicas de imagen responsive para personalizar adecuadamente las imágenes en función de los dispositivos de los usuarios.

8. Carga perezosa de imágenes y vídeos:

La carga lenta retrasa la carga de imágenes y vídeos hasta que sean visibles en la ventana del usuario. Consulta nuestra guía sobre cómo implementar la carga lenta en WordPress si aún no lo has hecho.

Consejos:

• Activa el lazy loading si es posible (muchos de los temas y plugins modernos lo soportan).
• Y si no, puedes añadir una función de carga perezosa mediante plugins de carga perezosa como "Lazy Load by WP Rocket".
• Asegúrate de probar bien la carga perezosa (especialmente en páginas en las que se carga mucho contenido multimedia) para no entorpecer la experiencia del usuario.

9. Reduce las peticiones HTTP:

Reducir el número de peticiones HTTP minimiza el tiempo que se tarda en obtener recursos del servidor.

Consejos:

• Evalúa el uso de recursos externos en tu Sitio Web y elimina todos los widgets, plugins o scripts externos no esenciales.
• Fusiona varias solicitudes de terceros (por ejemplo, botones para compartir en redes sociales) en una sola solicitud siempre que sea posible.
• Reduce el número de fuentes y scripts de terceros que envían solicitudes adicionales.

10. Utiliza un tema ligero:

Los temas ligeros tienen un código mínimo y menos funciones, lo que puede acelerar el tiempo de carga de la página. Si necesitas ayuda para encontrar un buen tema, consulta nuestra lista de los más de 450 mejores temas de WordPress.

Consejos:

• Selecciona un tema que guarde relación con lo que pretendes conseguir con tu sitio web; no utilices un tema sólo porque tenga muchas funciones.
• Elige temas hechos para rendir y optimizados por los desarrolladores a menudo.
• Además, minimiza el uso de recursos eliminando los elementos innecesarios/no utilizados en tu tema personalizado.

11. Caché del navegador:

El almacenamiento en caché del navegador indica al navegador del usuario que almacene los recursos estáticos localmente para acceder a ellos más rápidamente en visitas posteriores.

Consejos:

• Establece cabeceras de caché adecuadas para tus recursos en la configuración de tu servidor web o plugin de caché.
• Especificar el Tiempo de Vida (TTL) de los recursos de la caché te ayuda a invalidarlos periódicamente si actualizas los datos.
• Comprueba tu configuración de caché para asegurarte de que los navegadores web almacenan bien los recursos en caché.

12. Considera AMP (Páginas Móviles Aceleradas):

AMP es una tecnología que crea versiones ligeras y de carga rápida de tus páginas web, especialmente beneficiosas para los usuarios móviles.

Consejos:

• Conecta una herramienta como el plugin oficial "AMP para WordPress" para servir AMP por defecto en cualquier página de tu sitio web.
• Crea tus propias plantillas AMP personalizadas para mantener intacto el diseño y la funcionalidad de tu sitio web.
• Echa un vistazo a tu panel de control de AMP para controlar rápidamente el rendimiento de tu contenido y solucionar cualquier problema.

13. Actualiza regularmente plugins y temas:

Mantener actualizados el núcleo, los temas y los plugins de WordPress te garantiza disponer de las últimas mejoras de rendimiento y correcciones de errores.

Consejos:

• Permite las actualizaciones automáticas de plugins & temas, siempre que sea posible, para mantenerte al día.
• Programa comprobaciones automáticas de las actualizaciones; utiliza un entorno de pruebas (staging) para comprobar los cambios de la aplicación antes de aplicarlos al entorno activo.
• Consulta las notas de la versión para obtener información detallada sobre los cambios que podrían afectar a la compatibilidad y al rendimiento.

14. Monitorizar el rendimiento:

La supervisión regular del rendimiento mediante herramientas como Google PageSpeed Insights, GTmetrix o Pingdom te ayuda a identificar y solucionar los cuellos de botella en el rendimiento.

Consejos:

• Realiza auditorías de rendimiento de forma continua para medir las ganancias o pérdidas en el tiempo.
• Observa lo que sugieren las herramientas de rendimiento y reduce la lista de cosas que hay que arreglar en función de la gravedad.
• Vigila el rendimiento de tu sitio web y ajusta todo lo que necesites para mantenerlo en su mejor estado.

Poner en práctica estos consejos puede reducir significativamente los recursos que bloquean la renderización en tu sitio de WordPress, lo que se traduce en tiempos de carga de página más rápidos y una experiencia de usuario mejorada.

Consejo profesional: Haz siempre una copia de seguridad de tu sitio WordPress antes de hacer cambios importantes.

Además, comprueba a fondo la funcionalidad de tu sitio después de implementar estas optimizaciones para asegurarte de que todo funciona según lo previsto.

Conclusión

Eliminar los recursos que bloquean la renderización en WordPress es crucial para mejorar el rendimiento del sitio web y optimizar la experiencia del usuario.

Existe una serie de herramientas y técnicas valiosas para identificar y abordar estos recursos. En este artículo, he elaborado una lista de las principales herramientas que pueden ayudarte a identificar con precisión estos recursos y ofrecerte recomendaciones para mejorar tu sitio web WordPress.

Si esta tarea te resulta abrumadora, puede que merezca la pena considerar los servicios de un profesional Empresa de mantenimiento de WordPress para que gestione este proceso por ti de forma experta.

Liza Rajput

Liza Rajput es Productora de Contenidos Técnicos en Cloudways. Como ingeniera de software, le encanta jugar con los datos y sus procesos, y desea crecer y destacar en Ciencia de Datos e Ingeniería de Big Data. También es una ávida lectora y una escritora excepcional, con suficiente experiencia en escritura técnica, basada en la investigación y creativa.

¡Gracias por suscribirte!