Cómo crear la página Divi más rápida: Optimización de la velocidad de su contenido Divi

Con la nueva actualización de rendimiento de Divi, vienen un montón de posibilidades para aumentar los puntajes de velocidad de la página. Hoy, compartimos algunos consejos y trucos prácticos que debe tener en cuenta al crear una página Divi desde cero. Estas son recomendaciones, no reglas escritas en piedra. Siempre se reducirá a los objetivos principales de su página. A veces, se encontrará sacrificando algo de velocidad por el diseño y viceversa. Creemos que se trata de encontrar un equilibrio saludable entre ambos, pero con los consejos a continuación, definitivamente puede mejorar la velocidad de su página Divi.

¡Vamos a sumergirnos en ello!

Suscríbete a nuestro canal de Youtube

1. Optimización del contenido por encima del pliegue

Una de las nuevas características de rendimiento que se han agregado a Divi se llama Critical CSS. En resumen, CSS crítico en Divi detecta automáticamente qué CSS debe cargarse de inmediato, lo que se conoce como CSS de la mitad superior de la página, y retrasa la carga del resto del CSS de la página. Esto por sí solo ya ayuda a mejorar la velocidad de la página automáticamente, sin que tenga que esforzarse. Pero si desea hacer un esfuerzo adicional, también puede optar por optimizar el contenido de la mitad superior de la página.

Concepto Hero de 4 módulos

Puede ser tentador compartir tanta información como puedas con tus visitantes, a primera vista, pero eso es exactamente lo que debes evitar en un héroe. Cuanto más directo sea tu contenido, tanto en estilo como en visual, mejor. Es por eso que limitar la cantidad de módulos que usa en la mitad superior del pliegue lo ayudará a aumentar la velocidad de su página Divi. Preferiblemente, usarías:

• Título
• Párrafo
• Botón

Sin embargo, en muchos casos, también querrá incluir una imagen de algún tipo. Si lo hace, intente evitar el uso de la imagen como fondo y utilícela como módulo en su lugar. Usarlo como un módulo dentro de un contenedor en particular con un ancho máximo lo ayudará a usar dimensiones de imagen más pequeñas, lo que a su vez lo ayudará a acelerar su sitio. Esto nos lleva al concepto de héroe de 4 módulos:

• Título
• Párrafo
• Botón
• Imagen optimizada

Utilice Hero en pantalla completa o divida el contenido en varias secciones para una detección automática precisa

Hay una razón por la que los diseños de héroes en pantalla completa son populares. No solo hacen que su diseño sea más transpirable, sino que también ayudan con CSS crítico. Si elige elegir un héroe de pantalla completa, está decidiendo que eso es lo único que aparece en la mitad superior de la página, sin importar el tamaño de pantalla que esté usando. Para crear un héroe de pantalla completa en Divi, recuerde asignar una altura mínima de "100vh" dentro de la configuración de la sección. Asignando una altura mínima; te aseguras de que la sección cubra toda la altura del navegador. Puedes colocar cualquier cosa dentro de la sección para que sea parte de tu diseño de héroe a partir de ese momento. O también puede usar el encabezado de pantalla completa integrado de Divi.

Alternativamente, si no desea seguir la ruta del héroe en pantalla completa, puede decidir dividir lo que aparece en la parte superior del pliegue en varias secciones. Divi detectará automáticamente lo que aparece encima del pliegue en un nivel de sección. Esto significa que si está creando una sección grande que aparece en parte por encima del pliegue y en parte por debajo del pliegue, se cargarán el CSS de toda la sección y el CSS de los elementos de esa sección. Dividir las secciones en varias te ayudará a evitar que se traten demasiados elementos como si estuvieran en la mitad superior de la página.

Evite las animaciones en Hero para evitar retrasos

Es bueno evitar cualquier cosa por encima del pliegue que pueda provocar un retraso en el tiempo de carga. Esto incluye animaciones. Sin embargo, esto no significa que deba evitarlo por completo. Puede usar fácilmente animaciones en la página y / o limitar las animaciones que usa dentro de su héroe. Encontrar un buen equilibrio es clave.

Modificar contenido por encima de la mitad en tabletas y dispositivos móviles

Lo último que es importante mencionar con respecto a CSS crítico es la modificación de su diseño en tamaños de pantalla más pequeños. Es importante asegurarse de que su contenido de la mitad superior de la página esté optimizado para diferentes tamaños de pantalla. Es cuestión de ajustar el diseño para que pueda alcanzar una excelente puntuación de velocidad de página tanto en computadoras de escritorio como en dispositivos móviles. Puede, por ejemplo, ocultar la imagen de héroe completa en el móvil para aumentar la velocidad de su página en tamaños de pantalla más pequeños.

2. Uso de estilos inteligentes

Cómo funcionan los estilos inteligentes

Con la nueva actualización de rendimiento, Divi se ha optimizado reduciendo los estilos duplicados. Para activar estilos inteligentes, deberá sumergirse en el mundo de Divi Presets. Los ajustes preestablecidos básicamente le permiten compartir estilos con diferentes elementos sin tener que asignar un bloque único de estilos a cada elemento que tiene el mismo estilo.

Uso de 1 o 2 ajustes preestablecidos para secciones y filas

Las secciones y filas son dos tipos de elementos que a menudo parecen olvidarse cuando hablamos de presets. Al igual que los módulos, puede asignar ajustes preestablecidos a secciones y filas. Esto no solo lo ayudará a limitar el CSS que se genera, sino que también lo ayudará a mantener la coherencia del diseño a nivel de página. Digamos, por ejemplo, que desea utilizar de forma constante un relleno superior e inferior de 100 píxeles para cada sección, para crear un ritmo vertical, no hay ninguna razón por la que no deba beneficiarse de los ajustes preestablecidos de Divi en el proceso. Cree un nuevo ajuste preestablecido para una sección que utilice estos valores de relleno y asígnelo a cada nueva sección que agregue o conviértalo en el ajuste preestablecido de sección predeterminado.

También puede configurar una fila preestablecida con un ancho y un ancho máximo de su elección y hacer que ese sea el estándar. Juegue con estos ajustes preestablecidos y descubra cómo no solo facilitan el proceso de diseño, sino que también lo ayudan a mejorar los puntajes de velocidad de la página.

Usar preajustes para módulos

Por supuesto, también querrá usar estilos inteligentes para los módulos. En el siguiente ejemplo, notará que la apariencia general de cada módulo es similar. Crear un ajuste preestablecido para el módulo Blurb te ayudará a mantener pequeño el archivo CSS de tu página.

¿Anulando un ajuste preestablecido o no?

Pero no debería crear un nuevo ajuste preestablecido para cada pequeño cambio. En el ejemplo anterior, por ejemplo, puede observar que los dos últimos módulos de Blurb tienen un color de texto diferente. Puede crear un nuevo ajuste preestablecido para esto, duplicando el anterior, o puede decidir anular el ajuste preestablecido. En este caso, tiene más sentido anular el color del texto (lo que lleva a una línea adicional de código CSS) en lugar de crear un nuevo ajuste preestablecido y agregar varias líneas de código CSS.

3. Hacer coincidir las opciones de diseño con la velocidad

Limite la selección de módulos que desea utilizar (módulos dinámicos)

Cuando selecciona los módulos que desea usar para la página que está creando, es bueno tener en cuenta que estos se cargarán dinámicamente. Lo que significa que si no usa un determinado módulo, no tendrá ningún efecto en la velocidad de su página. Deberá considerar cada módulo que agregue y ver si “vale la pena”. Sin embargo, en un escenario ideal, se asegurará de que el resto de su contenido Divi esté lo suficientemente optimizado para que no tenga que sacrificarse en módulos.

Encuentre el LCP de su diseño y optimícelo

Otra cosa que puede ayudarlo a mejorar la velocidad de su página es encontrar su pintura con contenido más grande y optimizarla. En resumen, su LCP es el elemento más grande de su página que ayuda a determinar la puntuación de velocidad de su página. Puedes leer más sobre esto aquí. Al asegurarse de que el LCP de su diseño esté optimizado, puede reducir drásticamente el tiempo de carga de su página.

Elegir un estilo de animación (funciones dinámicas)

Al igual que tenemos módulos dinámicos, también tenemos funciones dinámicas. Esto significa que si no usa una determinada función, en absoluto, en su página, no se cargará, lo que conduce a una mayor velocidad de página. Por esta razón en particular, es importante asegurarse de elegir un estilo de animación y ceñirse a él. Puede, por ejemplo, optar por los efectos de movimiento y concentrar toda la animación en su página en torno a esa función. O puede optar por la configuración de animación normal y seguir esa ruta. Esto no solo le permite crear una página liviana, sino que también potencia la previsibilidad, lo que en el frente de la experiencia del usuario suele ser algo bueno.

Emparejamiento de fuentes: adhiérase a 1 o 2 familias de fuentes

También le recomendamos que se ciña a un máximo de 2 familias de fuentes para las páginas que diseñe. Al hacerlo, está limitando la cantidad de fuentes que deben cargarse antes de ingresar a la página.

4. Optimización manual

Contenido receptivo: reduzca el tamaño de las imágenes en dispositivos móviles

Otra cosa que lo ayudará a aumentar los puntajes de velocidad de la página móvil es el uso de contenido receptivo en Divi. Esta es probablemente una de las características que puede ayudarlo a mejorar mejor sus puntajes en tamaños de pantalla más pequeños. Aunque esto requiere mucho más esfuerzo, definitivamente vale la pena. Reduzca las dimensiones / tamaño de su imagen a través del software de edición de imágenes y use esas imágenes más pequeñas en el móvil, a diferencia de las que muestra en el escritorio. Esto reducirá drásticamente el tamaño de sus archivos de imagen y dará lugar a una mayor velocidad de página en el móvil.

Tipos de archivos y compresión

Asegúrese de utilizar JPEG tanto como sea posible, ya que estos tienden a tener un tamaño de archivo más bajo. PNG generalmente solo tiene sentido si necesita transparencia en su imagen para elevar el diseño, pero incluso entonces, puede intentar encontrar una alternativa para que el diseño funcione. Evite también tipos de archivos más pesados, como GIF. En cuanto al video, generalmente no es posible, especialmente si desea que se reproduzca en segundo plano. Y, por supuesto, asegúrese de comprimir los archivos que usa, incluso antes de subirlos a su biblioteca multimedia de WordPress.

Entre bastidores

Todos los consejos anteriores pueden ayudarlo a mejorar la velocidad de la página, pero es importante mencionar que debe ocuparse de las mejores prácticas de optimización de sitios web fuera de Divi. Puede encontrar más información técnica en esta guía definitiva.

Crear páginas rápidas con Divi, más fácil que nunca

Podemos llegar fácilmente a la conclusión de que existe una gran superposición entre las funciones de rendimiento de Divi y cómo maneja la construcción de su sitio web. Divi se encarga del lado parcial, por lo que puede concentrarse en las mejores prácticas de frontend que se necesitan para reunir todo en un sitio web hermoso y rápido. Si hay alguna de las mejores prácticas que le hayan funcionado bien, no dude en compartirlas en la sección de comentarios a continuación para mantener la conversación.