Cómo optimizar la velocidad y tiempos de carga de Divi sin plugins

Uno de los peligros de usar maquetadores es que tienes tantas posibilidades de adornar y fliparte con tus páginas, y es tan sencillo hacerlo, que en ocasiones hacemos que nuestra web cargue lenta, por la cantidad de recursos que insertamos en ella.

Por supuesto, el principal criterio y norma a tener en cuenta debería ser no utilizar ningún recurso que no sea imprescindible para conseguir conversiones, vender, o lo que sea que quieres conseguir con tu web maquetada con Divi.

Pero la realidad es que vemos la opción de meter un carrusel con fotos a alta calidad, o una llamada a la acción con vídeo y cuesta resistirse a ofrecer una web tremendamente atractiva y efectiva.

Así que, como se que no te vas a sujetar, al menos me gustaría darte unos pocos consejos y trucos para hacer que Divi cargue más rápido y obtengas buenos resultados de optimización WPO, no solo en los medidores online, sino en la carga real de tus páginas.

WPO en Divi sin plugins

La optimización de recursos o WPO es posible en toda web, y también con Divi y cualquier maquetador visual. Solo hay que tener en cuenta algunas reglas básicas y aplicar las posibilidades que nos ofrezca el mismo maquetador.

Optimiza las imágenes antes de subirlas

tamaño de archivo de imagen en wordpress

No pasa nada por poner una sección hero a pantalla completa con una imagen maravillosa que muestre tus cualidades o producto, siempre y cuando el peso del archivo no suponga un problema para la carga de tu página, especialmente en dispositivos móviles, siempre con peores conexiones.

Para ello aplícate estas 3 normas:

  1. No subas ni utilices nunca una imagen cuyo archivo pese más de 100 Kb.
  2. No subas ni utilices nunca una imagen a una resolución mayor de la necesaria.
  3. Siempre usa jpg en vez de png a no ser que necesites transparencia.

Para el peso del archivo, di no dispones de un programa de edición de imágenes puedes usar servicios online como tinypng que permiten la compresión casi sin pérdida solo con arrastrar y soltar tus imágenes.

reducir tamaño imagen tinypng

Cuando el servicio haya optimizado tu imagen la descargas y subes la imagen optimizada en vez de la original.

En cuanto al  tamaño/resolución de la imagen ten en cuenta siempre los tamaños de imagen para cada módulo de Divi y redúcelos desde el mismo WordPress, como en la siguientes capturas…

editar imagen wordpress 1

Editar imagen wordpress 2

imagen optimizada con wordpress

Cuando tengas la imagen a un tamaño adecuado, y a una calidad suficiente para la visualización web en el navegador, sube la imagen y, si ya tenías una versión anterior, sustitúyela por la nueva, y optimizada.

Imagina una web con la imagen del ejemplo anterior, con 7 Mb por imagen, en la que tengas un carrusel con 2 o 3 imágenes de ese tamaño y peso, lo que tardará en cargar, por mucho que trates de optimizar por otros métodos.

Y siempre, siempre, primero reduce el tamaño cada uno de tus recursos antes de empezar a aplicar trucos de optimización o añadir plugins de WPO.

Optimiza los vídeos antes de subirlos

Por supuesto, debes aplicar el mismo criterio para los vídeos.

El primer consejo es que si puedes, evites la carga de archivos de vídeo, y uses la capacidad oEmbed de WordPress de mostrar vídeos de servicios como YouTube o Vimeo simplemente pegando la URL en cualquier parte del editor.

Simplemente añade un módulo de texto y en la caja del editor pega la URL de tu vídeo para que esté disponible para su visualización.

De este modo te evitas tener que servir vídeo directamente desde tu web, con lo que no solo tu página pesará varios megas más por el peso del vídeo, sino que consumirá enormes recursos por cada reproducción, y gastarás miles de euros en alojamiento web.

Si necesitas subir un vídeo, por ejemplo para un carrusel de vídeo de Divi, y es imprescindible que sea así, al menos optimiza el vídeo al máximo antes de subirlo.

Aquí de nuevo te sugiero unas normas de sentido común:

  1. Si puedes incrustar vídeo mediante oEmbed mejor que subirlo.
  2. Siempre usa el formato .webm, mucho más optimizado y de menor tamaño.
  3. Si por compatibilidad con navegadores también tienes que subir el formato .mp4 optimízalo antes de subirlo.

Como sabes, los módulos de Divi que permiten la inserción de vídeo te ofrecen 2 campos, para subir la versión .webm y .mp4 del mismo vídeo.

videos webm y mp4 divi

Siempre sube la versión .webm, porque están más optimizados para web y de menor tamaño, pero si tienes también que cargar el .mp4, por compatibilidad, para que se vea bien en todos los navegadores, al menos reduce el tamaño del archivo antes.

Si no tienes versión .webm puedes convertir tu vídeo .mp4 a .webm en esta web. Así tienes los dos formatos.

Puedes optimizar vídeo, tanto del formato .mp4 como del .webm, en servicios online como ClipChamp (gratuito para 5 vídeos por mes) , que funcionan igual que el anteriormente citado tinypng.

Simplemente sube el vídeo original y descarga el optimizado. Luego subes el ya optimizado a tu módulo de Divi.

Instala solo los plugins imprescindibles

Uno de los parámetros de medición de los tiempos de carga de una web es el TTFB, y uno de los parámetros que hacen que cargue lenta una página es la cantidad de plugins instalados y activos.

Así que, antes de ponerte a instalar plugins, aunque sean de caché y optimización, sigue este guía que te propongo, y luego mantén tu arsenal de plugins al mínimo imprescindible.

Fácil ¿eh?

Genera un CSS estático desde Divi

Desde hace tiempo, Divi incorporó herramientas de optimización propias en sus opciones, y vamos a aprovecharlas.

Una de ellas es la generación de un archivo CSS estático, que reducirá el tamaño de los estilos CSS de Divi, permitiendo una carga de página más rápida y optimizada. De hecho es una de las optimizaciones típicas que incluyen la mayoría de los plugins de WPO y caché.

Para ello ve, en la administración de WordPress, al menú Divi > Opciones del tema > Builder y activa la opción llamada Generación de CSS estático.

css estatico divi

Al activar esto se guarda y carga una versión estática y minimizada (minify) en caché de los CSS de Divi, lo que hace que carguen más rápido.

Activa los estilos inline

Otra característica que ha incorporado Divi, aunque en cierto momento la quitó, es la posibilidad de servir los estilos inline en el pie de página, con lo que se permite la caché de los estilos.

Si quieres recuperar esta funcionalidad la tienes en la misma página de opciones del ajuste anterior, en el selector llamado Enviar estilos inline. Simplemente lo activas y guardas los cambios.

estilos inline divi

Minimiza y combina los archivos JS y CSS

Una de las optimizaciones más típicas que incluyen los plugins WPO es la de minimizar (minify) los archivos de código, JavaScript y CSS.

En Divi no necesitas instalar un plugin para esto, lo tienes en las Opciones del tema, en la pestaña General, justo a bajo del todo.

minify css js divi

Simplemente activa las dos opciones y guarda.

Divi minimiza todo el código JavaScript y CSS que utiliza y ofrece al navegador versiones mínimas y optimizadas de todo, reduciendo el peso de toda tu web y cada página, ofreciendo tiempos de carga menores, además de obtener mejores resultados en los medidores de velocidad web como PageSpeed.

WPO con Divi Builder

Si no tienes el tema Divi, si solo usas el plugin Divi Builder tienes estas mismas configuraciones, todas juntas en la pestaña Advanced de sus opciones.

wpo divi builder

¿Y con plugins?

En mis pruebas he comprobado que funciona mejor el minimizado y combinado que hace Divi de sus propios CSS y JS que los plugins que encontrarás por ahí.

Ahora bien, puedes mejorar aún más la optimización, el WPO de tu web con una combinación perfecta, que te propongo:

  1. HTTP/2 – Aloja tu web en un hosting que sirva tu web en HTTP/2, con innumerables ventajas. Si tu alojamiento web te lo ofrece solo tienes que servir tu web en https con un certificado SSL.
  2. PHP 7 – No alojes tu web si tu hosting no te permite tener la versión de PHP 7.0 o superior, las mejoras en velocidad y seguridad son impresionantes.
  3. Un buen plugin de caché. Si tienes tu web en SiteGround solo necesitarás SG Optimizer. En caso contrario te recomiendo WP SuperCache, muy sencillo de usar y configurar.
  4. Autoptimize – Este plugin de optimización añade la posibilidad de minimizar todos los archivos HTML, pero también lo hará con los JS y CSS que no sean de Divi. Te recomiendo no activar más opciones que estas, sin opciones avanzadas, para no romper nada.
  5. WPO Tweaks – Si instalas mi plugin de optimizaciones WPO a un clic tendrás, sin tener que configurar nada, mejoras de velocidad óptimas parar prácticamente cualquier web.
VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(16 votos, promedio: 4.9)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

14 comentarios en “Cómo optimizar la velocidad y tiempos de carga de Divi sin plugins”

  1. Buenas,

    Acabo de conocer tu plugin WPO Tweaks, no lo conocia. Acabo de echar un ojo y a términos generales me parece un plugin que aplica las optimizaciones que recomiendas en tu libro 1001 trucos wordpress no?

    Gracias por todo,
    Saludos!

    1. Sí, como explico en el post es algo que me han pedido muchos lectores, que pusiera los principales trucos en forma de plugin, y ahí está.

      Es mejor activar primero el minify de Divi y luego el autoptimize para minimizar lo de todo lo demás.

      Un abrazote.

  2. Gracias Fernando… Me surge una duda: ¿Teniendo instalado «SG Optimizer», es recomendable instalar también Autoptimize y WPO Tweaks?

    Gracias de nuevo…

    1. SG Optimizer es solo cache, no tiene nada que ver con otras optimizaciones. Y puedes instalar sin problema los otros dos mientras no actives las opciones Extra de Autoptimize, pues algunas duplican optimizaciones que ya hace WPO Tweaks.

      1. Conocía esa manera, lo que pasa que no quise aplicarla porque vi que perdía bastante definición como es lógico. Pensaba que igual usabas alguna herramienta o ponías menos anchura. Gracias!

  3. Hola Fernando gran post!
    A nivel de carga de la web , es mejor usar Divi en su versión plugin combinado con Astra o similar, o Divi theme con estas implementaciones ?
    Las optimizaciones que comentas sirven para un theme ( Astra por ejemplo ) con Divi pluguin?
    Gracias!

  4. Hola Fernando gran post!
    A nivel de carga de la web , es mejor usar Divi en su versión plugin combinado con Astra o similar, o Divi theme con estas implementaciones ?
    Las optimizaciones que comentas sirven para un theme ( Astra por ejemplo ) con Divi pluguin?
    Gracias

  5. Hola amigos, después de probar 300 plugins de optimización, he llegado a la conclusión que el mejor con diferencia es WP Rocket.

    Con WP rocket y su optimizador de imagenes Imagify he conseguido pasar de 20 a 90 en el page speed insights.

    Es una recomendación personal para los lectores de este gran blog!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido