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.
Índice de contenidos
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:
- Optimizar los formularios de contacto
- Optimizar WooCommerce
- Deshacerte de funciones innecesarias de WordPress
- Minimizar todo el código
- Usar bien la caché
- Actualizar a PHP 7.x
- Pasarte a HTTP/2
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í.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
Gracias Fernando, yo dejé Avada precisamente por que la velocidad de carga me parecía lenta pero al leer tu post voy a retomarlo para hacer algunas pruebas. Gracias por este aporte. Un saludo :-).
Siento haber llegado algo tarde. Espero lo retomes y disfrutes 🙂
Genial! Para mí, momento perfecto.
Un apunte…..para que no quiten autoridad los enlaces sociales a nuestro sitio
extra > diversos > Agregue «nofollow» a los enlaces sociales
Saludos
Buen apunte
puedes decirme por que crees que quitan autoridad a tu sitio tus enlaces sociales. en todo caso le estas quitando autoridad a tus enlaces sociales que le dices a google que no son de fiar…
el nofollow no hace que repartas mas linkjuice a los que no lo tienen en la pagina,, se diluye el mismo dividido entre todos los enlaces pero los enlaces con nofollow no o reciben, o eso dice google….
Wowww!! Muchísimas gracias!! Voy a ponerme a ello para ver si le consigo sacar algo más de rendimiento!
Una pregunta… En el método de compilación de CSS recomiendas marcar «Archivo», pero en su día lo tenía así y me generaba entre 1 y 3 archivos CSS diarios que ocupaban casi 2 mb cada uno. Poquito a poquito me iba quedando sin espacio y no sabía por qué hasta que me di cuenta. Los borraba, pero seguía generando más. ¿Esto es normal?
Sí, es normal, sustituyes llamadas dinámicas por «respuestas» estáticas, en archivo.
Muchas Gracias Fernando Tallado por tu excelente información sobre AVADA, estaba a punto de desinstalar este tema y quedarme sólo con el nuevo Gutemberg de WordPress. He seguido y aplicado tus consejos al 100% y el tiempo de carga disminuyó considerablemente, lo que me da esperanzas de seguir utilizando este tema. Pero aun así, hay lentitud en la carga de las páginas (si es así con WiFi, ya me imagino para los que hacen uso de Datos, qué desesperante).
No sé si esta pregunta la pueda hacer por aquí (pensando en que a otros pueda ayudar mi problema a no repetirlo), pero creo que son algunos plugins que tengo instalados los que causan que siga siendo algo lenta. Pongo abajo una lista de los plugins que tengo instalados y que están activos.
Una abrazo desde República Dominicana y gracias de antemano.
Atentamente: Alejandro Martínez Mtz.
• Askimet Anti-Spam
• Better Search Replace
• BJ Lazy Load
• ChrdsAndLyrics
• Contact Form 7
• Easy HTTPS (SSL) Redirection
• Fusion Builder
• Fusion Core
• GDPR Cookie Consent
• iThemes Security
• Jetpack by WordPress.com
• Limit Login Attemps
• LiteSpeed Cache
• NextScripts: Social Neworks Auto-Poster
• RefTagger
• Shortcodes Ultimate
• Smush
• WP-Optimize
• Yoast SEO
Buenas tardes
He diseñado varias web con Avada y me dan error 503
hice todas tus recomendaciones .en una web . esperemos que mejore
aprovecho para preguntarte si tienes experiencia y manual para LiteSpeed Cache
Gracias
Hola fernando Muy bueno los consejos llegue 64 PC y 24 Móvil y sin los cambios no pasaba de 7
Genial, gracias por compartir tu experiencia.
Sigue, que te queda tarea 😉
Muy buen artículo. Lo tengo de referencia para acordarme de repasar todo. En tema de velocidad le falta mucho a Avada y a la mayoría de los themes con tanta parafernalia de carga pero tu entrada ayuda muchísimo. GRACIAS!
Gracias a ti 🙂
Avada es un gran tema, tiene sus cosas pero se puede optimizar bastante, sobre todo quitando lo que no uses
Buenas tardes,
yo acabo de descubrir un problema en Avada, que la verdad me parece bastante grave y no se como solucionar, a ver si me podéis echar una mano. Quiero poder controlar los enlaces (sobre todo en las imagenes) , o sea ponerlos dofollow o nofollow para hacer el linkbuilding como mejor me interese, y parece ser que no tiene la opción. ¿Alguna solución?. Muchas gracias por adelantado
Es una pregunta bastante común en los foros oficiales de Avada. Tienes ajustes en la sección miscelanea, y luego, en cada enlace siempre puedes añadir tú mismo el atributo nofollow, da igual si es Avada o qué.
https://ayudawp.com/insertar-atributo-nofollow-facilmente-en-wordpress/
Muchisimas gracias por tu respuesta Fernando, voy a probar y seguir viendo tu blog, un saludo
Hola Fernando
En la última versión de Avada, 7.4, de junio 2021, han incorporado un asistente de optimización que revisa automáticamente la mayoría de los puntos que has tocado y sugiere en qué casos activar o desactivar.
Me ha encantado tu artículo, me viene muy bien para optimizar el sitio de la ONG Ecocolmena, https://ecocolmena.org
Saludos
NoTime_ToWaste
Genial 🙂