Render-Blocking JavaScript y CSS en WordPress: 5 complementos para solucionarlo

No fue hace mucho tiempo cuando Google anunció que los sitios web que tardan más de tres segundos en cargar no son compatibles con SEO.

En esta era de Internet y marketing digital, debe tener el sitio web más rápido si desea competir con miles de rivales en todo el mundo de manera efectiva. No hay duda de que un sitio web más rápido tiene más posibilidades de atraer visitantes y aumentar su participación en su contenido.

Ejecutar un sitio web de WordPress significa una cantidad significativa de scripts que se ejecutan al mismo tiempo para que su sitio sea accesible.

Sin embargo, no siempre es esencial cargar todos estos elementos. Si alguna vez ha comprobado el rendimiento de su sitio web con Google Insights PageSpeed, probablemente te hayas encontrado con la opción de JavaScript y CSS que bloquea el procesamiento y que afecta su velocidad.

Hoy hablaremos sobre estos archivos extraños y le explicaremos las formas en que puede eliminarlos para mejorar su sitio.

 

¿Qué es JavaScript y CSS que bloquean el renderizado?

En resumen, JavaScript y CSS que bloquean la representación son una serie de hojas de estilo y scripts necesarios para ejecutarse por completo antes de que un sitio se cargue y se vuelva visible.

Los temas y complementos que instala en su sitio web de WordPress agregan muchos de estos archivos a la sección de front-end de su sitio web. Y como habrás adivinado, algunos de ellos ralentizan el tiempo de carga de la página y evitan que las páginas se procesen.

Cuando un visitante del sitio web abre su sitio web, el navegador de Internet primero carga los archivos JavaScript y CSS necesarios antes del HTML.

Este es un procedimiento ordinario ya que una página sin estos elementos esenciales quedará inutilizable. El problema es que el navegador web no puede mostrar la página antes de que estos archivos se carguen por completo.

El truco aquí es que puede posponer la carga de algunos scripts sin causar ningún problema con lo que ven los visitantes al abrir una página suya.

Los propietarios de sitios web pueden realizar modificaciones en su sitio para evitar que los navegadores web carguen cualquier código fuera de lo necesario para la parte superior de la página que un usuario ve inmediatamente.

En otras palabras, los navegadores solo cargan los archivos esenciales para esa sección antes de que un usuario se desplace hacia abajo en la página. Esta área de páginas web se llama ATF, que significa Above the Fold. Otras partes que requieren que los usuarios se desplacen hacia abajo para poder ver es la sección sin ATF.

Por lo tanto, si su sitio web carga los códigos JavaScript y CSS relacionados con las secciones que no son ATF, las páginas demoran más en cargarse. Y es por eso que Google intenta decirle que deje de ejecutar los recursos innecesarios en los códigos de su sitio web.

 

Encuentra JavaScript y CSS que bloquean el renderizado

La forma más sencilla de averiguar sobre este problema es realizar una prueba de velocidad con Google PageSpeed ​​Insights. Una vez que visite la página, todo lo que necesita hacer es ingresar su dirección URL en el campo requerido y luego hacer clic en el botón 'Analizar'.

Si tiene este problema en la página, verá una sugerencia que le indica que elimine JavaScript y CSS que bloquean la representación en el contenido de la mitad superior de la página.

Sería mejor si no olvidara que la mayoría puntuación de sitios web en algún lugar entre 70 y 90, e incluso los de mejor rendimiento rara vez alcanzan un número cercano a 100. Por lo tanto, nunca debe obligar a su sitio a llegar a 100. Haga todo lo que pueda para lograr la puntuación más alta sin afectar la experiencia del usuario negativamente.

Dependiendo del tema y las herramientas que use en su sitio, algunos scripts son esencial para la experiencia de usuario perfecta se supone que debes ofrecer a tu audiencia. Por lo tanto, no es aconsejable eliminarlos en un intento de alcanzar una puntuación un poco más alta en la página de resultados de esta herramienta de Google.

 

Corregir JavaScript y CSS que bloquean el renderizado

Hay muchas estrategias para eliminar JavaScript que bloquea el procesamiento. Los métodos principales son Async y Defer. El primer método permite que el navegador del usuario descargue JavaScript mientras analiza otras partes HTML.

Aunque no detiene por completo el análisis durante el tiempo que se descarga el archivo, el Analizador de HTML hace una pausa para ejecutar el script cuando se descarga. Por otro lado, el enfoque Defer permite que el navegador descargue JavaScript mientras analiza otras partes de HTML y no ejecuta el script a menos que finalice el análisis de HTML.

Eliminar el CSS que bloquea el renderizado es más complicado, ya que puede retrasar los códigos necesarios para cargar el contenido ATF. El procedimiento es un poco complicado y requiere una buena comprensión del desarrollo web.

Sin embargo, nos dirigimos a los usuarios promedio que ejecutan su sitio web por su cuenta.

Todos sabemos que WordPress es un sistema modular que permite a los usuarios promedio modificar todo sin escribir una sola línea de código. Arreglar este problema también es lo mismo, y puede resolverlo rápidamente instalando el complemento apropiado.

 

Los mejores complementos de WordPress para arreglar JavaScript y CSS que bloquean el renderizado

En los siguientes párrafos, presentaremos cinco complementos de WordPress de mejor rendimiento que le ayudarán a resolver este problema más profundamente.

Precaución: Antes de utilizar cualquiera de las siguientes herramientas, asegúrese de realizar una copia de seguridad de su sitio web para evitar cualquier posible pérdida de datos.

 

Autoptimize

El Autoptimize El complemento está hecho explícitamente para abordar los problemas sugeridos por las herramientas de análisis del sitio web como Google PageSpeed ​​Insights. Mejora la entrega de archivos JavaScripts y CSS sin centrarse demasiado en otros aspectos del rendimiento del sitio web.

Si está buscando funciones de optimización básicas, este complemento le dará lo que necesita. Una buena parte de esta herramienta es que convierte las imágenes de su sitio web al formato WebP optimizado.

Una vez que instale y active Autoptimize, debe marcar las casillas de las opciones 'Optimizar código JavaScript' y 'Optimizar código CSS' que se encuentran en la configuración del complemento. Tenga cuidado de no marcar las casillas debajo de estas dos opciones que agregan los archivos CSS y script.

Aunque este complemento está disponible de forma gratuita, también puede comprar paquetes premium que lo ayudarán con la configuración del sitio web.

 

WP Rocket

WP Rocket es un nombre bien conocido entre las herramientas de optimización de WordPress que lo ayuda en diferentes aspectos, como la modificación de JavaScript y CSS, la configuración de carga diferida. El proceso de configuración de WP Rocket es bastante simple, pero puede resultarle difícil en primer lugar comprender cómo se hacen las cosas en la interfaz.

Está listo desde el primer momento y aplica la configuración óptima en su sitio web inmediatamente después de la instalación. Teniendo en cuenta la inevitabilidad de los fallos de funcionamiento del sitio web debido a cambios en el script, el complemento no activa la configuración de JavaScript y CSS que bloquea la representación de forma predeterminada.

Pero puede activar fácilmente esta función dirigiéndose a la configuración del complemento y buscando las opciones relacionadas en las secciones 'Archivos CSS' y 'Archivos JavaScript'.

El complemento principal cuesta $ 49 al año y también viene con un año de soporte. Además, puede encontrar múltiples extras gratis también para el complemento principal de WordPress.

 

ConejoCargador

ConejoCargador es un complemento de optimización del rendimiento de WordPress de última generación diseñado para hacer que un sitio web funcione más rápido, más fluido y más eficientemente.

Al igual que el aclamado WP Rocket, RabbitLoader no sólo lleva el rendimiento de su sitio a nuevos niveles, sino que también introduce algunas características innovadoras que lo diferencian de otros jugadores del juego.

Magia de almacenamiento en caché: RabbitLoader va un paso más allá al ofrecer un sistema de almacenamiento en caché dinámico que se adapta en tiempo real a los cambios en su sitio, asegurándose de que sus visitantes siempre vean el contenido más reciente sin sacrificar la velocidad.

Optimización de imagen: Las imágenes pueden ralentizar significativamente un sitio web, pero la función de optimización de imágenes de RabbitLoader cambia las reglas del juego. Comprime y cambia automáticamente el tamaño de las imágenes a un tamaño óptimo sin comprometer la calidad, lo que garantiza que su sitio se cargue rápidamente sin sacrificar el atractivo visual.

Carga lenta: Tanto WP Rocket como RabbitLoader ofrecen carga diferida para imágenes e iframes, pero RabbitLoader va más allá al ofrecer carga diferida de JavaScript.

Compatibilidad: RabbitLoader está diseñado para funcionar perfectamente con una amplia gama de temas y complementos de WordPress, al igual que WP Rocket. Ya sea que tenga un blog simple o un sitio web de comercio electrónico complejo, RabbitLoader está diseñado para mejorar el rendimiento de su sitio sin conflictos.

 

W3 Total Cache

W3 Total Cache es un potenciador de rendimiento robusto que maneja no solo los problemas de almacenamiento en caché, sino también los problemas causados ​​por los scripts y las hojas de estilo.

Puede eliminar fácilmente el JavaScript y CSS que bloquean el renderizado habilitando primero la opción Minify de la configuración del complemento y configurándola en el modo manual.

A continuación, debe hacer clic en la pestaña 'Eliminar recursos que bloquean la representación' y copiar la dirección del enlace completo de los archivos necesarios para bloquear scripts y hojas de estilo. Ahora puede usar estos enlaces e ingresarlos en la 'sección JS' del Rendimiento> Minificar .

W3 Total Cache tiene más de un millón de instalaciones activas y puede descargarlo a su sitio de forma gratuita desde el sitio web de WordPress.org.

 

Paquete de refuerzo de velocidad

Paquete de refuerzo de velocidad es una herramienta confiable para optimizar hojas de estilo, JavaScripts, carga diferida y eliminación de desorden. El equipo de desarrolladores actualiza continuamente este complemento para mantenerlo actualizado con las últimas actualizaciones y medidas de seguridad.

Si vende productos y servicios en línea, el Optimización específica de WooCommerce Las características de Speed ​​Booster Pack te ayudarán mucho a aumentar la visibilidad de tu tienda en Internet.

Puede corregir rápidamente JavaScript y CSS que bloquean el procesamiento en su sitio web de WordPress haciendo clic en la pestaña 'Avanzado' del menú Speed ​​Booster Pack de su panel de administración.

Para JavaScript, active las opciones 'Mover scripts al pie de página' y 'Aplazar el análisis de archivos JavaScript'. A continuación, diríjase al menú "Optimización de CSS" y elija entre las opciones disponibles para mejorar el rendimiento de su sitio.

Speed ​​Booster Pack es una solución gratuita disponible en el sitio web de WordPress.org.

 

JCH Optimizar

JCH Optimizar es el último elemento de esta lista de complementos sugeridos que viene equipado con herramientas útiles para acelerar la carga de la página. Por ejemplo, le ayuda a reducir la cantidad de solicitudes HTTP necesarias para cargar sus páginas y, al mismo tiempo, a reducir el tamaño de esas páginas.

Generador de Sprite es otra característica interesante disponible en este complemento que reduce la cantidad de solicitudes HTTP para cargar las imágenes de fondo.

Con JCH Optimize, puede eliminar el JavaScript y CSS que bloquean la representación si actualiza a un plan premium. Todo lo que necesita es activar las opciones 'Premium' u 'Óptima' en la sección 'Configuración automática'. La configuración de entrega de CSS también está disponible solo en la versión Pro.

Puede instalar este complemento de forma gratuita desde WordPress.org, pero debe comprar un plan premium para desbloquear todo su potencial. Los planes de precios comienzan desde $ 29 por seis meses y llegan a $ 99 para acceso de por vida.

 

Resumen

La velocidad de carga del sitio web es uno de los elementos más críticos para atraer, involucrar y retener al público. Debe darle una alta prioridad al optimizar su sitio web para los motores de búsqueda y utilizar la herramienta Google PageSpeed ​​Insights para medir qué tan bien se desempeña en este campo.

El elemento JavaScript y CSS que bloquea el procesamiento es una de las sugerencias más comunes que puede ver al usar la poderosa herramienta de Google. Puede solucionar fácilmente este problema instalando uno de los cinco complementos que presentamos en este artículo y acelerar la velocidad de carga de sus páginas en gran parte.

Esperamos que este tutorial le resulte beneficioso y disfrute de un sitio web de carga rápida para obtener los mejores resultados posibles.