Cómo optimizar y acelerar una web hecha con Avada … sin plugins ni códigos

El tema Avada es desde hace años el más popular, descargado y utilizado en WordPress, y todo eso a pesar de los nuevos maquetadores, de las decenas de temas multipropósito que han ido saliendo. Y esto tiene su mérito.

Lo que es una realidad del tema Avada es que, a pesar de que no usa Visual Composer (ahora renombrado como WPBakery Page Builder), ni Divi, ni Elementor, sino su propio maquetador, llamado Fusion Builder, es un ganador, y no parece que ningún otro tema le baje del trono.

Y, en esta realidad, en la que hay miles, más bien centenares de miles de instalaciones de Avada, como experto en WordPress no puedes obviar el hecho de que tarde o temprano caerá en tus manos la web de un cliente que quiera optimizarlo y mejorar los tiempos de carga de su web, sin por ello tener que renunciar a su maravilloso tema.

Es algo que en mi caso me ha tocado hacer varias veces y que, tras atravesar mi primera fase de escepticismo, de querer convencer al cliente de que cambiase de tema, incluso antes de empezar a meter códigos y plugins de optimización, poco a poco me fui dando cuenta de que Avada tiene cosas de las que deberían aprender otros temas, en realidad bastantes.

El problema de Avada en particular, y los temas de Envato en general

El problema de temas como Avada es que ofrecen tanto, se venden con unas demos tan fantásticas, que casi nadie puede resistirse a tener una web tan funcional, espectacular, efectista.

Pero claro, toda potencia conlleva un esfuerzo, en este caso en forma de plugins, y es que para llegar a maquetar algunas demos de Avada tienes que instalar y usar hasta 3 distintos plugins de carruseles, o sliders si prefieres llamarlos así.

Así es fácil encontrarse en una instalación WordPress de tu cliente al mismo tiempo Fusion Slider, el sistema propio de Avada, además de otros plugins como Layer Slider o Slider Revolution, cada uno de ellos enormes consumidores de recursos, y devoradores de scripts, que claro, terminan por ralentizar cualquier web.

Si a eso le sumamos el resto de plugins estándar de WordPress, el maquetador propio de Avada, Fusion Builder, más una tienda online, sistema de suscripciones y vete a saber, al final tenemos un monstruo que haría falta un servidor de la NASA para moverlo medio decentemente.

Pero, ¿quién se resiste a probar el tema más popular de todos los tiempos, año a año, con unas demos fantásticas, y que solo cuesta 60$? 

Y, curiosamente, Avada aporta gran parte de la solución

Pero, mira tú por donde, el mismo Avada nos puede ayudar a optimizar la carga de una web ¿vemos como?

Actualiza Avada y todos sus parches

El sistema de actualizaciones de Avada es para nota. No solo actualizas el tema a sus versiones mayores sino que funciona mediante un sistema de parches que puedes actualizar a voluntad.

Para ello ve al menú Avada > Fusion Patcher y ponte al día. Muchos de los parches son mejoras de seguridad y optimización, e incluso de adaptación al RGPD, así que revísalos de vez en cuando.

No es obligatorio instalar todos los plugins recomendados

Tu primera medida de optimización es evitar la tentación de instalar todos los plugins recomendados en el menú Avada > Plugins.

Están ahí para que los instales cuando los necesites, no ahora mismo. Es más, igual no necesitas instalarlos nunca, así que ¡sujétate!

Revisa el estado del sistema

En Avada > Estado del sistema, revisa toda la información, pues ahí tienes buenas pistas de software o parámetros que igual debes mejorar, como …

  • Versión de PHP
  • Parámetros de memoria del archivo php.ini
  • Versión de MySQL
  • … etc

Características avanzadas del tema

Ya nos ponemos serios, así que ve al menú Avada > Opciones del tema y vamos a empezar a optimizar de verdad.

Aquí lo primero es desactivar las siguientes opciones en Avada > Opciones del tema > Avanzado > Características del tema:

  • Desactiva el desplazamiento suave, un JavaScript innecesario del todo
  • Desactiva animaciones CSS en móviles (en móviles menos es más)
  • Desactiva animaciones CSS al pasar por encima de una imagen en móviles (en móviles menos es más)
  • Desactiva las APIs de YouTube y Vimeo, no las necesitas, WordPress se ocupa gracias a oEmbed
  • Desactiva el script de Google Maps (no te hará falta salvo para el módulo de mapas, si más adelante lo necesitas ya lo activarás)
  • Desactiva el script de subir rápido arriba (pijada donde las haya)
  • Desactiva el script rápido en móviles (idem)
  • Desactiva Fusion Slider. Mientras no sepas qué plugin de sliders vas a usar de momento desactiva todo. Si más adelante decides usar este lo activas y desactivas y borras el resto.
  • Desactiva Elastic Slider, por el mismo motivo que el anterior.
  • Desactiva iconos de FontAwesome, innecesarios, además te bajan la puntuación en analizadores de optimización
  • Desactiva las etiquetas meta Open Graph. Ya las genera tu plugin de SEO, no las repitas.
  • Desactiva los fragmentos enriquecidos, mejor controlarlos desde cada elemento de tu web (WooCommerce, star ratings, etc)

Mi consejo aquí es que si dudas desactives. Si luego echas algo en falta ya lo activarás, y mientras tanto estarás cargando lo mínimo y gestionando de manera más óptima tu web.

La privacidad también optimiza

Una de las últimas incorporaciones a Avada, que me han gustado especialmente, ha sido la sección de ajustes de privacidad.

En Avada > Opciones del tema > Avanzado > Privacy tenemos unas configuraciones que, además de ayudarnos a respetar la privacidad de nuestros visitantes mejorarán la carga de nuestra web.

Son dos ajustes, que te recomiendo activar sí o sí:

  • Google Fonts Mode en Local, lo que almacena localmente las Google Fonts. Con esto no se comparten datos de tus visitantes con Google y, además, la carga de las fuentes es local, lo que mejorará tus resultados en medidores como PageSpeed o GTMetrix.
  • Embeds Privacy activado, para que los medios incrustados (YouTube, etc) no recojan datos de tráfico de tus visitantes hasta que no concedan su permiso para ello. De este modo no se cargan los vídeos, etc hasta la aprobación, lo que de paso acelera la carga de tu página.

Compilación CSS y JS y caché

Otros ajustes fantásticos que incorpora Avada son el compilador de archivos CSS y JavaScript, que permite almacenar los archivos CSS y JS dinámicos en archivos estáticos, en caché, de carga más rápida.

En el menú Avada > Opciones del tema > Avanzado > CSS y JS dinámicos tienes los ajustes para aplicar esta caché propia a este tipo de archivos.

Lightbox

Otra de las miles de características de Avada es el efecto Lightbox, que hace que tus imágenes enlazadas se muestren en ventana emergente.

Y esta funcionalidad es susceptible de optimizaciones. Ve a Avada > Opciones del tema > Lightbox y desactiva las siguientes opciones:

  • Lightbox en las imágenes destacadas de las entradas individuales
  • Reproducir automáticamente la galería de Lightbox
  • Título
  • Leyenda
  • Compartir redes sociales
  • Enlazando profundidad

De este modo desactivas elementos innecesarios, acelerando la carga de las páginas.

Presentaciones

En esta característica básicamente vamos a desactivar el script automático y “mejoras visuales” desactivando todos los ajustes de las opciones que encontrarás en Avada > Opciones del tema > Presentaciones.

Paginación en el blog

En la página de ajustes de Avada > Opciones del tema > Blog > Blog general tienes la opción de establecer el método de paginación con estas tres posibilidades:

  • Paginación
  • Scroll infinito
  • Botón cargar más

Elige la primera, paginación, pues las otras dos cargan scripts adicionales a cada página de tu web.

Entradas individuales del blog

En la página Avada > Opciones del tema > Blog > Blog entrada individual te recomiendo solo activar aquellas cajas que de verdad sean necesarias o aporten algo a las entradas.

Cada caja que se muestre requiere consultas a la base de dat0s, carga de scripts y estilos, que quizás puedas ahorrarte y mejorar los tiempos de carga de tus artículos.

Cajas que te puedes cuestionar desactivar serían…

  • Caja de información del autor (innecesaria casi siempre)
  • Recuadro Compartir en redes sociales (si ya usas un plugin para esta utilidad)
  • Artículos relacionados (si usas algún plugin para esto)
  • Comentarios (si no los usas o quieres)

Comentarios en páginas

Si no vas a permitir comentarios en páginas pásate por Avada > Opciones del tema > Extras > Miscelaneo y desactiva la casilla llamada “Comentarios en Páginas para no cargar un montón de elementos que ralentizarán la carga de tus páginas.

Posts/Proyectos relacionados

En este apartado, ubicado en Avada > Opciones del tema > Extras > Post / Proyectos relacionados, te recomiendo que evites la carga del script que añade gestos de ratón, pues para ello tienes las mucho más intuitivas y visibles, y óptimas, flechitas de toda la vida.

Vamos, que lo configures así:

Apadrina un rollover

En serio, te los regalo. Los rollover son esos efectos chulos de sustitución de imagen destacada que tanto gustan y para nada sirven.

Ve a  Avada > Opciones del tema > Extras > Configurar rollover para las imágenes destacadas, desactiva todos los ajustes. Si pasados unos días notas que duermes mal, que tu vida es un infierno y no puedes vivir sin los rollover vuelve a activarlos, pero si no te pasa todo eso es que eres libre, abandonaste la dictadura de los rollover.

Te lo aseguro, puedes vivir sin ellos, desactiva todo en esa página de opciones.

Tipografías personalizadas

Una de las virguerías que ofrece Avada es la posibilidad de personalizar fuentes, y guardarlas para posterior uso. De verdad, no lo hagas, tienes cientos entre las que elegir.

Aprovecha la memoria tipográfica del personal (gracias Ana por abrirme los ojos) y usa tipografías a las que tus visitantes estén acostumbrados a ver en otras webs, que ya tienes instaladas, serán siempre la mejor opción.

Así que si pasas por Avada > Opciones del tema > Tipografías no sufras la tentación de hacer tus propias fuentes ¿vale?

Sin imagen de fondo

Nunca, o sea, nunca, hacen falta imágenes o patrones de fondo. Ve a Avada > Opciones del tema > Fondo y desactiva los fondos. Nadie los verá y raltentizarán innecesariamente la carga de todas tus páginas .

Footer sin efectos especiales

Otra funcionalidad que no necesitarás son efectos Parallax o similares en el pié de página de tu web. Ve a Avada > Opciones del tema > Pie de página  y desactiva todos los efectos que te ofrezca el tema, ya sean scripts o imágenes de fondo.

Barra deslizante

Otro efecto “chulo” que te puedes evitar, de verdad, es la barra deslizante en ordenadores, totalmente innecesaria, que añade más peso a todas tus páginas.

Puedes desactivarla en Avada > Opciones del tema > Barra deslizante

Flipando con la barra de título

Quizás una de las características más sorprendentes de Avada es la posibilidad de personalizar la barra de título del navegador, algo que sorprenderá a familia y amigos pero que, como a estas alturas ya podrás imaginar, sobrecarga sin necesidad el código de tu web.

Así que ve a Avada > Opciones del tema >Barra de título de la página y desactiva todo, no cargues imágenes de fondo, nada, quita todo y olvídate de que existe esto.

Sin imágenes de fondo en cabeceras

Ya sea en la cabecera principal como en la fija no se te ocurra subir imágenes de fondo. El motivo ya lo hemos visto en varios de los puntos anteriores.


Bueno, y con esto hemos optimizado a tope Avada, pero ¿hay más?

Optimiza también Fusion Builder, el maquetador de Avada

También el propio maquetador de páginas integrado en Avada es susceptible de optimización. Son mejoras que no afectarán a la velocidad de carga de la web pero sí a la reducción de consumo de recursos de tu servidor.

Para ello ve al menú Fusion Builder > Settings y sigue estas sencillas indicaciones:

Evita la carga automática del maquetador

Por defecto, Fusion Builder se carga automáticamente, así que optimiza tus recursos y desactiva esta característica.

Carga solo los módulos que realmente necesites

Fusion Builder tiene decenas de módulos pero ¿los usas todos? Si desactivas los que no uses el maquetador consumirá menos recursos y cargará más rápido cuando lo necesites.

Usa Fusion Builder solo en los tipos de contenido imprescindibles

Igualmente, ¿para qué cargar Fusion Builder en páginas u otro tipo de contenido si no vas a usarlo ahí? Desactiva todo tipo de contenido donde no vayas a usarlo y mejorará el rendimiento de tu sitio.

Revolution Slider no es tan malo tampoco

Y, también, el muchas veces demonizado Revolution Slider, pero a fin de cuentas amado por los dueños de webs que quieren sliders fantásticos con capas de enlaces y botones, puede sorprendernos.

De hecho últimamente ha mejorado e incluye ajustes de optimización, los tienes en el menú de administración Slider Revolution > Global Settings.

Simplemente sigue las indicaciones de las siguientes capturas, configúralo como sale ahí para un rendimiento óptimo.

El único ajuste que puede darte algún problema es si desactivas globalmente las bibliotecas JS (Include RevSlider Libraries Globally). Si tras ponerlo en OFF ves que no carga algún slider vuelve a ponerlo en ON.

¿Sirven de algo todos estos ajustes de optimización en Avada?

Pues claro que sí. Sin aplicar otras optimizaciones, solo con estos ajustes propios del tema y el maquetador suelo reducir enormemente los tiempos de carga de las webs hechas con Avada.

Aquí unos ejemplos, medido en Pingdom Tools…

Y también en GTMetrix…

Luego ya, para lo demás, tienes el resto del manual del experto en WPO

¿Algo más?

Como espero hayas comprobado, se puede optimizar una web aprovechando los propios ajustes del tema activo, en este caso Avada.

Es por ello que te recomiendo que siempre antes de empezar a aplicar técnicas estándar de WPO a una web revises los ajustes del tema (también de plugins) y apliques la técnica de sentido común de no cargar nada innecesario.

Por supuesto, después de aprovechar al máximo las posibilidades de optimización de Avada, en este caso, seguramente nos quede aún trabajo por hacer, por ejemplo:

Pero esto ya lo hemos visto, y sino aquí tienes todo el manual completo para optimizar y acelerar WordPress.

Lo que quería reivindicar en este artículo, además de aprender algo de optimización y WPO, es que Avada es el tema más popular de todos los tiempos, y lo es por mérito propio, pues ha facilitado a muchos profesionales la posibilidad de tener una web vistosa y resultona por pocos euros y también poco esfuerzo.

Y quería mostrarte que también Avada evoluciona, e incorpora novedades que parece que lo van a mantener mucho tiempo en el podio si sigue así.

Hace poco conocí en WordCamp Europe, en Belgrado, a uno de los desarrolladores del equipo de ThemeFusion, los creadores de Avada, y me sorprendió que hubiese decenas de personas dedicadas en exclusiva a un solo tema, Avada, pero mira tú por donde se nota, y no, no es un mal tema, más bien todo lo contrario, como demuestran sus cientos de miles de compradores, y millones de visitantes de webs hechas con Avada.

Así que la próxima vez que alguien te diga que ha creado su web con Avada felicítale, recuerda este artículo, y empieza a ser un poco humilde, piensa que hay muy buenos programadores detrás, y que tantos cientos de miles de felices usuarios igual no están equivocados, y tú sí.

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (5 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Pin It on Pinterest

Share This