Elimina los recursos que bloquean el renderizado wordpress plugin

Wp rocket defer js

Sin embargo, no todos los recursos que el navegador considera que bloquean la renderización son esenciales para la primera pintura; todo depende de las características individuales de la página. Hay buenas prácticas que puedes utilizar para convertir estos recursos no críticos que bloquean la renderización en recursos que no la bloquean. Además, también se puede disminuir el número y/o el tamaño de los recursos de bloqueo de renderización que siguen siendo críticos y no se pueden eliminar.

LCP mide el tiempo de renderizado del bloque de imagen o texto más grande que es visible en la ventana gráfica del usuario. Si tu ruta de renderización crítica es demasiado larga (tienes demasiados recursos que bloquean la renderización, o los archivos son demasiado grandes), el elemento de contenido más grande tardará más en cargarse. Por lo tanto, para obtener una mejor puntuación LCP, se recomienda mantener el número y el peso de los recursos de bloqueo de la renderización bajo control.

Tanto si tiene un sitio web existente como si todavía está en fase de desarrollo, lo primero que debe hacer es encontrar sus recursos de bloqueo de la renderización para poder decidir cómo manejarlos. Por suerte, hoy en día hay muchas herramientas gratuitas de medición del rendimiento que puedes utilizar para este fin.

Eliminar el bloqueo de renderizado js

Los recursos de bloqueo de la renderización retrasan la primera pintura del contenido (FCP), es decir, el momento en el que su navegador renderiza el primer contenido (es decir, el fondo, los colores, los bordes, el texto o las imágenes) en el primer tiempo de carga.

Dicho esto, si su sitio se carga lentamente, es más probable que pierda visitantes, y menos probable que se clasifique bien en las SERPs. A la larga, los recursos que bloquean la renderización de su sitio tendrán un impacto negativo en su negocio.

Las imágenes son los recursos esenciales de cualquier sitio web. Por eso, los usuarios de WordPress suelen pensar que son sus imágenes las que causan problemas de bloqueo. Como resultado, optimizan las imágenes con compresión en lugar de eliminar los recursos de bloqueo de renderización reales que son la verdadera causa del problema.

Incluso más plugins y temas añaden archivos JS y CSS innecesarios de los que hay que ocuparse para eliminar los recursos que bloquean la renderización. Esto nos lleva a cómo eliminar los recursos JS y CSS que bloquean la renderización en WordPress con la ayuda de los plugins.

Para garantizar la máxima precisión en la eliminación de los recursos que bloquean el renderizado, este plugin no se limita a soluciones comunes, sino que se diversifica con características de alta calidad y tareas multifacéticas como

Bloqueo de renderización de Typekit

Como verás, los recursos que bloquean la renderización -archivos JS y CSS- pueden afectar enormemente al rendimiento de tu sitio. En términos prácticos, su sitio de WordPress se cargará más lentamente. Los recursos que bloquean la renderización afectarán a métricas críticas como el mayor contenido de pintura y el primer retraso de entrada, dos de las métricas de Core Web Vitals.

Sin el análisis de estos recursos - que no son necesarios para mostrar el contenido de la página - el navegador renderizaría la página del contenido principal más rápidamente. Los usuarios disfrutarían de una mejor experiencia de usuario, y las métricas de rendimiento también serían buenas.En resumen, los recursos CSS y JS que bloquean la renderización retrasan la renderización de la página sin ninguna razón válida.

No olvides que el tiempo de carga en sí también se verá afectado. No se trata sólo de la puntuación PSI y el rendimiento de Core Web Vitals y SEO. En general, se trata de proporcionar una excelente experiencia al usuario.

La forma más fácil de encontrar los recursos que bloquean la renderización es analizar el informe de PageSpeed Insights. Junto a la recomendación "Eliminar los recursos que bloquean la renderización", encontrará una lista de archivos de los que debería ocuparse. Puede ver un ejemplo a continuación:

W3 total cache render blocking

Puede que esté familiarizado con los culpables más comunes del bajo rendimiento de las páginas: el exceso de contenido, los archivos de imagen sin comprimir, el alojamiento insuficiente y la falta de caché, por nombrar algunos. Pero hay otro culpable que a menudo se pasa por alto: los recursos que bloquean la renderización.

Si has optimizado el rendimiento de tu página en WordPress y sigues teniendo problemas, los recursos que bloquean la renderización pueden ser los culpables. A veces este código es importante que se ejecute en la primera carga, pero la mayoría de las veces puede ser eliminado o empujado hasta el final de la cola.

Verás una lista de archivos que ralentizan la "primera pintura" de tu página - estos archivos afectan al tiempo de carga de todo el contenido que aparece en la ventana del navegador en la carga inicial de la página. Esto también se llama contenido "above-the-fold".

Autoptimize es un plugin gratuito que modifica los archivos de tu sitio web para ofrecer páginas más rápidas. Autoptimize funciona agregando archivos, minificando el código (es decir, reduciendo el tamaño del archivo mediante la eliminación de caracteres redundantes o innecesarios) y retrasando la carga de los recursos que bloquean la renderización.