El popular plugin de creación de páginas de WordPress, Elementor, anunció una actualización centrada en ofrecer cargas de página más rápidas. La actualización presenta eficiencias mejoradas en la forma en que se entregan los archivos JavaScript y CSS. Estos cambios en la versión 3.2 de Elementor prometen mejorar las puntuaciones de Core Web Vitals.
Según el anuncio de Elementor:
“La empresa ha optimizado su ciclo de desarrollo y ha creado un plan de cinco pistas centrado en áreas de rendimiento específicas como carga de activos optimizada, bibliotecas JavaScript / CSS, JavaScript y CSS internos optimizados, procesos de renderizado y backend optimizados y una salida de código más delgada.
El plan de Elementor garantiza que todos los aspectos del rendimiento reciban mejoras significativas, tanto por delante como por detrás «.
Elementor también ha introducido una forma para que los editores indiquen cómo cargar Google Fonts de manera más eficiente:
“Una nueva función de carga de fuentes de Google personaliza la experiencia de carga de los usuarios, permitiéndoles modificar la forma en que Elementor carga las fuentes de Google. La configuración del panel de Elementor ofrece funciones automáticas, de intercambio, de bloqueo, opcionales y de respaldo «.
Tabla de Contenidos
Core Web Vitals de Google
Core Web Vitals son métricas diseñadas para medir la experiencia de la página web para usuarios reales en dispositivos móviles. Las mediciones las recopilan los usuarios de Chrome que han optado por proporcionar la información que luego se recopila como el Informe de experiencia del usuario de Chrome (CrUX).
Son estos datos los que se utilizan para crear 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 mejorará las puntuaciones básicas de web vitals porque los problemas que afectan negativamente a las puntuaciones básicas de web vitals están relacionados con la forma en que se codifica el sitio web.
La entrega de código no optimizado más rápido desde un servidor web rápido no solucionará el cuello de botella causado por ese código no optimizado que debe descargarse y procesarse en un dispositivo móvil.
Por eso es importante que los creadores de plantillas de sitios web y 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 su esfuerzo renovado para entregar el código de la página web de manera más eficiente para ayudar a los editores a brindar a los visitantes de su sitio una mejor experiencia de usuario y ayudar a los editores a clasificarse mejor.
Por qué JavaScript y CSS pueden ser problemáticos
JavaScript y las hojas de estilo en cascada (CSS) son archivos que, respectivamente, proporcionan funcionalidad y estilo visual a las páginas web. 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 (entre otros datos relacionados con el estilo visual).
Cuando una persona visita una página web, el navegador descargará estos archivos para crear (representar) la página web. Pero la representación de la página web se detendrá cada vez que encuentre un archivo JavaScript o CSS. Por eso se llaman Archivos de bloqueo de procesamiento.
Si bien existen tácticas de codificación para retrasar la descarga de los archivos o descargarlos en paralelo (simultáneamente con 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 se deben descargar. El mejor enfoque es descargar la cantidad mínima absoluta de JavaScript y CSS necesaria 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 denomina carga condicional. Eso significa descargarlos cuando sean necesarios y no descargarlos si no son necesarios.
Y eso es parte de lo que anunció Elementor.
Elementor ahora es más eficiente
Lo que Elementor cambió fue descargar muchos archivos JavaScript solo cuando son necesarios. Eso se llama cargar archivos de forma condicional. Elementor me confirmó que tienen planes de comenzar a cargar CSS de forma condicional también en un futuro próximo.
Según Elementor:
«Las bibliotecas de enlaces Lightbox, Screenful, Dialog y Share se cargan condicionalmente …»
Elementor también anunció:
«El archivo CSS de e-icons también se ha dividido en dos bibliotecas separadas, frontend y backend, ahorrando hasta 50 KB en cualquier carga de página determinada».
Otra mejora es que el CSS que solo afecta a los visitantes del sitio que son editores no se cargará automáticamente para todos los usuarios. Eso significa que si un visitante del sitio no es un editor, su navegador descargará menos archivos para hacer que la página web se muestre, ahorrando 17 kilobytes.
El equipo de Elementor compartió esto conmigo:
“Tanto nuestro equipo de I + D como nuestro equipo de SEO han estado trabajando en este proyecto durante los últimos 6 meses, asegurándose de que Elementor sea totalmente compatible con el próximo cambio de algoritmo de Google Web Vitals. Nos hemos centrado en reducir la cantidad de elementos DOM, optimizar el proceso de renderizado, cargar activos dinámicos y mucho más «.
Elementor publica videos para mejorar los elementos básicos de la web
Captura de pantalla del video de optimización de Elementor Core Web VitalsAdemás de los cambios de código, Elementor ha dado un paso adicional para proporcionar cursos de YouTube para ayudarlos a comprender mejor las mejores prácticas para crear sitios que brinden una experiencia de usuario más rápida.
“Para guiar a las personas a través de esta actualización, hemos creado excelentes materiales educativos, incluido un nuevo curso sobre cómo mejorar el 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 la plataforma de creación de sitios web que elijas «.
Elementor toma la iniciativa
Es alentador ver que cada vez más empresas se esfuerzan por realizar estas importantes actualizaciones. El anuncio de Elementor es un desarrollo emocionante para los usuarios del plugin y ejerce presión sobre el resto del ecosistema de WordPress, desde los plugins hasta los creadores de temas, para mantenerse al día con Elementor.