Con la nueva actualización de rendimiento de Divi vienen un montón de posibilidades para aumentar las puntuaciones de velocidad de 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, te encontrarás sacrificando algo de velocidad por el diseño y viceversa. Creemos que se trata de encontrar un equilibrio saludable entre ambos, pero siguiendo los consejos a continuación, definitivamente puede mejorar la velocidad de su página Divi .
¡Vamos a sumergirnos en él!
Suscríbete a nuestro canal de Youtube
Una de las nuevas funciones de rendimiento que se han agregado a Divi se llama Critical CSS. En resumen, Critical CSS en Divi detecta automáticamente qué CSS debe cargarse de inmediato, denominado CSS en 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 tengas que esforzarte. Pero si quiere hacer un esfuerzo adicional, también puede decidir optimizar el contenido de la mitad superior de la página.
Concepto de héroe 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 visualidad, mejor. Es por eso que limitar la cantidad de módulos que usa en la parte 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, trate de evitar usar la imagen como fondo y utilícela como un módulo en su lugar. Usarlo como un módulo dentro de un contenedor 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
Use Fullscreen Hero o divida el contenido en múltiples secciones para una detección automática precisa
Hay una razón por la cual los diseños de héroes de 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 un héroe de pantalla completa, está decidiendo que eso es lo único que aparece en la parte superior, sin importar el tamaño de pantalla que esté usando. Para crear un héroe a pantalla completa en Divi, recuerda asignar una altura mínima de “100vh” dentro de la sección de configuración. Al asignar una altura mínima; se está asegurando de que la sección cubra toda la altura del navegador. Puede colocar cualquier cosa dentro de la sección para que forme parte de su diseño de héroe a partir de ese momento. O también puede usar el encabezado de pantalla completa incorporado de Divi.
Alternativamente, si no desea seguir la ruta del héroe a pantalla completa, puede decidir dividir lo que aparece arriba del pliegue en varias secciones. Divi detectará automáticamente lo que aparece sobre el pliegue en un nivel de sección. Esto significa que si está creando una sección grande que aparece en parte sobre el pliegue y en parte debajo del pliegue, se cargará el CSS de toda la sección y el CSS de los elementos en esa sección. Dividir las secciones en varias le ayudará a evitar que se traten demasiados elementos como si estuvieran en la parte 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. Esto, sin embargo, 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 el contenido de la mitad superior de la página en tabletas y dispositivos móviles
Lo último que es importante mencionar con respecto a Critical CSS es la modificación de su diseño en tamaños de pantalla más pequeños. Es importante asegurarse de que el contenido de la mitad superior de la página esté optimizado para diferentes tamaños de pantalla. Se trata de modificar el diseño para que pueda alcanzar una excelente puntuación de velocidad de página tanto en el escritorio como en el dispositivo móvil. Puede, por ejemplo, ocultar toda la imagen del héroe en el móvil para aumentar la velocidad de su página en pantallas más pequeñas.
2. Uso de estilos inteligentes
Cómo funcionan los estilos inteligentes
Con la nueva actualización de rendimiento, Divi se ha optimizado al reducir los estilos duplicados. Para activar estilos inteligentes, deberá sumergirse en el mundo de los ajustes preestablecidos de Divi. 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 las filas son dos tipos de elementos que a menudo parecen olvidarse cuando hablamos de ajustes preestablecidos. Al igual que los módulos, puede asignar preajustes 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 usar constantemente un relleno superior e inferior de 100 px 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 use 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 un preajuste de fila con un ancho y un ancho máximo de su elección y hacer que sea el estándar. Experimente con estos ajustes preestablecidos y descubra cómo facilitan no solo su proceso de diseño, sino que también lo ayudan a mejorar los puntajes de velocidad de la página.
Usar ajustes preestablecidos 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 de Blurb lo ayudará a mantener pequeño el archivo CSS de su 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 notar 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. Coincidencia de opciones de diseño con 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. Querrá 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 sacrificar 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 mayor contenido y optimizarla. En resumen, su LCP es el elemento más grande en su página que ayuda a determinar el puntaje 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 en su página.
Selección de un estilo de animación (características dinámicas)
Así como tenemos módulos dinámicos, también tenemos características dinámicas. Esto significa que si no utiliza una característica determinada, en absoluto, en su página, no se cargará, lo que conduce a una mayor velocidad de la 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, elegir ir con efectos de movimiento y concentrar toda la animación en su página alrededor de esa función. O puede ir a la configuración de animación regular 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: apéguese 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 funciones que mejor puede ayudarlo a mejorar sus puntajes en pantallas más pequeñas. 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 conducirá a una mayor velocidad de página en dispositivos móviles.
Tipos de archivos y compresión
Asegúrate de usar JPEG tanto como sea posible también, 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 tipos de archivos aún más pesados, como GIF, también. En cuanto al video, generalmente no funciona, 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 de medios de WordPress .
Entre bastidores
Todos los consejos anteriores pueden ayudarlo a mejorar la velocidad de la página, pero es importante mencionar que debe cuidar las mejores prácticas de optimización del sitio web fuera de Divi . Un ejemplo de esto sería con su base de datos. Hay algunos excelentes complementos de optimización de bases de datos disponibles que pueden ayudarlo con el rendimiento de su sitio. Puede encontrar más información técnica consultando 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 la forma en que maneja la creación de su sitio web. Divi se encarga del lado parcial, por lo que puede concentrarse en las mejores prácticas de interfaz que se necesitan para reunir todo en un sitio web hermoso y rápido. Si hay mejores prácticas que le han funcionado bien, no dude en compartirlas en la sección de comentarios a continuación para mantener la conversación.