Elimina los recursos que Bloqueen el Renderizado con Async JavaScript

9 de febrero, 2021 @ 11:34 — 0 comentariosDescargar PDF

El plugin Async Javascript es una extensión del plugin "Autoptimize". Este plugin aplica el atributo "Async & Defer" al javascript del sitio web y así controla la carga de los archivos javascript para aumentar el rendimiento de carga del sitio. En esta guía explicaremos como configurarlo.

Antes de hacer cambios importantes en nuestra web, siempre es recomendable tener un backup de respaldo por si algo sale mal, de modo que antes de hacer nada en nuestro WordPress, recomendamos seguir la siguiente guia en la cual se explica como realizar un backup con Softaculous.

Antes de usar Async Javascript, tenemos que instalar y activar Autoptimize, ya que es una extensión del mismo.

Como saber si tenemos recursos que bloqueen el renderizado

Para saber si nuestro sitio de WordPress tiene recursos de bloqueo de renderizado, podemos utilizar Google PageSpeed Insights e insertar la URL de nuestra web.

Una vez que finalice el análisis, si tenemos advertencias con los recursos que bloquean el renderizado, nos listará cada recurso en la sección Elimina los recursos que bloquean el renderizado.

1 - Obten la API key de GTmetrix

Antes de instalar Async Javascript, tendremos que entrar en la web GTmetrix, registrarnos y obtener la API key que encontraremos en nuestro perfil.

2 - Instala el plugin Async Javascript

Una vez con la cuenta ya creada en GTmetrix y la API key copiada, tendremos que instalar el plugin, de modo que buscamos "Async Javascript" en el repositorio de WordPress y lo instalamos como cualquier otro.

Si no sabes instalar plugins en WordPress, puedes seguir esta guía donde se explica como hacerlo.

3 - Introduce la API key en Async Javascript

Entramos en la configuración de Async Javascript y hacemos click en la pestaña Wizard e introducimos el correo con el que nos registramos en GTmetrix y la API key que copiamos en paso 1 de la guía.

4 - Analisis Async Javascript

En el siguiente proceso, el plugin realizará un análisis para determinar los ajustes óptimos.

Después de la prueba, obtendremos un mensaje basándose en los resultados del análisis. El plugin identificará y automáticamente nos indicará la mejor configuración después de obtener nuestra confirmación.

Antes de proceder, recomendamos comprobar la funcionalidad de nuestro sitio con el enlace simulado que nos crea el plugin, solo para asegurarnos de que todo está funcionando correctamente.

5 - Configura Async Javascript

Para finalizar, en la pestaña settings, tendremos que aplicar los valores recomendados por el plugin, de modo que los seleccionamos tanto en Quick Settings como en Async JavaScript For Plugins y guardamos los cambios.