Elegant themes se ha tomado muy en serio la velocidad de las páginas web construidas con su tema Divi. Es por eso que; Divi agregó un bloque de configuraciones llamado: opciones de tema divi performance, en español (rendimiento).
En este artículo te indicaré las maravillosas ventajas que ofrece la configuración correcta de opciones de tema divi performance, y te explico paso a paso para qué sirve cada una de ellas. Así que no te vayas, lee el contenido y aprende todo lo necesario para configurar el rendimiento del tema Divi.
Explicación de cada Configuración de opciones del tema divi rendimiento
➨ Marco de modulo dinámico (Dynamic Module Framework)
Divi permite que la estructura (Framework) se adapte y cargue solamente los archivos necesarios para el funcionamiento de la página web, activando esta opción; permites que Divi solo carga los módulos que se utilizan en la página y procesa la lógica de las funciones en uso.
➨ CSS dinámico (Dynamic CSS)
El CSS dinámico reduce en gran medida el tamaño del archivo CSS, al generar dinámicamente solo los archivos CSS necesarios para las funciones y módulos que utilizas. Esto elimina todo el exceso de archivos CSS y mejora en gran medida los tiempos de carga del sitio web.
➨ Iconos dinámicos (Dynamic Icons)
Al igual que el CSS dinámico. Divi incluyo una mejora en las opciones de tema divi performance, como es los iconos dinámicos, activando esta opción; cargan solo cuando es necesario según los módulos y las funciones que se utiliza en cada landing page.
➨ Cargar hoja de estilo dinámica en línea (Load Dynamic Stylesheet In-line)
Cargar los archivos CSS en línea ayuda increíblemente la velocidad de la página web, lo que hace esta configuración es: crear un único archivo CSS, además, crear una sola línea del código. Esta configuración ayuda al navegador a leer y cargar en menos tiempo los códigos CSS de la página web. Si esta opción está desactivada, te aconsejo activarla.
➨ CSS crítico (Critical CSS)
Activar esta función permite que el CSS pesado, o con errores, cargue después de cargar la pinta principal de la página web. Lo que hace es aplazar el CSS crítico. Te recomiendo activarla.
➨ Altura del umbral crítico (Critical Threshold Height)
Cuando Critical CSS está habilitado, Divi determina un «umbral por encima del pliegue» y difiere todos los estilos para los elementos por debajo del pliegue. 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. Si tiene problemas con CLS, puede aumentar la altura del umbral.
➨ Bibliotecas JavaScript dinámicas (Dynamic JavaScript Libraries)
Elegant themes construyó su código interno utilizando la biblioteca jQuery, si analizamos el código, esto muestra miles de líneas de código JavaScript. Código que debe cargar el navegador para mostrar nuestro sitio web, Por eso las páginas web son lentas!. En las opciones de tema divi performance podemos elegir que únicamente se cargue el código JavaScript necesario.
➨ Eliminar los emojis de WordPress (Disable WordPress Emojis)
Actívala, ya que los emojis de WordPress según mi experiencia, únicamente se utilizan en los comentarios. La eliminación de emojis de WordPress elimina archivos innecesarios y mejora el rendimiento y velocidad del sitio web.
➨ Aplazar el CSS del bloque de Gutenberg (Defer Gutenberg Block CSS)
Al crear una página web en WordPress, por defecto vienen incluidos códigos CSS y JavaScript de los bloques de Gutenberg. Activando estas opciones del tema Divi performance. No los eliminas, únicamente retrasa su carga hasta que se cargue los códigos necesarios del tema Divi.
➨ Mejorar la carga de fuentes de Google ( Improve Google Fonts Loading)
Esta función te brinda el beneficio de almacenar en la caché del sitio web las fuentes de Google. De esta manera evitas solicitudes recurrentes al servidor, velocidad y experiencia de usuario.
➨ Limitar la compatibilidad con fuentes de Google para navegadores antiguos (Limit Google Fonts Support For Legacy Browsers)
Esta opción te recomiendo desactivarla, lo que busca esta función es brindar soporte a navegadores viejos creando una compatibilidad con ellos. Actualmente los navegadores soportan todas las fuentes de texto de Google. No pierdas rendimiento del sitio web dejándola activada.
➨ Aplazar jQuery y jQuery Migrate
Entre todas las opciones de tema divi performance, esta me parece la mejor. Ayuda a mejorar rendimiento del tema divi y la página web, cargando jQuery después de cargar el HTML y CSS. Activarla es la mejor opción.
➨ Compatibilidad de script y jQuery (Enqueue jQuery Compatibility Script)
Es posible que algunos scripts de terceros se pongan en cola de forma incorrecta sin declarar jQuery como dependencia. Si se aplaza jQuery, estos scripts podrían fallar. Si experimenta errores de consola después de habilitar la opción «Aplazar jQuery y jQuery Migrate», puede habilitar esta opción, que cargará un script de compatibilidad adicional que intentará resolver el problema. Puede desactivar esta función si todo funciona bien sin ella.
➨ Aplazar los scrip de terceros (Defer Additional Third Party Scripts)
En la misma documentación de opciones de tema divi performance, nos indican que aplazar los scripts de terceros y ayudar a la compatibilidad con la librería de jQuery. Mi recomendación es, no utilizar esta función, si no es necesario.
Video del curso de Opciones del tema divi performance
Aparte de opciones del tema divi PERFORMANCE también puede saber sobre configuración GENERAL