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:
¿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:
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:
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.
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.
¿Quieres
recibir mis articulos?
No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.
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.
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.
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.
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:
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”:
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:
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.
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:
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”:
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.
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:
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:
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):
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/
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.
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.
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.
Lo que hace el test es ir probando la web aplicando distintas técnicas con Async y Defer, con 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.
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.
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.
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.
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.
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.
Si quieres extender los conocimientos sobre la carga condicional en WordPress, puedes ver el post que tengo publicado sobre esto: https://alvarofontela.com/carga-condicional-wordpress-js-css/
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Í.
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.
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.
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:
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:
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:
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:
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.
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.
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:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | add_action('init', function() { if (is_admin()) { return; } global $wp_scripts; if (isset($wp_scripts->registered['jquery']->ver)) { $ver = $wp_scripts->registered['jquery']->ver; } else { $ver = '1.12.4'; } wp_deregister_script('jquery'); wp_register_script('jquery', "//ajax.googleapis.com/ajax/libs/jquery/$ver/jquery.min.js", false, $ver); }); |
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.
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).
¿Quieres
recibir mis articulos?
No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.
42 Responses
Tremendo post Alvaro ¡Me lo guardo para verlo tranquilamente! Te lo comparto
Muchas gracias José, me alegro de que te guste!!!
Tremendo post Alvaro ¡Me lo guardo para verlo tranquilamente! Te lo comparto
Muchas gracias José, me alegro de que te guste!!!
Excelente post , Alvaro nos recomendo el profesor de nuestra tesis en el Master de Documentación Digital de la Pompeu. Gracias!
Muchas gracias Juan, me alegro de que te guste.
Saludos a tu profesor 🙂
Excelente post , Alvaro nos recomendo el profesor de nuestra tesis en el Master de Documentación Digital de la Pompeu. Gracias!
Muchas gracias Juan, me alegro de que te guste.
Saludos a tu profesor 🙂
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.
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.
Exelente post, como siempre la informacion que brindas es muy completa.
una pregunta, con respecto a lo que dijo alejandro castro.
existe algun plugin que minifique los ccs/combine pero que no use cache ?
Gracias
es que tengo una web con geoIP y para su funcionamiento adecuado no puedo usar cache.
Me parece genial la documentación, pero no se que plugin puede ser el adecuado para Eliminar archivos CSS sin usar, en concreto uno que me dice PageSpeed Insights que se llama /min/9b575.css
Para no cargar CSS que no se usen esta Script Dequeuer o Perfmatters, pero lo que tu necesitas no es eso, ya que ese archivo es un archivo minificado cread por un plugin de minify, por lo que antes tienes que ver cual es, posiblemente dentro tenga algo relevante… es decir, que tienes que buscar que plugin crea ese archivo, ya que dentro posiblemente lleve CSS minificado de varios plugins y theme.
Hola! Genial post, muy completo 😉
Una duda, tengo instalado tanto Autoptimize como WP Fastest Cache. ¿Puede dar problemas si marco en los dos que optimice el código? Lo tengo así desde hace bastante tiempo y los análisis me siguen diciendo que hay que reducir el tiempo de JS y CSS. ¿Cómo debería configurarlo?
Gracias.
Buenas Ruben.
No es muy recomendable tener la optimización de JS y CSS con ambos plugins, aunque también hay que decir que la optimización de WP Fastest Cache es bastante mala.
Autoptimize es potente, pero requiere bastante personalización con una interfaz bastante limitada.
Si no te rompe nada en la web, posiblemente se esta quedando corto o no esta detectando bien el código para minimizar y combinar.
Por otro lado, en themes actuales complejos o multipurpose, es normal que detecte que aun se puede optimizar mas, ya que si lo optimiza mas literalmente, revienta todo…
Un saludo y para cualquier cosa, aquí estoy.
Buenas Álvaro,
Cuando google page speed me indica: “Elimina archivos CSS sin usar” (refiriéndose a mejoras en la versión móvil) ¿A que se está refiriendo concretamente? Estoy probando todas las mejoras que indicas pero esta indicación me la da en cualquier caso.
Gracias de antemano y un saludo.
Cuando Google PageSpeed Insights te dice «Elimina archivos CSS sin usar» es que tu theme o algun plugin tiene mucho CSS que no se utiliza en todas las peticiones (solo en algunas o circunstancial) y separado en archivos, por lo que se realizan mas peticiones.
De los métodos explicados en este post, quizás el único que puede ayudarte es la carga condicional, de los demás…nada.
Por esta razón no suelo recomendar los themes de ThemeForest que son multipurpose, ya que ocurren cosas así.
Un saludo.
Me paRece muy interesant4 ?♀️ Un saludo
Muchas gracias 🙂
Muy interesante Álvaro, también vi tu intervención sobre este tema en SeoWarriors y en mi instalación con Wp Rocket estoy haciendo ciertas modificaciones que me están ayuda. Una consulta, desde tu perspectiva ¿cuál puede ser la mejor alternativa respecto a Pingdom? El hecho de utilizarlos muy a menudo sin comprar ha terminado por banear mi IP (supongo) porque no puedo acceder ni siquiera desde la opción de incógnito. Utilizo PageSpeed y GTmetrix adicionales, pero me gustaría conocer alguna herramienta que supla a Pingdom. Muchas gracias por tu tiempo y tus aportaciones 😉
Hola Elias, primera noticia que tengo de que Pingdom Tools haya baneado a alguien, yo abuso mucho de el y no he comprado nada, nunca me han bloqueado el acceso.
¿Puedes mandarme por el formulario de contacto un email con una captura de lo que te sale? La verdad es que es el primer caso que veo, si que es cierto que a veces va saturado, pero con esperar basta.
Un saludo.
Tengo un problema con el gzip. En la herramienta para desarrolladores de Chrome Network -> Response Headers me sale content-encoding: gzip, lo que supongo quiere decir que está la compresion habilitada.
Pero luego GTMetrix y YSlow me dicen que no está habilitada. ¿A quien creo?
Hola Moi, pues desgraciadamente a los dos.
El problema viene por las peticiones externas, comprueba con Pingdom Tools si las peticiones externas están todas con GZIP.
Con las peticiones externas en cuanto a esto, no puedes hacer absolutamente NADA, ya que cargan desde servidores web que no puedes modificar.
Y con que…1 simple petición no cargue con GZIP, GTMETRIX e YSLOW ya te van a dar error de que el GZIP no esta activo.
Un saludo.
Definitivamente le dedicare unas muy buenas horas a esto, todo está excelente ya voy a la mitad y mi sitio ya aumento un 25% su velocidad y estadisticas.
Hola David, puedes complementarlo con esto otro: https://alvarofontela.com/carga-condicional-wordpress-js-css/
Hola Álvaro gracias por los post estoy aprendiendo muchísimo. Me asalta una duda, con el plugin Autoptimize puedo minificar y combinar css y javascript, pero en las opciones que aparecen hay una que indica si quiero forzar o no la carga de estos al header (si no la marco entiendo que van al footer) ¿se estaría realizando la carga asíncrona de css y javascript al mandarlos al footer? podría prescindir del plugin async javascript y speed up? O son cosas independientes?
Hola Julian, son cosas diferentes.
Normalmente los scripts se cargan en el
y al mandarlos al footer se cargan en el junto con el resto del contenido.La carga asincrona es diferente, ya que puede hacer que todos los scripts carguen en paralelo en lugar de en serie.
Muchas gracias por la contestación. Enganchadísimo al blog. Menudo mundo acabo de descubrir. Una última duda, tengo hecho páginas en wordpress e instalar una plantilla buena que al pasarla por gtmetrix o google page speed ya tiene una puntuación de 90 95 y ya la minificacion, compresion gzip, combinación etc estaban en verde entonces entiendo que todos estos trabajos habra que hacerlos siempre y cuando la plantilla sea mala y no este hecho todo por defecto. Excepto la carga asincrona que siempre habra que hacerla dado que es una muy buena opción, no?
Hola de nuevo Julian, muchas gracias por tus palabras.
Cuando tu pruebas una plantilla que da 90 o 95 en la demo, al implementar todos los scripts y contenidos reales, la puntuación baja bastante y ahí es cuando tienes que poner en practica estas técnicas en la medida de lo posible.
Aaah vale vale. Comprendido. Muchas gracias por todo. Te sigo, sigue asi. Un abrazo
¿Donde puedo ver el codigo de Above the fold?
Muchas gracias
Hola Macarena, yo suelo hacerlo inspeccionando elementos con Google Chrome, con las herramientas de desarrollador.
Hola Alvaro, muchas gracias por todo tu conocimiento y ayudar a gente neófita (como yo en estos temas). Solo quiero preguntarte que en mi sitio web tengo instalado el plugin WP Super Caché, tengo un Theme muy ligero y tengo todas las imágenes super-optimizadas, no obstante me gustaría optimizar la carga del sitio y quiero aplicar todas estas técnicas que explicas. ¿ Si implemento WP Rocket o Autoptimize + algún otro plugin de los que comentas, tengo que borrar WP Super Caché ? ¿ que plugins me recomendarías implementar para poder optimizar al máximo la carga del sitio web ? perdona y muchas gracias de antemano.
Hola Pablo, pues la respuesta a tu pregunta es “depende”.
Si usas WP Rocket, ya no necesitas ni Autoptimize ni WP Super Cache. Sin embargo, si usas Autoptimize, tienes que mirar WP Super Cache sea compatible y no haga cosas raras.
Yo personalmente llevo años sin usar WP Super Cache, ya que para las tecnologías actuales de cache, WP Super Cache es un plugin anticuado y que no es compatible con la mayoría de plugins específicos actuales.
perdona, no se si te llegó mi respuesta, te vuelvo a comentar:
Gracias en primer lugar. Me han comentado un plugin free alternativo a WP Rocket que se llama Swift Performance Lite ¿ cual es tu opinion ? ¿ lo conoces ? perdona y gracias de nuevo
Hola Pablo, si que lo conozco, de hecho hablo de el en este post: https://alvarofontela.com/cache-wordpress-plugins/
Me gusta bastante, aunque no lo utilizo todo lo que quisiera porque hace tiempo varias personas, incluido yo, encontramos en el un fallo brutal en el vaciado de cache que provocaba webs caídas y…eso me genero cierta desconfianza. Pero lo que si te puedo decir es que es un plugin de puta madre…
Hola Alvaro, perdona de nuevo, pero te quería preguntar, si doy de alta mi web en cloudflare (CDN) ¿ es necesario además añadir y configurar WP Rocket, porque he visto que el CDN ya trae las opciones de Minificar CSS y JavaScript y en mi caso además no necesito realizar la operativa de “Combinar” puesto que trabajo con protocolo HTTPS/2
Muchas gracias de nuevo
Hola Pablo, pues…depende, el tema del minify de CloudFlare es que no es configurable, entonces si te da problemas…te da problemas y punto, no puedes hacer nada.
Aun así, vas a necesitar WP Rocket para el cache de pagina, y yo personalmente también haria el minify con WP Rocket.
De hecho, yo siempre suelo configurar CloudFlare como CDN tradicional y no como proxy inverso: https://youtu.be/pEXbOr7hOMc
Hola Álvaro! Muchas gracias por tus posts… pregunta de novata…! Llevo poco tiempo, por lo que espero no decir ninguna tontería. Estoy empezando una web y mis resultados en GTMetrix y PageSpeed son súper bajos… 🙁 ya no sé que hacer jajaj porque optimizo imágenes en photoshop y después utilizo WP Rocket + Imagify… como dices, no combino CSS y tal ya que me da muchos errores. El caso… voy aplicando consejos tuyos y no he entendido muy bien si es recomendable y compatible mi configuración de WP Rocket con los plugins Async JavaScript y Speed Up. Hablas muy bien de ellos, pero no he terminado de entender si los recomiendas en caso de no usar Rocket o si crees que puede ir bien tener los 3. Muchísimas gracias! Voy a por el post de carga condicional!
Hola Victoria, te voy a pasar dos cosas para que veas como me posiciono yo en temas de Google PageSpeed (y evidentemente también GTmetrix):
https://www.youtube.com/watch?v=TScKmn7y3wQ
https://alvarofontela.com/wpo-teoria-vs-practica-metricas-puntuaciones-tiempos/