Flying Scripts: Acelera tu Sitio de WordPress

La combinación de WordPress, un buen hosting como el de Cloudways o SiteGround y un tema que se destaque por ser liviano como GeneratePress son una buena receta para tener un sitio bastante rápido.

Este es uno de mis resultados en uno de mis sitios:

Los problemas de velocidad vienen con la instalación de plugins para agregar funcionalidades a los sitios.

Yo trato de reducir el uso de plugins a los esenciales y siempre valoro desactivar algunos que considero que no son indispensables.

Si te ves forzado a instalar un plugin que tiene un impacto en el sitio, el plugin Flying Scripts puede ser de mucha ayuda.

Flying Scripts es un plugin gratuito que fue creado por Gijo Varghese de WP Speed Matters

Lo que este plugin hace es atrasar la ejecución de Javascript que consideres que no es esencial hasta que haya una interacción del usuario.

Flying Scripts en Acción

Hace unos días venía considerando instalar el plugin de messenger en algunos de mis sitios.

El plugin que uso es el plugin de messenger de Facebook que se encuentra en el repositorio de WordPress.org

El impacto se siente inmediatamente después de su activación, este pasó a ocupar el segundo lugar en tamaño de transferencia.

Veamos otro dato proporcionado por Google Page Insights que confirma el impacto de este plugin.

En este caso, la ejecución ocupa el primer lugar inclusive por encima de los anuncios de Google.

Ahora apliquemos el plugin de WP Speed Matters.

En vista que el chat de messenger no es algo que el visitante deba ver justo en el momento que llega a mi sitio, puedo indicar por medio de Flying Scripts que el chat comience a cargar 10 segundos después de la llegada del visitante.

Es importante tomar en cuenta que la ejecucioń del Javascript se iniciara en el momento que el visitante interactúe con el sitio, en caso de no ocurra esa interacción, la ejecución del javascript se llevará a cabo en el tiempo establecido

Lo primero que hago es buscar el script en el código fuente de la página:

<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/es_LA/sdk/xfbml.customerchat.js#xfbml=1&version=v6.0&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class='fb-customerchat'
attribution='wordpress'
page_id=111694310348279
>

En el codigo encuentro el nombre del script, customerchat.js y lo pego en el espacio que indica el plugin en Flying Scripts.

Ahora voy a ver el impacto de la aplicación de esta optimización:

Una segunda confirmación del desempeño del plugin sería esto:

Problema Resuelto.

El messenger ya no es parte de los recursos que se cargan una vez que un visitante llega al sitio.

Puedes hacer lo mismo con algunos otros plugins y medir el impacto que tiene en tu sitio.

Espero que este consejo de optimización sea de utilidad en tus proyectos.

Artículos Relacionados