Optimizar la carga de JavaScript y CSS en WordPress

Dificultad del post: facilmediadifícil
[Total:5    Promedio:4.6/5]
optimizar css javascript

Vamos a empezar con una reflexión: viendo la importancia del Javascript y del CSS en los sitios web actuales.

Antes de entrar más en el concepto y teoría sobre cómo podemos optimizar el Javascript y el CSS de nuestro sitio web WordPress, veamos (con la herramienta Pingdom Tools) el peso que tienen los scripts Javascript y las hojas de estilo CSS en la web.

Vamos a lanzar un test con Pingdom Tools a marca.com, uno de los periódicos deportivos más grandes de España:

optimizar js y css

¿Ves el resultado? Justo por debajo de las imágenes tenemos el CSS y el JS.

Ahora vamos a hacer la misma prueba con un blog de un amigo mío, Miguel Florido. Realizamos el test con Pingdom Tools a su WordPress y obtenemos esto:

optimizar js y css

Como puedes ver otra vez, el Javascript y el CSS tienen un papel muy importante en la estructura de la web.

Y ya, por último, voy a hacer el mismo test usando Pingdom Tools en este mismo sitio web:

optimizar js y css

En este caso, las fuentes (es decir, las tipografías) son lo que más tarda en cargar. Recordemos que, en definitiva, cargar fuentes desde Google Fonts es cargar archivos CSS.

Volviendo un poco a la raíz del tema y resumiendo mucho la finalidad de estos tipos de archivos, podemos decir lo siguiente:

  • Los archivos javascript son scripts que nos permiten añadir funcionalidades a nuestro sitio web, además de dinamizarlo y mejorar la experiencia de usuario.
  • Los archivos CSS, también llamados hojas de estilo CSS, nos permiten darle apariencia visual al sitio web y maquetar el contenido.

Poco a poco, con el paso del tiempo, los sitios web se han ido complicando. Cada día son más complejos en lo que se refiere a funcionalidades dinámicas. Además, se usa CSS para darle forma al sitio web en todos los tamaños de pantalla: desktop, móvil, tablet, etc.

Resumiendo: los themes y plugins actuales añaden scripts Javascript y hojas de estilo CSS a la carga de WordPress. Esto provoca que la carga se complique, se dificulte y ralentice. Por ello, es necesario optimizar los scripts Javascript y las hojas de estilo CSS para conseguir buenos tiempos de carga.

Ahora vamos a cambiar el concepto y, en lugar de hablar de optimizar los scripts Javascript y las hojas de estilo CSS, vamos a hablar de optimizar LA CARGA de los scripts Javascript y hojas de estilo CSS.

Y esto es lo que intentaremos explicar en este artículo: cómo optimizar la carga de scripts JS y archivos CSS en WordPress sin necesidad de conocimientos avanzadísimos y simplemente con el sistema de prueba/error y aplicando la lógica y el sentido común.

optimizar js y css

Existen distintas formas y métodos para optimizar la carga de estos dos tipos de elementos. A continuación, te dejo el índice de contenidos de este artículo.

Vamos a aclarar una cosa: optimizando la carga de JS y CSS, realmente no vamos a mejorar tanto la velocidad de carga como lo haríamos implementando un cache de página o configurando un CDN. Sin embargo, nos ayudará a simplificar la web hasta el punto de que, en algunos casos, Google aprovechará mejor el crawl budget de nuestra web al agilizar y simplificar su carga.

 

Minificar CSS y Javascript en WordPress

El concepto minificar consiste en reducir el peso de los archivos eliminando los saltos de línea, los espacios en blanco y los comentarios, es decir, todos los caracteres que no son interpretables.

Cuando conseguimos que los archivos CSS y Javascript sean más pequeños, estos se descargan mucho más rápido en el navegador del visitante.

Existen dos formas de minificar el CSS y el Javascript en WordPress:

  • Manual: Se realiza la edición manual de los archivos para aligerarlos. Es un trabajo pesado y es necesario tener conocimientos sobre el tema para hacerlo. Incluso en themes y plugins actuales, resulta bastante complicado hacerlo sin dañar su funcionamiento. Hay que “hilar fino”.
  • Con plugins: Existen plugins como Autoptimize o algunas partes de plugins de cache como WP Rocket, Swift Performance o W3 Total Cache que sirven para minificar el código CSS o JS automáticamente siguiendo patrones. Este método suele fallar cuando se trata de instalaciones WordPress con themes y plugins muy complejos.

En cualquier caso, minificar el JS y el CSS es complejo. Suele ser un proceso engorroso y debemos sopesar si realmente nos compensa la mejoría que vamos a tener después de realizar la minificación.

 

Cómo minificar JS y CSS con WP Rocket

Como he dicho antes, utilizando plugins como WP Rocket para WordPress podemos minificar el contenido. En el siguiente vídeo puedes ver las opciones que tienes que activar y lo que debes tener en cuenta para no tener problemas:

En la sección “Optimizar archivos” de WP Rocket encontraremos todas las opciones relacionadas con la optimización de la carga de Javascript y CSS.

optimizar js y css

Además, desde esa sección también podremos configurar las exclusiones necesarias para evitar minificar ciertos archivos Javascript y CSS que pueden causarnos problemas en la carga de la web debido a su complejidad o a que su estructura no permite una minificación automática por las razones que sean.

optimizar js y css

WP Rocket es un plugin Premium con muy buen soporte. Si por cualquier razón nuestra combinación de theme + plugins nos pusiera difícil la minificación, podríamos contactar con el soporte para intentar solucionar los problemas y de esta forma minificar el máximo número de archivos JS y CSS posibles.

Ante todo, lo que debemos tener en cuenta es que los themes actuales son tan complejos que la minificacion de Javascript y CSS de forma automática mediante plugins suele fallar, a no ser que usemos un theme simple como GeneratePress o Schema.

 

Cómo minificar JS y CSS con Autoptimize

WP Rocket no es el único plugin que nos permite minificar el JS y el CSS de un WordPress. Con el plugin Autoptimize para WordPress también podremos hacerlo.

Autoptimize es un plugin específico para optimizar código Javascript y CSS. Se trata de un plugin gratuito y descargable desde el repositorio de plugins de WordPress.

optimizar js y css

Puedes obtener más información acerca de Autoptimize para WordPress en la siguiente URL: https://es.wordpress.org/plugins/autoptimize/

Cuando instalamos Autoptimize en WordPress y nos dirigimos a la sección “Autoptimize”, en “Ajustes” podremos ver una pantalla de configuración similar a esta:

optimizar js y css

Como puedes ver en la pantalla anterior, hay 4 bloques principales. Sin embargo, nosotros solo vamos a prestarles atención a los bloques que he marcado en color rojo en la imagen anterior:

  • Opciones de JavaScript.
  • Opciones de CSS.

Para llegar un poco más allá en la configuración de Autoptimize para minificar el código Javascript y CSS, vamos a pulsar en el botón “Mostrar opciones avanzadas”:

optimizar js y css

Aquí podremos ver algunos checkbox añadidos en todas las secciones que nos permitirán configurar correctamente la minificación de JS y CSS.

Con Autoptimize podremos configurar muchas más cosas que la minificacion de JS y CSS. Podremos:

  • combinar CSS y JS.
  • minificar código HTML generado.
  • cargar el Javascript en el <head> del sitio web.
  • cargar el CSS inline.
  • cargar las imágenes en el HTML con data:URI.
  • optimizar la carga de Google Fonts.
  • configurar la pre-conexión a hostnames externos.

Otro punto fuerte de Autoptimize es que cachea los archivos optimizados con el fin de no tener que realizar una optimización cada vez que carga la web. Sin embargo, este cache de Autoptimize puede llegar a causar problemas con plugins de cache de página para WordPress como WP Rocket.

En el siguiente vídeo que he grabado para ti y he subido a mi canal de Youtube, puedes ver cómo configurar la minificación de Javascript y CSS con Autoptimize en una review del plugin:

Como puedes ver, la interfaz de Autoptimize para este tipo de tareas está menos “currada” que la de WP Rocket y es menos intuitiva. Esto puede llegar a ser un problema, ya que además no tendremos el soporte por parte de los desarrolladores que tenemos con WP Rocket.

Vuelvo a repetir que la minificación de Javascript y CSS es algo complicado, que depende mucho de las circunstancias (theme y plugins utilizados en WordPress) y que en cada caso es completamente diferente. Como consecuencia, es imposible marcar unos pasos para conseguir el objetivo final, ni tampoco es todo blanco o todo negro. Es posible que algunos archivos JS o CSS no los podamos configurar.

 

Cómo minificar JS y CSS con WP Super Minify

Como tercera opción, quiero mencionar un plugin que he utilizado alguna vez y que tiene solo 1 funcionalidad: minificar el JS y el CSS.

El plugin en cuestión es WP Super Minify. Se trata de un plugin completamente gratuito que podemos descargar desde el repositorio de plugins de WordPress: https://es.wordpress.org/plugins/wp-super-minify/

Como puedes ver en la siguiente imagen, solo tiene 2 opciones:

optimizar js y css

No tiene ningún tipo de configuración de políticas ni de exclusiones. Esto es malo ya que, si no funciona con la configuración por defecto, no tendremos más opciones que nos ayuden a hacerlo funcionar.

Aun así, menciono el plugin ya que lo he usado alguna vez con buenos resultados, si bien no con themes demasiado complejos.

 

Combinar CSS y Javascript en WordPress

Junto con minificar, el hecho de combinar los archivos Javascript y CSS es una de las optimizaciones básicas de la carga de JS y CSS.

Combinar consiste en unir varios archivos del mismo tipo (o Javascript o CSS) en un único archivo, con el fin de simplificar la carga y reducir el número de peticiones HTTP realizadas.

El problema de combinar en themes muy complejos es que posiblemente nos vamos a encontrar con problemas relacionados con dependencias de librerías en el caso de Javascript y dependencias en el caso de CSS.

optimizar css

Como en el caso de minificar, se puede combinar de dos formas: por un lado la manual y por otro lado la automática. Debo decir que, en este caso, la forma manual es casi imposible cuando hablamos de un theme WordPress ya desarrollado. Esto se debe a que requiere modificar toda su estructura y, para ello, debemos tener conocimientos de CSS o JS, además de conocer perfectamente el theme en cuestión.

En el caso del método automático, se utilizan plugins (más o menos los mismos, de hecho). WP Rocket es uno de los más efectivos para esto, pero otros plugins de cache para WordPress como Swift Performance o W3 Total Cache también tienen esta funcionalidad, al igual que Autoptimize.

Para combinar el CSS y el Javascript también debemos ver si nos compensa, como en el caso de minificar, ya que no siempre es fácil y suelen aparecer errores relacionados con lo que he comentado antes: las dependencias.

 

Combinar CSS y Javascript con WP Rocket

La función de combinar CSS y Javascript en WP Rocket se encuentra exactamente en el mismo sitio que la funcionalidad de minificar JS y CSS.

En la sección “Optimizar archivos” de la configuración de WP Rocket vamos a ver las opciones, pero hay algo que tenemos que tener en cuenta: en WP Rocket, para poder combinar los archivos JS y CSS, en primer lugar tendremos que activar la minificación, ya que las casillas aparecen desactivadas. Puedes verlo en la siguiente imagen:

optimizar css

Las mismas reglas de exclusiones que se aplican a la minificacion también se aplican a la sección de combinar. Por eso mismo, te dejo exactamente el mismo vídeo explicativo sobre cómo minificar y combinar con WP Rocket que he grabado y subido a mi canal de Youtube:

El problema de combinar Javascript son las dependencias y en el caso de CSS también son las dependencias, ya que los themes actuales tienen una estructura de hojas de estilos muy compleja y no podemos simplemente unir varias en una porque a nosotros nos salga de los ******, ya que nos vamos a encontrar con problemas.

En muchos casos, el simple hecho de poder combinar varios archivos CSS del theme en uno puede requerir rehacer las hojas de estilos del theme y la forma en la que están estructuradas.

En el caso de combinar Javascript, normalmente tenemos más problemas. Esto se debe a que cuando un sitio web es muy dinámico, tiende a tener demasiado javascript. Esto provoca que ciertos scripts no puedan cargarse hasta que se carguen otros, por lo que tienen que cargarse en diferentes archivos en un orden exacto para no causar cuellos de botella.

Finalmente, repito OTRA VEZ que WP Rocket es un plugin Premium con un soporte bastante bueno. Por ello, si nos encontramos con problemas con la función de minificar o de combinar, podemos pedir ayuda al soporte para que nos echen una mano. De todos modos, la solución va a depender mucho de nuestro caso y la combinación/configuración de nuestro WordPress.

 

Combinar CSS y Javascript con Autoptimize

Una vez más, Autoptimize vuelve a ser una solución ideal para combinar CSS y Javascript. Te recuerdo que se trata de un plugin gratuito disponible en el repositorio de plugins de WordPress y que nos permite optimizar código JS y CSS. Puedes encontrar el plugin Autoptimize aquí: https://es.wordpress.org/plugins/autoptimize/

No hace falta explicar todo lo que puede hacer Autoptimize, ya que lo he comentado anteriormente. Simplemente vamos a centrarnos en que podemos combinar el CSS y el JS.

Una vez más, para poder activar las opciones de combinar debemos ir a “Mostrar las opciones avanzadas”:

optimizar css

Después de mostrar las opciones avanzadas podremos ver dos opciones bastante interesantes tanto en la sección “Opciones de JavaScript” como en la sección “Opciones de CSS”.

Debemos marcar la opción “¿Optimizar el código Javascript?” y la opción “¿Optimizar el código CSS?” para poder activar el resto de opciones que necesitamos para combinar el JS y CSS.

En el siguiente vídeo que he grabado para ti y he subido a mi canal de Youtube, puedes ver cómo combinar CSS y JS con Autoptimize en una review del plugin:

Como en el caso de minificar, al combinar el plugin Autoptimize hace uso del cache de recursos optimizados, con este sistema no tiene que optimizar (en este caso combinar) el JS y CSS en cada visita al sitio web.

En caso de que queramos personalizar el funcionamiento de Autoptimize, podremos utilizar el cuadro de exclusiones de cada sección para añadir los archivos CSS y JS que no queremos optimizar.

 

Combinar CSS y Javascript con JS & CSS Script Optimizer

Como en el caso de minificar, quería dar otra opción más: el plugin JS & CSS Script Optimizer se adapta muy bien a la hora de combinar archivos JS y CSS.

Después de instalar y activar JS & CSS Script Optimizer en WordPress, nos aparecerá una nueva sección llamada “Script Optimizer” en la sección “Ajustes” de WordPress. Desde ahí podremos configurar el plugin para combinar el JS y CSS.

optimizar css

Las dos opciones marcadas en rojo en la imagen anterior son las que debemos utilizar para combinar el Javascript y el CSS.

Podemos utilizar los cuadros de exclusión llamados “Ignore next JavaScript” e “Ignore next CSS” para excluir todos los archivos JS o CSS que puedan darnos problemas al combinar. De esta forma, podremos personalizar su funcionamiento.

Como ya has visto, JS & CSS Script Optimizer también sirve para minificar el código JS y el CSS, aunque en este caso vamos a prescindir de esta funcionalidad porque considero que existen mejores opciones para realizar esta tarea en WordPress.

 

Razones para no combinar JS y CSS con HTTP/2

Cuando usamos el “nuevo” protocolo HTTP/2 las reglas de juego cambian, es decir, ya no se nota la técnica de combinar varios archivos en uno del mismo tipo, por lo que no es necesario utilizarla.

La razón de que no sea necesario combinar JS y CSS con HTTP/2 es que esta nueva versión del protocolo HTTP/2 permite enviar varios “archivos” en una misma conexión TCP, es decir, no necesita abrir una conexión TCP para enviar cada archivo. De este modo, el envío de datos al navegador visitante es muchísimo más efectivo. Esto se nota sobre todo en archivos base texto como los JS y CSS, que además pueden ser comprimidos por la compresión GZIP en el servidor web antes de ser enviados.

Hay una imagen que más o menos sirve como descripción gráfica de esta mejora en HTTP/2:

optimizar css

Esto no nos impide implementar las técnicas WPO que nosotros queramos, como la de combinar. Simplemente es necesario tener en cuenta que no van a ser efectivas y que vamos a buscarnos “problemas” para no ganar ni un par de milisegundos en la velocidad de carga de la web.

Otra funcionalidad que vamos a notar al servir archivos JS y CSS (recursos de la web en general) es la PUSH de HTTP/2, pero de eso vamos a hablar un poco más abajo.

 

Carga asíncrona de Javascript y CSS en WordPress

La carga asíncrona es una técnica útil. Es simple, pero al mismo tiempo ayuda mucho a agilizar la carga de un sitio web complejo en lo que se refiere a Javascript y CSS.

¿En qué consiste la carga asíncrona? Pues es sencillo: se cargan los scripts en paralelo siempre y cuando las dependencias lo permitan (que no siempre es así).

En esta imagen puedes verlo mucho más claro:

optimizar css

Como he dicho antes, los themes y plugins actuales que insertan Javascript en la carga de WordPress pueden llegar a ser bastante problemáticos a la hora de aplicarles técnicas WPO.

Podemos implementar la carga asíncrona en WordPress con distintos plugins. Uno de ellos vuelve a ser WP Rocket, el cual es bastante efectivo en este sentido. Por otro lado, existe un plugin que lleva bastante tiempo sin actualizarse pero que es tan simple que sigue funcionando: se llama Async Javascript y es completamente gratuito.

También quiero comentar que la mayoría de plugins que permiten optimizar Javascript y CSS también nos permitirán configurar la carga asíncrona de Javascript e incluso de CSS. Con esto, además de agilizar la velocidad de carga o al menos hacer que la web se vea antes, también podremos ganar algún punto en Google PageSpeed Insights.

Normalmente los plugins que nos permiten configurar carga asíncrona nos dejan hacer dos configuraciones:

  • async: Los scripts cargan de forma asíncrona independientemente de la carga de la web.
  • defer: Los scripts se ejecutan una vez que finaliza la carga. Se puede seguir parseando mientras se descargan los archivos javascript.

 

Carga asíncrona de Javascript con WP Rocket

Como he comentado, con WP Rocket podemos configurar la carga asíncrona de Javascript y además excluir las librerías jQuery de la carga asíncrona para evitar problemas.

Para configurar la carga asíncrona de javascript en WP Rocket debemos ir a la configuración de WP Rocket y a la sección “Optimizar archivos” otra vez (como para minificar y combinar):

optimizar css

En la sección “Archivos Javascript” vamos a ver dos opciones llamadas “Cargar archivos JavaScript de manera diferida” y “Modo seguro para jQuery (recomendado)” que he marcado en rojo en la imagen anterior y que debes tener activas para que la carga asíncrona este activada.

¡Ya está! Con esto ya debería funcionar todo correctamente, ya que el problema de dependencias en la carga asíncrona de JavaScript suele venir por las librerías jQuery, ya que es la librería JavaScript más utilizada actualmente en Internet con una cuota de mercado del 92%.

 

Carga asíncrona de Javascript con Async JavaScript

Async JavaScript es un plugin desarrollado por el mismo desarrollador que Autoptimize. Se trata de un plugin efectivo y bastante configurable, aunque no está hecho para todos los públicos.

Es un plugin gratuito y podemos descargarlo en el repositorio de plugins de WordPress: https://es.wordpress.org/plugins/async-javascript/

optimizar css

Async JavaScript va directo al grano y sus funcionalidades son las que son. Nos permite configurar carga de JavaScript mediante Async y Defer, así como excluir la carga de jQuery para evitar problemas.

Async JavaScript es muy configurable: nos permite excluir por plugins, por scripts, por archivos del theme, etc.

optimizar css

Pero lo que más me gusta de todo esto, es que Async JavaScript tiene un asistente que funciona muy bien para configurar la carga asíncrona de JavaScript.

optimizar css

Lo que hace el plugin es analizar el sitio web utilizando GTMetrix. Para esto utiliza el API del servicio.

Puede tardar unos minutos hasta obtener un resultado concluyente. Evidentemente, debemos tener acceso a la API de GTMetrix y tenerla validada para poder obtener resultados.

optimizar css

Lo que hace el test es ir probando la web aplicando distintas técnicas con Async y Defercon exclusión de jQuery y sin exclusión de jQuery. Además, nos da la oportunidad a nosotros de probar si todo funciona correctamente utilizando URL con parámetros.

El plugin detectará cuál de las combinaciones es mejor y nos permitirá aplicar la configuración al plugin.

Si quieres ver un videotutorial sobre cómo configurar Async Javascript correctamente, puedes ver este vídeo que he grabado para ti y he subido a mi canal de Youtube:

Con esto tendrás el plugin configurado, aunque recuerda que las optimizaciones de JavaScript y CSS pueden llegar a dar problemas con algunos themes muy complejos o plugins que utilicen muchos scripts JavaScript para sus funcionalidades.

 

Optimizar la entrega de CSS en WordPress

La teoría dice (es decir, Google recomienda) que solo debemos tener una única hoja de estilos CSS para cargar el contenido.
La teoría es muy bonita, pero en la práctica esto nunca se cumple y los themes actuales tienen una estructura de hojas de estilo CSS con @import que cuesta optimizar y que hacen saltar las alarmas en la mayoría de tests de carga WPO.

Cuando existen problemas de CSS, nos salta la regla “Eliminar el CSS que bloquea la visualización del contenido en la mitad superior de la página” y esto a muchos les hace “temblar” las rodillas. Esto se soluciona aplicando dos cosas: carga asíncrona de JavaScript que hemos comentado anteriormente y la optimización de la entrega de CSS.

optimizar javascript

Se pueden hacer muchas cosas para optimizar la entrega de CSS, desde configurar el CSS inline en el HTML (que suele tener resultados efectivos, siempre y cuando sea posible) hasta optimizar Google Fonts, ya que en muchos casos Google Fonts es el causante de un problema a la hora de servir CSS de forma eficiente.

Optimizar la entrega de CSS es algo así como configurar la carga asíncrona de CSS y, en algunos casos, retrasar la carga de las hojas de estilo CSS.

 

Optimizar la entrega de CSS con WP Rocket

Para optimizar la entrega de CSS con WP Rocket, simplemente debemos activar una casilla de verificación que se encuentra en la sección “Optimizar archivos”, la misma en la que estaban el resto de opciones para minificar, combinar y configurar carga asíncrona.

optimizar javascript

Marcamos la casilla “Optimizar la entrega del CSS” y se abrirá el cuadro para configurar una ruta crítica alternativa.

Al marcar la casilla “Optimizar la entrega del CSS” en WP Rocket, se genera una ruta crítica de CSS. Sin embargo, esto puede fallar y puede darnos algún problema en la carga de la web (al tratarse de hojas de estilo CSS, puede descuadrarnos la web). Por esta razón, podemos especificar una ruta crítica alternativa que se utilizará si falla la generada.

Te voy a explicar brevemente lo que es “la ruta crítica de CSS” y todas estas optimizaciones de CSS.

Al optimizar la entrega de CSS se configura todo para que primero cargue la web sin estilos y después carguen y se apliquen las reglas CSS. Esto se suele ver bastante en sitios web muy optimizados: durante menos de medio segundo se ve mal la web, sin estilos o con pocos estilos.

La ruta crítica es CSS que se añade al HTML para evitar esto, es decir, para que en el “Above the fold” (contenido que se ve de primeras antes de hacer scroll) cargue perfecto y con todos los estilos, se añade CSS al HTML, ya que al optimizar la entrega de CSS no se carga CSS desde hojas de estilo de primeras.

 

Optimizar la entrega de CSS con Speed Up

El plugin Speed Up – Optimize CSS Delivery es tan simple que no requiere ni explicación.

optimizar javascript

Se trata de un plugin que simplemente debemos instalar y activar para que empiece a funcionar. Lo que hace es cargar las hojas de estilo de forma optimizada, es decir, de forma asíncrona.

Aunque no tiene un panel o sección de configuración en el panel de configuración de WordPress, podemos configurar exclusiones de hojas de estilos desde el archivo functions.php del theme activo.

optimizar javascript

Esto mismo puedes verlo en la documentación del plugin Speed Up – Optimize CSS Delivery.

Puedes encontrar más información acerca de Speed Up – Optimize CSS Delivery en el repositorio de plugins de WordPress, ya que es un plugin completamente gratuito: https://es.wordpress.org/plugins/speed-up-optimize-css-delivery/

 

 

Carga condicional de Javascript y CSS en WordPress

La carga condicional de JavaScript y CSS en WordPress es bastante “rara” de ver, aunque poco a poco se va implementando.
Los consultores WPO hemos visto hace tiempo la importancia que tiene la carga condicional o carga inteligente de scripts y hojas de estilo dependiendo de si se utilizan o no en una página en concreto.

Vamos a aplicar la lógica en un ejemplo real: si tenemos Disqus Comment System instalado en nuestro sitio web, los scripts JavaScript de Disqus se cargarán en TODAS las páginas del sitio web, pero solo se utilizarán en páginas del sitio donde haya comentarios. ¿Por qué tienen que cargar esos scripts en todas las paginas ralentizando la carga sin necesidad?

Pues eso es lo que hacemos con la carga condicional o carga inteligente de JavaScript y CSS: elegir cuándo se cargan los scripts y las hojas de estilo en función de si necesitamos los elementos o no. Con algunos plugins podemos especificar en base a plugins, mientras que en otros debemos especificar qué scripts o qué hojas de estilos no se cargarán.

¿Cómo podemos hacer esto en WordPress?

  • Mediante código condicional y wp_enqueue_scripts en el functions.php.
  • Mediante el plugin Scripts Dequeuer para WordPress (fue el primero en permitir hacer esto con interfaz gráfica).
  • Mediante la sección de plugins de Swift Performance.
  • Mediante el plugin PerfMatters para WordPress (mi favorito ahora mismo).

En este artículo, simplemente vamos a explicar cómo aplicar esta técnica con dos plugins: con Scripts Dequeuer y con PerfMatters. Estos dos complementos son los únicos que no nos condicionan a utilizar un plugin de cache como Swift Performance.

La carga condicional puede ayudarnos mucho más de lo que creemos, ya que podemos conseguir mejoras importantes en el crawl budget, podemos aprovecharlo mucho más.

optimizar javascript

En la foto anterior se define un caso en el que no solo se aplicó la carga condicional, pero se realizó una optimización de CSS y JS donde la carga condicional o carga inteligente tuvo muchísimo peso, consiguiendo esta mejora en el rastreo de GoogleBot.

 

Carga condicional con Scripts Dequeuer

Descubrí este plugin hace un par de años en una de las búsquedas que realizo de novedades en CodeCanyon.

Es un plugin que sirve exactamente para eso, para configurar la carga condicional de los scripts JavaScript y de las hojas de estilo CSS.

El plugin es Premium, pero podemos comprarlo por 21 dólares desde AQUÍ.

optimizar javascript

Después de instalar y activar el plugin, tendremos una nueva sección de configuración en “Ajustes” en el panel de control de WordPress.

optimizar javascript

En el siguiente vídeo puedes ver cómo desactivar ciertos scripts y hojas de estilo para ciertas zonas, aunque somos nosotros con nuestra experiencia quienes debemos saber en qué partes de la web no necesitamos ciertos scripts y hojas de estilos.

Al final, simplemente aplicando la lógica y con la ayuda de un plugin como este, conseguimos agilizar y simplificar la carga del sitio web.

En muchas ocasiones debemos probar ciertas configuraciones para conseguir una carga efectiva y sin errores. Cada plugin o theme es completamente diferente y son casos distintos, por lo que debemos probar siempre la web sin cache después de aplicar configuraciones de carga son Scripts Dequeue.

 

Carga condicional con PerfMatters

Hace cierto tiempo, mi socio me habló de PerfMatters. Él lo había encontrado por Internet en redes sociales y parecía un plugin de tweaking para WordPress del montón. Sin embargo, al probarlo he visto que realmente es una muy buena opción para optimizar WordPress.

PerfMatters es una excelente opción como complemento a un plugin de cache como WP Rocket.

optimizar javascript

PerfMatters es un plugin Premium, es decir, es necesario pagar por él. No obstante, su pago está más que justificado porque mola mucho.

Puedes comprar el plugin desde AQUÍ.

Después de instalar y activar PerfMatters en WordPress, nos añade varias cosas: una sección de tweaking para WordPress bastante potente que podemos encontrar dentro de la sección “PerfMatters” en la sección de “Ajustes” del panel de control de WordPress:

optimizar javascript

Para activar el “Scripts Manager” debemos ir a la sección de “Extras” que he marcado en rojo en la imagen anterior y, cuando estemos en la sección “Extras”, debemos activar el interruptor de “Scripts Manager” que he marcado a continuación:

optimizar javascript

Al hacer esto, si accedemos por ejemplo a la HOME de nuestro sitio web, en la barra de administrador tenemos un nuevo botón llamado “Scripts Manager” que podemos pulsar:

optimizar javascript

Al hacer clic sobre él, nos llevará a una pantalla como esta donde podemos ver los scripts JavaScript y las hojas de estilos CSS que carga cada plugin y el núcleo de WordPress:

optimizar javascript

Como la mejor forma de explicar cómo funciona el Scripts Manager de PerfMatters es un vídeo, he decidido grabar uno con el análisis del plugin PerfMatters y lo he subido a mi canal de Youtube:

Personalmente, me encanta PerfMatters para WordPress, a pesar de que es un plugin que he descubierto recientemente y que he probado ya que me lo han recordado en Twitter. Creo que ya no puedo vivir sin él y sin sus funcionalidades, ya que también es uno de los pocos plugins WPO para WordPress que, además del DNS Prefetch o cache DNS, también permite la pre-conexión.

 

Carga CSS y Javascript desde CDN en WordPress

En algunas ocasiones (no siempre) podremos ganar algunos milisegundos simplemente configurando la carga de JS o CSS desde CDN.

Normalmente, cualquier servicio CDN es más efectivo sirviendo archivos estáticos que un servidor web, ya que están enfocados a servir contenidos con poca latencia y de forma ágil y rápida.

optimizar javascript

Podemos configurar un servicio de CDN para toda la web o podemos utilizar un CDN de librerías para cargar ciertas librerías JavaScript desde un CDN optimizado para ese uso.

 

Carga de JavaScript y CSS con un servicio CDN

Podemos configurar cualquier servicio CDN como KeyCDN, CDN77 o Amazon CloudFront con un plugin para WordPress como WP Rocket, PerfMatters o Autoptimize.

También existe un plugin para WordPress llamado CDN Enabler desarrollado por KeyCDN pero que sirve para configurar cualquier servicio de CDN para WordPress.

optimizar javascript

En mi opinión, si usamos WP Rocket como plugin de cache para WordPress, su funcionalidad de configuración de CDN creo que es una de las más potentes del mercado actualmente.

En el siguiente vídeo que he grabado para ti y he publicado en el artículo sobre WP Rocket puedes ver las funcionalidades de CDN de WP Rocket:

Pero si no utilizamos WP Rocket como cache para WordPress, podemos utilizar otro plugin para configurar un CDN. Por ejemplo, PerfMatters o el que he comentado antes, CDN Enabler, que es completamente gratuito.

En el vídeo que he hecho sobre PerfMatters puedes ver las funcionalidades de CDN de PerfMatters:

Como has visto, no he profundizado en la configuración completa de un CDN en WordPress ya que ese no es el objetivo de este artículo. Simplemente quiero que veas que para optimizar la carga de CSS y JavaScript en WordPress existe la posibilidad de configurar un servicio de CDN normal o directamente un servicio de CDN para librerías como tiene Google para jQuery.

 

Carga de jQuery desde el CDN de Google

Algunos “proveedores” tienen servicios CDN para ciertas librerías y frameworks generales, como es el caso de jQuery (al ser la librería JavaScript más utilizada, es normal que existan CDN para optimizar su carga).

En WordPress, simplemente añadiendo una cosa al functions.php del theme activo, podemos modificar el CMS para que cargue las librerías jQuery directamente desde los servidores de Google:

Esto no mejora mucho la velocidad de carga, pero si nuestro hosting es lento podemos notar algunos milisegundos de mejoría en la velocidad de carga del sitio web. La mejoría también se nota cuando tenemos un sitio web que realiza muchas peticiones durante su carga.

 

HTTP/2 Push para cargar CSS y Javascript en WordPress

Push es una de las funcionalidades más llamativas del protocolo HTTP/2, ya que cambia algo que anteriormente era completamente diferente con la versión 1.1 de HTTP.

Mediante “push”, el servidor puede enviar los recursos CSS y JavaScript antes de llegar a descargar todo el HTML, mientras que en el protocolo HTTP1.1 debía descargarse e interpretarse todo el HTML desde donde estaba enlazados los recursos como archivos JS, CSS, imágenes, etc.

optimizar css

Además, se aprovecha la multiplexación, es decir, mediante una misma petición TCP se envían todos los archivos sin necesidad de tener que abrir y cerrar conexiones TCP para enviar todos los archivos al navegador del visitante.

La funcionalidad push de HTTP/2 no es una mejora WPO que se note mucho, pero todo ayuda y en algunos casos extremos puede ayudar a agilizar la carga del sitio web (sobre todo cuando se trata de un sitio web con muchas peticiones al servidor).

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress y WPO.

Share on twitter
Twitter
Share on facebook
Facebook
Share on linkedin
LinkedIn
Álvaro Fontela
Álvaro Fontela
Soy ponente en eventos de marketing digital, consultor WordPress y co-fundador de Raiola Networks, amante del mundo del motor (coches japoneses) y tecnófilo empedernido.

12 comentarios en “Optimizar la carga de JavaScript y CSS en WordPress”

  1. Excelente post , Alvaro nos recomendo el profesor de nuestra tesis en el Master de Documentación Digital de la Pompeu. Gracias!

  2. Excelente post , Alvaro nos recomendo el profesor de nuestra tesis en el Master de Documentación Digital de la Pompeu. Gracias!

  3. Hola Álvaro! Me estoy chapando tu blog para intentar mejorar la web jeje
    El plugin Autoptimize ¿Hay que tener ese plugin una vez que se combinan los archivos?

    Un saludo y muchas gracias

    • Si, claro, ningún plugin de combine & minify realiza acciones directas, los archivos resultantes de combinar y minificar siempre son generados y guardados en cache, es decir, las acciones no se realizan directamente en los archivos del theme y plugins.

  4. Hola Álvaro! Me estoy chapando tu blog para intentar mejorar la web jeje
    El plugin Autoptimize ¿Hay que tener ese plugin una vez que se combinan los archivos?

    Un saludo y muchas gracias

    • Si, claro, ningún plugin de combine & minify realiza acciones directas, los archivos resultantes de combinar y minificar siempre son generados y guardados en cache, es decir, las acciones no se realizan directamente en los archivos del theme y plugins.

Deja un comentario

¿Quieres recibir mi contenido semanal?
¡Te enviare todas las semanas mi contenido!
Cabecera del formulario de suscripción
  • RESPONSABLE:

    RAIOLA NETWORKS, S.L.

    C.I.F.: B27453489

    Avda de Magoi, 66, Semisótano, Dcha., 27002 Lugo (Lugo)

    Telefono: +34 982776081

    e-mail: info@raiolanetworks.es

    FINALIDAD:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
    LEGITIMACIÓN:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
    DESTINATARIOS:

    No se ceden datos a terceros, salvo obligación legal.

    Personas físicas o jurídicas directamente relacionadas con el Responsable

    Encargados de Tratamiento adheridos al Privacy Shield

    DERECHOS:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
    INFORMACIÓN ADICIONAL:Se puede consultar la política de privacidad de forma más detallada aquí.