Elementor Update aborda los aspectos vitales de la web más importantes

El popular complemento de WordPress para el creador de páginas Elementor ha anunciado una actualización que se centra en cargas de página más rápidas. La actualización mejora la eficiencia de la entrega de archivos JavaScript y CSS. Estos cambios en Elementor versión 3.2 prometen una mejora en las puntuaciones de Core Web Vitals.

Después del anuncio del elementor:

"La empresa ha optimizado su ciclo de desarrollo y ha creado un plan de cinco pistas que se centra en determinadas áreas de rendimiento, como la carga optimizada de activos, bibliotecas JavaScript / CSS, JavaScript y CSS internos optimizados, procesos de renderizado y backend optimizados y un código más sencillo. alineado.

El plan de Elementor garantiza que todos los aspectos del rendimiento, delantero y trasero, se mejoren enormemente. "

Elementor también introdujo una forma para que los editores especifiquen cómo las fuentes de Google pueden cargarse de manera más eficiente:

“Una nueva función de carga de Google Fonts personaliza la experiencia de carga de los usuarios y les permite cambiar la forma en que Elementor carga Google Fonts. La configuración del panel de Elementor ofrece Auto, Swap, Block, Optional y Fallback. "

Core web vitals

Los Core Web Vitals son métricas que se utilizan para medir la experiencia del sitio web de los usuarios reales en dispositivos móviles. Las mediciones las registran los usuarios en Chrome que han optado por proporcionar la información, que luego se registra como un informe de CrUX (Experiencia de usuario de Chrome).

Estos datos se utilizan para generar las puntuaciones de Core Web Vitals para sitios web, que a su vez se convertirán en una señal de clasificación en junio de 2021.

Alojar un sitio web en un servidor rápido no mejora los signos vitales principales de la web porque los problemas que afectan negativamente a los signos vitales principales de la web están relacionados con la codificación del sitio web.

La entrega de código no optimizado más rápido desde un servidor web rápido no elimina el cuello de botella causado por el código no optimizado que debe descargarse y procesarse en un dispositivo móvil.

Debido a esto, es importante que los creadores de plantillas de sitios web y los creadores de páginas hagan que el código en el que sus usuarios confían sea más eficiente.

Lo que Elementor anunció es un esfuerzo renovado para servir el código del sitio web de manera más eficiente para que los editores puedan brindar a los visitantes de su sitio web una mejor experiencia de usuario y ayudar a los editores a clasificar mejor.

Por qué JavaScript y CSS pueden ser problemáticos

JavaScript y las hojas de estilo en cascada (CSS) son archivos que proporcionan funcionalidad y estilo visual a las páginas web, respectivamente. Un archivo JavaScript puede hacer que un formulario de contacto funcione, y la hoja de estilo en cascada le dice al navegador qué colores y fuentes usar (junto con otros datos de estilo visual).

Cuando una persona visita una página web, el navegador descarga estos archivos para crear (representar) la página web. Sin embargo, las páginas web dejarán de mostrarse cada vez que se encuentre un archivo JavaScript o CSS. Por eso se denominan Archivos de bloqueo de procesamiento.

Si bien existen tácticas de codificación para retrasar la descarga de los archivos o la descarga paralela (al mismo tiempo que otros archivos), esos archivos aún deben activarse (por así decirlo) para completar la representación de la página web.

El enfoque ideal es minimizar la cantidad de archivos que descarga. El mejor enfoque es descargar la cantidad mínima absoluta de JavaScript y CSS que se requiere para crear una página web determinada.

Por ejemplo, si una página web no contiene un formulario de contacto, no es necesario descargar los archivos necesarios para crear un formulario de contacto.

Este enfoque más eficiente para descargar JavaScript y CSS se conoce como carga condicional. Eso significa descargarlos cuando los necesite y no descargarlos cuando no los necesite.

Y eso es parte de lo que anunció Elementor.

Elementor es más eficiente ahora

Lo que Elementor cambió fue descargar muchos archivos JavaScript solo cuando son necesarios. Esto se denomina carga de archivos condicional. Elementor me confirmó que tienen planes de continuar cargando CSS en un futuro cercano bajo ciertas condiciones.

Según Elementor:

Las bibliotecas "The Lightbox", "Screenful", "Dialog" y "Share Links" se cargan bajo ciertas condiciones ... "

Elementor también anunció:

"El archivo CSS para E-Icons también se ha dividido en dos bibliotecas separadas, front-end y back-end, y ahorra hasta 50 KB al cargar una página en particular".

Otra mejora es que CSS, que solo afecta a los visitantes del sitio web que son editores, no se carga automáticamente para todos los usuarios. Es decir, si un visitante del sitio web no es un editor, su navegador descargará menos archivos para representar el sitio web, lo que ahorrará 17 kilobytes.

El equipo de Elementor compartió esto conmigo:

“Tanto nuestro equipo de investigación y desarrollo como nuestro equipo de SEO han estado trabajando en este proyecto durante los últimos 6 meses para garantizar que Elementor sea totalmente compatible con el próximo cambio en el algoritmo de Google de Web Vitals. Nos enfocamos en reducir la cantidad de elementos DOM, optimizar el proceso de renderizado, cargar activos dinámicos y mucho más. "

Elementor publica videos sobre cómo mejorar los elementos clave de la web

Captura de pantalla del video de optimización para Elementor Core Web Vitals

Además de los cambios de código, Elementor dio el paso adicional de proporcionar cursos de YouTube para ayudarlos a comprender mejor las mejores prácticas para crear sitios web que ofrezcan una experiencia de usuario más rápida.

“Para guiar a los usuarios a través de esta actualización, hemos creado excelentes materiales educativos, incluido un nuevo curso de mejora del rendimiento en su sitio web. Esto analizará todo el proceso, ya que el rendimiento se basa en una combinación de factores, no solo en el sitio web de su sitio web. "

Consulte los cursos de optimización de Elementor en YouTube aquí.

Elementor toma la iniciativa

Es alentador ver que cada vez más empresas realizan estas importantes actualizaciones. El anuncio de Elementor es un desarrollo emocionante para los usuarios del complemento, y está ejerciendo presión sobre el resto del ecosistema de WordPress, desde los complementos hasta los creadores de temas, para mantenerse al día con Elementor.

Cita

Introducción a las funciones para rutas de texto y capas de máscara.