Cómo Elementor prioriza y mejora el rendimiento de los sitios web
Publicado: 2021-04-26Hablemos de la hoja de ruta de productos de Elementor para 2021, específicamente la optimización del rendimiento. Si bien continuamos planificando y desarrollando nuevas funciones interesantes solicitadas por nuestra comunidad, este año nuestra misión es mejorar el rendimiento de los sitios web de nuestros usuarios. En esta publicación, me gustaría compartir con ustedes algunas de las acciones que ya hemos tomado para lograr este objetivo y hablar un poco sobre lo que vendrá el próximo año.
El rendimiento del sitio web ha sido un problema para los creadores web desde los albores de Internet. Siendo yo mismo un creador web, siempre haría preguntas como:
- “¿Mi sitio es demasiado lento? ¿Está provocando que los usuarios abandonen o perjudicando mi clasificación de Google? "
- "¿Debo dejar de lado una determinada funcionalidad para mejorar la velocidad del sitio?"
- Y, por supuesto: “¿Qué diablos sigue causando mis problemas de rendimiento? ¡Pensé que cubrí todas las bases aquí! "
Entonces, sí, obtener un rendimiento estelar de un sitio web siempre ha sido un desafío para los creadores web, independientemente de la plataforma o las herramientas que hayamos estado utilizando. Con tantos factores relevantes que afectan el rendimiento, no siempre es fácil aislar el problema real, y mucho menos encontrar una solución. Esta es exactamente la razón por la que hemos creado este curso en video de cinco partes sobre rendimiento . En esta serie, profundizamos en cada factor importante que puede estar afectando el rendimiento de su sitio, ya sea que esté relacionado con Elementor o no, y le mostramos cómo optimizarlo.
Para hacer las cosas realmente interesantes, Google anunció recientemente que el rendimiento del sitio web ahora jugará oficialmente un papel en su algoritmo de clasificación. Esto pone el tema del rendimiento en el centro de atención, lo que genera preocupaciones entre los propietarios de sitios web de todo el mundo. Es por eso que durante los últimos seis meses, nuestros equipos de I + D y SEO han estado trabajando incansablemente para asegurarse de que los sitios web de Elementor superen esta actualización y pasen con gran éxito.
Cuando se trata del misterioso algoritmo de Google, sabemos que se necesitaría mucho más que nuestra palabra para que se sienta seguro. Por lo tanto, como un servicio para nuestros usuarios y la comunidad de creadores web, organizaremos un seminario web gratuito sobre rendimiento web con los principales expertos en SEO para discutir el próximo cambio. Esto no solo cubrirá la actualización en sí, sino que también detallará cómo este cambio puede afectar su sitio web y qué puede hacer para prepararse. El seminario web se llevará a cabo el 28 de abril, así que asegúrese de reservar su asiento .
Sin embargo, dejando de lado todos los cursos y seminarios web, nuestro objetivo principal es asegurarnos de que nuestro producto no afecte negativamente el rendimiento de su sitio. Esto ha sido y seguirá siendo una de nuestras principales prioridades. Entonces, sin más preámbulos, profundicemos en los esfuerzos de optimización del rendimiento de Elementor, como se establece en nuestra Hoja de ruta de productos 2021.
Tabla de contenido
- Nuestro plan de cinco vías para mejorar aún más el rendimiento
- Pista 1: "Cargue solo lo que necesita"
- Pista 2: Reduzca el uso de bibliotecas JavaScript / CSS y aproveche la compatibilidad con navegadores nativos
- Pista 3: mejorar y optimizar JavaScript y CSS internos existentes
- Pista 4: Optimización de los procesos de procesamiento y backend
- Pista 5: Salida de código mejorada, más delgada y mejor
- Recursos gratuitos de Elementor sobre rendimiento
Nuestro plan de cinco vías para mejorar aún más el rendimiento
Más allá de la optimización de nuestro ciclo de desarrollo de productos, nuestra visión para mejorar el rendimiento de Elementor consiste en un enfoque de cinco pistas. Ya hemos realizado algunas mejoras significativas en algunas de estas áreas, mientras que otras se abordarán en las próximas versiones de Elementor.
También nos enorgullece decir que el rendimiento se ha convertido en una parte integral de nuestra línea de desarrollo y lanzamiento. Cada versión de Elementor ahora se valida con una variedad de métricas de rendimiento para garantizar que ninguna característica nueva, ajuste o corrección tenga un efecto negativo en los sitios web existentes creados con Elementor.
Ahora repasemos nuestras pistas una por una:
Pista 1: "Cargue solo lo que necesita"
Estamos mejorando la forma en que Elementor carga los activos para garantizar que solo cargue lo que necesita en cada página. En las últimas versiones de Elementor y Elementor Pro, hemos introducido el experimento de carga de activos optimizado para mejorar el rendimiento del front-end de un sitio web, acelerando cada página cargando solo las funcionalidades necesarias. Puedes aprender más acerca de esto aquí.
También hemos agregado opciones de carga diferida a ciertos widgets y continuaremos haciéndolo en el futuro. Por ejemplo, el widget de video incluye una opción de carga diferida, lo que le brinda la capacidad de reemplazar el reproductor de video completo incrustado con una miniatura de imagen estática. La imagen volverá al video completo una vez que un visitante interactúe con ella.
Al utilizar estas técnicas de carga diferida, puede reducir en gran medida el tamaño de la página y la cantidad de solicitudes HTTP durante la carga inicial de la página, lo que conducirá a una experiencia mucho más rápida para sus visitantes.
Pista 2: Reduzca el uso de bibliotecas JavaScript / CSS y aproveche la compatibilidad con navegadores nativos
Desde que lanzamos Elementor hace casi cinco años, los navegadores web han evolucionado mucho. Ahora, algunas características que requerían bibliotecas externas hace cinco años se pueden implementar utilizando el soporte de navegador nativo. Esto hace que la implementación sea mucho más eficiente y, en algunos casos, puede reducir en gran medida el tiempo de ejecución de JavaScript.
Un ejemplo de esto es la biblioteca Waypoints que, en ciertos casos, fue reemplazada por la API nativa de Intersection Observer.
Nuestro objetivo es reducir el uso de este tipo de bibliotecas CSS y JavaScript y reemplazarlas con soporte nativo para navegadores siempre que sea posible.
Pista 3: mejorar y optimizar JavaScript y CSS internos existentes
Planeamos continuar mejorando y optimizando el JavaScript y CSS interno existente de Elementor.
Ejemplos de esto incluyen la capacidad de configurar el método de carga de Google Fonts y la propiedad de visualización de fuente agregada a la biblioteca Font Awesome. Estas mejoras deberían reducir los procesos de bloqueo de procesamiento para estos archivos y proporcionar una optimización adicional de los archivos CSS y JS existentes.
Pista 4: Optimización de los procesos de procesamiento y backend
En Elementor 3.0, mejoramos el mecanismo dinámico de carga y representación de CSS. Elementor utilizado para escanear páginas en busca de elementos con valores dinámicos en cada carga de página. A partir de Elementor 3.0, cuando se crea y se visita una página por primera vez, Elementor crea un caché de todos los elementos con valores dinámicos. Luego, en lugar de escanear la página en busca de elementos dinámicos cada vez que se visita una página, la lista se obtiene del caché y se procesa inmediatamente. Esto mejora significativamente los tiempos de procesamiento del lado del servidor y da como resultado mejoras notables. Planeamos implementar mejoras de análisis adicionales en Elementor en el futuro. Puede obtener más información al respecto en esta publicación de blog.
Pista 5: Salida de código mejorada, más delgada y mejor
Finalmente, planeamos continuar mejorando y reduciendo la salida de código que genera Elementor para reducir el tamaño del DOM.
Ya comenzamos a realizar estas mejoras en Elementor 3.0, donde eliminamos tres elementos de envoltura para crear un DOM más pequeño y simplificar la salida del código.
En Elementor 3.2, eliminamos dos elementos más para lograr reducciones aún mayores en el tamaño del DOM. Se planean más reducciones en un futuro próximo.
Como puede ver, se pueden esperar nuevas funciones, mejoras y revisiones en 2021 y más allá. Todo esto se hace en un esfuerzo por ayudarlo a continuar creando sitios web increíbles con un mejor rendimiento. Si aún no se ha actualizado a la última versión, asegúrese de hacerlo para disfrutar de estas y otras mejoras.
Recursos gratuitos de Elementor sobre rendimiento
Como sabrá, hay muchos factores no relacionados con Elementor que afectan el rendimiento de su sitio web de WordPress. Estos incluyen optimización de imágenes, alojamiento web, proveedores de servidores, CDN y más. Dado que nuestro objetivo es capacitar a nuestros usuarios para que implementen una optimización completa de WordPress, hemos creado un vasto banco de recursos de tutoriales, seminarios web y artículos gratuitos para ayudarlo a aprender más sobre el rendimiento.
- Hemos creado un curso en video sobre el rendimiento ; en esta serie de cinco partes , repasamos todos los factores importantes que pueden afectar su rendimiento y cómo puede optimizarlo.
- El 28 de abril, organizaremos un seminario web sobre Core Web Vitals con los principales expertos en SEO para discutir el próximo cambio de algoritmo de Google y su impacto en sus sitios web. Guarde su asiento aquí.
- También hemos publicado una publicación de blog detallada sobre cómo acelerar los sitios web de WordPress, junto con otros artículos centrados en el rendimiento sobre temas como la elección del alojamiento web, el almacenamiento en caché de complementos, la ejecución de pruebas de velocidad, el uso de WP Rocket y más.
Continuaremos creando seminarios web, publicaciones de blog y videos gratuitos para abordar otros aspectos del rendimiento de WordPress con el fin de continuar apoyando a la comunidad de creadores web.