Optimización de velocidad Divi: 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 completo sistema de diseño web 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 velocidad y rendimiento de Divi pueden colocar fácilmente su sitio en la parte superior de la lista en las puntuaciones de PageSpeed ​​de Google. Con características como Dynamic Module Framework, Dynamic CSS, Dynamic JavaScript Libraries y más, Divi ahora es un creador de páginas robusto y un tema liviano. Pero tan rápido como 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 lo que ya se ha hecho para acelerar Divi y lo que podemos hacer para hacerlo aún más rápido. Aquí hay algunos temas clave que cubriremos:

• Rendimiento de WordPress frente al rendimiento de Divi
• Funciones de optimización de rendimiento y velocidad integradas de Divi
• Marco de módulo dinámico
• Bibliotecas JavaScript dinámicas
• Aplazar jQuery y jQuery Migrate
• CSS dinámico
• CSS crítico
• Altura del umbral crítico
• Cargar hoja de estilo dinámica en línea
• Mejorar la carga de fuentes de Google
• Desactivar los emojis de WordPress
• Aplazar el CSS del bloque de Gutenberg
• Iconos dinámicos
• Soporte de Srcset nativo para imágenes receptivas
• 14 cosas que puede hacer para optimizar la velocidad y el rendimiento de su sitio web Divi
• # 1 Actualice su alojamiento
• # 2 Optimización TTFB
• # 3 Optimice la base de datos de su sitio
• # 4 Optimiza tu DNS
• # 5 Utilice una red de entrega de contenido (CDN)
• # 6 Agregar almacenamiento en caché
• # 7 Agregar minificación y agregación
• # 8 Habilite la compresión Gzip
• # 9 Optimización de imagen
• # 10 Optimización de video
• # 11 Cree su página Divi para mayor velocidad
• # 12 Use los complementos con cuidado y con moderación
• # 13 Realización de pruebas de velocidad
• # 14 Considere nuestro modelo de página de alta velocidad Divi
• Uso de Divi y otros complementos de rendimiento de terceros
• Otros consejos

Rendimiento de WordPress frente al rendimiento de Divi

Divi no suele ser 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 encima de WordPress (el CMS), que se encuentra en la parte superior de una pila de software de servidor, que se encuentra en la parte superior de una infraestructura de alojamiento. Todas esas cosas deben ajustarse correctamente. Para empezar, estos incluyen cosas como buen alojamiento, almacenamiento en caché y una CDN. Sin estas optimizaciones subyacentes implementadas, un sitio Divi será más lento independientemente de qué tan bien optimicemos Divi. Entonces, si su sitio web Divi es muy lento, entonces debe considerar estas otras piezas del rompecabezas también.

Con las necesidades de optimización subyacentes para un sitio web de WordPress, debemos abordar la optimización del rendimiento de Divi. Esto se hace 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 construir con éxito un sitio web Divi con una velocidad y un rendimiento óptimos.

En el resto del artículo a continuación, primero abordaremos la optimización del rendimiento incorporada de Divi (las cosas que ya están hechas para usted). Luego, abordaremos cómo optimizar aún más su sitio Divi abordando algunas necesidades de optimización subyacentes (cosas adicionales que puede hacer).

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

Primero, echemos un vistazo a algunas de las optimizaciones de velocidad y rendimiento integradas que Divi ya tiene. Estas funciones de optimización aceleran Divi desde todos los ángulos, lo que lo convierte en quizás 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 hinchazón a su sitio web. Esto le brinda lo mejor de ambos mundos: el poder de un creador 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 facilitan la creación de un sitio web Divi súper rápido.

Marco de módulo dinámico

La función Dynamic Module Framework aumenta la velocidad del sitio de una manera poderosa al seleccionar y ejecutar funciones PHP bajo demanda. Divi procesa la lógica necesaria para representar solo los módulos y las funciones que se utilizan en cada página sobre la marcha; todo lo demás se elimina de la ecuación. En otras palabras, cualquier cosa que pueda considerarse "hinchada" 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 utilice. Esas 3 funciones mostrarán el código corto / HTML para ese módulo en la página sin perder tiempo de procesamiento.

Funciones bajo demanda

Así como Divi procesa y carga módulos dinámicamente 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 se podrían usar en Divi Element (efectos de desplazamiento, animaciones, opciones adhesivas, opciones de borde, etc.), Divi solo procesa las funciones de características que realmente se están usando en un elemento. Esta característica no se aplica solo a los módulos, sino a cualquier elemento Divi, incluidas las secciones, filas y columnas.

Bibliotecas dinámicas de JavaScript

Para aumentar la velocidad del sitio, optimizamos el JavaScript de Divi para que sea más conciso y modular. Esto permite a Divi cargar 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 las funciones de una página las necesiten.

El tamaño de archivo Javascript base más pequeño combinado con las bibliotecas JavaScript dinámicas 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-hinchazón ocurre por página, si tiene una fila adhesiva en una página, no tendrá que preocuparse de que ese JavaScript adhesivo se cargue en una página que no lo tiene. Ésta es la belleza del JavaScript dinámico de Divi.

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

Supongamos que tiene una página con un módulo de imagen con lightbox habilitado. Divi apuntará y ejecutará dinámicamente la biblioteca Magnific Popup JS para esa página para aplicar esa funcionalidad emergente de caja de luz. Si la caja de luz está deshabilitada 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 se muestra en la ilustración a continuación, si el script jQuery se carga antes (en el encabezado), detendrá el análisis del HTML hasta que se ejecute el script. Esto ralentizará el procesamiento de su página.

Solo por otro lado, si un complemento de terceros registra jQuery como una dependencia, se moverá de nuevo a la cabeza para evitar conflictos. Esta opción se puede desactivar si causa problemas.

CSS dinámico

El CSS dinámico aplica la misma lógica anti-hinchazón (utilizada en el marco del módulo dinámico) a la hoja de estilo de Divi. Como puede imaginar, la hoja de estilo principal de Divi sería bastante grande considerando todas las características que tiene. Pero cargar una hoja de estilo grande en cada página provoca una hinchazón innecesaria y tiempos de carga de página más lentos.

Con CSS dinámico, el CSS de Divi se divide en cientos de pequeños componentes. En cada página, estos componentes CSS se combinan para formar una hoja de estilo única que contiene solo las piezas necesarias para diseñar 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 hinchazón porque no se carga ningún otro CSS. Sin CSS dinámico, la hoja de estilo de Divi rondaría los 900kb y se cargaría en todas las páginas independientemente del contenido. Ahora, si solo necesita 80 kb de CSS para la página, CSS dinámico elimina los 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 al identificar el CSS necesario para diseñar el contenido en la mitad superior del pliegue y diferir 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 renderización 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 creadores de WordPress. . Una vez que Divi termina de procesar su CSS, casi no queda nada en el encabezado del sitio web, lo que significa que el contenido se muestra de inmediato, y es por eso que Google otorga a los sitios web Divi puntuaciones tan altas desde el primer momento.

Por ejemplo, si su contenido en la mitad superior de la página consta de un título, párrafo, botón e 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 CSS crítico está la opción Altura de umbral crítico.

Cuando Critical CSS está habilitado, Divi determina un "umbral de la mitad superior de la página" y difiere todos los estilos para los elementos que se encuentran debajo de la mitad. 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 CSS final que elimina todas las solicitudes CSS que bloquean la representación.

Gracias al CSS dinámico, la hoja de estilo Divi base ahora es lo suficientemente pequeña como para poder cargarla en línea en la página real. La carga de este CSS en línea elimina una solicitud de bloqueo de procesamiento y mejora las puntuaciones de PageSpeed ​​de Google. Cuando las opciones de CSS crítico, CSS dinámico y Cargar hoja de estilo dinámica en línea están habilitadas, se eliminan todas las solicitudes de CSS que bloquean la representación .

Mejorar la carga de fuentes de Google

La opción Mejorar la carga de 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 reducir la carga útil. Habilitar esta opción reducirá el tamaño de las fuentes de Google y mejorará los tiempos de carga; sin embargo, limitará la compatibilidad con las fuentes de Google en algunos navegadores muy antiguos. Puede desactivar esta opción para aumentar la compatibilidad con navegadores más antiguos con un ligero coste de rendimiento.

Desactivar los emojis de WordPress

WordPress viene con un sistema de emoji nativo, pero esto ya no es necesario debido al soporte nativo de emoji en los navegadores modernos. De hecho, los emojis nativos se ven mucho mejor que la versión de WordPress. Divi le ofrece 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 CSS del bloque de Gutenberg

Al usar Divi Builder en una página, también elige no usar el editor de bloques de WordPress predeterminado (Gutenberg). Y dado que no va a utilizar bloques para diseñar su página, no necesita que el CSS de Gutenberg 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. Todavía se cargará por si acaso (en el pie de página), pero ya no bloqueará el renderizado.

Iconos dinámicos

Divi ahora se envía con subconjuntos de fuentes de iconos 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 de iconos completo 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 hijo o módulo Divi de tercera parte utiliza el conjunto completo de iconos Divi, entonces esta opción debería permanecer deshabilitada.

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

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

Aquí hay un ejemplo del subconjunto de fuentes de iconos 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 iconos en todas las páginas (por ejemplo, si está utilizando nuestra fuente de iconos en su tema secundario), puede desactivar esta opción y cargar toda la biblioteca de fuentes de iconos en todas las páginas.

Soporte de Srcset nativo para imágenes receptivas

Divi incluye soporte SRCSET nativo para todas las imágenes Divi, lo que significa que Divi hará que sus imágenes respondan automáticamente y entregará la imagen de tamaño perfecto a cada dispositivo. Dado que las imágenes más pequeñas se envían a 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 cosas que puede hacer para optimizar la velocidad y 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, así como en su optimización para motores de búsqueda (SEO). Por lo tanto, para que su sitio Divi tenga un buen rendimiento para los visitantes y Google, querrá abordar aquellas áreas fuera de Divi que optimizan aún más su sitio para la velocidad.

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

# 1 Actualice su alojamiento

Si se toma en serio la velocidad (y el rendimiento) de su sitio web, comience por elegir un buen proveedor de alojamiento. De hecho, puede hacer todo lo posible para optimizar la velocidad de su sitio web y aún así tener un sitio lento debido a su host. Y los proveedores de alojamiento realmente buenos harán muchas de esas optimizaciones de velocidad por usted para que no tenga que preocuparse 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. Por lo tanto, si está buscando un excelente alojamiento de WordPress que funcione perfectamente con Divi y venga con la instalación automática de Divi, Divi Hosting es una excelente nueva solución para usted. Nos asociamos con algunos de nuestros hosts de WordPress favoritos (Pressable, Flywheel y SiteGround) para brindarles a los clientes de Divi una forma simple de crear sitios web de Divi que sean rápidos, respaldados por una infraestructura de hospedaje moderna que cumpla con todos los requisitos de Divi y respaldados por los principales profesionales de WordPress. .

¿Por qué elegir Divi Hosting?

En última instancia, todos los usuarios de Divi deben elegir el alojamiento. Tomar la decisión equivocada puede causarle mucho dolor. Queremos facilitarle esa elección. Aquí hay algunas cosas que hacen que Divi Hosting sea único:

• Cuando crea su 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 asistencia.
• Su entorno de alojamiento se configurará para cumplir con todas las configuraciones PHP recomendadas por Divi listas para usar. 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 gran experiencia Divi en sus sistemas.

Hay 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. Todos necesitan hospedaje para usar Divi, y su experiencia de hospedaje no tiene por qué ser una lucha. Para obtener más información, descubra 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 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 alojamiento excelentes y no tan buenas. Y cada uno suele ofrecer múltiples soluciones y servicios de hospedaje. Por lo tanto, encontrar el adecuado puede ser abrumador. A continuación, encontrará información útil sobre los tipos de alojamiento más comunes a considerar 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, lamentablemente, 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 la cantidad de tráfico que reciben esos otros sitios en su servidor compartido. Por lo tanto, puede ser presa fácil de períodos de tiempos de carga extremadamente lentos e incluso momentos en los que su sitio está completamente caído. Por lo tanto, es mejor que tenga una buena idea de cuánto tráfico puede manejar su alojamiento compartido.

Alojamiento dedicado

Con el alojamiento dedicado, tiene su propio servidor dedicado solo para usted. No es necesario compartir recursos con nadie más. Esto significa que tendrá tiempos de carga rápidos más predecibles y consistentes para su sitio web. Por lo general, esto 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 alojamiento compartido y 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 afecten 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 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 a 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 de las principales diferencias entre el alojamiento en la nube y el alojamiento de VPS es que el alojamiento de VPS tiene un número dedicado (o limitado) de recursos de los que extraer que pueden agotarse o no. Cloud Hosting, por otro lado, es capaz de mantener sus recursos disponibles sin que se agoten porque siempre puede extraer 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 de WordPress administrado

El alojamiento administrado de WordPress generalmente se refiere al alojamiento compartido administrado por expertos en 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 poderoso 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. Y muchos de ellos vienen con muchas funciones integradas interesantes y convenientes, como entornos de prueba con un solo clic, almacenamiento en caché de sitios, implementación de CDN con un clic, copias de seguridad automáticas, SSL y más. Son perfectos para aquellos de nosotros que no queremos depender (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 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 datos. Esto es importante porque cuanto más largo sea el TTFB, más tardará en cargarse la página.

Piense en ello como conseguir comida rápida. El restaurante puede estar optimizado para entregar su comida rápidamente. De hecho, es posible que ya tengan una hamburguesa esperándote. Pero aún tiene que esperar en la fila para ordenar. Ese período de espera es lo que puedes considerar como el momento para morder por primera vez (mira lo que hice allí).

El TTFB debería ser de alrededor de 200 ms (según Google). Pero para los sitios que tienen un alojamiento deficiente y no se han optimizado, 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 se debe recibir. Esto se puede reducir con el almacenamiento en caché, la optimización de la base de datos y una CDN.
• La cantidad de tráfico que está experimentando su servidor en ese momento. Los proveedores de alojamiento tradicionales (o compartidos) dificultan la eliminación de 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 backend sólida y optimizar la configuración de su servidor web (cosas que escapan a su control).

Cómo acelerar el TTFB de su 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 utilizar para reducir TTFB.

• Actualice su Hosting . La forma más efectiva de aumentar 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 TTFB.
• Eliminar complementos o temas innecesarios . Los complementos y temas (especialmente los desactualizados) 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 esenciales y eliminar los demás.
• Implementar el almacenamiento en caché . Divi tiene almacenamiento en caché incorporado para entregar Divi JS y CSS. Pero almacenar en caché su sitio web como un todo, además de usar un CDN, reducirá TTFB.

Usa 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 plataforma de Cloudflare, que ha sido probada 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 con el fin de 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.

Por lo tanto, 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 se hayan ido a 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 un desorden innecesario y ralentizar su sitio.

Al igual que todas las organizaciones humanas necesitan trabajar de manera más eficiente, todos los sitios de WordPress (Divi o no) necesitan 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 complementos de base 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 reduciendo 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 afecta el DNS 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 la URL (o se hace clic), 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 de su sitio, la página puede tener varios dominios a los que es necesario acceder para abrir la página. Por lo tanto, podría realizar 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á.

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.

Configurando Cloudflare

Cloudflare es realmente fácil de configurar. No tiene que preocuparse por cambiar de alojamiento ni nada de antemano. Todo lo que necesita hacer es recorrer 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 Panel de control.

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.

# 5 Utilice una red de entrega de contenido (CDN)

PoP de CDN de StackPath

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 (visitando su sitio web), el servidor (o PoP) más cercano a la persona entregará el contenido. Sin un 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énselo, cuando quiere que le envíen una pizza a su casa, no elige la pizzería a 30 millas de distancia. Eliges el que está a 5 millas porque quieres que te lo entreguen lo antes posible (si eres un ser humano normal que ama la pizza tanto como yo). Una 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 casa, está acelerando la entrega de su sitio web a lugares de todo el mundo.

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

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

• Cloudflare CDN: además de la optimización de DNS (mencionada anteriormente), Cloudflare ofrece una CDN global rápida y segura que almacena en caché el contenido estático 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 también)
• StackPath (anteriormente MaxCDN)
• Amazon Cloudfront
• Sucuri

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

Aquí hay algunos complementos con soporte CDN:

• Caché más rápido de WP
• Cohete WP
• Autoptimizar
• Caché total de W3
• WP Super Caché
• 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 : proporciona 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 PHP inicia para recuperar datos de la base de datos y entregarlos al usuario. Esto es diferente del almacenamiento en caché de bytecode, que almacena una versión en caché del código PHP compilado que se utiliza para mostrar su sitio web.

Divi realiza el almacenamiento en caché cuando sirve archivos JS y CSS de Divi entre bastidores. Pero esto es principalmente para los archivos de tema Divi para una mejor funcionalidad Divi Builder.

Todavía es necesario utilizar el almacenamiento en caché para su sitio web en su conjunto. La mayoría de los sitios tienen varios complementos que vienen con sus propios archivos CSS que pueden necesitar ser combinados, minimizados y almacenados en caché. Por lo tanto, definitivamente puede aprovechar una solución de terceros para ofrecer versiones HTML estáticas almacenadas en caché de todas sus páginas.

La 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 y la latencia de la página. 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.

Los complementos de almacenamiento en caché populares incluyen:

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

Consejo: siempre que tenga habilitado el almacenamiento en caché de páginas en su sitio mediante un complemento, querrá asegurarse y 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.

# 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. La minimización de 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 minimiza 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 aún más el 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 de la minificación y combinación de los archivos CSS y JS.

Una de las mejores formas 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 de archivo de todo el código fuente en su sitio web. Además, viene de serie con la versión gratuita.

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

• Autoptimizar
• W3 Total Cache (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 evaluar todos los matices de un sitio web para decir que funcionará mejor para todos. A veces, los complementos de terceros minimizan 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 desea 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 Habilite 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 zip) en su computadora, ya tiene un conocimiento básico de cómo funciona la compresión Gzip. Creamos archivos zip (o carpetas) para hacer que el contenido del archivo (o carpeta) sea más pequeño. ¿Por qué? ¡Así que podemos cargar 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 puedan ser entregados al cliente mucho más rápido. Esto realmente puede aumentar la velocidad de carga de la página.

Esta es una de esas áreas en las que 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 la minificación podría hacerlo.

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 hacer que los tamaños de los archivos sean aún más pequeños para una transferencia de datos más rápida. Está siendo utilizado por empresas de alojamiento 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

La optimización de la imagen es uno de los mayores culpables de las velocidades de página de carga lenta. Probablemente esto se deba a lo fácil que es ignorarlo. Después de todo, ¿cuánto daño puede causar una imagen de fondo a una página web? Bueno, puede que se sorprenda. Solo unas pocas imágenes grandes que no se hayan optimizado para la web podrían tener ramificaciones catastróficas en la velocidad de carga de la página. Y seamos sinceros, su sitio probablemente tendrá muchas imágenes.

Realmente no hay que enfatizar lo suficiente la necesidad esencial de optimizar la imagen. Todos los sitios web deberían 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 (¡todos ganan!). Pero hay otras optimizaciones de imagen importantes en las que también debería pensar.

En resumen, querrá hacer lo siguiente al optimizar su imagen para la web:

Utilice el tipo de archivo correcto

Cuando se trata de imágenes en la web, debería seguir con los siguientes tipos de archivos de imagen:

• JPG: este debe ser el tipo de archivo de referencia para la mayoría de las imágenes / fotografías que usa en su sitio, ya que puede obtener imágenes de gran apariencia en un tamaño de archivo más pequeño que PNG o GIF. Evite usar el formato PNG para cosas como imágenes de fondo o fotografías a menos que necesite un fondo transparente.
• PNG: utilice archivos PNG para imágenes que necesiten 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 ideales para logotipos, iconos y otras animaciones vectoriales.

Cambiar el tamaño y recortar sus imágenes

Nunca querrás que tu imagen sea más grande de lo necesario. 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 100px. Por lo tanto, no suba un logotipo con un ancho de 5000px y obligue a Divi a cambiar el tamaño de esa imagen por usted. El resultado puede parecer similar en la interfaz, pero ese gran tamaño está matando el tiempo de carga de la 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, así que intentaremos actualizarlas pronto).

Comprimir tamaño de archivo

Querrá reducir el tamaño de su archivo de imagen hasta el punto antes de notar una caída en la calidad. Esto se realiza mediante la compresión de imágenes. La mayoría de los editores de fotos, complementos y sitios como tinypng.com comprimen imágenes usando compresión sin pérdida (que encoge el archivo de imagen sin perder calidad de imagen) y compresión con pérdida inteligente (que disminuye el tamaño del archivo de imagen al reducir los metadatos y la calidad de imagen en un forma que el usuario no percibe realmente).

Aproveche las herramientas de optimización de imágenes

Si puede, 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 utilizar un sitio de terceros gratuito como TinyPNG.com o Compressor.io para comprimir la imagen antes de subirla a 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 comprimirán automáticamente las imágenes a medida que las carga en su biblioteca de medios de WordPress. Tenga en cuenta que el uso de un complemento para esto puede ser agotador en 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 herramientas y complementos de optimización de imágenes excelentes que puede usar:

• Sitios web:
  • Compressor.io
  • Tinypng.com
• Complementos:
  • Imagina
  • Optimización y compresió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.

Soporte SRCSET incorporado de Divi

Las imágenes receptivas con soporte nativo 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 las imágenes escaladas que tienen el tamaño correcto para diferentes pantallas receptivas (como tabletas y teléfonos).

# 10 Optimización de video

La optimización de video es un poco más difícil que la optimización de imágenes, pero definitivamente no es 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 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 autohospedar sus videos, 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 el video en Divi (como agregar una URL de video alojada por un tercero a un módulo de video), consulte esta guía definitiva.

# 11 Cree su página Divi para mayor velocidad

Cuando se trata de no hacerlo, 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 apoyado en el backend. Para obtener un ejemplo práctico de cómo optimizar el contenido de la página Divi para mejorar la velocidad, consulte nuestro artículo sobre cómo crear la página Divi más rápida.

A continuación, se incluyen algunos consejos clave que debe 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 incorporada de Divi . Esto permitirá que los elementos compartan fragmentos de código CSS basados ​​en 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 usa. Por ejemplo, si puede usar dos módulos de texto (en lugar de un módulo de texto y un módulo de propaganda) para obtener los mismos resultados, es mejor no usar el proceso y cargar innecesariamente el módulo de propaganda en la página.
• Sea inteligente al usar la animación 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 Motion Effects si no las usa. Por ejemplo, si está utilizando la configuración de animación habitual en toda su página, es posible que desee evitar el uso de efectos de movimiento para un solo elemento. En su lugar, 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

Utilice 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 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 u obsoletos

Además de utilizar complementos de calidad, también es importante que elimine los complementos no utilizados o desactualizados 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 la carga de cada página. Si desea un sitio Divi rápido, querrá usar la menor cantidad posible de complementos.

Esté atento a los errores de bloqueo de procesamiento

Divi no tiene ningún activo de bloqueo de procesamiento, por lo que significa que sus estilos y scripts de bloqueo de procesamiento provienen de complementos. Si hay algunos scripts grandes que bloquean el renderizado que están dañando su velocidad, podría considerar alejarse de esos complementos.

# 13 Realización de 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 lo harán gratis. Y las métricas que brindan serán invaluables para identificar formas en las que puede optimizar aún más su sitio para obtener 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 las herramientas de desarrollo de Chrome)

Los resultados de estas pruebas son los que nos impulsan 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 utilizar 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 cualquier optimización. Luego, puede usar esto como base para comparar pruebas futuras a medida que realiza cambios. Después de cada optimización que realice, podrá ver si su puntuación mejora.

Por ejemplo, puede notar que el uso de 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 implementa las optimizaciones de velocidad en su sitio, debería ver mejoras en las siguientes áreas:

• Tiempo hasta el primer byte (TTFB)
• Primera pintura con contenido (FCP)
• Time to Interactive (TTI): mide cuándo la página está lista para la interacción del usuario.
• Índice de velocidad (SI): mide qué tan rápido se completa visualmente su página 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 el momento en que su navegador responde a esa acción.
• Pintura de contenido más grande: mide el tiempo que tarda el elemento de contenido más grande (como una imagen) en ser visible para los usuarios.
• Cambio de diseño acumulativo: mide el cambio inesperado (o el 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 empantanarse 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 creamos, 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 la optimización de velocidad incorporada de Divi de primera mano en un sitio real. También puede servir como un buen ejemplo de cómo optimizar el contenido de su página Divi para aumentar 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.
• Utiliza las funciones de rendimiento integradas de Divi
• Contenido de la página optimizado
  • Usó estilos inteligentes (Divi Presets) para reducir el CSS dinámico que se genera para cada página.
  • Optimizado en la mitad superior de la página para asegurarse de que el CSS crítico fuera ajustado.
  • 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 ni efectos de movimiento.
  • 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%.
• Todos los activos de bloqueo de renderización se eliminaron por completo y el tamaño de JavaScript de Divi se redujo a la mitad.
• No hay solicitudes de recursos innecesarias.
• El contenido de la parte superior de la página se muestra de inmediato.
• Obtuvo una puntuación del 100% en Google PageSpeed ​​Desktop, del 99% en Google PageSpeed ​​Mobile
• Anotó 100% en GTmetrix.

¿Qué podemos aprender para el sitio de prueba?

En última instancia, Divi le brinda el poder de elegir cómo desea usarlo y qué tan rápido desea que sea su sitio web. El sitio de prueba muestra que puede obtener puntajes de velocidad de página casi perfectos desde el primer momento. Pero, solo porque no usamos todas las poderosas herramientas de diseño que hacen que Divi sea tan grandioso no significa que tengas que 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 sobre el que 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 Divi / WordPress sean más rápidos. Pero hay muchas más cosas a considerar que podrían mejorar tu velocidad aún más.

• Tener una configuración correcta del tema secundario de 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 todos los sitios de Divi porque eliminan la hinchazón que no se puede eliminar con ningún complemento de rendimiento. Dicho esto, puede utilizar 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 una CDN.

Manejo de 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 evaluar todos los matices de un sitio web para decir que uno funcionará mejor para todos o que no se producirán conflictos.

Por ejemplo, los complementos de terceros podrían minificar o mover automáticamente archivos JavaScript de una manera que pueda 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 surgir. Nos complace ayudarlo a solucionarlo.

Pensamientos finales

Divi es más rápido que nunca. Con las 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 por hacer para asegurarse de que su sitio Divi se esté ejecutando 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 la cantidad de cosas sencillas que 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