Guías > WPO WordPress > Cómo optimizar JavaScript en WordPress

Cómo optimizar JavaScript en WordPress

Optimizar JavaScript WordPress

Te voy a explicar cómo optimizar JavaScript en WordPress, para mejorar la velocidad de tu web.

Recuerda que el JavaScript puede hacer tu web muy pesada y lenta, lo que la lleva a tener muchos problemas.

Te recomiendo tener una web tan optimizada como la mía.

Raúl González PageSpeed 100

Por qué necesitas optimizar el JavaScript de WordPress

Hay muchos motivos, pero estos son los principales.

Funcionamiento

El JS es el encargado del funcionamiento de la web de la parte del usuario.

Una web que cargue demasiado JavaScript o no se optimice bien, no cargará correctamente.

Trafico SEO

Google necesita rastrear correctamente la web y demasiado JS o mal optimizado, empeorará el rastreo e indexación de contenidos.

Es lo que se conoce como el crawl-budget en wordPress.

Conversiones

El JavaScript hará la web más lenta y una web lenta pierde hasta un 20% de conversión por cada 1 segundo más de carga.

La conversión mejora inmediatamente cuando una web es más rápida.

Gastos en hosting

Una web que cargue demasiado JS consumirá mucho más hosting que hay que pagar.

Una web optimizada consume hasta un 80% menos de hosting.

Gastos en publicidad

Google Ads toma muy en serio la calidad de la página de destino y una web lenta pagará mucho más en CPC.

Una web optimizada es un ahorro inmediato en costes publicitarios.

Cómo optimizar JavaScript en WordPress

Te explico todas las tareas que se suelen realizar, pero no tienen por qué ser todas necesarias.

Explico paso a paso a optimizar WordPress y resolver los problemas que surgen en mi libro WPO para WordPress.

Usa temas y plugin con poco JavaScript

El paso más importante es usar temas y plugins con poco JavaScript, porque el JavaScript que no se usa, no ralentiza.

Este se puede analizar directamente en el código que carga la web o con herramientas como PageSpeed.

Especifica la caché del navegador al JavaScript

Especificar la caché del navegador al JavaScript, hará que estos archivos se cacheen en este, para que no se tengan que cargar en las próximas URLs visitadas.

Si tu web tiene 500 KB de JS, cuando un usuario visita la siguiente URL, como por ejemplo una entrada, esta pesará esos 500 KB de menos, con lo que cargará más rápido.

Esta caché del navegador se puede activar desde el hosting, cosa que algunos lo traen de serie y otros se activa a mano.

Desde plugins de optimización como WP Rocket, que te lo hace automáticamente o desde el CDN, ya dependiendo de la configuración.

Optimiza Emoji

Los Emoji son iconos que añaden un plus a los comentarios, pero si no se usan, son un código JS que se añade y ralentiza.

Por eso, si no se usan, lo ideal es desactivarlos con plugins como Perfmatters.

Optimiza JQuery

Query es una librería JavaScript muy útil, pero que es muy pesada y lenta.

Recomiendo no usar temas y plugins con JQuery, pero la gran mayoría la usan.

Aunque se pueden hacer algunas tareas para mejorar la carga de esta.

Optimiza el JavaScript en línea

El JavaScript en línea es el que se carga directamente en el código.

Bien porque lo añadas tú, como el caso de Google Analytics y similares o que lo cargue un plugin.

Intenta usar el mínimo de este JavaScript y a poder ser que se cargue en el footer, en vez de en el header, para que ralentice menos.

Elimina el JavaScript que no se use

Una buena idea es la de eliminar scripts que no se estén usando en ciertas páginas, aunque esto es una tarea más compleja.

Lo ideal es que los plugins ya vinieran preparados para ello, pero lamentablemente no es así.

Esto requiere de ciertos conocimientos para realizarlo, porque de lo contrario tendrás muchos problemas.

Elimina el JavaScript externo

El JavaScript externo suele ralentizar enormemente la web.

Pero si además estos archivos JavaScript son pesados, por ejemplo más de 100 KB, entonces la cosa empeora considerablemente.

Intenta usar el mínimo de servicios externos o úsalos solo en las URLs necesarias.

Minimiza el JavaScript

La mejor forma de optimizar estos scripts, es minimizar el JavaScript.

Lo que hace es quitar lo que no sirve a nivel de diseño, para que el script pese mucho menos.

Yo uso el plugin WP Rocket que ya lleva esta opción integrada y que da muy buen resultado.

Te recomiendo probarlo.

Combina los archivos JavaScript

Si hay algo que reduce las peticiones es combinar los archivos JavaScript.

Básicamente se cogen los scripts y se unen en un gran JS, lo que hace que la web haga menos peticiones.

También tiene su parte negativa, porque hay que saber hacerlo bien, sino quieres tener problemas de funcionalidad o diseño en la web.

Carga JavaScript de manera diferida

La última tarea interna de optimización, es la de cargar JavaScript de manera diferida.

Debes saber que todo el JavaScript que uses en tu web bloquea la carga de la web.

Esto hace que la web tarde mucho más en cargar y las herramientas como PageSpeed te avisan de ello.

La solución pasa por evitar ese bloqueo, pero no se explica en 2 líneas.

Sirve el JavaScript desde un CDN

Una vez que has reducido al máximo tu JavaScript y lo has optimizado, lo ideal es servir JavaScript desde un CDN.

Este servirá los scripts desde la localización más cercana a tu público objetivo, con esto consigues por un lado servirlos más rápido, así que aceleras tu web.

Y por otro, le quitas carga al servidor, con lo que tu hosting te durará mucho más, sin necesidad de aumentar el plan.

Conclusión

Como has podido ver, se puede hacer muchas tareas a la hora de optimizar JavaScript en WordPress y es una de las tareas más importantes a la hora de optimizar WordPress.

Obviamente todas son necesarias y te recomiendo llevarlas a cabo, aunque no se pueden explicar en una sola guía.

Espero que esta guía te ayude a hacer tu web más rápida.

Si lo necesitas, hay 4 maneras en las que puedo ayudarte:

1. Libro WPO para WordPress: Descubre todas las claves para tener una web WordPress rápida y optimizada.

2. Formación WPOptimizers: Domina paso a paso la optimización y consigue webs WordPress con el máximo rendimiento.

3. Consultoría de rendimiento 1 a 1 para WordPress: Optimiza el rendimiento de tu web WordPress con una consultoría personalizada y consigue resultados inmediatos.

4. Servicio WPO: Deja tu web WordPress en mis manos y haré que vuele de rápida con mi servicio de optimización.