¿Qué tan rápido es el tema de Div?(Y cómo acelerarlo)

Divi ha lanzado recientemente una impresionante actualización de rendimiento en la que “acelera Div desde cualquier ángulo”. Según los temas elegantes, su nueva versión elimina la hinchazón y le da una buena nota en Google PageSpeed ​​Insights. Hoy, verificaremos esta declaración y verificaremos qué tan rápido es Div. Luego compartiremos nuestra lista de técnicas de optimización que puede seguir para aumentar la velocidad de su sitio de WordPress construido con el tema Div.

Prueba de rendimiento de cohetes Div y WP Div I probaré la versión 4.14 del Div. Instalé una demostración que proviene de la biblioteca dividida llamada “The Yoga Studio”. Mi sitio de prueba tiene varias imágenes, yoga, testimonios y enlaces a las redes sociales.
Herramientas de rendimiento utilizadas: Google PageSpeed ​​Insights en Mobile y WebPagetest.org (iPhone X con un servidor ubicado en Francia): adoptamos un enfoque móvil completo. KPI Medido: PSI Performance Grado, dos de los principales elementos web vitales, índice de velocidad, tiempo de bloqueo total, primera pintura de contenido, tiempo de interacción, tiempo de carga total y número de solicitudes HTTP. Nota: FID no se puede medir, porque sus datos se basan en usuarios reales. Sin embargo, tenemos el tiempo total de bloqueo, que es similar a FID. ¡Hagamos la auditoría!

Mi sitio de prueba construido con Div: un sitio de aprendizaje electrónico de aprendizaje de yoga para echar un vistazo a nuestros puntajes de KPI móviles: score nota general

<

84/100 la primera pintura satisfactoria 2.5 s (naranja) velocidad ÍNDICE 4.7 S El mayor contenido lleno de contenido 2.8 s (naranja) Tiempo para interactivo 5, 4 s Tiempo de bloqueo total 200 ms Cambio acumulativo 0.01 a tiempo completo cargado 2.669 s solicitudes http 24

Resultados de velocidad: ¿Qué tan rápido es DIV? El tiempo de carga completo de la división es de 2.6 segundos en el móvil, lo cual es un buen resultado de velocidad para muchos sitios. Según Lighthouse, Div ha logrado una nota de rendimiento de 84/100 en Mobile, que también es una puntuación de rendimiento satisfactoria. Todos estos números son sólidos para las páginas que se construyen utilizando un editor visual DRA-Drop como Divro. ¿Cómo explicar este rendimiento para un generador de páginas que le permite construir tantas características avanzadas? Es simple: en la última versión de Div, Elegant Temas ha agregado algunas funciones serias para optimizar la velocidad incorporada que puede hacer que su sitio se cargue más rápido. Por lo tanto, nuestra nota de rendimiento móvil (84/100) es bastante buena: debemos considerar la cantidad de contenido que hemos creado utilizando los módulos y animaciones DIV.
Rendimiento móvil general – Fuente: PSI, sin embargo, sigue siendo un lugar de mejora. Deberíamos seguir una puntuación verde (más de 90). Lighthouse recomienda que aborde algunos problemas para mejorar nuestro puntaje de rendimiento. Recomendaciones se refieren principalmente al almacenamiento en caché, compresión de texto y reducción del código no utilizado. Sección de auditoría para mi fuente de sitio web: psi

¿Quieres ver cómo obtuve 100/100 en móvil usando Div y WP Rocket? ¡Salta a la última sección!

Las 5 nuevas características de rendimiento de la Divica han pasado de ser un tema pesado a uno fácil al agregar 5 funciones de optimización de velocidad principal, a saber:

Un nuevo marco de PHP dinámico solo lo que se necesita sobre la base de divi, animaciones, emociones o iconos que usa en su sitio se cobra y procesa.
La dimensión CSS general de la división se redujo en un 94%, y su JavaScript se redujo en un 50% (significa que la divina eliminó los recursos innecesarios y pospuso las solicitudes de bloqueo).
Div ahora está inclinando hojas de estilo y solo carga el crítico CSS (el que está por encima del pliegue), que pospondrá cualquier otra cosa.
Las fuentes de Google ahora se almacenan en caché.
El JQuey Postpon se ha movido desde el encabezado y ahora está cargado asincrónico en el sótano (solo cuando no es necesario en el encabezado). Incluso encontrará una pestaña de rendimiento, accesible desde el tablero de WordPress en el tema de las opciones> General> Performance de rendimiento> .
La pestaña de rendimiento implementada por el equipo de Divrea – Fuente: El My WordPress Div es rápido y, además, hemos preparado una lista de técnicas de optimización que puede implementar para hacerlo aún más rápido.
Cómo hacer la división más rápida tuvo buenos resultados con una puntuación de velocidad satisfactoria de nuestra auditoría. Sin embargo, hay algunas técnicas simples que puede seguir para optimizar el rendimiento del DIV, a saber:
Elija el alojamiento correcto

Reducir TTFB
Optimizar el rendimiento de JS
Eliminar CSS no utilizado u optimizar la entrega de CSS
Reduce y combina tu código
Optimiza tus fotos
Carga perezosa de imágenes y videos
Use un CDN
Compresión del texto
Evite usar diapositivas sobre las animaciones de pliegue y no compuesto
Vamos a superar cada técnica, para que pueda aplicarlos a su sitio de la Divica y aumentar su velocidad.
1. Elija el alojamiento adecuado que necesita un host confiable, que es estable y rápido en términos de servidores y conexiones de red. Hay muchos tipos diferentes de alojamiento, pero le sugerimos que opte por proveedores especializados de WordPress. Escribí una guía detallada sobre qué buscar cuando elige alojar y también combiné una lista de los mejores hosts de WordPress en el mercado. En conclusión: no ahorre dinero a su proveedor de alojamiento. En cambio, haga de esto una prioridad. El fundador Divin recomienda que audite su entorno de alojamiento. Él dice que Div “es solo una pieza del rompecabezas cuando se trata de la velocidad de su sitio”. Su sitio de WordPress construido con DIV es usar un complemento de caché. La memorización de caché ayuda a reducir TTFB, ayudando a reducir el tiempo de procesamiento del servidor, lo que resulta en una página web más rápida. También debe optimizar la base de datos de WordPress, usar la última versión de PHP y usar un CDN.
Medición de TTFB – Fuente: GTMetrix WP Rocket puede ayudar a reducir TTFB para usted, debido a la optimización de caché y base de datos.
3. Optimizar el rendimiento de JS JavaScript lo ayuda con las funciones de validación e interacción entre su visitante y su sitio web. En la última versión, Div ha reducido el tamaño de su archivo JavaScript, lo que permite al usuario cargar solo lo que necesita para cada módulo. Además, DIV tiene una opción para eliminar JavaScript sin usar en la página en Opciones de tema → General → Performance. Aquí, debe activar la configuración de cuadro dinámico de los módulos y bibliotecas de JavaScript. JS a pedido – Fuente: la pestaña Optimización de división adicional, puede usar un complemento como WP Rocket para optimizar el código JS que DIV no crea.
Optimización de mi cohete JS-Source: WP 4. Eliminar CSS no utilizado o optimizar la división de entrega de CSS ha hecho el tema inteligente, identificando automáticamente el CSS crítico (por encima del pliegue) y optimizando la entrega de CSS. Divin posponió estilos no críticos, lo que reduce el resultado de CSS de la divina y el tiempo de carga del constructor. Al igual que la optimización de JS, la divic es solo el CSS que necesita para un determinado módulo o página. Asegúrese de que la siguiente configuración se active desde la pestaña Rendimiento:

Activación de la configuración de optimización de CSS: Fuente: Divi Builder Cuando se activan CSS Critic, Dynamic Opciones y Hoja de estilo CSS, todas las solicitudes de CSS que bloquean la fila relacionadas con la Divicidad se eliminan. Para reducir el CSS no utilizado, no olvide usar la opción “Div Preset”. Esto le permite crear páginas más ligeras, porque cada módulo que usa el mismo preajuste no debe tener todo el conjunto de bloques de diseño.

Configuración de un diseño global para todos los botones – Fuente: Divi Builder

5. Reducir y combinar su minificación de código es una técnica de optimización que reduce el tamaño de su archivo CSS, JS y HTML.Significa eliminar todo el contenido innecesario de sus archivos, como señales de punción, comentarios de los desarrolladores, etc.Puede usar múltiples herramientas para reducir y comprimir archivos.Escribí un tutorial sobre las mejores herramientas de minimización CSS y JavaScript gratuitas.
Si prefiere optimizar su código en unos pocos clics, eche un vistazo al complemento WP Rocket que permite la compresión de GZIP y reduce el código en unos segundos:

Minimizar y combinar mis archivos CSS con WP Rocket (nota: si ejecuta, tiene la misma sección para JS) 6. Optimizar sus imágenes Las imágenes son un componente clave de su estrategia de contenido, pero afectará su rendimiento si no está optimizado. Asegúrese de elegir el formato de imagen correcto para cada dispositivo, seleccione el nivel de compresión correcto, sirva imágenes con las dimensiones correctas y use el formato WebP de nueva generación. Si no desea aplicar manualmente esas buenas prácticas, le recomendamos usar un complemento de optimización de imágenes de WordPhy. El complemento puede facilitar sus imágenes sin comprometer la calidad. ¿Por qué no lo intentas? ¿Hay un intento libre? Lea nuestra guía dedicada en la optimización de la página. Hasta que el visitante los necesite. En resumen, priorice las imágenes o el código que se encuentra en la ventana de vista del usuario. Puede aplicar perezoso manualmente para imágenes y videos, agregando el siguiente script:

Si desea una forma más fácil (y más rápida) de aplicar la carga perezosa, puede usar un complemento como WP Rocket que tiene una pestaña Dediced LazyLoad:

La carga perezosa con WP Rocket 8. Use una red de entrega de contenido CDN A (CDN) es un servidor geográficamente distribuido que trabajan juntos para proporcionar contenido web rápido. Esto es muy necesario, especialmente si tiene visitantes internacionales. Al elegir un CDN, asegúrese de tener acceso al ancho de cinta ilimitado y que todos sus archivos se transmitan a través de HTTPS (con tráfico SSL). Muchos CDN están disponibles en el mercado, pero puede usar RocketCDN con Divi si desea imágenes, archivos JS y CSS para transmitir automáticamente en más de 35 mercados y más , también conocido como compresión GZIP, permite la compresión del contenido HTML, CSS y JS, de modo que los archivos enviados desde el servidor sean más pequeños (y más ligeros). La idea es comprimir todo el contenido de su sitio de WordPress para aumentar su velocidad. Todos los CDN principales permiten la compresión del texto, y un complemento como WP Rocket también puede comprimir todo el sitio inmediatamente después de la activación. Comprime sus archivos en el lado del servidor y los descompone en el navegador del visitante. 10. Evite usar diapositivas sobre las animaciones de pliegue y no compuesto. Las diapositivas sobre la página a menudo contienen el elemento más grande de pintura (LCP) de la página, un núcleo web vital. Por lo tanto, debe evitar mostrar una “diapositiva de héroe” en la parte superior de la página inicial.

Un sitio de prueba con un carrusel JS pesado en el encabezado: fuente de PSI Una animación no compuesta se refiere a cualquier animación en la que los cambios JavaScript JS o CSS desencadenarían un cambio repentino en su página, con un impacto en su cambio de diseño de valor acumulativo (CLS CLS ). Google no le dará una buena nota de rendimiento si ambos elementos web vitales básicos (CLS y LCP) no están optimizados. Mencioné el complemento WP Rocket como una solución de rendimiento para un sitio de WordPress construido con Div. Esto nos lleva a nuestra próxima sección, que le muestra cómo WP Rocket mejora el puntaje de rendimiento del faro. Acelerar Divi con WP Rocket para acelerar Div, Nick Roach, el Elegant Temas Fundador, recomienda el uso de un complemento de rendimiento. Según él, debe usar el caché y un CDN para mejorar la velocidad de su sitio. El complemento de caché para WordPress y también está completamente integrado con un CDN llamado RocketCDN. Y la buena noticia es que Div es totalmente compatible con WP Rocket. Div 4.10 Compatibilidad mejorada con WP Rocket introduciendo las siguientes mejoras:

“Eliminar CSS no utilizado” del cohete WP es compatible con el CSS crítico de Div. Div se ocupa de su CSS, y WP Rocket trata con el resto.

Ahora puede establecer algunas exclusiones en el cohete WP “Ejecución tardía de JS”, para que DIV pueda cargar la animación si lo desea.

Div viene con las siguientes características: “JQuey y Jquey migran aplazando”, “emojis de WordPress” y “Escrituras de fiesta”, que se superponen con las opciones de cohetes WP. Es aconsejable apagarlos y usar funciones de cohetes WP solo para evitar optimizaciones duplicadas. WP Rocket puede ayudarlo a lograr un mejor rendimiento móvil en un sitio web creado con DIV. Veamos cómo! /Table> Herramientas de rendimiento y KPI móviles que medimos:

Google PageSpeed ​​Insights (valores web básicos, índice de velocidad, tiempo total de bloqueo, primer contenido y tiempo de interacción)

WebPageTest (tiempo caro completo y número de solicitudes HTTP en dispositivos móviles)

Probaremos 2 escenarios diferentes:

Escenario #1 Mobile Rendimiento de mi sitio de prueba sin cohete WP (resultante de la primera sección en la que obtuve 84/100)

Escenario #2-Mobile Rendimiento de mi sitio de prueba con cohete WP
¡Comencemos la comparación!
Escenario #1 Mobile Rendimiento de mi sitio de prueba sin cohete WP
Como se ve en la primera sección de este artículo, mi nota móvil fue 84/100, con algunos problemas de rendimiento reportados por PSI:
La sección de auditoría para mi fuente de sitio web: PSI, como vi en la Sección 1, Div ahora presenta funciones incorporadas para optimizar JS y CSS.Tal vez se pregunte por qué puede continuar viendo algunas advertencias como “eliminar CSS no utilizado” o “reducir JS no utilizado” a pesar de las características incorporadas, ¿verdad?Respuesta: La diva eliminará solo el CSS y JS no utilizado creados por Div.Si su sitio usa otros complementos, entonces los estilos CSS o JS no utilizados no serán eliminados por el DIV.¡Aquí es exactamente donde WP Rocket puede ayudarte!
Al activar WP Rocket, recibí 100/100 en mi sitio construido con DIV y todos mis KPI de rendimiento se trasladaron al área verde.
Resultados de mi rendimiento con WP Rocket – Fuente: PSI es un resumen del rendimiento antes y después de usar WP Rocket:

Todos los valores son más ¡Saludable, y mi sitio incluso ha alcanzado los 100/100 en PSI! Además, WP Rocket me permitió recibir todas las advertencias de rendimiento en la sección de auditoría anterior.