homefinance blog
¿Vacilado entre oxígeno y elemento para construir su próximo sitio de WordPress? Quédate con nosotros: te ayudaremos a decidir. El propósito de cualquier sitio debe ser proporcionar una experiencia de navegación agradable, siendo lo más rápido posible. Y para asegurarse de proporcionar una experiencia de usuario óptima, es esencial elegir el generador de página de WordPress correcto que no afecte el rendimiento. El oxígeno a menudo se ve como una herramienta de edición completa para los desarrolladores que ni siquiera necesitan un tema. Incluso “deshabilite” el tema que usa. Está hecho para desarrolladores y lo verá en toda la interfaz del complemento.
Elementor es más amigable para los principiantes, pero también le dará la oportunidad de estilizar todo su sitio, incluidos encabezados y sótanos. Muchos desarrolladores de temas ofrecen un paquete, porque usan elemental como un pilar para sus demostraciones, lo que lo convierte en una de las páginas más utilizadas del mundo. Elementor alimenta alrededor de 7 millones de sitios de WordPress. En esta publicación, llevaremos a cabo auditorías de rendimiento basadas en escenarios reales. También cubriremos las características principales y compartiremos algunas técnicas de alto nivel que puede seguir para acelerar cada generador de páginas.
Bien, es hora de averiguar qué generador de página hará que su sitio de WordPress sea más rápido: ¿oxígeno o elemento? ¡Vamos a bucear! Los escenarios de prueba de rendimiento para Oxygen vs Elementor (un enfoque móvil) harán tres auditorías separadas para mostrarle cómo comparar oxígeno y elemento en términos de rendimiento móvil. ¿Por qué en dispositivos móviles? Debido a que las optimizaciones móviles a menudo se pasan por alto a favor de optimizaciones de escritorio más fáciles. Si gasta un gran presupuesto de diseño receptivo, también es lógico proporcionar la experiencia más rápida posible para sus visitantes. Además, los precios más bajos han llevado a muchos usuarios a tener solo un teléfono móvil y no una computadora. No dejemos a nadie fuera de su estrategia de marketing. Las conversaciones de temas y complementos probaremos: Tema: Hello gratuito de Hello de Elementor (V 3.7.6) ha alcanzado la lista de los mejores temas gratuitos y rápidos para WordPress. Nota importante: el oxígeno desactiva por completo el sistema de temas de WordPress: el tema activo nunca se carga y no tiene impacto en el rendimiento o la apariencia de su sitio. Dado que el oxígeno no cobra el tema, utilicé el tema súper fácil del “buen día” de elemento para mantener las cosas correctas. Complementos:
Oxígeno (v.3.9)
Elementor Pro (V.3.5.2) – Elementor viene con una versión gratuita y un Pro.
Para mantener la comparación correcta en términos de las funciones ofrecidas por ambas, compararemos oxígeno con la versión de Elementor Pro A, que también incluye la edición completa del Sitio (ESF).
Si desea averiguar cómo la primaria puede aumentar la velocidad de su sitio, le recomendamos que eche un vistazo a nuestro artículo dedicado. KPI móviles y pruebas de rendimiento Herramientas PageoglePeedsPeed Insights (valores web básicos, índice de velocidad, tiempo total de bloqueo, primer tiempo de pintura e interacción)
WebPageTest (tiempo cargado completo, tamaño de página y número de solicitudes HTTP en dispositivos móviles – iPhone X con servidores en Francia)
En nuestro artículo, cada generador de páginas se comparará con el mismo contenido y escenarios, para que pueda haber una comparación igual.
Escenario #1 – Creadores de página con solo una línea de texto
Observaremos los puntajes de rendimiento para cada complemento antes de agregar cualquier tipo de contenido duro, como módulos o cualquier otro modelo avanzado. Simplemente activaremos los complementos de oxígeno y elemental en nuestro sitio con una sola línea de texto. Esperamos que los resultados sean buenos, porque casi no hay contenido.
Escenario #2 – Agregar contenido
Para mantener las cosas lo más precisas y equilibradas posible, agregaremos los mismos módulos prefabricados disponibles para ambos constructores. Nota: Elementor llama a sus módulos de “widgets”, mientras que Oxygen usa el término “elementos compuestos”.
Para nuestra auditoría, construimos nuestros sitios de prueba utilizando solo elementos comunes, a saber:
Una sección de héroes (con la misma imagen que pesa 250 kb)
Un botón (urgencia con un enlace)
1 modo de texto para la sección “Acerca de” (con el mismo contenido)
Dos imágenes (con un peso de 189 kb cada una)
Una lista de iconos (4 iconos con una línea de texto)
Un acordeón (preguntas frecuentes con 3 preguntas y respuestas) 3 revisiones de clientes (con las mismas 3 imágenes que pesan 116, 104 y 108 kb cada una)
Una tabla de precios (dos planes)
| Mi sitio de prueba construido con oxígeno | mi sitio de prueba similar construido con Elementor | |
| Antes de explorar la auditoría de velocidad, recomendamos leer nuestra guía útil sobre la prueba de su rendimiento del sitio de WordPress. Y Elementor: ¿Qué generador de páginas de WordPress es más rápido? Listo con el suspenso, comencemos con el escenario #1: Escenario #1 – Creadores de página con solo una línea de texto en esta primera prueba, agregamos solo una línea de texto usando el módulo de texto de cada constructor.> | Modo de texto de oxígeno | Texto con Elementor |
Echemos un vistazo a nuestros hallazgos:
Resumido visualmente KPI en la tabla a continuación:
<
<
Con solo texto, Oxygen Builder y Elementor son bastante similares en términos de rendimiento. Elementor crea más solicitudes HTTP que el oxígeno (13 solicitudes de elemento en comparación con solo 7 para oxígeno). Es interesante agregar más contenido y ver en qué dirección evolucionará la auditoría. Escenario #2: agregando contenido como recordatorio, construimos dos páginas similares a los módulos adecuados para los dos constructores. Nuevamente, pongo ambas URL en Google PageSpeed Insights y WebPagetest. Los resultados están a continuación:
ambos sitios de prueba se desaceleraron, lo cual era predecible, porque agregué algo de contenido.Google PageSpeed Insights ofrece notas naranjas para oxígeno (77/100) y Elementor (55/100).Los valores de rendimiento de oxígeno son mejores en comparación con el elemento y han resumido los valores principales en la tabla a continuación:
<
Primera conclusión: oxígeno ¿Es más rápido que elemental? La respuesta corta es sí, el oxígeno es más rápido que la elemental. La carga de la página del elemento lleva más tiempo: casi 4 segundos que 3 segundos para la de oxígeno. En cuanto a los vitales web básicos, el oxígeno también tiene un mejor rendimiento que la primaria. La pintura contentful más grande de oxígeno (LCP) es de 4.6 s (en rojo), pero el elemento es aún peor: 10.5 s (y en rojo). Es hora de pasar al último paso de nuestro proceso de prueba, el tercer escenario con la instalación de nuestro poderoso caché: WP Rocket. Escenario #3 ¡El Contenido + Rocket WP cuando activé el cohete WP, mis dos sitios de prueba se movieron al área verde!
Una de las mejoras más importantes fue la medición del tiempo de carga total: pasó de 2.989 s a 0.77 s para oxígeno y de 3.998 s a 0.896 s para elementor.Y por último, pero no menos importante: Core Web Vitals ha pasado de rojo a verde con WP Rocket.
Aquí está la tabla de comparación final que muestra a ambos constructores con y sin cohete WP:
| kpi (rendimiento móvil) | Builder of Oxygen Performance con contenido | oxygen Builder con WP Rocket | Performance El Elementor Builder con contenido | Elementor Builder Performance con WP Rocket |
| Nota general | 77/100 | 100/100 (¡guau!) | 55/100 | 98/100 |
| la primera pintura satisfactoria | 3.1 s | 1.0 s | 6, 3 s | 1.6 S |
| índice de velocidad | 3.1 s | 1, 0 s | 6.3 S | 1.7 s |
| El mayor contenido lleno de contenido | 4.6 s | 1.2 s (núcleo vital en verde!) | 10.5 s | 1.6 s (¡Core Web vital en verde!) |
| Tiempo total para interactivo | 3.7 S | 1.0 S | 6.5 S | 3.5 S |
| Total de bloqueo tiempo | 30 ms | 0 ms | 80 ms | 0 ms |
| cambio acumulativo | 0.008 | 0 | 0 | 0 |
| a tiempo completo cargado | 2.989 s | 0.770 s | 3.998 s | 0.896 s |
| solicita http | 23 | 4 | 21 | 7 |
conclusiones clave sobre el rendimiento Cuando se usa WP Rocket: debido al cohete WP, noté un rendimiento significativo Mejoras tanto para oxígeno como para elementor, a saber: obtuve 100/100 para oxígeno y 99/100 para Elementor en Google PageSpeed Insights
Todos mis elementos vitales básicos de la web están ahora en verde: WP Rocket ha hecho que el contenido más grande se mueva de 10.5 s a 1.6 s para el elemento! para ambos constructores)
El número de solicitudes HTTP también ha disminuido significativo: han pasado de más de 20 a 4 para oxígeno y 7 para Elementor.
Todos los problemas reportados por Lighthouse ahora están en la sección “Últimas auditorías”, como puede ver a continuación.
¿Cómo leer la captura de pantalla?
-> Problema resuelto por WP Rocket
-> Problema resuelto por Imagify
Rendimiento notable utilizando WP Rocket e Imagify #Discrimer sobre el rendimiento de la imagen: solo me quedaban tres problemas en Google PageSpeed Insights, que eran “servir imágenes en la siguiente generación”, “codifica eficientemente la imagen” y “el tamaño correcto de las imágenes. “. Simplemente activé el complemento Imagify para comprimir y convertir mis imágenes en la webp: lo que hizo que los problemas desaparecieran. Siempre mejorará su puntaje de rendimiento del faro y le ayudará a centrar los vitales de la web para ser verdes en Google PageSpeed Insights. Y le mostraremos el Las características de cohete de WP que solíamos aumentar la velocidad de oxígeno y elemental.
Cómo acelerar el elemento de oxígeno y el cohete WP para acelerar cualquier sitio web construido con oxígeno y elemento, Lighthouse recomienda el uso de un caché potente para optimizar su código e imágenes: diagnóstico “Servir activos estáticos con un caché eficiente” – Fuente: Afortunadamente, WP Rocket Tigas casi todas las casillas reportadas por Lighthouse cuando se trata de mejorar el rendimiento. Como se ve en nuestra auditoría de rendimiento, WP Rocket ha acelerado significativamente nuestros sitios de prueba (escalamos 99/100 y 100/100 con elemento y oxígeno en PSI). De hecho, WP Rocket aplica automáticamente el 80% de las mejores prácticas de rendimiento web. Para seguir adelante, aquí están las funciones más fuertes que han ayudado a acelerar el oxígeno y el elemento:
Cache y GZIP – La compresión de cohetes WP es un caché poderoso que viene con todas las páginas en caché, incluidos los visitantes móviles. También disminuye el uso del ancho de banda debido a la compresión automática de GZIP en la activación.
Función de almacenamiento de caché para dispositivos móviles – Fuente: cohete WP Plugin WP
Lazyload: en la pestaña de medios, implementamos la carga perezosa en todas nuestras imágenes (testimonios, encabezado de héroes, etc.). Esta técnica de optimización tiene como objetivo cargar solo las imágenes que los usuarios ve de manera efectiva.
Funciones Carga perezosa y dimensiones de imagen Source: WP Rocket Plugin Nota: Lighthouse también recomienda usar el formato de próxima generación (tal en WebP.
Elimine CSS no utilizado, reduzca y combine los archivos CSS, optimice la entrega de CSS: estas opciones han eliminado CSS no utilizado, CSS Critic combinados y reducidos y optimizados CSS.
Minimización de archivos JavaScript, carga JS retrasada y retraso de JS: estas características se reducen, retrasan y retrasan JavaScript.En otras palabras, han ayudado a eliminar todos los problemas de unir JS y mejorar el tiempo de carga de mi página construida con oxígeno o elemento.Al reducir el tiempo de ejecución de JS y retrasar JS a la interacción del usuario, WP Rocket guarda algunos recursos y prioriza lo que debe mostrarse primero.
JavaScript Optimization-Source: WP Rocket Plugin Finalmente, asegúrese de optar por un proveedor de alojamiento rápido y confiable cuando comience el siguiente proyecto de WordPress con el generador de páginas. TD> Siga las mejores prácticas de WordPress de rendimiento para la optimización de profundidad de su sitio construido con oxígeno o elemento. Las similitudes y diferencias entre oxígeno y elemento. La elección entre oxígeno y elemento: rendimiento incorporado, características clave y ambos constructores son muy buenos constructores avanzados de páginas de arrastrar y soltar para desarrolladores de WordPress, pero ¿cómo compiten en funciones? El código limpio, una interfaz simple y las posibilidades de diseño de última hora son una necesidad hoy en día, pero las funciones de optimización de rendimiento incorporadas realmente pueden ayudarlo a acelerar su sitio. Entonces, ¿cómo es el panorama de rendimiento “nativo” para oxígeno y elemento? Estamos a punto de averiguarnos. Las características de rendimiento incorporadas (oxígeno) Oxygen Builder se construyen con la filosofía para cargar solo lo que se necesita y cuando sea necesario.
Crea un código HTML muy limpio para evitar el código hinchado. Otros constructores crean una gran cantidad de divicidades incluso para elementos simples, como H1, H2, por ejemplo.
Hay una pestaña “Eliminador de hinchazón” en la configuración de oxígeno:
Eliminador de hinchazón – Fuente: Oxígeno
Una función de caché CSS también se activa de forma predeterminada:
Cache CSS – Fuente: Oxígeno construido en funciones de rendimiento (Elementor)
Elementor también viene con la función de cargar su sitio más rápido, con una carga dinámica de activos de código innecesarios. Desde Elementor 3.0, se ha mejorado el mecanismo de carga dinámica y la renderizado CSS. Cuando se crea y se visita una página por primera vez, Elementor crea un caché de todos los elementos con valores dinámicos. Esto es ideal para un sitio web creado con ACF, por ejemplo, que tiene que cargar mucho contenido dinámico y de estilo.
Características clave similares
Los creadores de páginas visuales tienen interfaces intuitivas que son fáciles de usar. Los artículos personalizados (widgets y módulos) se encuentran para ambos constructores:
La capacidad de diseñar publicaciones y páginas de WordPress sin ninguna codificación: ambos constructores ofrecen un estilo fuerte para cada módulo, incluida una pestaña “avanzada” con opciones de CSS.
| Interfaz de estilo de oxígeno | interfaz de estilo elemental |
|
|
| Sitios demostrativos de oxígeno (conjuntos de diseño) | sitios demostrativos (biblioteca) |
| bloques prefabricados (oxígeno) | bloques prefabricados (elementor) |
|
| Modo de diseño receptivo (oxígeno) | Modo de diseño receptivo |
|
|
