Cómo optimizar los recursos externos en WordPress

Cuando se trata de optimizar la velocidad de WordPress, se utilizan muchas técnicas para mejorar muchos aspectos de una web. Sin embargo, uno suele chocar contra una pared cuando aparecen recursos externos.

Los recursos externos son difíciles de optimizar. Punto. Por definición («externos») no son algo que se supone que debamos optimizar. Estamos hablando de archivos que se cargan desde otros lugares que no son tu servidor web:

• Archivos JavaScript utilizados para seguir a tus visitantes: Google Analytics, Facebook Pixel…
• Fuentes: Google Fonts, Font Awesome…
• Imágenes, CSS y otros archivos JS cargados por anuncios
• Archivos JavaScript y otros de tus cajas incrustadas de redes sociales: Facebook, Twitter, Instagram…
• Todo tipo de archivos cargados por videos incrustados: YouTube, Vimeo…

Afortunadamente, la comunidad de WordPress es increíble y sus desarrolladores aún más, por lo que tenemos algunas herramientas que pueden ayudarnos a optimizarlos.

Google Analytics

Casi todo el mundo usa Google Analytics (¡es gratis!), por lo que es muy fácil configurarlo en tu web WordPress. Es cuestión de copiar y pegar un bloque de código en el encabezado de tus páginas.

Sin embargo, implementar Google Analytics de manera oficial significa que cada vez que la página se cargue solicitará, en el mejor de los casos, un archivo externo de los servidores de Google, llamado analytics.js o gtag.js. Esta solicitud externa cuesta algo de tiempo de carga, por lo que sería mucho más eficiente alojar el archivo en tu servidor.

Hay varias herramientas para encargarse de esto, pero nuestra favorita es CAOS de Daan van den Bergh. Sus plugins están muy bien programados, son ligeros y muy útiles.

Simplemente instala el plugin, sigue estas instrucciones y ¡listo! Por supuesto, después de configurar CAOS, deberás desinstalar el plugin o eliminar el código que estabas usando anteriormente. De lo contrario, ¡tus datos en Google Analytics se duplicarán!

Google Fonts

Casi todos los temas que existen incluyen compatibilidad con Google Fonts. Te da mucha flexibilidad en términos de diseño, porque el usuario puede elegir entre más de 1000 fuentes diferentes de forma gratuita. La desventaja es que estas fuentes de Google casi siempre se cargan directamente desde los servidores de Google y, lo que va a ser más lento que si las fuentes estuvieran alojadas en tu propio servidor. Si tu tema incluye soporte para alojar localmente estas fuentes de Google, como Blocksy, entonces deberías aprovecharlo. Pero si no, Daan nuevamente tiene un plugin excelente para esto: OMGF.

El plugin es tan fácil de instalar y configurar como CAOS. Simplemente sigue su manual de usuario y ya está.

Retrasar la carga de archivos JavaScript

Todo lo que sea JavaScript en una web casi nunca es tan importante como para tener que cargarse de inmediato. Lo que el usuario espera es ver una página web lo antes posible, y eso incluye su CSS, fuentes y HTML. Pero toda la funcionalidad secundaria adicional (mira la lista anterior) proporcionada por los archivos JavaScript externos puede retrasarse fácilmente 5 o 10 segundos. De esta manera le damos prioridad a las cosas locales e importantes, y una vez que el sitio se ha cargado, podemos decir «vale, carga el resto de cosas sin tanta importancia».

Es importante tener en cuenta que que no estamos aplazando la carga (en inglés, «defer»), sino retrasando (en inglés, «delay»). El atributo defer que se añade a una etiqueta HTML le dice al navegador que descargue el script cuando lo encuentre y lo ejecute cuando se complete el análisis del código HTML. Cuando retrasamos («delay») los scripts, estos no se ejecutarán hasta que haya una interacción del usuario, como un desplazamiento del mouse, un toque de pantalla, scroll hacia abajo, etc., o hasta X segundos más tarde, si no hay tal interacción del usuario.

Para ello podemos utilizar un plugin muy útil llamado Flying Scripts. Es un plugin muy simple y pequeño que hace un excelente trabajo.

Haciendo una lista de los recursos externos

Primero, necesitamos saber exactamente qué recursos añadir a Flying Scripts.

1. Abre una ventana privada del navegador y presiona F12 para abrir las herramientas para desarrolladores.
2. Ve a tu web.
3. Haz clic en Red, luego JS y luego mire la columna Dominio.

Anota todos los dominios que no sean tuyos. En la imagen de arriba podemos ver sharethis.com, facebook.net, google-analytics.com y disqus.com. Todos ellos se pueden retrasar, porque no es necesario cargarlos de inmediato; proporcionan funciones para compartir, informes analíticos y funcionalidades de comentarios.

Aplicando la lista

Ahora, ve a tu web, Ajustes > Flying Scripts y simplemente añade esos dominios a la lista. Así:

Y ya está. Ahora los recursos externos de esos dominios se retrasarán 5 segundos (puedes cambiar el tiempo, pero entre 5 y 10 segundos deberían ser suficientes).

Si notas que algo se rompe en tu web, elimina cada línea hasta que el error desaparezca; habrás encontrado entonces el recurso externo que no debería haberse retrasado 😉