homefinance blog
¿Su sitio de WordPress será rápido si elige Beaver Builder para su próximo proyecto de desarrollo?¡Quédate con nosotros y recibirás una respuesta a tu pregunta!Ya sea que construya un sitio web simple o complejo, Beaver Builder es uno de los mejores marcos existentes del mercado.Sin embargo, las funciones avanzadas también significan contenido duro, lo que plantea algunos posibles problemas de rendimiento.La velocidad de su sitio se ve afectada por varios factores, incluido el tamaño y la complejidad de su sitio, y cuantos más archivos contenga su sitio, más lento será el contenido que accederá a su contenido.
Por lo tanto, primero probaremos la velocidad de un sitio construido con Beaver Builder. Luego compartiremos algunos consejos técnicos que puede aplicar para mejorar fácilmente su rendimiento. En resumen, el artículo responderá preguntas como: ¿Qué tan rápido es Beaver Builder? ¿Beaver Builder está ralentalmente un sitio? ¿Hay formas fáciles de acelerar? Antes de analizar el rendimiento de los KPI, ofrecamos una breve presentación general de los productos clave de Beaver Builder. – Beaver Builder Lite: Generador de página gratuito disponible en wordpress.org que controla el contenido de su página con módulos (texto, HTML, títulos, iconos, botones. – Plugin Beaver Builder Pro: el generador de página premium que controla el contenido de su página (((( cursores, formularios de contacto, pestañas, tablas de precios, etc.). Expanda Beaver Builder en un constructor de sitios completamente dinámico, con aspectos personalizados de tipos de publicaciones, generador de archivos y un generador de páginas de WooCommerce. En nuestra auditoría de rendimiento, probamos el Beaver el castor Builder (Plugin Pro) Generador de páginas y el tema Beaver Builder. El sitio demostrativo y los módulos de constructores de Beaver: instalé una de sus demostraciones , llamado “Agencia Beaver”, con módulos como testimonios, textos, imágenes, números, botones de exhortación y presentación completa del equipo con sus imágenes.
Herramientas de rendimiento de demostración de la agencia de Beaver utilizadas: Google PageSpeed Insights en Mobile y WebPagetest.org (iPhone X con un servidor ubicado en París). Tomamos un enfoque móvil completo. KPI Medido: la nota general para PageSpeed Insights, más sus seis valores. Tenga en cuenta que el retraso en la primera introducción (FID) no se puede medir, porque sus datos se basan en usuarios reales. Sin embargo, tenemos el tiempo de bloqueo total (TBT), que se correlaciona fuertemente con FID. ¡También medimos el tiempo de carga completo y el número de solicitudes http.hai para hacer la auditoría! Los resultados de rendimiento de Beaver Builder en Mobile son bastante buenos. Obtuve 87/100 en Google PageSpeed Insights: el puntaje no es malo, pero no está en el área verde.
Mobile Score Beaver Builder: 87/100-Source: PSI Ahora echemos un vistazo a nuestros puntajes de KPI móviles:
Todos los indicadores son En buena forma, a excepción de la pintura de contenido más grande (LCP) y la primera pintura de contenido (FCP) que podría mejorarse.
Al verificar las secciones de “oportunidades” y “diagnóstico”, noté que podríamos hacer algunas optimizaciones, como eliminar los recursos que bloquean la representación, la reducción de CSS no utilizada, la reducción de JS no utilizada y el aplazamiento de las imágenes fuera de la pantalla. Performance y diagnóstico cuando se usa el constructor de Beaver Beaver – Fuente: psi
Beaver Builder? Sí, y el código es muy fácil y limpio. ¿Hay alguna función de rendimiento construida? No, pero está bien porque Beaver Builder deja la optimización avanzada al mejor caché para WordPress. Luz por diseño: no hay demoras en la construcción de la página, además de que la interfaz es inmaculada y sin desorden. El código no usa códigos cortos, por lo que el código no se confundirá incluso si decide dejar de usar Beaver Builder. Interfaz Lean – Fuente: Beaver Builder  Los módulos no utilizados no están cargados: Beaver Builder carga y solo reproduce los elementos necesarios para una página en particular. Por ejemplo, si no usa una presentación de diapositivas en la página, no cargan CSS/JS. Esto se hace automáticamente, sin la necesidad de ganchos. El código limpio y el complemento se actualizan con frecuencia: su código es muy fácil y ya está optimizado para el rendimiento básico. Dejan las características de rendimiento avanzadas de expertos como WP Rocket.  Problemas de baja compatibilidad: Beaver Builder no proporciona ninguna función de optimización incorporada, por lo que no existe una “doble optimización”, lo que se superpone a todo el proceso. En cambio, Beaver Builder emite HTML estático, CSS y JavaScript para que se cargue aún más rápido con un complemento de caché. Beaver Builder le permite diseñar todo su sitio utilizando el modo de edición receptiva. Se asegura que su sitio móvil contenga solo los elementos esenciales, una estrategia clave para mantener la velocidad y la alta clasificación. Modo de edición: Beaver Builder Beaver Builder ya es un marco rápido. En combinación con algunas técnicas y herramientas de optimización, puede entregar contenido a velocidad de luz. Veamos cómo. 10 Consejos de rendimiento para acelerar Beaver Builder Cualquier cosa relacionada con la optimización del código, el servidor y la imagen acelerarán Beaver Builder. Una forma efectiva de aumentar el rendimiento de Beaver Builder es optimizar los valores de la web de Web Core y aplicar Google PageSpeed Insights. En la siguiente sección, encontrará una lista de técnicas de optimización que puede usar para que su sitio web de Beaver Builder sea más rápido. Para cada consejo de optimización, encontrará los valores de rendimiento que optimizará y las recomendaciones de PageSpeed Insights que abordará en consecuencia. 1. Optimizar el rendimiento de JS ¿Cómo optimizar el código JavaScript de su sitio de WordPress? Simplemente elimine a JS sin usar y posponga el JS inútil (no todas las funciones deben estar disponibles simultáneamente). Use async o diferir los atributos si desea que el script cargue asíncrono o recupere su js solo después de que se haya cargado la página: // la función Ejemplo.js se ha cargado sin interrumpir la página // La función Ejemplo.js Después de que la página esté completamente sobrecargada a continuación, puede ver la diferencia entre los activos sincrónicos y asíncronos. El JS síncrono debe esperar a que se cargue el activo anterior, pero los JS asíncronos pueden cargar el guión al mismo tiempo. Sincron vs asíncrono – Fuente: KeyCDN En última instancia, debe evitar tareas largas que monopolizan el hilo principal durante largos períodos, causando la “congelación” de la pantalla. Se han mejorado los valores principales de los elementos web vitales:  La pintura de contenido más grande (LCP) – “Elimine los recursos que bloquean la representación”, “reduce el JavaScript no utilizado”. Primer retraso de entrada (FID) – “Reduzca el tiempo de ejecución de JavaScript”. Se han mejorado los valores del faro: Tiempo de bloqueo total (TBT). 2. Elimine CSS no utilizado o optimice la entrega de CSS al eliminar las reglas no utilizadas de las hojas de estilo y posponer el contenido de CSS no utilizado por encima de la página, puede reducir la actividad en la red que desperdicia byte al cargar la página. La optimización de la entrega de CSS también significa mejorar los tiempos de representación con la técnica crítica de CSS y la eliminación de los errores de CSS que bloquean la representación. La técnica se llama “CSS en línea” en los elementos críticos de la página para acelerar el tiempo de carga de su sitio con Beaver Builder. En inglés simple, mezcle el CSS crítico con HTML en la sección principal: crítico de CSS en línea para optimizar la entrega de CSS de elementos web vitales ha mejorado: la pintura de contenido más grande (LCP): “eliminar los recursos que bloquean la representación”, “Reducir CSS sin usar “. Se han mejorado los valores del faro: Primera pintura contenta (FCP): “Asegúrese de que el texto permanezca visible durante la fuente web”, “Reduzca CSS sin usar”. 3. Reduzca y combine su código La minimización de los archivos de código puede reducir el tamaño de carga útil de su sitio, lo que, a su vez, acelera los tiempos de carga. Minimizar y combinar sus archivos CSS y JS hará que Beaver Builder sea más rápido. La combinación de su código tiene como objetivo reducir el número de solicitudes HTTP hechas por un navegador reemplazando varios archivos CSS distintos con un solo archivo CSS.  Puede usar una herramienta en línea como MinifyCode.com si se siente cómodo editando manualmente los archivos CSS y JS. La forma más sencilla y segura es usar WP Rocket, un complemento de WordPress que acelera su sitio al consultar, minimizar y comprimir CSS y JS (LCP). Valores mejorados del faro: Primera pintura contentful (FCP) – “Minify CSS”, “Minify JS”. 4. Evite la carga de CSS y JS en las páginas de archivo para garantizar un rendimiento óptimo, debe evitar la carga de archivos CSS y JavaScript en las páginas de archivo (publicaciones de blog antiguas, plantillas de publicaciones personalizadas, etc.). Para hacer esto, solo tiene que agregar este código al archivo Functions.php del castor del castor del tema copiando/pegando debajo de las líneas de texto: if (is_arhiva ()) {remove_action (‘wp_enqueue_scripts’, ‘flBuilder :: licout_styles_scripts’ ); } 5. Optimice las imágenes de optimización de imágenes significa obtener el tamaño de archivo más pequeño sin comprometer la calidad y el uso de un formato de generación nueva, como WebP. El complemento Imagify puede optimizar automáticamente las imágenes utilizadas en un sitio de Beaver Builder. Además, debe incluir los atributos de ancho y altura y proporcionar las dimensiones de imagen correctas para cada dispositivo. Las imágenes optimizadas se cargan más rápido y consumen menos datos celulares. Al crear una página con Beaver Builder, pase a “Edición receptiva” y asegúrese de entregar el tamaño correcto en Mobile (360 PX), como se muestra a continuación: Optimización de imágenes con Beaver Builder – Fuente: Beaver Builder Page Builder Los valores básicos de los elementos web vitales se han mejorado: cambios acumulativos (CLS).Los valores del faro han mejorado: la pintura de contenido más grande (LCP): “distribuir imágenes en formatos de última generación”, “Imágenes con la dimensión correcta”, “Los elementos de la imagen no tienen un ancho explícito” y “Codificación de imágenes eficientes” .6.Cargue sus imágenes La implementación de Lazy Load es otro paso que puede tomar para optimizar sus imágenes en Beaver Builder.Elija reproducir las imágenes sobre el pliegue con prioridad, para que los usuarios no perciban su sitio como lento. Carga perezosa explicada: Fuente: WebDev puede manejar el script de carga perezosa para cada contenido de medios en su biblioteca de WordPress o puede elegir instalar un WordPress perezoso que ofrezca cualquier imagen fuera de la pantalla. Se ha mejorado el valor principal de los elementos web vitales: primera pintura de contenido (FCP). Los valores del faro han mejorado: tiempo para interactivos (TTI)-“pospone las imágenes fuera de la pantalla”, “La imagen más grande de la pintura Contentul no era floja”. 7. Use un CDN La mejor manera de entregar su contenido rápido es con una red de entrega de contenido. Los CDN son redes en todo el mundo que sirven archivos más cerca de los usuarios y reducen el tiempo de descarga. Como resultado, el valor del tiempo Torst Byte mejorará y sus usuarios recibirán el contenido más rápido. WP Rocket también aplica CDN en imágenes de Beaver Builder, incluido Paralax. Significa que hay una compatibilidad completa con RocketCDN que puede configurar con un solo clic. LCP se ha entregado más rápido en todo el mundo que un CDN -Surce: WP Rocket CDN mejoró los valores del faro: la pintura de contenido más grande (LCP) y el tiempo para el primer byte (TTFB): “Reduzca los tiempos de respuesta del servidor”.8. Active la compresión de texto, también puede comprimir el texto utilizando la opción GZIP: esto reducirá el tamaño de sus archivos y los visitantes disfrutarán de un rendimiento más rápido.El objetivo es minimizar el número total de bytes de red con un complemento como WP Rocket que activa automáticamente la compresión GZIP.La compresión GZIP en WP Rocket permite que HTML, CSS y JS contengan la compresión para que los archivos enviados desde el servidor al navegador sean más pequeños.Se ha mejorado el valor principal de los elementos web vitales: primera pintura de contenido (FCP).Los valores del faro han mejorado: La pintura de contenido más grande (LCP) – “Active la compresión del texto”. 9. Reducir TTFB TTFB es una medida para determinar la capacidad de respuesta de un servidor web y contribuir a la velocidad de página general. Para reducir los tiempos de respuesta TTFB y del servidor, recomendamos optimizar las bases de datos de consultas del servidor o migrar a bases de datos más rápidas. Como nota secundaria, esta auditoría falla cuando el navegador espera más de 600 ms. Para optimizar TTFB, debe usar un proveedor de alojamiento rápido y potente, usar caché y optimizar su base de datos. El propósito de ajustar el rendimiento de la base de datos es minimizar el tiempo requerido para que su consulta se juegue, utilizando bien los recursos de su sistema. Elija un complemento como WP Rocket que pueda almacenar su contenido, limpiar y optimizar la base de datos en diferentes niveles: publicaciones, comentarios o incluso temporales. Se ha mejorado el valor básico de los elementos web vitales: Primera pintura contenta (FCP): “reducir el tiempo de respuesta inicial”, “sirve un caché efectivo para los activos estáticos”. 10. Use las funciones de respuesta de Beaver Builder Builder es la mejor manera de proporcionar un sitio web fácil de usar y eficiente. Recuerde que la compatibilidad con dispositivos móviles es una de las señales incluidas en Google Page Experience, el último factor de clasificación de SEO.  Modo de edición receptiva: Fuente: Beaver Builder Accelerating Beaver Builder con WP Rocket WP Rocket puede ayudarlo fácilmente a obtener un mejor rendimiento móvil en un sitio web creado con Beaver Builder. Veamos cómo! Mobile 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)  WP Rocket ha construido en compatibilidad con Beaver Builder: eliminamos nuestro caché cada vez que se actualiza el aspecto de Beaver Builder. escenarios  Escenario #1 Mobile Rendimiento de mi sitio de prueba sin cohete WP (como resultado de la primera sección) Nuestra nota de rendimiento general fue 87/100 en móvil (intervalo naranja), lo que significa que, según Lighthouse, hay margen de mejora.  Escenario #2-Mobile Rendimiento de mi sitio de prueba con cohete WP:  El puntaje de PageSpeed Insights en el móvil: 99/100 debido |
puntajes (sin cohete WP) | (WP Rocket) |
| Nota general | 87/100 | 99/100 |
| fcp | 3.0 s (en naranja ) | 1, 1 s (en verde) |
| y | 4.3 s | 3.6 s |
| lcp | 3.0 s (en naranja) | 1.5 s (en verde) |
| tti | 3.0 s | 1.1 s |
| tbt | 0 ms | 0 ms |
| cls | 0 | 0 |
| Tiempo completo cargado | 2.339 S | 1.104 S |
| solicita http | 44 | 12 |
Por supuesto, nuestra sección de auditoría pasada está en una mejor forma. Por ejemplo, hemos eliminado los recursos que bloquean la representación optimizando CSS y JS. Y la función de carga perezosa utilizada en las imágenes ayudó a priorizar las de arriba del pliegue. PageSpeed Insights-Past Audits Aquí están las opciones de cohetes WP que usé para obtener un puntaje 99/100 en el móvil:
Activé la opción de caché para dispositivos móviles:
Opción de caché para dispositivos móviles – WP Rocket
Optimicé el código JS minimizando JS y posponiendo y posponiendo su ejecución:
Minimizar el código de cohete JS – WP
APROMENTO Y RETRAJE DE JS – WP ROCKET
Tenemos la entrega de CSS optimizado minimizando/combinando nuestros archivos CSS y eliminando CSS no utilizado:
Minimizar y combinar archivos CSS – WP Rocket
Optimización de la entrega de CSS – WP Rocket
Apliqué a las imágenes los guiones de carga perezosos: opción de carga perezosa – WP Rocket
Limpié la base de datos:
Optimización del cohete de base de datos WP Algunas notas sobre lo que sucedió inmediatamente después de la activación: el cohete WP utilizó la compresión GZIP. Si desea verificar si la compresión GZIP se activa en su sitio web de WordPress construido con Beaver Beaver Builder, consulte la compresión de GZIP y escanee su sitio allí. Finalmente, podríamos haber usado RocketCDN para aumentar la velocidad del sitio para todos los usuarios de todo el mundo:
Rockkeetcdn concluyendo Beaver Builder tiene un extenso conjunto de productos fuertes para ayudarlo con su proyecto digital, y no hay alta velocidad al usarlos. No vengo con un menú de optimización construido, porque el equipo permite la optimización avanzada de profesionales como WP Rocket. El uso de un poderoso complemento de caché puede ayudarlo a acelerar su sitio web de WordPress optimizando a otros, el código, la base de datos e imágenes. ¿Usas Beaver Builder en tu proyecto? ¡Pruebe WP Rocket si desea mejorar fácilmente el rendimiento de su sitio! No tiene que preocuparse: lo hemos cubierto con nuestra garantía de reembolso de dinero de 14 días.
Tags ¿Qué tan rápido es Beaver Builder y cómo
