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.

Optimizar la carga de 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

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.

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…

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.

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.

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.

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.

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.

Optimización de carga 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.

¿Puedo optimizar Divi aún más 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.

¿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 :)