Seleccionar p谩gina

Actualizaci贸n de PERFORMANCE de Divi 4.10 explicada 馃敟

隆Hola Divi Lovers! en este tutorial te explicaremos todos los detalles de la nueva actualizaci贸n de performance de Divi en su nueva versi贸n.

Por Jefferson M.

Ago 20, 2021
Actualizaci贸n de PERFORMANCE de Divi 4.10 explicada 馃敟

隆Hola Divi Lovers! en este tutorial te explicaremos todos los detalles de la nueva actualizaci贸n de performance de Divi en su nueva versi贸n 4.10 con todos los detalles.

Elegant Themes lo ha hecho queridos Divi lovers, finalmente tenemos una nueva actualizaci贸n de Divi que est谩 enfocada en el performance y velocidad del propio tema. Elegant Themes ha lanzado su nueva versi贸n de Divi con incre铆bles mejoras en la velocidad de Divi, y optimizaci贸n en el uso de recursos y renderizado del tema.

脥ndice:

En palabras de Elegant Themes:

Hoy nos complace lanzar una actualizaci贸n transformacional de Divi Performance que acelera a Divi desde todos los 谩ngulos y establece una base sobre la cual Divi puede crecer con m谩s m贸dulos y m谩s funciones sin tener que agregar m谩s peso a tu sitio web.

Convertimos Divi en un tema s煤per liviano al modularizar su estructura y activos PHP, cargando y procesando solo lo que se necesita bajo demanda en funci贸n de los m贸dulos y funciones que utiliza.

Hicimos Divi s煤per inteligente, identificando autom谩ticamente CSS cr铆tico, difiriendo estilos no cr铆ticos y reduciendo la salida CSS del Divi Builder al combinar estilos duplicados. Tambi茅n presentamos una colecci贸n de nuevas opciones que mejoran autom谩ticamente el rendimiento almacenando en cach茅 y aplazando varias solicitudes de bloqueo de procesamiento y eliminando recursos innecesarios.

Nick Roach – Elegant Themes.

驴De que va esta nueva actualizaci贸n de performance en Divi?

Durante a帽os, la gente se quej贸 del desempe帽o de Divi. Pero francamente, la mayor铆a de los problemas estaban relacionados con el hosting barato que la gente contrataba para alojar su sitio.

Pero esas quejas dejan de ser fundamentadas el d铆a de hoy, si se帽ores, Elegant Themes finalmente ha escuchado a sus usuarios y ha hecho una mega actualizaci贸n de Divi, donde han super optimizado el tenga renovando y cambiado el funcionamiento de Divi por completo.

Una de las cosas que m谩s me gusta de Divi, es que su empresa creado, Elegant Themes, trabajo arduamente es actualizar el tema mejorando sus funcionalidades y caracter铆sticas, sin ir m谩s all谩, han estado trabajando en muchas actualizaciones fundamentales y de rendimiento desde principios de 2020. 隆Hoy es el primero de estos grandes cambios en Divi, y hasta la fecha, uno de los mejores d铆as para los usuarios de Divi! Elegant Themes ha lanzado una gran actualizaci贸n a la versi贸n 4.10 con toneladas de mejoras de rendimiento.

En este tutorial har茅 todo lo posible para darte una explicaci贸n clara y sencilla de entender de cada una de las nuevas configuraciones. Explicar茅 en t茅rminos simples todas las caracter铆sticas importantes de esta nueva e importante actualizaci贸n de rendimiento de Divi.

Video Tutorial donde explicamos a detalle actualizaci贸n de Performance de Divi 4.10

Importante: Antes de actualizar

Parece evidente, pero te vamos a recomendar algunas cosas antes de actualizar el tema: siempre crea una copia de seguridad antes de actualizar un plugin o un tema. Borra todo el cach茅 de tu navegador y WordPress, y tambi茅n el cach茅 de Divi despu茅s de la actualizaci贸n

Y si tienes problemas, sigue los pasos normales de soluci贸n de problemas en Divi antes de ponerse en contacto con el soporte de ET.

Nueva configuraci贸n de Performance en las opciones del tema Divi

Los mayores cambios en la nueva actualizaci贸n 4.10 se encuentran en las Opciones del tema Divi. Anteriormente exist铆a la pesta帽a General, pero ahora han agregado una nueva pesta帽a llamada: Performance (o rendimiento en espa帽ol). Vamos a ver lo que cambi贸 en cada una de estas pesta帽as.

Actualizaci贸n de PERFORMANCE de Divi 4.10 explicada 馃敟

Dynamic Module Framework

Antes de esta actualizaci贸n, toda la funcionalidad del c贸digo relacionada con cada uno de los m谩s de 50 m贸dulos predeterminados se cargaba en cada p谩gina que usaba el Divi Builder. Esto significa que incluso si solo estuvieras usando algunos m贸dulos en una p谩gina, en realidad Divi estaba cargando recursos y c贸digo para todos ellos.

Este comportamiento afectaba naturalmente la velocidad en Divi, pero ahora esto se resuelve con una nueva caracter铆stica llamada Dynamic Module Framework. Esta nueva funci贸n l贸gica procesa lo que se necesita y solo cargar谩 funciones para los m贸dulos que se usan realmente en una p谩gina, por ende, no cargar谩 ning煤n recurso o c贸digo de los m贸dulos que no se usan en una p谩gina.

Dynamic CSS

De manera similar a la configuraci贸n anterior, esta nueva funci贸n de CSS din谩mico significa que Divi solo cargar谩 el CSS que se usa realmente en una p谩gina en particular. En el pasado, la hoja de estilos de Divi era infamemente enorme a 860 kb, y se sab铆a que fallaba en las computadoras al intentar abrirla.

Pero ahora es din谩mico, lo que significa que solo cargar谩 el c贸digo necesario por p谩gina dependiendo de lo que se necesite. 隆Ahora el tama帽o del archivo es aproximadamente un 94% m谩s peque帽o , hasta 54 kb! Esta dram谩tica disminuci贸n se debe a un nuevo sistema inteligente que divide el c贸digo en segmentos que se combinan de manera inteligente en una hoja de estilo especial que proporciona solo los estilos necesarios para los elementos de cada p谩gina.

Importante: Esta es una de las opciones de esta nueva actualizaci贸n de Divi que m谩s me ha dado problemas en mis sitios, en los cuales se pierden o no se cargan correctamente algunos de los estilos. As铆 que ten cuidado al activarla y revisa si te da alg煤n problema al hacerlo.

Dynamic Icons

Como quiz谩s sepas, Divi tiene su propia fuente de iconos ETModules integrada directamente en Divi. En versiones anteriores, todos los 铆conos de todo el conjunto se cargaban en la p谩gina incluso si solo usaba uno, como en el m贸dulo Blurb o cualquier otro m贸dulo con 铆conos. La nueva actualizaci贸n crea la misma funcionalidad din谩mica que usan los CSS y m贸dulos, solo cargando los 铆conos o subconjuntos de 铆conos que realmente se usan en la p谩gina en lugar de todos ellos.

Load Dynamic Stylesheet In-Line

Esta configuraci贸n toma la hoja de estilos y la quita de la cola de carga, lo que significa que, la elimina de la lista de elementos que deben procesarse antes de que el contenido de la p谩gina se pueda cargar por completo. Luego imprime el CSS in-line, lo que significa que incrusta el CSS en el encabezado de la p谩gina.

Aprende a crear un Directorio de Bienes Ra铆ces con Divi y Divi Machine con nuestro curso premium

Esto permite que la p谩gina cargue solo el CSS necesario para representar el dise帽o en la parte superior de la p谩gina. La ventaja es que ahora la hoja de estilo principal no necesita esperar en l铆nea para ser cargada, y esto elimina una solicitud de bloqueo de procesamiento y mejora las puntuaciones de Google PageSpeed.

Critical CSS

Esta configuraci贸n permite a Divi identificar qu茅 estilos CSS son necesarios para mostrarlos correctamente la primera parte de una p谩gina web en la ventana gr谩fica visible. Este c贸digo se conoce como CSS cr铆tico porque es el proceso de tomar el CSS m铆nimo que se necesita para mostrar el contenido en la mitad superior de la p谩gina esta se carga.

En otras palabras, Divi ahora separar谩 autom谩ticamente los estilos cr铆ticos y no cr铆ticos. El c贸digo necesario se aplicar谩 芦in-line禄 y el c贸digo que se determina que no es necesario para esa 谩rea se aplaza y no se carga, lo que reduce dr谩sticamente la cantidad de estilos necesarios durante el procesamiento de la p谩gina inicial.

Dynamic JavaScript Libraries

Al igual que la funcionalidad de CSS din谩mico o Dynamic CSS, esta configuraci贸n solo cargar谩 archivos JavaScript externos bajo demanda seg煤n lo requiera un m贸dulo en particular en la p谩gina.

隆Tambi茅n eliminaron el c贸digo innecesario, reduciendo el tama帽o total del archivo JavaScript en Divi en aproximadamente un 50%! Como ves, esta actualizaci贸n de Performance de Divi, vino, y vino en serio.

Disable WordPress Emojis

Esta es una caracter铆stica simple que pone en cola o elimina los estilos y scripts de Emoji para un mejor rendimiento. Tan simple como eso.

Defer Gutenberg Block CSS

El concepto de esta funci贸n es muy similar a algunas de las otras configuraciones que explicamos anteriormente, pero con una ligera diferencia. Si habilitas el Divi Builder en una p谩gina y no est谩 utilizando el editor de bloques de Gutenberg, entonces no ser谩 necesario cargar ning煤n estilo CSS para Gutenberg.

Divi arregla esto moviendo el archivo CSS de los bloques de Gutenberg del encabezado al pie de p谩gina. En realidad, esto significa que a煤n se cargar谩n, pero ser谩 m谩s como una carga diferida (lazy load). No forma parte de la carga inicial de la p谩gina, por lo que ya no es un recurso de bloqueo de renderizado.

Mejora en la carga de Google Fonts

Hay varias mejoras en la forma en que Divi maneja las fuentes de Google. En el pasado, Divi necesitaba realizar una solicitud lenta de terceros (google) para las fuentes y esto reducir铆a el tiempo de carga de la p谩gina porque cargaba muchos estilos y tama帽os que no eran necesarios.

Pero ahora las fuentes de Google aprovechar谩n el almacenamiento en cach茅 del navegador, lo que significa que utilizar谩 una versi贸n est谩tica de las fuentes localmente cuando esto sea posible. Ahora Divi indica al navegador que aproveche las fuentes descargadas anteriormente de forma local en lugar de hacerlo desde la red. Las fuentes que se necesitan en la p谩gina se cargan en l铆nea (In-line), lo que elimina la solicitud de bloqueo de procesamiento y ahora la p谩gina se puede cargar m谩s r谩pido.

Defer JQuery And JQuery Migrate

Esta configuraci贸n es una de las m谩s complejas, por lo que debes tener cuidado con ella. La idea detr谩s de esta funci贸n es que Divi evaluar谩 el jQuery que se solicita en la p谩gina y determinar谩 si realmente es necesario en el encabezado.

Si no es as铆, ser谩 transferido al cuerpo (body) en lugar de lo anterior, lo que es genial porque elimina el recursos de bloqueo de procesamiento y acelerar铆a los tiempos de carga de la p谩gina.

Sin embargo, a veces un complemento registra jQuery como una dependencia y conf铆a en que est茅 en el encabezado, pero seguramente Divi lo haya dejado en el cuerpo. Creo que esta funci贸n necesita mejorar谩 con el tiempo y corregir谩 todos los errores que genera.

Importante: Esta es una de las opciones de esta nueva actualizaci贸n de Divi que m谩s ha dado problemas reportados por los usuarios de Divi. As铆 que ten cuidado al activarla y revisa si te da alg煤n problema al hacerlo.

Enqueue JQuery Compatibility Script

Esta es una funci贸n de protecci贸n que sirve como una forma de asegurarse de que todas las secuencias de comandos de terceros se coloquen correctamente en la cola. Debido a las otras configuraciones de aplazamiento de JS, es posible que algunos scripts se rompan. En ese caso, ver谩s errores en las herramientas de desarrollo del navegador en la pesta帽a Consola. Si ves estos errores, aseg煤rate de que esta configuraci贸n est茅 activada porque intentar谩 resolver los problemas.

Aplazar Third Party Scripts Adicionales

Esta configuraci贸n cambia los scripts de jQuery registrados en plugins y temas al cuerpo (body) para mejorar el rendimiento. Esta funcionalidad est谩 deshabilitada de forma predeterminada, y mantenerla deshabilitada puede ser conveniente en la mayor铆a de los casos porque esto puede causar errores graves de JavaScript en el sitio web. Si tienes alg煤n problema, es mejor avisar a soporte de Elegant Themes para que puedan abordarlo correctamente.

Ahora bien te, te mostrar茅 ac谩 algunos de los resultados del cambio en el rendimiento de algunos de mis sitios.

Ejemplos reales en el cambio del performance de Divi y pruebas

Los cambios en el performance de Divi pueden variar seg煤n muchos factores, principalmente estos factores van relacionados al hosting donde tienes alojado tu sitio, y a la cantidad de plugins que tengas activo en el mismo.

Sin embargo, en t茅rminos generales, con un sitio bien optimizado, hemos podido obtener resultados muy positivos para las pruebas que hicimos en nuestros sitios:

Condiciones:

  • Servidor: Banahosting
  • Plugin de cach茅: No
  • Plugins: 2 plugins inactivos

Antes de actualizar y optimizar el tema

Actualizaci贸n de PERFORMANCE de Divi 4.10 explicada 馃敟
Resultado en Google Page Speed
mejora en Divi
Resultado en GT Metrix

Despu茅s de actualizar y optimizar el tema

Actualizaci贸n de PERFORMANCE de Divi 4.10 explicada 馃敟 resultados
Resultado en Google Page Speed
mejora en Divi
Resultado en GT Metrix

Con esto podemos darnos cuenta de las mejoras sustanciales que tenemos con esta nueva actualizaci贸n de performance de Divi.

Ahora te preguntar谩s, 驴Qu茅 pasar谩 con los plugins de cach茅?

驴Necesitas un plugin de cach茅?

Mucha gente ya se est谩 haciendo preguntas como: 芦驴Se siguen necesitando complementos como SG Optimizer o WP Rocket?禄 Pues la respuesta es SI. Definitivamente tambi茅n necesitas un sistema de almacenamiento de cach茅 y una Red de entrega de contenidos (CDN) habilitada.

Pues esto son caracter铆sticas que est谩n fuera del funcionamiento de Divi, y siempre deben usarse en combinaci贸n con las funciones de optimizaci贸n del rendimiento que Divi ha incorporado, en otras palabras, esta actualizaci贸n de performance de Divi no reemplaza ning煤n sistema de cach茅.

Elegant Themes prob贸 las nuevas funciones con plugins de cach茅 m谩s populares que hay actualmente en el mercado para ayudar a identificar conflictos antes de lanzarlo, y hasta ahora, no ha habido mayor problema.

驴Divi 4.10 te ha dado errores? Mira aqu铆 como resolverlos

Esta ha sido una de las actualizaciones que m谩s cambios a insertado en el tema Divi, no solo por el mero hecho de que hayan optimizado el c贸digo del tema, sino porque han cambiado mucho del mismo, y tambi茅n de la l贸gica que usa Divi para funcionar.

Por eso es bastante probable que esta actualizaci贸n te haya causado alg煤n tipo de incompatibilidad, sobre todo con los plugins add-ons que le dan funcionalidad adicionales a Divi, por ejemplo, como lo mostramos en nuestro video, a mi me ha dado problemas con Divi Pixel.

Vale, pues ac谩 te voy a dar algunas recomendaciones para que puedas resolver la mayor parte de estos problemas:

Recuperar copia manual

Recupera una copia de seguridad del d铆a anterior a la actualizaci贸n de Divi. Esta siempre es de las primeras medidas que se deben tomar en caso de que la actualizaci贸n te haya dado problemas.

Hacer Rollback de la versi贸n 4.10

Si ya es muy tarde para hacer la recuperaci贸n de una copia de seguridad o no la tienes, puedes tambi茅n hacer roll back a la versi贸n del tema Divi, en opciones del tema > Actualizaciones > Versi贸n Rollback.

opciones del tema Divi > Actualizaciones > Versi贸n Rollback.

Este punto te va a funcionar sobre todo si solo tienes la versi贸n 4.10, si por el contrario has actualizado a 4.10.2 o 4.10.3 no te permitir谩 regresar a la versi贸n 4.9.11 que fue la 煤ltima versi贸n estable antes de la actualizaci贸n.

Instalar manualmente la versi贸n de Divi 4.9.11

Pasa solucionar lo anterior y poder regresar a la versi贸n 4.9.11 puedes descargar totalmente gratis el tema Divi V- 4.9.11 ac谩:

Descargar “Tema Divi V – 4.9.11 (estable vertion beforme performance update)” Divi-4.9.11.zip – Descargado 130 veces – 10 MB

Una vez lo descargues, puedes hacer el proceso de carga normal del tema como si lo estuvieras instalando por primera vez, y al darle instalar tema, WordPress te preguntar谩 si quieres reemplazar la versi贸n nueva por la versi贸n vieja, a lo que le deber谩s indicar que si.

reinatalar Divi 4.9.11 despues de la falla de actualizacion de Divi 4.10

Con ello, podr谩s tener tu sitio con la versi贸n 4.9.11 de Divi y desaparecer谩 temporalmente todos los problemas que haya.

Desactivar todas las nuevas funciones

Si todo lo anterior no te sirve, o no lo puedes hacer por alguna raz贸n, siempre tienes una 煤ltima opci贸n. Puedes desactivar todas las nuevas funciones en la pesta帽a de Performance y comprobar si los problemas desaparecen.

A煤n as铆, si deseas, puedes activar opci贸n por opci贸n y ver cual te da el error, de esa manera podr谩s activar todas las dem谩s opciones y solo dejar desactivar las opciones que te causan dicho error.

Sabemos que es un poco molesto para algunos usuarios, y adem谩s pensamos que Elegant Themes deber铆a mejorar el sistema de Rollback autom谩tico que tiene, pero como ves, siempre hay una alternativa para regresar todo a como estaba antes de la actualizaci贸n.

Estoy completamente seguro que en menos de un mes, el tema estar谩 totalmente estable de nuevo con todos los plugins add-ons que existen en el mercado, as铆 que solo hay que tener un poco de paciencia.

Conclusiones

La actualizaci贸n de Divi 4.10 (y posteriores correcciones) ha sido una gran noticia para toda la comunidad amante del tema Divi, no solo por la mejora en si mismo del performance de Divi, sino porque era algo que todos est谩bamos esperando con ansias, y Elegant Themes, al trabajar en ello, demostr贸 que le importa lo que la comunidad necesita.

Eso para mi, es lo mejor de esta performance update de Divi, pues significa que hemos adquirido un producto no es solo es bueno por si mismo, sino que adem谩s de eso, hay una gran empresa detr谩s que escucha a toda su comunidad. As铆 que enhorabuena por Elegant Themes.

驴Y a ti que te ha parecido la actualizaci贸n de performance de Divi? 驴Qu茅 problemas te ha dado? Cu茅ntanos m谩s por ac谩 abajo en los comentarios.

APRENDE DIVI

Accede a m谩s de 700 contenidos especializados en Dise帽o web con Divi por menos de $10 USD/mes

15 Comentarios

  1. Jos茅 Ram贸n Garc铆a

    Hola Jefferson:

    Muchas gracias por el v铆deo y el post. Muy interesante y did谩ctico.
    Ya puestos, como empleas el plugin LiteSpeed Cache, configurado para Divi, y dado que ese plugin es muy complejo de configurar, y parece que t煤 lo debes tener optimizado por el rendimiento que se ve que te da en el v铆deo, 驴Por qu茅 no compartes con nosotros la configuraci贸n? Yo lo intent茅, pero el rendimiento baja en vez de subir 馃檨

    Saludos y gracias,
    Jos茅 Ram贸n

    Responder
    • Jefferson M.

      Gracias Jos茅 Ram贸n. Preparar茅 un tutorial de Litespeed cach茅 con todo gusto m谩s adelante. Yo creo que es necesario para poder usarlo en sitios con Divi.

      Responder
  2. Esteban Trujillo

    Hola Jefferson:
    Muy bueno el art铆culo y v铆deo. Gracias.
    Una pregunta: 驴Con las nuevas prestaciones de optimizaci贸n de DIVI, podr铆amos dejar de utilizar Autoptimize?
    Gracias de nuevo y saludos
    Esteban

    Responder
    • Jefferson M.

      Hola Esteban, no es necesario dejar de usar Autoptimize, sin embargo, si haces algunas pruebas desactiv谩ndolo y ves que el rendimiento no cambia demasiado, lo puedes desactivar. Siempre es bueno ahorrarse los plugins que se puedan.

      Responder
  3. Juan

    Muy buena publicaci贸n, felicidades. 驴Hay alguna forma de saber cu谩ntas veces es usado un m贸dulo en todas las p谩ginas de la web?
    Es decir, puedo saber de alguna forma si por ejemplo estoy utilizando un m贸dulo anuncio o los contadores circulares en una 煤nica p谩gina, o en dos como mucho. En ese caso supongo que me interesar铆a eliminarlos si apenas los utilizo. Gracias

    Responder
    • Jefferson M.

      Que tal Juan, no, al menos yo no conozco una manera de saber cuantos m贸dulos est谩s usando en todo el sitio. A menos no automatica. Manual claro que si, solo bastar铆a con que cuentes m贸dulo por m贸dulo todos los que tienes en tu dise帽o. 馃槉馃枑

      Responder
      • Juan

        Muchas gracias Jefferson, mirar茅 aquellas p谩ginas que se salgan de las est谩ndar de mi sitio para ver en cu谩les estoy utilizando alg煤n control de forma puntual, para pensar en reemplazarlo por alguna imagen o tipo de control que utilice m谩s habitualmente

        Responder
  4. Juan

    Otra cosa, si utilizo muchas imagenes en las que le doy un borde de 2px y color de borde blanco, 驴me interesar铆a crearlo como un nuevo preset para despu茅s indicarlo como preset en la configuraci贸n de todas las im谩genes que quiera as铆?

    Responder
  5. Francisco

    Hola,

    Yo tuve que volver mi Divi a la versi贸n anterior ya que dejaron de funcionar todos los ajustes de m贸dulos del builder.
    Al intentar modificar cualquier m贸dulo de cualquier de mis p谩ginas se quedaba la pantalla en blanco sin responder.

    Previamente deshabilite todas las opciones de Performance pero nada.
    Me sabe mal haber tenido que hacerlo ya que la velocidad de mi web mejor贸 bastante 馃檨

    驴A alguien le ha pasado algo similar?

    隆Gracias!

    Responder
    • Jefferson M.

      Creo que es un error muy particular de tu instalaci贸n francisco, ya que como sabr谩s tengo m谩s de 30 instalaciones y a mi no me dio ning煤n problema. Actualmente (para la fecha de este comentario) est谩 en su versi贸n 4.10.5 con multiples problemas ya arreglados. Puedes probar actualizar (previo backup) y ver si te sigue dando los mismos problemas.

      Responder
      • Francisco S谩nchez Gil

        隆Gracias como siempre por tu respuesta!
        Por el momento lo volver茅 a probar en mi servidor de test y si localizo el error lo replicar茅 en producci贸n.
        Por supuesto, os informar茅 a ti y a la comunidad si encuentro lo que puede haber pasado.

        Un saludo amigo.
        Fran

        Responder
  6. Norelis Andrea

    Hola me ha pasado lo mismo, mi sitio web es concordiacapital.es

    y desde la actualizaci贸n aparece todo en grande y todo se ha movido, he instalado una versi贸n anterior y nada, necesito ayuda禄禄 Gracias

    Responder

Enviar un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *