Cómo optimizar Divi al máximo en WordPress

Optimizar Divi

En esta guía te voy a explicar cómo optimizar Divi al máximo.

Divi es un buen tema y builder, pero a día de hoy no lo recomiendo en mi comparativa de los temas más rápidos para WordPress, al ser todavía bastante pesado.

Vamos a ello.

P.D. Puedes aprender a optimizar WordPress gratis como WPOptimizers y recibir cada semana consejos de optimización probados para tener una web WordPress rápida, que mejorará su SEO y conversiones y acceso a herramientas, contenido exclusivo y soporte gratuito.

Evita usar Divi

El primer consejo que te doy y aunque te suene raro, es evita usar Divi.

Sé que cada día mejoran mucho, pero a día de hoy hay mejores temas y mucho más ligeros.

Si ves imposible un cambio de tema por falta de tiempo o recursos, sigue leyendo.

Elige un hosting adecuado

Siempre debemos tener un hosting adecuado, que tenga las tecnologías necesarias para tener una web rápida.

Desde discos SSD, HTTP2, compresión GZIP o Brotli y últimas versiones de PHP y MySQL o MariaDB, porque esto ya te garantiza un buen comienzo.

Puedes aprender más en mi guía sobre el mejor hosting para WordPress.

Desactiva los ajustes que no uses de Divi

El consejo de desactivar ajustes que no uses de Divi, es aplicable a cualquier tema o plugin.

A más funciones activas, más consumo de recursos o incluso más peticiones CSS o JavaScript.

Por ejemplo, si usas un plugin de SEO, no actives sus opciones de SEO, si usas un plugin de anuncios, no actives su opción, para ello, etc.

No uses tema + builder

Recomiendo no usar el tema Divi + builder, porque el tema ya incluye el builder.

Además, en las últimas pruebas que hice, usar los 2 de manera simultánea aumentaba el consumo de recursos de WordPress enormemente.

Divi y AMP

Si tienes dudas sobre usar Divi con AMP, te aclaro que antes podía ser recomendable, porque AMP era un servicio exclusivo para algunos servicios de Google como Google Discover, fragmentos destacados, etc.

Pero Google eliminó hace poco esta limitación y ahora cualquier web puede acceder a estos servicios.

Usar Google AMP es doble trabajo de gestión y mantenimiento, un cambio radical de experiencia de usuario y a veces hasta una web más lenta que la original bien optimizada, como explico en mi guía de web rápida VS Google AMP.

Cachea Divi

Cachear Divi será el primer paso para que la web cargue más rápido.

Hay muchos plugins de caché, pero yo uso y recomiendo WP Rocket, porque además de caché, optimiza scripts, base de datos y otros factores.

Echa un vistazo a mi guía de activar caché en WordPress.

Optimiza las fuentes de Divi

Para optimizar las fuentes de Divi, recomiendo tener claro qué fuentes usar y dónde, como por ejemplo logo, texto, cabeceras, etc.

Y que sea el tema el que se encargue de las fuentes, para no usar fuentes personalizadas en plugins y builders, porque esto aumenta el número de peticiones a fuentes.

Recomiendo usar un máximo de 5 fuentes, tal y como explico en mi guía de optimizar fuentes en WordPress.

Optimiza los scripts CSS y JS de Divi

Para optimizar los scripts de Divi, hay que realizar varias tareas como la minificación, combinación, generar el CSS crítico y la carga diferida de JavaScript.

Divi minimiza y combina de serie sus scripts desde sus ajustes generales, aunque personalmente prefiero hacerlo con plugins, para poder gestionar mejor la caché, pero igualmente hay que usar un plugin para hacer lo mismo con el resto.

Minimizar combinar scripts Divi

Como también hay que generar el CSS crítico y aplazar JavaScript, recomiendo usar WP Rocket para ello.

Lo que si puedes activar en Divi son 2 opciones de optimización:

  • Generación de archivo CSS estático: En vez de cargar el CSS en la web, lo hace en un archivo CSS, que este se puede almacenar en la caché del navegador, servir desde un CDN, etc. Esto reduce el peso del HTML.
  • Enviar estilos inline: Esta opción también añadirá los estilos añadidos inline o en el HTML.
CSS estático Divi

Optimiza las imágenes de Divi

Para optimizar las imágenes de Divi, hay que realizar las mismas tareas que siempre recomiendo.

Como subirlas en el tamaño exacto, usar miniaturas, reducir el peso, usar imágenes WebP, aplicar Lazy Load y cargarlas desde un CDN, como explico en mi guía de optimizar imágenes en WordPress.

No te olvides de añadir un favicon, porque de lo contrario WordPress hará una petición lenta.

Y obviamente que sea desde el personalizador de WordPress, porque si usas plugins, son más recursos consumidos.

Optimizar los vídeos de Divi

Para optimizar los vídeos de Divi y tal y como recomiendo en mi guía de optimizar vídeos en WordPress, hay varias tareas.

Desde no usar vídeos de Youtube, sino alojarlos en la web y servirlos desde un CDN, usar el mejor formato que es mp4 y limitar a 1 vídeo por página.

Optimiza el DOM de Divi

Para optimizar el DOM de Divi y teniendo en cuenta que este tema y builder suelen cargar un gran DOM, que obviamente no podemos cambiar, basta con tener buenas prácticas.

Por ejemplo, no recargar el pie o barra lateral de WordPress, poner en la web componentes que realmente se usen y analizando su uso con plugins de mapa de calor.

¡Optimiza tu Divi!

Como has podido ver, optimizar Divi es similar a optimizar cualquier otro tema o builder, aunque tiene sus particularidades.

Espero que esta guía te sea de utilidad y si tienes alguna duda, te espero en los comentarios.

Únete gratis a WPOptimizers y aprende a optimizar WordPress

Recibe cada semana consejos de optimización probados para tener una web WordPress rápida, que mejorará su SEO y conversiones y acceso a herramientas, contenido exclusivo y soporte gratuito.

    17 comentarios en “Cómo optimizar Divi al máximo en WordPress”

    1. Buenas Raúl.

      Debo confesarte que me ha decepcionado bastante el artículo, por otra parte REFLOTADO. Además, dado que en los comentarios ya dices que no lo usas (y se nota que no lo usas) no entiendo bien entonces por qué hablas de un builder que no usas y le dedicas una noticia así en específico, cuando es algo que podrías evitar. Le pongas el nombre del builder que le pongas sería lo mismo, no aporta valor en este artículo, solo que entremos a leerlo para aprender nada y menos.

      Empiezas con un “no lo uses”, que es una frase totalmente subjetiva tuya que por ejemplo no tiene sentido en las webs de mis clientes. Si mencionases “si tienes una web donde te dedicas a vender baratijas chinas te aconsejo otros constructores cutres de pobres como el mismo Gutenberg” pues vale… pero yo tengo clientes que precisan de diseños espectaculares, galerías de arte, yates, coches de alta gama, exposiciones internacionales y tal… y no de vender chorradas de relojes chinos de aliexpress de 1€… y en calidad de diseños Divi gana por goleada absolouta.

      No hay a día de hoy ningún otro que se le pueda comparar con respecto a lo que puedo darle de calidad estética. Eso combinado con la facilidad de modificación de las páginas en manera autónoma para mis clientes.

      El resto de frases que sirven exactamente para todo… además de “no uses el tema con el plugin” cosa que no hace ya nadie ni por asomo, porque además el propio Divi ya te informa que no debes hacerlo.

      No se… igual por ejemplo esperaba un poco de profuncidad sobre por qué elegir wp-rocket en vez de un litespeed, cuando ahora como bien deberías haber reflejado, los mejores hostings TODOS usan litespeed (solo faltan quienes no quieren pagar litespeed en sus servidores pero aceptan con gusto el dinero de sus clientes)

      O para terminar, el tema de combinar CSS… me esperaba que, dado que lo mencionas y pones la imagen, me explicases si realmente hay que combinar o no, pues eso según entiendo, y según dice el propio wp-rocket que recomiendas, es algo que se hace solo en servidores viejísimos totalmente desaconsejables que usan http1

      Espero que lo que te comento sirva para un mejor artículo a futuro, porque normalmente están más currados, pero en fin… el click manda últimamente parece ser…

      1. Hola:

        Gracias por tu comentario, te respondo por partes.

        Sobre la antigüedad del contenido, no es un tema reflotado, es un tema que he actualizado, al igual que hago con todos, porque no me gusta tener nada obsoleto.

        Respecto a la temática, las ideas de mis contenidos viene de vuestras dudas, que me preguntáis a través de mi web, email y redes sociales. El contenido es la forma rápida de contestar.

        Sobre usar o no Divi, ya depende de ti. Ya te digo que Divi carga más de 1.4 MB, cuando otros temas son mucho más ligeros y en los que se pueden usar builders potentes y ligeros como Beaver Builder (no es de mi agrado). Es sólo una opinión.

        Respecto a la optimización de CSS y demás, para cada una de esas optimizaciones tengo una guía que supera con creces el tamaño de esta guía, porque no es sólo activar una casilla. Pueden surgir mil problemas y tendría que hacer una guía de miles de palabras para que estuviera todo. Ojo, tampoco lo descarto si me lo piden.

        La idea de esta guía era una respuesta rápida a los problemas más comunes con Divi y obviamente la iré mejorando con dudas y comentarios como este.

        En fin, espero que esto aclare tus dudas.

        Saludos.

    2. Buenas Raúl, es cierto que conozco todo lo que mencionas, y a pesar de ser tan particular Divi y fallar más que una escopeta de feria, tras años de machaque, he conseguido que varios de mis Diseños Divi, no vayan rápido, sino que vuelen. Gracias!

    3. Hola Raúl: Veo que en la web de Crédito Ágil las imágenes tienen Title y ALT. ¿Cómo lo implementaste? Tengo una página que se ha montado con DIVI y no lee el ALT de las imágenes. Me refiero al campo de “Texto alternativo” de la imagen que se rellenó previamente en la biblioteca de medios de WP. Insertamos la imagen y después el campo ALT está en blando alt=””.
      A ver si me puedes echar una mano.
      Gracias!

    4. Que buen post!! Oye Raúl no se si has notado pero lo que tienes en negrilla no se ve cuando uno lee aparece blanco me toca copiar y pegar todo en word para poder leer. Esto como para que puedas ver como solucioanrlo por que tu info es de mucho valor.

    5. Arturo Nadal Romero

      Buen Post Raúl!!! excelentes orientaciones, conseguí el thema Divi en un foro de Seo, a veces peco de transparente jajaja te voy a decir donde en hablemos de SEO (fb) y no he tenido problema, pero más nunca se actualizo y aunque no he tenido fallo estoy evaluando incorporar uno que me ofrecen en el mismo foro pero modificado por un programador, consulte con unos amigos especialistas en Marketing, los chavales de Hill Planet y me dicen que es un riesgo tremendo instalar themas así en wordpress, ¿cual es tu opinión?

      1. Arturo, yo personalmente no me fío de software que no es de la fuente oficial. Es verdad que hay que invertir dinero, así que mi consejo es que en cuanto te lo puedas permitir, lo pagues y no te fies de lo que te den. En esta vida no hay nada gratis. Saludos.

    6. Hola !
      Muy buen post!

      Me gustaría saber qué ocurre si no actualizo el tema al pasar el año al no pagar el servicio. ¿Podría tener problemas de incompatibilidad en internet? ¿Afectaría muy negativamente?

      Por otro lado el tema del idioma. ¿El menú para configurar Divi está solo en Inglés? ¿Es complicado?

      ¿Qué tema me recomendaría que me solventase estos puntos?

      Muchas gracias por su respuesta de antemano.
      Un cordial saludo.

      1. Jesús, me alegro que te guste.

        Sobre tu pregunta, pues es que si no pagas, no se actualiza y puedes tener problemas de compatibilidad con WordPress, plugins, etc.

        No uso Divi, pero en mis herramientas tienes el que uso yo.

        Saludos.

    7. ¡Hola Raúl! No sabía que se podía usar el maquetador Divi Builder solamente activando la plantilla y no junto al plugin. Excelente información. Gracias 😉

      1. Hola Davide,

        Pues sí y además se debe hacer así para evitar un alto consumo de recursos. Vaya, son cosas que el que diseña con Divi lo sabe, yo no.

        ¡Saludos!

    Únete gratis a WPOptimizers para comentar y aprender a optimizar WordPress.

    ¡Lo quiero!

    Si ya lo eres inicia sesión