Solucionar Bloqueo de Renderización de JavaScript y CSS en WordPress

Solucionar Bloqueo de Renderización de JavaScript y CSS en WordPress

Uno de los problemas más comunes que enfrentan a los propietarios de sitios web cuando intentan optimizar el sitio web y mejorar la velocidad, es la renderización y bloqueo de archivos JavaScript y CSS. Hoy te mostraremos cómo solucionar el problema de bloqueo de renderización de JavaScript y CSS en WordPress.

Bloqueo de JavaScript y CSS

La frase “Bloqueo de JavaScript y CSS” parece algo ambiguo y sin un significado claro, entonces, ¿Qué es bloqueo de JavaScript y CSS en WordPress? y, ¿Cómo solucionar este “Problema”?

Generalmente este mensaje aparece en inglés, en las herramientas de análisis y diagnóstico de la valocidad y optimización de sitios web, como GTmetrix o PageSpeed Insights de Google, que reza así : Eliminate render-blocking JavaScript and CSS.

En WordPress, hay  temas y plugins, que tienen sus propios archivos de estilización CSS y JavaScript, para realizar determinadas acciones en ciertas acciones. El servidor necesita solicitar esos archivos antes de mostrar el resultado HTML final de la página.

De ahí viene el nombre de Bloqueo de Renderización, ya que técnicamente mantiene la página en blanco, bloqueada hasta que  se carguen esos archivos. Esto puede causar lentitud y demora en cargar la página por algunos segundos, especialmente en conexiones débiles.

Por tanto, es recomendable optimizar los archivos para mejorar la renderización de JavaScript y CSS para reducir el tiempo de carga de tu sitio web. Para conseguir esto, debes minimizar los archivos que causan este bloqueo.

Aquí te mostraremos cómo optimizar la velocidad de tu sitio web y eliminar el bloqueo de renderización de JavaScript y CSS en dos métodos distintos.

1 . Solucionar Bloqueo de Renderización de JavaScript con Autoptimize

El método que recomendamos a la mayoría de los usuarios para resolver el problema de bloqueo de renderización de JavaScript y CSS en WordPress es mediante un plugin, ya que es muy sencillo y seguro al mismo tiempo.

Necesitas instalar y activar el plugin Autoptimize del directorio de WordPress. Si es la primera vez que usas WordPress, te invitamos a ver cómo instalar un plugin en WordPress. Un artículo anterior donde detallamos el proceso.

Configurar plugin Autoptimize para solucionar problema de bloqueo de renderización de Javascript y CSS en WordPress

Una vez activado el plugin, en el submenú Ajustes » Autoptimize donde aparece la página de configuración de este plugin. Marcas las casillas Opciones de CSS y Opciones de JavaScript, y guardas los cambios.

Ahora utiliza una herramienta de diagnóstico como GTMetrix o PageSpeed Insights para observar la mejoría de en el puntaje del bloqueo de renderización de JavaScript.

Si el problema persiste tal como estaba antes, vuelves a la página de configuración del plugin, y en la parte superior derecha despliegas las opciones avanzadas.

Incrustar Javascript en línea en WordPress para mejora la velocidad

 

A continuación aparecen nuevas casillas en la misma página, marcas la casilla de Incluir JS incrustados y borrar el contenido del campo Scripts a excluir de Autoptimize.

2 . Solucionar Bloqueo de Renderización de JavaScript con W3 Total Cache

Si eres uno de los cientos de miles de usuarios del plugin W3 Total Cache, o si estás planeado usarlo por primera vez, entonces este segundo método también te será de mucha ayuda para reducir el bloqueo de renderización de javaScript y CSS, gracias a las opciones que incluye de forma predeterminada.

Minificar archivos javascript y css en W3 Total Cache en WordPress

La configuración es bastante sencilla, sólo te diriges a al submenú Performance>> General Settings, en la sección Minify, marcas la casilla Enable, para habilitar la minificación para reducir o eliminar el bloqueo de renderización de JavaScript y CSS en tu WordPress.

En la misma sección Minify, encuentras los tipos de archivos que deseas minificar, esencialmente los que causan el problema de renderización de JavaScript y CSS, junto con las opciones o formas de minifización, según las necesidades de tu sitio web.

Conclusión

Mediante uno de estos métodos, o ambos combinados, realizas un gran parte del trabajo de minificar y reducir el bloqueo de renderización de JavaScript y CSS en WordPress.

Pero a medida que pasan los días y añades nuevos componentes a tu sitio web, se van sumando otros archivos JavaScript y CSS, por lo  tanto, hay que hacer periódicamente diagnósticos a todo el sitio web mediante alguna herramienta como GTMetrix, para mantener tu WordPress en forma, y conservar una velocidad óptima para una buena experiencia de usuario, y al mismo tiempo para un mejor posicionamiento en los motores de búsqueda.

2 COMENTARIOS

DEJAR COMENTARIO

Favor escribir tu comentario!
Favor ingresar tu nombre aquí