Divi Speed ​​Optimization: la guía definitiva

Divi no es un creador de páginas cualquiera. Divi lleva el proceso de diseño a  un nivel completamente nuevo con un sistema de diseño web completo que le permite diseñar visualmente cada parte de su sitio web. Pero eso no significa que Divi tenga que ser lento. Lejos de ahi.

Las funciones integradas de optimización de la velocidad y el rendimiento de Divi pueden poner fácilmente su sitio en la parte superior de la lista en las puntuaciones de Google PageSpeed. Con características como Dynamic Module Framework, Dynamic CSS, Dynamic JavaScript Libraries y más, Divi ahora es un generador de páginas sólido y un tema liviano. Pero a pesar de lo rápido que es Divi, hay otros factores subyacentes que necesitan optimización. Y si no se aborda, la velocidad de su sitio Divi sufrirá innecesariamente.

En esta publicación, vamos a explorar la optimización de velocidad integrada de Divi y lo que podemos hacer para que sea aún más rápida.

Rendimiento de WordPress vs rendimiento de Divi

Divi a menudo no es el principal factor determinante del rendimiento de su sitio web. Es solo una pieza del rompecabezas. También debe considerar las necesidades de optimización subyacentes para un sitio de WordPress en general. Divi (el tema Divi y/o Divi Builder) se encuentra sobre WordPress (el CMS), que se encuentra sobre una pila de software de servidor, que se encuentra sobre una infraestructura de alojamiento. Todas esas cosas necesitan ser afinadas correctamente. Para empezar, estos incluyen cosas como un buen alojamiento, almacenamiento en caché y un CDN. Sin estas optimizaciones subyacentes, un sitio Divi será más lento independientemente de qué tan bien optimicemos Divi. Entonces, si su sitio web Divi es muy lento, entonces también debe considerar estas otras piezas del rompecabezas.

Con las necesidades de optimización subyacentes para un sitio web de WordPress, debemos abordar la optimización del rendimiento de Divi. Esto se logra mejorando el rendimiento de Divi Theme y/o Divi Builder, asegurándose de que funcione de manera óptima en las áreas en las que se basa en WordPress y en las áreas en las que funciona dentro de WordPress. Una vez que todas estas piezas estén optimizadas, podemos crear con éxito un sitio web Divi con una velocidad y un rendimiento óptimos.

En el resto del artículo a continuación, abordaremos primero la optimización del rendimiento integrada de Divi (lo que ya se ha hecho por ti). Luego, abordaremos cómo optimizar aún más su sitio Divi al abordar algunas necesidades de optimización subyacentes (cosas adicionales que puede hacer).

Funciones integradas de optimización de velocidad y rendimiento de Divi

Primero, echemos un vistazo a algunas de las optimizaciones de rendimiento y velocidad integradas que Divi ya tiene. Estas funciones de optimización aceleran Divi desde todos los ángulos, lo que lo convierte quizás en el creador de páginas más rápido del mercado . Pero eso no es todo. Divi está construido con un marco dinámico que elimina la hinchazón y proporciona una base sobre la cual Divi puede crecer con más módulos y más funciones sin tener que agregar una hinchazón a su sitio web. Esto le brinda lo mejor de ambos mundos: el poder de un generador de páginas expansivo con la agilidad de un tema liviano.

Las funciones de optimización del rendimiento se pueden administrar navegando a Divi > Opciones de tema. En la pestaña General, seleccione la subpestaña Rendimiento.

Ahora echemos un vistazo más de cerca a las características que hacen que sea tan fácil crear un sitio web Divi súper rápido.

Marco de módulo dinámico

Dynamic Module Framework es una característica única y poderosa de nuestra optimización de velocidad Divi incorporada. La función aumenta la velocidad del sitio al seleccionar y ejecutar funciones de PHP a pedido. Divi procesa la lógica necesaria para representar solo los módulos y las funciones utilizadas en cada página sobre la marcha; todo lo demás se elimina de la ecuación. En otras palabras, todo lo que podría considerarse «inflado» se borra del back-end.

Módulos Bajo Demanda

Por ejemplo, si tiene 3 módulos en una página, Divi solo procesará las funciones necesarias para esos 3 módulos en lugar de procesar todas las funciones para todos los módulos, independientemente de cuál se use. Esas 3 funciones mostrarán el shortcode/HTML para ese módulo en la página sin perder tiempo de procesamiento.

Funciones bajo demanda

Así como Divi procesa dinámicamente y carga módulos a pedido, Divi hace lo mismo con todas las funciones utilizadas en una página. En lugar de procesar funciones para todas las características posibles que podrían usarse en Divi Element ( efectos de desplazamiento , animaciones, opción adhesiva, opciones de borde, etc.), Divi solo procesa las funciones de características que realmente se usan en un elemento. Esta característica no se aplica solo a los módulos, sino a cualquier elemento Divi, incluidas las secciones, las filas y las columnas.

Bibliotecas dinámicas de Javascript

La forma en que un sitio web carga las bibliotecas de JavaScript es clave para la optimización de la velocidad de Divi. Para hacer que el sitio de Divi sea aún más rápido, mejoramos el JavaScript de Divi para que sea más conciso y modularizado. Esto permite que Divi cargue JavaScript bajo demanda de forma dinámica. Divi cargará y procesará funciones de JavaScript (como Sticky Options ), así como bibliotecas de JavaScript externas (como Magnific Popup) solo cuando los módulos o funciones de una página las necesiten.

El tamaño de archivo de Javascript base más pequeño combinado con las bibliotecas dinámicas de JavaScript definitivamente aumentará la velocidad del sitio simplemente porque hay menos código para procesar para cada carga de página. Los guiones no utilizados se eliminan. Y, debido a que esta lógica anti-inflación ocurre por página, si tiene una fila fija en una página, no tendrá que preocuparse de que ese JavaScript fijo se cargue en una página que no lo tiene. Esta es la belleza del JavaScript dinámico de Divi.

Ejemplo: biblioteca dinámica de JavaScript para un módulo de imagen usando Lightbox

Supongamos que tiene una página con un módulo de imagen con lightbox habilitado. Divi señalará dinámicamente y ejecutará la biblioteca Magnific Popup JS para esa página para aplicar esa funcionalidad emergente de lightbox. Si lightbox está deshabilitado en la imagen, la biblioteca JS no se carga ni se ejecuta en la página.

Aplazar jQuery y jQuery Migrate

Cuando sea posible, jQuery y jQuery Migrate se moverán al cuerpo para eliminar una solicitud de bloqueo de procesamiento y acelerar los tiempos de carga. Como muestra la ilustración a continuación, si el script jQuery se carga antes (en el encabezado), pausará el análisis del HTML hasta que se ejecute el script. Esto ralentizará el renderizado de su página.

Solo que, por otro lado, si un complemento de terceros registra jQuery como una dependencia, se moverá de nuevo al encabezado para evitar conflictos. Esta opción se puede deshabilitar si causa problemas.

CSS dinámico

El CSS dinámico aplica la misma lógica anti-inflación (utilizada en el marco del módulo dinámico) a la hoja de estilo de Divi. Como puedes imaginar, la hoja de estilo principal de Divi sería bastante grande teniendo en cuenta todas las características que tiene. Pero cargar una hoja de estilo grande en cada página provoca una sobrecarga innecesaria y tiempos de carga de página más lentos. Esto revela una gran oportunidad para mejorar la optimización de la velocidad de Divi.

Con CSS dinámico, el CSS de Divi se divide en cientos de pequeños componentes. En cada página, estos componentes de CSS se combinan para formar una hoja de estilo única que contiene solo las piezas necesarias para aplicar estilo a esa página en particular según los módulos, las características del módulo y las opciones de diseño del tema que está utilizando.

Esto soluciona el problema de la hinchazón de CSS porque ahora no existe. No hay  hinchamiento porque no se carga ningún otro CSS. Sin Dynamic CSS, la hoja de estilo de Divi sería de alrededor de 900 kb y se cargaría en todas las páginas, independientemente del contenido. Ahora, si solo necesita 80 kb de CSS para la página, Dynamic CSS elimina los más de 800 kb que no necesita para cargar la página. Eso significa que su página se carga aún más rápido.

CSS crítico

El sistema Critical CSS de Divi aumenta la velocidad del sitio identificando el CSS necesario para diseñar el contenido en la mitad superior de la página y postergando todo lo demás. Dado que solo se necesitan los estilos críticos cuando la página se carga por primera vez, y dado que los activos de bloqueo de renderizado juegan un papel tan importante en la velocidad de la página, la capacidad de Divi para separar automáticamente los estilos críticos y no críticos le da una gran ventaja sobre otros temas y constructores de WordPress . . Una vez que Divi termina de procesar su CSS, apenas queda nada en el encabezado del sitio web, lo que significa que el contenido aparece de inmediato, y es por eso que Google otorga puntajes tan altos a los sitios web de Divi desde el primer momento.

Por ejemplo, si su contenido de la mitad superior de la página consta de un título, un párrafo, un botón y una imagen, solo se cargará el CSS relevante para esos elementos tan pronto como sus visitantes carguen la página. El resto del CSS también se cargará, por supuesto, pero no en la primera interacción. Eso es lo que se llama CSS no crítico.

Para obtener una explicación más completa de cómo funciona esta función y cómo usarla, consulte nuestros artículos sobre cómo la función CSS crítica de Divi aumenta la velocidad del sitio  y cómo crear la página Divi más rápida.

Altura del umbral crítico

Relacionada con Critical CSS está la opción Critical Threshold Height.

Cuando Critical CSS está habilitado, Divi determina un «umbral de la parte superior de la página» y difiere todos los estilos para los elementos de la parte inferior de la página. Sin embargo, este umbral es solo una estimación y puede variar en diferentes dispositivos. El aumento de la altura del umbral diferirá menos estilos, lo que dará como resultado tiempos de carga ligeramente más lentos pero menos posibilidades de que se produzcan cambios de diseño acumulativos (CLS). Si tiene problemas con CLS, puede aumentar la altura del umbral.

Cargar hoja de estilo dinámica en línea

La opción Cargar hoja de estilo dinámica en línea es la optimización de CSS final que elimina todas las solicitudes de CSS que bloquean el renderizado.

¡Gracias a Dynamic CSS, la hoja de estilo básica de Divi ahora es lo suficientemente pequeña como para que se pueda cargar en línea en la página real! Cargar este CSS en línea elimina una solicitud de bloqueo de procesamiento y mejora las puntuaciones de Google PageSpeed. Cuando las opciones Critical CSS, Dynamic CSS y Load Dynamic In-Line Stylesheet están habilitadas, se eliminan todas las solicitudes de CSS que bloquean el procesamiento .

Mejorar la carga de fuentes de Google

La opción Mejorar la carga de las fuentes de Google permite el almacenamiento en caché de las fuentes de Google y las carga en línea en el encabezado. Esto reduce las solicitudes de bloqueo de procesamiento y acelera los tiempos de carga.

También agregamos la opción Limitar el soporte de fuentes de Google para navegadores heredados.

Básicamente, esto elimina los archivos de fuentes heredados para disminuir la carga útil. Habilitar esta opción reducirá el tamaño de Google Fonts y mejorará los tiempos de carga; sin embargo, limitará la compatibilidad con Google Fonts en algunos navegadores muy antiguos. Puede desactivar esta opción para aumentar la compatibilidad con navegadores más antiguos con un ligero costo de rendimiento.

Deshabilitar emojis de WordPress

WordPress viene con un sistema de emoji nativo, pero esto ya no es necesario debido a la compatibilidad nativa con emoji en los navegadores modernos. De hecho, los emojis nativos se ven mucho mejor que la versión de WordPress. Divi te da la opción de deshabilitar los emojis nativos de WordPress, lo que elimina los recursos innecesarios. Y tener menos recursos para renderizar da como resultado cargas de página más rápidas.

Aplazar el CSS del bloque de Gutenberg

Cuando usa Divi Builder en una página, también elige no usar el editor de bloques predeterminado de WordPress (Gutenberg). Y dado que no va a usar bloques para diseñar su página, no necesita que Gutenberg CSS bloquee la carga de su página Divi. Con la opción Defer Gutenberg Block CSS habilitada, Divi ahora (de forma predeterminada) cargará de forma diferida el CSS del bloque Gutenberg en las páginas en las que está utilizando Divi Builder en su lugar. Todavía se cargará por si acaso (en el pie de página), pero ya no bloqueará el renderizado.

Iconos dinámicos

Divi ahora incluye subconjuntos de fuentes de íconos que se cargan a pedido en función de los módulos y las funciones que está utilizando. Esto reduce el tamaño de fuente del icono base de Divi de 90 kb hasta 6 kb. El conjunto completo de iconos se carga solo cuando es necesario. Esta opción está deshabilitada de forma predeterminada si está utilizando un tema secundario o un módulo Divi personalizado. Si su tema secundario o módulo Divi de una tercera parte utiliza el conjunto completo de iconos Divi, entonces esta opción debe permanecer deshabilitada.

Hay tres subconjuntos de fuentes de iconos que se utilizan en función de lo que necesita una página.

• Base: este subconjunto incluye todos los iconos que se utilizan de forma predeterminada en el tema Divi y sus módulos.
• Social: este subconjunto incluye todos los íconos básicos más todos los íconos sociales, que se cargan cuando se usa un módulo de seguimiento de redes sociales.
• Todo: este es el conjunto completo de íconos que se usa cuando usa el selector de íconos en un módulo Divi para seleccionar un ícono personalizado.

Este es un ejemplo del subconjunto de fuentes de íconos sociales que se carga dinámicamente debido a un módulo de seguimiento de redes sociales existente en la página.

Si necesita acceder a toda la fuente de íconos en todas las páginas (por ejemplo, si está usando nuestra fuente de íconos en su tema secundario), puede deshabilitar esta opción y cargar toda la biblioteca de fuentes de íconos en todas las páginas.

Compatibilidad nativa con Srcset para imágenes receptivas

Divi incluye compatibilidad nativa con SRCSET para todas las imágenes de Divi , lo que significa que Divi automáticamente hará que sus imágenes respondan y sirva la imagen del tamaño perfecto para cada dispositivo. Dado que las imágenes más pequeñas se sirven en dispositivos más pequeños, esto puede mejorar en gran medida las velocidades de carga y no requiere ningún trabajo adicional de su parte.

14 optimizaciones de velocidad Divi para aumentar el rendimiento de su sitio web Divi

La optimización de la velocidad sigue desempeñando un papel crucial en la experiencia del usuario de su sitio web Divi , así como en su  optimización de motores de búsqueda (SEO) . Por lo tanto, para que su sitio Divi funcione bien para los visitantes y Google, querrá abordar aquellas áreas fuera de Divi que optimizan aún más la velocidad de su sitio.

Aquí hay 14 cosas que puede hacer para optimizar la velocidad y el rendimiento de su sitio web Divi…

1.Actualice su alojamiento

Si te tomas en serio la velocidad (y el rendimiento) de tu sitio web, comienza eligiendo un buen proveedor de alojamiento. De hecho, puede hacer todo bien para optimizar la velocidad de su sitio web y seguir teniendo un sitio lento debido a su host. Y los proveedores de hosting realmente buenos harán muchas de esas optimizaciones de velocidad por ti para que no tengas que preocuparte por eso. Entonces, si tiene un sitio Divi lento, su primer paso es considerar actualizar su alojamiento.

Utilice el alojamiento optimizado Divi

Si desea un sitio web Divi rápido, tiene sentido elegir un proveedor de alojamiento que esté optimizado no solo para WordPress sino también para Divi. Entonces, si está buscando un excelente alojamiento de WordPress que funcione perfectamente con Divi y venga con la instalación automática de Divi, entonces Divi Hosting es una excelente solución nueva para usted. Nos asociamos con algunos de nuestros hosts de WordPress favoritos ( Pressable ,  Flywheel , SiteGround y Cloudways ) para brindarles a los clientes de Divi una manera simple de crear sitios web de Divi que sean rápidos, respaldados por una infraestructura de alojamiento moderna que cumpla con todos los requisitos de Divi y respaldados por Profesionales líderes de WordPress.

¿Por qué elegir alojamiento Divi?

En última instancia, cada usuario de Divi debe tomar una decisión sobre el alojamiento. Tomar la decisión equivocada puede llevar a mucho dolor. Queremos facilitar esa elección. Aquí hay algunas cosas que hacen que Divi Hosting sea único:

• Cuando creas tu sitio web, Divi se instala automáticamente.
• Su nuevo sitio web se conecta automáticamente a su cuenta de Elegant Themes y se configura con su clave de licencia para que pueda obtener actualizaciones y soporte.
• Su entorno de alojamiento se configurará para cumplir con todas las configuraciones de PHP recomendadas por Divi desde el primer momento. No se necesitan ajustes.
• Su sitio web estará impulsado por una infraestructura de alojamiento rápida y moderna, lo que significa tiempos de carga rápidos y herramientas modernas como almacenamiento en caché automático y CDN.
• Serás alojado por una empresa que conoce WordPress por dentro y por fuera.
• Serás alojado por uno de nuestros socios, lo que significa que están dedicados a garantizar una excelente experiencia Divi en sus sistemas.

Existen muchas opciones de alojamiento y no todas son iguales. Ayudamos a nuestros clientes todos los días a lidiar con problemas de compatibilidad relacionados con el alojamiento que pueden ser increíblemente frustrantes. Todo el mundo necesita alojamiento para usar Divi, y su experiencia de alojamiento no tiene por qué ser una lucha. Para obtener más información, aprenda cómo el alojamiento Divi es la mejor solución de alojamiento para Divi .

Encontrar la solución de alojamiento adecuada para su sitio Divi

¿Necesita utilizar Divi Hosting para tener un sitio web Divi rápido? Absolutamente no. Existen otras excelentes soluciones de alojamiento y Divi siempre funcionará muy bien en excelentes entornos de alojamiento. Pero debido a que el alojamiento juega un papel tan fundamental en la optimización de la velocidad y el rendimiento, debe tomarse el tiempo necesario para encontrar la solución de alojamiento adecuada para su sitio Divi.

Hay muchas empresas de hosting excelentes y no tan excelentes. Y cada uno suele ofrecer múltiples soluciones y servicios de hosting. Por lo tanto, encontrar el adecuado puede ser abrumador. A continuación se incluye información útil sobre los tipos de alojamiento más comunes que se deben tener en cuenta al encontrar la solución de alojamiento adecuada para su sitio Divi.

Alojamiento tradicional (compartido) (no recomendado)

Este es, con mucho, el tipo de alojamiento más popular para los usuarios de WordPress, en gran parte porque es el más asequible. Pero desafortunadamente, es la peor opción para optimizar la velocidad. Con el alojamiento compartido tradicional, compartirá todos los recursos disponibles de un servidor con otros. Debido a que está compartiendo, el costo de este tipo de alojamiento es bajo. Pero la desventaja es que no puede controlar cuánto tráfico reciben esos otros sitios en su servidor compartido. Por lo tanto, puede caer fácilmente en períodos de tiempos de carga extremadamente lentos e incluso en momentos en que su sitio está completamente inactivo. Así que es mejor que tenga una buena idea de cuánto tráfico puede manejar su alojamiento compartido .

Alojamiento Dedicado

Con el hosting dedicado , tienes tu propio servidor dedicado solo para ti. No es necesario compartir ningún recurso con nadie más. Esto significa que tendrá tiempos de carga rápida más predecibles y consistentes para su sitio web. Esto generalmente se ofrece como una opción de primer nivel para grandes corporaciones a un alto costo premium.

Alojamiento VPS

El alojamiento de servidor privado virtual (VPS) es básicamente un término medio entre el alojamiento compartido y el dedicado. El espacio de su servidor es «privado», lo que significa que está completamente separado de todos los demás (algo así como una comunidad cerrada para los archivos de su sitio). Por lo tanto, los archivos de su sitio no están expuestos a otros en el servidor. A diferencia del alojamiento compartido, un VPS tiene una cantidad dedicada de recursos del sistema (o energía) a su disposición para garantizar que su sitio siempre obtenga lo que necesita para ofrecer tiempos de carga rápidos de manera constante. Por lo tanto, no tendrá que preocuparse por los picos de tráfico de otros sitios web que afectan la velocidad de su sitio.

Pero, a menos que tenga un VPS administrado, este tipo de alojamiento es principalmente para aquellos tipos de bricolaje que son lo suficientemente expertos en tecnología como para manejar las cosas por sí mismos. Para obtener más información, aquí hay una comparación de rendimiento entre el alojamiento VPS y el alojamiento compartido .

Alojamiento en la nube

Con el alojamiento en la nube , tiene acceso a una red de servidores (en la nube) en lugar de un solo servidor físico. Esto le permite extraer todos los recursos que necesita de esta red de servidores según sea necesario. En esencia, tiene una partición virtual de espacio de servidor que está respaldada por la potencia y los recursos de toda la red. Por lo tanto, no tiene que preocuparse por los picos de tráfico como lo haría en el alojamiento compartido. El alojamiento en la nube es extremadamente flexible y escalable según sus necesidades.

Una diferencia principal entre el alojamiento en la nube y el alojamiento VPS es que el alojamiento VPS tiene una cantidad dedicada (o limitada) de recursos para extraer que pueden o no agotarse. Cloud Hosting, por otro lado, es capaz de mantener sus recursos disponibles sin agotarse porque siempre puede extraerlos de los otros servidores en la nube. En teoría, el alojamiento en la nube ofrece altas velocidades más consistentes y confiables. Entonces, si se toma en serio la velocidad, el alojamiento en la nube es una excelente opción (tal vez incluso la mejor).

Alojamiento administrado de WordPress

El alojamiento administrado de WordPress generalmente se refiere al alojamiento compartido administrado por expertos de WordPress. Por lo general, cuesta un poco más que el alojamiento compartido tradicional, pero si desea un sitio Divi más rápido, el alojamiento administrado de WordPress puede valer la pena . No es tan «privado» como un VPS ni tan potente como un entorno de alojamiento dedicado. Pero ayuda a maximizar la velocidad de su entorno compartido al hacer que los expertos de WordPress hagan el trabajo. Lo hacen bien porque adaptan sus servicios y configuran sus servidores estrictamente para sitios de WordPress. Buenos proveedores de alojamiento administradoofrecen muchas funciones integradas geniales y convenientes, como entornos de preparación con un solo clic, almacenamiento en caché del sitio, implementación de CDN con un solo clic, copias de seguridad automáticas, SSL y más. Son perfectos para aquellos de nosotros que no queremos confiar (o administrar) un montón de complementos para la optimización, seguridad y administración básicas de la velocidad.

De hecho, Divi Hosting es un alojamiento administrado de WordPress que está optimizado para Divi. Esto elimina todos los dolores de cabeza de la optimización de su entorno de alojamiento para su sitio Divi.

2. Optimizar el tiempo hasta el primer byte (TTFB)

¿Qué es TTFB?

El tiempo hasta el primer byte (TTFB) es la cantidad de tiempo que le toma al usuario recibir el primer byte de los datos del sitio web de su host/servidor. Entonces, cuando un usuario realiza una solicitud HTTP (carga su página web), el TTFB será esencialmente ese período de espera antes de que el navegador reciba cualquier información. Esto es importante porque cuanto más largo sea el TTFB, más tardará la página en cargarse.

Piense en ello como obtener comida rápida. El restaurante puede optimizarse para entregar su comida rápidamente. De hecho, es posible que ya tengan una hamburguesa esperándote. Pero todavía tienes que esperar en la fila para ordenar. Ese período de espera es lo que puede considerar como el momento de la primera mordida  (vea lo que hice allí).

El TTFB debería estar alrededor de 200ms (según Google). Pero para los sitios que tienen un alojamiento deficiente y no han sido optimizados, el TTFB puede ser fácilmente de 2 segundos o más.

¿Qué causa un TTFB lento?

El retraso de TTFB en su sitio Divi generalmente se debe a lo siguiente:

• La cantidad de  contenido dinámico  que debe recibirse. Esto se puede reducir con el almacenamiento en caché, la optimización de la base de datos y un CDN.
• La  cantidad de tráfico  que experimenta su servidor en ese momento. Los proveedores de alojamiento tradicionales (o compartidos) dificultan la desactivación de ese TTFB porque está compartiendo recursos con otros en el mismo servidor. Los picos en su tráfico reducirán la velocidad de procesamiento de su servidor.
• La configuración de su  servidor web . Un buen proveedor de alojamiento de WordPress puede ayudar con el TTFB de su sitio al proporcionar una infraestructura de back-end sólida y optimizar la configuración de su servidor web (cosas bastante fuera de su control).

Cómo acelerar el TTFB de tu sitio Divi

TTFB es uno de los Web Vitals (junto con  FCP ,  LCP y CLS) que utiliza Google para determinar la clasificación de su sitio. Por eso es importante optimizarlo. La buena noticia es que TTFB se puede optimizar. Aquí hay algunos consejos clave que puede usar para reducir el TTFB.

• Mejora tu Hosting . La forma más efectiva de impulsar su TTFB es simplemente actualizar su alojamiento. Pagar un poco más por el alojamiento administrado para WordPress o Divi Hosting tendrá el mayor impacto en TTFB desde el principio.
• Utilice un CDN . Esto permitirá a los visitantes cargar los datos de su sitio desde un servidor más cercano a ellos para que pueda reducir la latencia y reducir el TTFB.
• Eliminar complementos o temas innecesarios . Los complementos y temas (especialmente los obsoletos) pueden atascar el servidor de su sitio y los tiempos de carga (incluido TTFB). Por lo tanto, es mejor usar solo complementos (o temas) de calidad esencial y eliminar los demás.
• Implementar almacenamiento en caché . Divi tiene almacenamiento en caché incorporado para entregar Divi JS y CSS. Pero el almacenamiento en caché de su sitio web en su conjunto, además de usar un CDN, reducirá el TTFB.

Use Cloudflare para impulsar TTFB

Una forma de obtener un impulso rápido en el TTFB de su sitio es usar Cloudflare. El almacenamiento en caché y CDN disponibles en su plan gratuito definitivamente impulsarán TTFB. También puede aprovechar la optimización automática de la plataforma de Cloudflare , que se probó para mostrar una reducción del 72 % en TTFB .

Para obtener más información, consulte nuestro artículo completo sobre TTFB y cómo optimizar su sitio web para ello .

3. Optimice la base de datos de su sitio

Por qué el sitio de WordPress necesita bases de datos limpias

A diferencia de los sitios HTML estáticos, WordPress es un CMS dinámico que usa PHP para recuperar datos almacenados en una base de datos MySQL para mostrar esos datos en una página web. Esto facilita la administración de su sitio, pero la desventaja es que las páginas tardan más en cargarse porque tiene que ubicar los datos en la base de datos antes de cargar la página. En general, los sitios web HTML estáticos serán más rápidos que los sitios web de WordPress por este motivo.

Una forma de mantener un sitio Divi lo más rápido posible es  asegurarse de tener una base de datos limpia . Los archivos del sitio de WordPress están organizados en su base de datos por tablas y cada vez que agrega nuevos datos a su sitio (como temas y complementos), crea nuevas tablas y más datos. Como era de esperar, cuanto más desordenada sea su base de datos, más difícil será encontrar los datos. Esto conduce a un sitio web más lento.

Entonces, si agregó el tema Divi a su sitio web después de años de probar otros temas e innumerables complementos, es probable que tenga algunos datos almacenados que ya no necesita. Incluso si desinstala un complemento, no significa que todos los datos hayan desaparecido de la base de datos. A los complementos les gusta dejar algunos datos allí en caso de que reinstale el complemento. No está bien, lo sé. Estos datos sobrantes pueden generar desorden innecesario y ralentizar su sitio.

Al igual que todos los humanos necesitan una organización para trabajar de manera más eficiente, cada sitio de WordPress (Divi o no) necesita una base de datos limpia para cargar las páginas más rápido. Entonces, si ha tenido su sitio web por un tiempo, limpiarlo puede acelerar significativamente las cosas.

Cómo optimizar la base de datos de su sitio Divi

Sugeriría usar un complemento para esto. WP Optimize  parece ser una opción creíble. Pero hay otros  plugins de bases de datos de WordPress a considerar .

O si sabe lo que está haciendo, siempre puede hacerlo manualmente en MySQL.

Además de limpiar su base de datos de WordPress, es posible que desee hacer que WordPress sea aún más liviano al reducir los datos que almacena. Por ejemplo, WordPress retendrá automáticamente los elementos eliminados en la papelera durante 30 días. Es posible que desee reducir ese período de tiempo a 7.

4. Optimiza tu DNS

Cómo el DNS afecta la velocidad del sitio

Lo primero que debe suceder cuando un usuario visita la URL de una de sus páginas web es una búsqueda de DNS. Tan pronto como se ingresa (o se hace clic) en la URL, el ISP del visitante envía una consulta de DNS a los servidores de nombres para encontrar la dirección IP asociada con su dominio (cada dominio/sitio web tiene una dirección IP específica). En esencia, una búsqueda de DNS es como buscar su nombre de dominio en una guía telefónica para encontrar la dirección IP de ese dominio.

Pero cuando un usuario visita una página en su sitio, la página puede tener varios dominios a los que se debe acceder para acceder a la página. Así que podría estar haciendo 3 o 4 búsquedas de dominio en una sola carga de página (tal vez más).

En términos generales, la mayoría de los proveedores de DNS gratuitos como Godaddy y Namecheap generalmente serán más lentos de lo que probablemente le gustaría.

Uso de Cloudflare para la optimización de DNS (y más si lo desea)

La mejor opción gratuita que aumentará la velocidad de búsqueda de DNS es probablemente  Cloudflare . Tienen el rendimiento de DNS más rápido registrado en  DNSPerf.com . Esto será significativamente más rápido que GoDaddy y Namecheap. E incluso puede optimizar Cloudflare para que se use para DNS sin sus otros servicios (como CDN o WAF) si lo desea.

Por ejemplo, es posible que desee utilizar Cloudflare para DNS y seguridad (detección de DDOS) y KeyCDN (o MaxCDN) para su CDN. Parece que sería una gran combinación.

Configuración de Cloudflare

Cloudflare es muy fácil de configurar. No tiene que preocuparse por cambiar su alojamiento ni nada de antemano. Todo lo que necesita hacer es caminar a través de su configuración de 5 minutos que comienza con ingresar su dominio.

Recuperarán sus registros DNS actuales automáticamente.

Lo principal que deberá hacer para completar la configuración es cambiar los servidores de nombres predeterminados en su proveedor de DNS actual (como GoDaddy) a los servidores de nombres de Cloudflare.

Luego, puede administrar su DNS fácilmente desde su Tablero.

Y así, tiene un aumento en la velocidad de búsqueda de DNS, más seguridad y un CDN para su sitio web (y más).

Hablando de CDN, definitivamente necesitas usar uno de esos.

6. Utilice una red de entrega de contenido (CDN)

Una red de entrega de contenido (CDN) lleva la velocidad del sitio a otro nivel. Como sugiere el nombre, una CDN es una red para entregar contenido. La red consta de servidores en todo el mundo que almacenan archivos estáticos en caché (imágenes, videos, scripts, etc.) del contenido de su sitio web. Luego, cuando una persona envía una solicitud de ese contenido (al visitar su sitio web), el servidor (o PoP) más cercano a la persona entregará el contenido. Sin una CDN, se puede acceder a los archivos de su sitio web desde una ubicación de servidor (donde sea que su host almacene esos archivos), por lo que cuanto más lejos esté de ese servidor, más lento será entregar el contenido de ese sitio web a su navegador.

Piénsalo, cuando quieres que te entreguen una pizza en tu casa, no eliges la pizzería que se encuentra a 30 millas de distancia. Eliges el que está a 5 millas de distancia porque quieres que te lo entreguen lo antes posible (si eres un humano normal que ama la pizza tanto como a mí). Un CDN funciona de manera similar. Dado que desea que el sitio web aparezca en su navegador lo antes posible, un CDN tendrá los archivos de su sitio listos para ser entregados desde el servidor más cercano a su ubicación. Entonces, si los archivos de su sitio están almacenados en un servidor en San Francisco y alguien en Londres abre su sitio, puede tomar 1 o 2 segundos recibir esos datos de un servidor a miles de millas de distancia. Pero con una CDN, puede entregar esos mismos datos desde un servidor en Londres en la mitad del tiempo. ¡Esa es una gran diferencia!

Entonces, incluso si no ve el alcance completo de los resultados en su hogar, está acelerando la entrega de su sitio web a lugares de todo el mundo.

Hay muchas maneras de obtener un CDN para su sitio. Muchas empresas de alojamiento incluirán una opción para implementar una CDN con su servicio. Y hay plataformas de red como  Cloudflare  y  StackPath (anteriormente MaxCDN) que ofrecen capacidades de CDN junto con otras funciones de rendimiento y seguridad.

Aquí hay algunas plataformas CDN creíbles para considerar:

• CDN de Cloudflare : además de la optimización de DNS (mencionada anteriormente), Cloudflare ofrece una CDN global rápida y segura que almacena contenido estático en caché y lo entrega rápidamente a los usuarios. Esto está incluido en su plan gratuito, que es increíble para la mayoría de los sitios.
• KeyCDN  (incluso puede usarlo con el complemento CDN Enabler WordPress para  integrar KeyCDN ; esta configuración también funcionaría bien con Cache Enabler)
• StackPath (anteriormente MaxCDN)
• frente a la nube de Amazon
• Sucuri

Hay algunos complementos de almacenamiento en caché como WP Total Cache o CDN Enabler que incluyen una opción para integrar automáticamente múltiples proveedores de CDN, lo cual es bastante conveniente.

Aquí hay algunos complementos con soporte CDN:

• Caché más rápido de WP
• Cohete WP
• Autooptimizar
• Caché total W3
• Súper caché de WP
• Habilitador de CDN

6 Agregar almacenamiento en caché

Hay cuatro tipos principales de almacenamiento en caché que se pueden implementar para acelerar su sitio.

• Almacenamiento en caché de la página  : este proceso almacena versiones HTML estáticas en caché de su página para una entrega rápida.
• Almacenamiento en caché del navegador  : esto le brinda más control sobre qué contenido puede almacenar en caché el navegador y durante cuánto tiempo. Solo algunos complementos pueden hacer esto, por lo que sería mejor  hacerlo manualmente  para tener más control. Esto ayudará a cuidar esa métrica de «Aprovechar el almacenamiento en caché del navegador» al realizar pruebas de velocidad.
• Almacenamiento en caché de CDN  : sirve páginas/archivos de sitios web almacenados en caché desde un CDN más cercano a sus usuarios.
• Almacenamiento en caché de objetos  : el almacenamiento en caché de objetos almacena en caché los resultados de consultas repetidas que inicia PHP para recuperar datos de la base de datos y entregarlos al usuario. Esto es diferente del almacenamiento en caché de código de bytes que almacena una versión en caché del código PHP compilado que se usa para mostrar su sitio web.

Divi realiza el almacenamiento en caché cuando sirve los archivos JS y CSS de Divi detrás de escena. Pero esto es principalmente para los archivos de temas Divi para una mejor funcionalidad de Divi Builder.

Todavía existe la necesidad de utilizar el almacenamiento en caché para su sitio web en su conjunto. La mayoría de los sitios tienen múltiples complementos que vienen con sus propios archivos CSS que pueden necesitar combinarse, minimizarse y almacenarse en caché. Por lo tanto, definitivamente puede aprovechar una solución de terceros para servir versiones HTML estáticas en caché de todas sus páginas.

El CDN de Cloudflare es una excelente manera de agregar almacenamiento en caché a su sitio Divi. Almacena una copia del contenido del sitio web (recursos estáticos) geográficamente más cerca de los visitantes para reducir la carga de la página y la latencia. El APO de Cloudflare para WordPress parece ser una solución aún más específica para almacenar en caché páginas web y fuentes de terceros para un sitio de WordPress/Divi utilizando su complemento de WordPress .

Hay toneladas de excelentes complementos de almacenamiento en caché de WordPress para elegir. Aquí están algunos de nuestros favoritos:

• Cohete WP
• Habilitador de caché  (lea  nuestra reseña )
• Caché total W3  (lea  nuestra reseña )
• W3 Super Cache  (lea  nuestra reseña )
• Comet Cache  (lea  nuestra reseña )
• Caché más rápido de WP

Sugerencia:  siempre que tenga habilitado el almacenamiento en caché de páginas en su sitio mediante un complemento, querrá asegurarse de  eliminar (o borrar) el caché  cada vez que realice cambios en su sitio web para asegurarse de que usted y sus visitantes reciban la última versión de su sitio web. sitio.

7. Agregar Minificación y Agregación de Sitios Web

La minificación hace que los archivos de su sitio sean más pequeños. Minimizar los archivos de su sitio (CSS, JavaScript, HTML) elimina todos esos caracteres innecesarios (como espacios y saltos de página) para que el tamaño del archivo se reduzca. Esto reduce el tiempo que tarda el navegador en cargar el contenido de una página.

La agregación implica combinar los archivos del sitio para reducir el total de solicitudes en la página y acelerar los tiempos de carga para sus visitantes.

Como se mencionó anteriormente, Divi minifica y combina Javascript y CSS dinámicamente de forma predeterminada. Por lo tanto, técnicamente no tiene que preocuparse por usar un complemento de terceros para minimizar y combinar Javascript y CSS de Divi. Sin embargo, Divi no minimiza la salida HTML. Por lo tanto, puede beneficiarse de un complemento de terceros para minimizar (y almacenar en caché) todo el HTML de una página.

Además, casi todos los sitios Divi dependerán de archivos fuera del tema Divi (como complementos u otros archivos agregados al tema infantil) que se beneficiarán al minimizar y combinar los archivos CSS y JS.

Una de las mejores maneras de agregar minificación a todo el HTML, JS y CSS de su sitio es usar Cloudflare. Cloudflare usa Auto Minify para reducir el tamaño del archivo de todo el código fuente en su sitio web. Además, viene de serie con la versión gratuita.

Algunos complementos de optimización de velocidad creíbles que minimizarán los archivos de su sitio incluyen:

• Autooptimizar
• Caché total W3  (lea  nuestra reseña )
• W3 Super Cache  (lea  nuestra reseña )
• WP Rocket  (pagado)

Estos complementos deberían funcionar con Divi. Pero no hay forma de medir todos los matices de un sitio web para decir que funcionará mejor para todos. A veces, los complementos de terceros minimizarán automáticamente los archivos JavaScript de una manera que puede causar errores/problemas, así que asegúrese de probar su sitio web a fondo. En general, siempre es seguro minimizar los archivos CSS. Pero tenga cuidado con esos archivos JavaScript.

Y si hay un conflicto, es posible que deba deshabilitar las opciones integradas de Divi y dejar que el complemento de terceros se encargue de las cosas.

Y si no quiere depender de un tercero para esto, siempre puede hacerlo manualmente. Para obtener más información sobre cómo hacer esto, consulte esta publicación completa sobre cómo minimizar el CSS, HTML y JavaScript de su sitio web .

8. Habilitar la compresión GZIP

Cómo la compresión Gzip ayuda a acelerar su sitio Divi

Habilitar la compresión Gzip en su sitio Divi puede darle un gran impulso en la velocidad (hasta un 70% en algunos casos). Si está familiarizado con la creación de archivos comprimidos (o zipeados) en su computadora, ya tiene una comprensión básica de cómo funciona la compresión Gzip. Creamos archivos zip (o carpetas) para reducir el contenido del archivo (o carpeta). ¿Por qué? ¡Así podemos subir y descargar el archivo mucho más rápido! La compresión Gzip hace lo mismo para su sitio web. Le dice al servidor que comprima todos los archivos que pueda en versiones más pequeñas para que pueda ser entregado al cliente mucho más rápido. Esto realmente puede aumentar la velocidad de carga de la página y debería estar en la parte superior de su lista para la optimización de la velocidad de Divi.

La compresión Gzip puede mejorar la velocidad de Divi incluso en una instalación nueva. Dado que Divi ya minimiza los archivos del tema central de todos modos, la compresión Gzip o Brotli hará que esos archivos sean mucho más pequeños de lo que podría hacerlo la minificación.

La compresión Gzip es el algoritmo de compresión más utilizado, pero parece que la compresión Brotli es el algoritmo de próxima generación que busca reducir aún más el tamaño de los archivos para una transferencia de datos más rápida. Está siendo utilizado por empresas de hosting como SiteGround y también por Cloudflare.

Cómo habilitar la compresión Gzip en su sitio Divi

Algunos proveedores de alojamiento habilitarán la compresión gzip automáticamente porque es una obviedad para el rendimiento del sitio. No dude en comprobar si la compresión Gzip está habilitada en su sitio

Como ya se mencionó, Cloudflare proporciona compresión Brotli para todos los dominios en su plan gratuito.

Muchos de los complementos de rendimiento de WordPress (como W3 Total Cache y WP Super Cache) incluirán la compresión Gzip como opción. Sin embargo, parece innecesario agregar un complemento de rendimiento para esta optimización.

Una forma común de habilitar la compresión Gzip (en servidores Apache) es hacerlo manualmente usando mod_deflate. Y todo lo que tiene que hacer es acceder a su sitio web (la raíz) a través de FTP (asegúrese de mostrar los archivos ocultos). Luego copie y pegue un bloque de código en la parte inferior de su archivo .htaccess.

9. Optimización de imagen

Las imágenes juegan un papel crucial en la optimización de la velocidad de Divi. Las imágenes grandes son uno de los mayores culpables de las velocidades de carga lentas de las páginas. Esto probablemente se deba a lo fácil que es ignorarlo. Después de todo, ¿cuánto daño puede hacerle una imagen de fondo a una página web? Bueno, puede que te sorprendas. Solo unas pocas imágenes grandes que no se han optimizado para la web podrían tener ramificaciones catastróficas en la velocidad de carga de la página. Y seamos realistas, su sitio probablemente tendrá muchas imágenes.

Realmente no hay suficiente énfasis en la necesidad esencial de optimización de imágenes. Cada sitio web debería estar haciendo esto. La compresión de imágenes por sí sola puede  hacer que su sitio sea notablemente más rápido  y los tamaños de imagen más pequeños ahorrarán espacio de almacenamiento y ancho de banda (¡ganar-ganar!). Pero hay otras  optimizaciones de imagen importantes  en las que también debe pensar.

En resumen, querrá hacer lo siguiente cuando optimice su imagen para la web:

Use el tipo de archivo correcto

Cuando se trata de imágenes en la web, realmente debe ceñirse a los siguientes tipos de archivos de imagen:

• JPG: este debería ser su tipo de archivo de acceso para la mayoría de las imágenes/fotografías que usa en su sitio, ya que puede obtener imágenes atractivas en un tamaño de archivo más pequeño que los PNG o los GIF. Evite usar el formato PNG para cosas como imágenes de fondo o fotografías, a menos que necesite un fondo transparente.
• PNG: use PNG para imágenes que necesitan un fondo transparente. JPG no admite transparencia.
• SVG: este es un formato vectorial que ofrece detalles extremadamente nítidos utilizando código HTML. Los SVG son excelentes para logotipos, íconos y otras animaciones vectoriales.

Cambia el tamaño y recorta tus imágenes

Nunca querrás que tu imagen sea más grande de lo que debe ser. Por ejemplo, si está agregando un logotipo en las opciones de tema de Divi, en la mayoría de los casos solo necesita que tenga un ancho de 100 px. Por lo tanto, no cargue un logotipo con un ancho de 5000 px y obligue a Divi a cambiar el tamaño de esa imagen por usted. El resultado puede parecer similar en la parte delantera, pero ese gran tamaño está matando el tiempo de carga de su página.

Al cargar imágenes en su página usando Divi, es útil saber qué tan grandes deben ser esas imágenes dentro de la estructura de columnas de Divi. Esta  guía definitiva  puede ayudarlo a orientarlo en la dirección correcta. (Sin embargo, hay nuevas estructuras de columnas que se han agregado desde esa publicación, por lo que intentaremos actualizarlas pronto).

Comprimir tamaño de archivo

Querrás reducir el tamaño del archivo de imagen hasta el punto antes de que notes una caída en la calidad. Esto se hace a través de la compresión de imágenes. La mayoría de los editores de fotos, complementos y sitios como tinypng.com comprimen imágenes mediante compresión sin pérdida (que reduce el tamaño del archivo de imagen sin perder calidad de imagen) y compresión con pérdida inteligente (que reduce el tamaño del archivo de imagen al reducir los metadatos y la calidad de imagen en un manera que el usuario no lo nota realmente).

Aproveche las herramientas de optimización de imágenes

Para una optimización óptima de la velocidad de Divi, le sugiero que optimice sus imágenes para Internet antes de subirlas a su sitio Divi. Esto se puede hacer a través de editores de fotos como Photoshop, que incluyen la opción «Guardar para Web». Además, puede usar un sitio de terceros gratuito como TinyPNG.com  o Compressor.io para comprimir la imagen antes de cargarla en su sitio.

Hay algunos complementos excelentes que realizarán la compresión de imágenes por usted. Algunos complementos (como Imagify) comprimirán las imágenes que ya se utilizan en su sitio y las comprimirán automáticamente a medida que las cargue en su biblioteca de WordPress Media. Tenga en cuenta que el uso de un complemento para esto puede ser una carga para su sitio al comprimir esas imágenes, por lo que es una buena práctica optimizar la imagen de antemano si es posible.

Aquí hay algunas excelentes herramientas y complementos de optimización de imágenes que puede usar:

• Sitios web:
  
  • Compressor.io
  • Tinypng.com
• Complementos:
  
  • imaginar
  • Compresión y optimización de imágenes Smush
  • cohete WP

Para obtener más información, consulte una comparación de  6 complementos de optimización de imágenes de calidad .

Compatibilidad con SRCSET integrado de Divi

Las imágenes receptivas con  compatibilidad nativa con SRCSET también están integradas en Divi. Esto mejora aún más la optimización de las imágenes utilizadas en Divi al ofrecer imágenes escaladas que tienen el tamaño adecuado para diferentes pantallas receptivas (como tabletas y teléfonos).

10. Optimización de videos

La optimización de video es un poco más difícil que la optimización de imágenes, pero definitivamente no menos importante. Los archivos de video pueden ser grandes y, por lo tanto, extremadamente exigentes en cuanto a la velocidad de carga de la página. Y si está alojando muchos videos en su servidor (en la Galería de medios de WordPress, por ejemplo), se encontrará con el problema adicional del espacio en disco. Es por eso que a menudo se recomienda utilizar servicios de terceros (como YouTube  o  Vimeo ) para alojar sus videos por usted. O bien, puede considerar descargar su contenido multimedia de video en una plataforma de almacenamiento como  Amazon S3 . Esto le permitirá vincular esos videos desde el módulo de video de Divi sin que tengan que ralentizar su servidor.

Si va a alojar sus videos por su cuenta, definitivamente necesitará  reducir el tamaño del video para una carga más rápida . Puede reducir archivos de video fácilmente usando una herramienta gratuita como  Handbrake  (que es  fácil de usar ).

Para obtener más información sobre cómo usar videos en Divi (como agregar una URL de video alojada por un tercero a un módulo de video), consulte esta  guía definitiva .

11.. Construya su página Divi para la velocidad

Cuando se trata de eso, la velocidad de un sitio web está determinada por la rapidez con la que carga el contenido de una página. Por lo tanto, tiene sentido crear cada una de las páginas de su sitio web Divi teniendo en cuenta la optimización del rendimiento. Lo importante es identificar el objetivo principal de cada página que construyas. Después de eso, puede encontrar un equilibrio saludable entre velocidad y diseño para crear una página que se vea increíble en el front-end, mientras se mantiene ágil en el back-end. Para ver un ejemplo práctico de cómo optimizar el contenido de la página Divi para la velocidad, consulte nuestro artículo sobre cómo crear la página Divi más rápida .

Aquí hay algunos consejos clave para tener en cuenta al crear su página:

• Optimice el contenido de la mitad superior de la página para que funcione con el CSS crítico integrado de Divi.
• Use Divi Presets para aprovechar la función de estilos inteligentes integrada de Divi . Esto permitirá que los elementos compartan fragmentos de código CSS en función de las clases y evitará tener que cargar un bloque único de CSS para cada uno.
• Cuando sea posible, limite los tipos de módulos que utiliza para crear la página . Debido al marco dinámico de Divi, Divi no procesará ni cargará los módulos (y su CSS único) que no usas. Por ejemplo, si puede usar dos módulos de texto (en lugar de un módulo de texto y un módulo de publicidad) para obtener los mismos resultados, es mejor no usar innecesariamente procesar y cargar el módulo de publicidad en la página.
• Sea inteligente al usar animaciones para su página . Debido a las funciones dinámicas de Divi, Divi no procesará ni cargará el JS o CSS necesarios para funciones como Efectos de movimiento si no los usa. Por ejemplo, si está utilizando la configuración de animación normal en toda su página, es posible que desee evitar el uso de efectos de movimiento para un solo elemento. En cambio, mantenga el estilo de animación consistente y disfrute de cargas de página más rápidas.

12. Use los complementos con cuidado y con moderación

Usar complementos de calidad

La calidad es el factor clave cuando se trata de complementos. De hecho, puede tener 10 complementos de calidad que no ralentizarán su sitio tanto como lo hará uno malo. En general, asegúrese de elegir complementos que hayan resistido la prueba del tiempo y tengan excelentes críticas. Y siempre pruebe cómo un complemento afecta el rendimiento de su sitio web con pruebas de velocidad antes y después para estar seguro.

Eliminar complementos no utilizados o desactualizados

Además de usar complementos de calidad, también es importante que elimine los complementos no utilizados y/u obsoletos de su sitio. Pueden ser perjudiciales para el rendimiento de su sitio web y un grave riesgo de seguridad. Además, cada complemento (incluso los de calidad) agregará recursos adicionales que agregarán tiempo a cada carga de página. Si desea un sitio Divi rápido, querrá usar la menor cantidad de complementos posible.

Esté atento a los errores de bloqueo de procesamiento

Divi no tiene ningún activo que bloquee el procesamiento, lo que significa que sus estilos y scripts de bloqueo de procesamiento provienen de complementos. Si hay algunas secuencias de comandos grandes que bloquean el procesamiento que están afectando sus velocidades, podría considerar alejarse de esos complementos.

13. Realizar pruebas de velocidad

Probablemente no estaría leyendo este artículo si no ha realizado al menos una prueba de velocidad en su sitio web. Y con razón, es importante saber qué tan rápido se cargan sus páginas para los visitantes. Realizar una prueba de velocidad es una de las  cosas más fáciles que puede hacer . Hay toneladas de sitios web que harán esto por ti de forma gratuita. Y las métricas que brindan serán invaluables para identificar formas en que puede optimizar aún más su sitio para un mejor rendimiento.

Aquí hay algunos buenos lugares para comenzar:

• GTMetrics
• Estadísticas de la página de Google
• Herramientas de desarrollo de Chrome
• Lighthouse (disponible para Chrome Dev Tools)

Los resultados de estas pruebas son lo que nos impulsa a muchos de nosotros a comenzar a optimizar nuestro sitio Divi para tiempos de carga más rápidos. Proporcionan un desglose útil del rendimiento de su página web en una variedad de áreas. Luego puede usar sus recomendaciones como una lista de verificación para trabajar mientras optimiza su sitio.

La mejor manera de usar estas herramientas de prueba de velocidad en línea para su sitio Divi WordPress es ejecutar una prueba en una página antes de realizar optimizaciones. Luego puede usar esto como base para comparar pruebas futuras a medida que realiza cambios. Después de cada optimización que hagas, podrás ver si tu puntuación mejora.

Por ejemplo, puede notar que usar un complemento de almacenamiento en caché funcionará mejor que otro. No tenga miedo de probar varios complementos para obtener el mejor rendimiento.

Aquí hay una útil  guía de optimización de WordPress de GTMetrix  que será útil.

A medida que implemente las optimizaciones de velocidad en su sitio Divi, debería ver mejoras en las siguientes áreas:

• Tiempo hasta el primer byte (TTFB)
• Primera pintura con contenido (FCP)
• Tiempo de interacción (TTI): mide cuándo la página está lista para la interacción del usuario.
• Índice de velocidad (SI) : mide qué tan rápido su página se completa visualmente en la mitad superior de la página
• Tiempo total de bloqueo (TBT): similar al Retraso de primera entrada (FID) vital de la web de Google , que es la cantidad de tiempo entre el momento en que un usuario interactúa por primera vez con su sitio y cuando su navegador responde a esa acción.
• Pintura con contenido más grande : mide cuánto tiempo tarda el elemento de contenido más grande (como una imagen) en volverse visible para los usuarios.
• Cambio de diseño acumulativo : mide el cambio inesperado (o movimiento) del diseño cuando un usuario carga una página.

Para obtener más información, consulte nuestra publicación sobre  cómo mejorar la puntuación de velocidad de su página de Google .

El objetivo es la velocidad, no la perfección

Puede ser fácil atascarse probando su sitio web y optimizándolo a la perfección. Pero ningún sitio web será perfecto. Incluso puede encontrar que mejorar ciertas calificaciones de rendimiento de la prueba de velocidad en realidad puede ralentizar el tiempo de carga de su página. Eso es porque incluso esas pruebas de velocidad tampoco son perfectas. Al igual que este artículo, son simplemente una guía para ayudar a mejorar el rendimiento y la velocidad de su sitio web.

14. Considere nuestro modelo de página de alta velocidad Divi

En  este sitio web de prueba que construimos, fue fácil crear un sitio web Divi  que obtuvo una puntuación de  100  en Google PageSpeed ​​Desktop,  99  en Google PageSpeed ​​Mobile y  100 % en GTmetrix. Este modelo de sitio web permite a los desarrolladores experimentar de primera mano la optimización de velocidad integrada de Divi en un sitio real. También puede servir como un buen ejemplo de cómo optimizar el contenido de su página Divi para la velocidad.

Este sitio de prueba se optimizó de la siguiente manera:

• Alojado en SiteGround
• CloudFlare usado para almacenamiento en caché, CDN, compresión Brotli
• No se utilizaron complementos adicionales.
• Funciones de rendimiento integradas de Divi usadas
• Contenido de página optimizado
  
  • Se usaron estilos inteligentes (Divi Presets) para reducir el CSS dinámico que se genera para cada página.
  • Optimizado en la parte superior de la página para asegurarse de que el CSS crítico fuera esbelto.
  • Usó una fuente segura para la web (Arial) para evitar tener que descargar una fuente de un servidor de terceros.
  • Imágenes comprimidas usadas
  • No usó animación o efectos de movimiento.
  • Se limitó el uso de íconos para cargar un subconjunto de fuentes de íconos más pequeño que incluye los íconos sociales necesarios.

El resultado:

• El tamaño de CSS se redujo en un 94 %.
• Se eliminaron por completo todos los activos que bloqueaban el renderizado y el tamaño de JavaScript de Divi se redujo a la mitad.
• No hay solicitudes de recursos innecesarios.
• El contenido de la parte superior de la página aparece de inmediato.
• Obtuvo 100%  en Google PageSpeed ​​Desktop,  99% en Google PageSpeed ​​Mobile
• Puntuado 100% en GTmetrix.

¿Qué podemos aprender para el sitio de prueba?

En última instancia, Divi te da el poder de elegir cómo quieres usarlo y qué tan rápido quieres que sea tu sitio web. El sitio de prueba muestra que puede obtener puntajes de velocidad de página casi perfectos desde el primer momento. Pero el hecho de que no hayamos utilizado todas las poderosas herramientas de diseño que hacen que Divi sea tan bueno no significa que debas tener miedo de usarlas. Si no usa un módulo o función en una página, Divi no procesará y/o cargará el elemento o su CSS innecesariamente. Pero si decide incluir un módulo o función, Divi tendrá cuidado de procesar y/o cargar solo los elementos y el CSS necesarios y nada más. Esto le brinda un marco liviano para construir, sin tener que preocuparse por la hinchazón de la web cuando decide liberar el poder de Divi para construir su sitio.

Otros consejos

Hemos cubierto prácticamente todos los factores principales que contribuyen a que los sitios web de Divi/WordPress sean más rápidos. Pero hay muchas más optimizaciones de velocidad Divi que podrían mejorar aún más tu velocidad.

• Tener una  configuración correcta del tema infantil Divi
• Cambiar su URL de inicio de sesión de WordPress para evitar que esos bots sobrecarguen su servidor. Esta sería una buena oportunidad para crear una página de inicio de sesión personalizada con Divi.
• Evitando llamadas innecesarias a Servicios externos. Algunos complementos e incrustaciones requieren que use archivos que están alojados en sus servidores. Estas llamadas adicionales ralentizarán la carga de la página.
• Incorpore la carga diferida para imágenes y videos para una mejor velocidad de carga de la página.

Uso de Divi y otros complementos de rendimiento de terceros

Las optimizaciones de rendimiento integradas de Divi acelerarán cada sitio Divi porque eliminan la hinchazón que no se puede eliminar con ningún complemento de rendimiento. Dicho esto, puede usar complementos de rendimiento de terceros adicionales para aumentar la velocidad de su sitio además de las optimizaciones integradas de Divi. Las mejoras de rendimiento de Divi solo se aplican a Divi y no a los complementos de terceros, por lo que sus complementos de rendimiento pueden beneficiarlo en otras áreas fuera de Divi. Por ejemplo, aún puede beneficiarse del almacenamiento en caché de su sitio web y el uso de un CDN.

Tratar con complementos de rendimiento en conflicto

Debido a que Divi ya está optimizado, el uso de un complemento de rendimiento de terceros puede causar un conflicto. Por lo tanto, es importante mantener actualizado su tema Divi y probar todos los complementos de terceros a fondo de antemano. Hacemos todo lo posible para probar las optimizaciones integradas de Divi con otros complementos de optimización populares. Pero no hay forma de medir todos los matices de un sitio web para decir que funcionará mejor para todos o que no se producirán conflictos.

Por ejemplo, los complementos de terceros podrían minimizar o mover automáticamente los archivos JavaScript de una manera que podría causar errores/problemas, así que asegúrese de probar su sitio web a fondo.

Y si hay un conflicto, es posible que deba deshabilitar las opciones integradas de Divi y dejar que el complemento de terceros se encargue de las cosas. No dude en comunicarse con nuestro equipo de soporte para obtener ayuda con cualquier problema que pueda encontrar. Estamos encantados de ayudar a solucionarlo.

Pensamientos finales

Divi es más rápido que nunca. Con actualizaciones de rendimiento integradas, sus instalaciones estándar de Divi tienen cargas de página más rápidas en el front-end, un administrador de WordPress más rápido en el backend y un Divi Builder más rápido para editar y diseñar su sitio. Este es un gran comienzo, pero hay mucho más que hacer para asegurarse de que su sitio Divi funcione lo más rápido posible. Las optimizaciones de velocidad y rendimiento incluidas en este artículo definitivamente aumentarán la velocidad de su sitio. En su mayor parte, estas optimizaciones se aplicarían a cualquier sitio/tema de WordPress, no solo a Divi. ¡Y es sorprendente cuántas cosas simples puedes hacer gratis!

Estoy seguro de que hay toneladas de sugerencias y recursos que no se mencionaron, así que siéntete libre de compartirlos con nosotros en los comentarios.

Espero escuchar de usted.

¡Salud!

Imagen destacada a través de Sammby / shutterstock.com