Como mejorar la carga de mi sitio web con Divi Theme

Cómo mejorar la Velocidad de carga en mi sitio web WordPress y Divi

Mejorar la velocidad de carga de tu sitio web hecho con Divi puede ser un trago agridulce. Sabemos que es una maravilla. El tiempo que te ahorra al crear sitios web es de destacar y los diseños que se pueden lograr, muy buenos. Sin embargo ralentizan tu sitio web horriblemente. La velocidad de carga de la página es muy importante. Hasta hace poco estaba muy inconforme con los tiempos de carga de los sitios web que hacía usando Divi Theme. No es secreto hay muchos que afirman que Divi es lento.

Y es que lo intenté casi todo en lo que a optimización de velocidad con WordPress y Divi se ha hablado. Desde utilizar una CDN, mejorar la entrega de recursos, comprimiendo imágenes. No cargando vídeos directamente, sino usando la capacidad de WordPress de insertar los vídeos con YouTube o Vimeo, incluso probar el Divi Rocket, pero de eso ni hablar. Y obviamente usando las configuraciones de optimización que vienen con el Theme, eso es insustituible. Te Muestro como lo tenía.

Optimiza los tiempos de carga usando las configuraciones de Divi para WordPress.

Generación de CSS estático y estilos en línea.

Según esta configuración reducirá el tamaño de los estilos CSS de Divi, logrando una mejor optimización de los recursos. Para aplicarlo en administrador de WordPress ubica el menú Divi > Opciones del Tema > Constructor y activa la generación de CSS estático y enviar estilos inline.

Minificar y combinar los archivos CSS y JS del Theme

Con esto harás que Divi muestre versiones comprimidas, mínimas de los archivos CSS y JS que utiliza. Reduciendo el peso de tu sitio web WordPress.

La optimización que ofrece Divi es necesaria para mejora la velocidad del Theme. Luego de esta configuración interna quedé con estos resultados en Page Speed:

Resultados en Page Speed versión ordenador.
Resultados en Page Speed versión móvil.

Pues como ves, los resultados en velocidad y carga no están mal, de hecho una web WordPress con una carga arriba de 40 en Page Speed ya se puede considerar algo rápida. Y en mi experiencia con otros builders puedo afirmar que Divi no es lento. Con este ejemplo, tengo que destacar algunas cosas, para comenzar, esta web de prueba es una de las plantillas que vienen con Divi. Así que los recursos gráficos ya vienen optimizados, además no contiene vídeo incrustado. En mis pruebas con vídeo incrustado la velocidad en móvil puede llegar a 55 en Page Speed. Eso si, el sitio tiene varios plugins como Divi Supreme, WP-Forms, Ultimate WhatsApp Chat, Cost Calculator y otros más ligeros.

En fin otra cuestión muy importante para lograr la optimización de velocidad con Divi es el Hosting, la mejor combinación entre precio y calidad para alojar sitios en Divi y contribuir a la velocidad de carga de los sitios web, la pude encontrar en Banahosting a un precio muy asequible para quienes comienzan. Puedes contar con almacenamiento SSD, subdominios y bases de datos ilimitadas. Si acaso lo usas, te recomiendo el segundo plan, el Bana Profesional ya que te permite alojar sitios ilimitados.

Resultados en velocidad de carga de Divi con WP-Rocket

Para quienes deseen saber que tal la carga de Divi con el plugin WP-Rocket (en mi opinión el mejor), aquí te mostraré mis resultados.

Resultados de velocidad con WP-Rocket y Divi en celular
Resultados de velocidad con WP-Rocket y Divi en ordenador.

Cómo puedes ver, esta muy bien. Me siento bien con esos resultados. En conclusión, con estos resultados desmontamos el mito de que Divi es lento. Sin embargo, quieres dejar a tus clientes con cara de 😱 WTF?! Vamos a por el 90 en pc y móvil. 🕺

Por cierto, si te interesa WP-Rocket puedes entrar aquí y obtenerlo de forma segura.

WordPress y Divi con Nitro para Carga veloz.

Para ponernos en contexto, Nitro Pack es una plataforma que ofrece un servicio de caché super potente. Lo de potente no es un cliché, realmente brinda unos resultados excelentes tras una optimización profunda.

Se complementa muy bien con cloudFlare y te ayudará a mejorar los puntajes en Page Speed sin importar que tu web esté cargada de plugins e imágenes, es una promesa que parece muy grande, pero funciona. La configuración es muy fácil.

Configurar Nitro Pack para mejorar la velocidad del sitio.

Primero deberemos crear una cuenta en la web de Nitro Pack

  1. Ir a Nitro Pack cli aquí

    Deberás crear una cuenta con cualquier correo. Pulsa el botón “GET STARTED“.
    Crear cuenta en Nitro pack para mejorar la velocidad de carga en Divi

  2. Escoger tu plan.

    Tiene 1 plan GRATIS que puedes usar perfectamente, este plan tiene todas las funciones de los planes de pago.Escojer el plan de Nitro pack

    Sin embargo este plan agrega una marca de aguda en la parte debajo del Footer. No te molestes en intentar quitarla con CSS porque no funcionará, la única forma de quitarla es pasándote a una versión de paga.

  3. Llena el registro con tus datos.
    Después de llenar tus datos, recibirás un email al correo que utilizaste en el registro para confirmar tu cuenta. Así que ve y revisa tu bandeja de entrada.

    Llena el formulario de registro de Nitro pack

  4. Conecta tu sitio web con Nitro Pack.

    Una vez que ingreses con tu usuario y contraseña, deberás de ir al icono de conectar. Aparecerá el sitio web que ingresaste al momento de hacer el registro Nitro pack y el Site ID que te asigna. Esta clave es importante para la conexión correcta.
    Conectar tu sitio web con Nitro pack

  5. Ve a tu panel de WordPress e instala el plugin Nitro pack.

    Instalar el plugin Nitropack

  6. Ingresar a los ajustes del Plugin.

    Ya conoces la ruta Plugin > NitroPack > Settings
    Conectar nitro pack con el sitio web

    Si pulsas en el botón azul “Connect to NitroPack” y estás en el mismo navegador donde creaste la cuenta en la plataforma automáticamente hará la conexión. Si no es así, si el siguiente paso

  7. Conectar manualmente.

    Ingresa los campos Site ID y Site Secret. Estos datos los encontrarás en tu dashboard de NitroPack.
    Ingresar los datos de NitroPack manualmente.

  8. Configurar NitroPack para optimizar la web de WordPress.

    Deberás de ir a los Settings, aunque una vez que has conectado el sitio te redirigirá automáticamente. al panel del control de NitroPack en WordPress. Ahora te mostraré la configuración que yo utilizo. Primero necesitamos activar el “Optimization Mode” a Ludicrous, Activar el HTML Compression y Caché Warmup.
    Configuración de nitro pack

Ahora ya lo tienes, ya has conectado y configurado NitroPack para tu sitio web con WordPress y Divi.

Limpiar la caché al hacer cambios en el sitio Web.

Cuando tienes activado el Nitro, y haces un ajuste en tu sitio, es necesario luego hacer una limpieza de caché para que los cambios se reflejen al instante. Para esto en los ajustes de NitroPack encontrarás un botón que dice “Purge caché”.

Es importante aclarar de que no utilices NitroPack con plugins de caché como WP-Rocket, WP-Super caché u otros ya que no funcionará bien.

En la siguiente imagen te muestro como se ve la marca de agua que NitroPack agrega a tu sitio.

Resultados con Nitro, haber si vuela

Ahora probaremos de nuevo con NitroPack y veremos si a aumentado el puntaje en Page Speed.

Resultados con NitroPack móvil.
Resultados con NitroPack ordenador.

Pues como pudieron ver no lo logré. No obtuve 90 en ambos dispositivos. 😔 Pero heey solo han sido 5 minutos desde la configuración. Si te sucede lo mismo, dale tiempo y verás como logras llegar a una puntuación de 90 en móvil. 😁

Si tienes alguna duda, escribe en los comentarios.

Dejar un comentario

Tu dirección de correo electrónico no será publicada.

Pin It on Pinterest

Scroll to Top