Estamos a mediados de junio y el esperado algoritmo de experiencia de página de Google, Core Web Vitals (CWV), ya ha sido publicado. comenzó a desplegarse.
Hoy nos complace anunciar el lanzamiento de Astra 3.6, repleta de funciones que ayudarán a tu sitio web a obtener una puntuación perfecta. La versión 3.6 también trae mejoras de diseño en el editor de bloques Gutenberg y otras mejoras de rendimiento también. 🎉
En Astra, una parte fundamental de nuestro ADN es ofrecer un marco sólido para crear sitios web rápidos y de alto rendimiento. Esta actualización es un reflejo más de ello.
¿Qué son las Core Web Vitals?
Google Core Web Vitals (CWV) son un conjunto de métricas relacionadas con el modo en que su sitio web se carga y ofrece una experiencia positiva a los visitantes.
Estas métricas se dividen en tres partes:
- Largest Contentful Paint (LCP) - Tiempo necesario para cargar el contenido principal de la página.
- First Input Delay (FID) - Tiempo necesario para que una página sea interactiva
- Desplazamiento de diseño acumulativo (CLS) - Cantidad de desplazamientos de diseño inesperados del contenido visual de la página.
Estas métricas van a desempeñar un papel importante en el algoritmo SEO y de clasificación de Google a partir de junio de 2021.
Teniendo en cuenta la importancia de esta nueva métrica y para responder a muchas preguntas que tenían nuestros clientes, hace unos días lanzamos un curso completo en nuestra academia Skilljet. Recomiendo encarecidamente a cualquiera que se tome en serio la velocidad y la SEO de sus sitios web para realizar el curso.
En este curso de 180 minutos, explicamos elementos técnicos complejos como CWV para que sean accesibles a cualquier persona sin conocimientos técnicos y a los principiantes de WordPress.
A continuación, veamos cómo Astra 3.6 ha introducido funciones específicas para obtener las mejores puntuaciones CWV:
Fuentes Google autoalojadas
Google Fonts es una biblioteca muy popular de más de 1000 fuentes utilizadas por millones de sitios web. Astra y muchos otros temas de WordPress aprovechan esta biblioteca y ofrecen una integración que abre un amplio abanico de opciones tipográficas para los usuarios.
Típicamente este tipo de integración significa enviar una petición a los servidores de Google y cargar el archivo de fuentes desde allí. Esta es una práctica común para cargar cualquier fuente de Google.
Sin embargo, esto afectará a su puntuación CWV, ya que la transferencia de datos entre su alojamiento web y los servidores de Google tarda unos milisegundos.
Para mitigar este problema, Astra 3.6 introduce una función para obtener las fuentes de Google Fonts que utilizas en tu sitio web y almacenarlas localmente en tu servidor.
Después de actualizar a 3.6, encontrarás una nueva pestaña "rendimiento" en el personalizador donde encontrarás opciones para cargar Google Fonts localmente.
Como los archivos de fuentes estarán alojados en su servidor, se cargarán más rápido y mejorará la puntuación CWV (CLS).
También hemos proporcionado una opción para precargar fuentes locales. Con la precarga de fuentes, puede forzar al navegador de un visitante a cargar fuentes importantes con antelación para que el navegador pueda empezar a aplicarla al texto en cuanto esté listo, en lugar de esperar potencialmente a cargar la fuente.
Veamos algunas estadísticas sobre cómo la carga local de Google Fonts beneficiará a tu puntuación CWV -
Aquí está la puntuación de la versión Astra anterior a la 3.6 con el diseño por defecto y las fuentes Google.
Como puede ver, el uso de Google Fonts en el sitio web aumenta la puntuación CLS a 0,011. Esto se debe a una forma común de cargar Google Fonts enviando una petición a su servidor. Este proceso tarda unos milisegundos. Como resultado, verá una puntuación CLS más alta.
Cargar fuentes de Google localmente con Astra 3.6 mejora su puntuación CLS
Como las Google Fonts se almacenarán localmente, no es necesario enviar una solicitud al servidor. En última instancia, se reducen los tiempos de carga de las fuentes y se obtiene una puntuación CLS de cero: ¡la mejor puntuación!
Cargar Google Fonts localmente no sólo mejora la puntuación CLS, sino también la velocidad de carga de la página.
El Astra 3.6 también incluye algunos otros cambios para mejorar la puntuación CLS.
Exploremos esto más a fondo.
Otras mejoras para mejorar las puntuaciones de CWV (CLS)
En un intento por mejorar aún más la puntuación CWV (CLS), hemos mejorado algunas áreas clave de Astra. Las mejoras pueden ser pequeñas, pero su impacto en la puntuación CWV (CLS) es impresionante.
Altura del logotipo SVG - Por defecto, WordPress no calcula automáticamente la altura de los logotipos SVG. Ya que puede encoger el logotipo y causar un cambio de diseño inesperado en la sección de cabecera. Astra 3.6 redimensiona el logotipo con Javascript, para mejorar aún más la puntuación CLS de su sitio.
Cargando Cabecera Móvil - ¿Has notado un parpadeo momentáneo en dispositivos móviles al cargar una cabecera creada con Astra header builder? Esto se ha solucionado sustituyendo el código Javascript por CSS estático y puntos de interrupción dinámicos en Astra 3.6. En última instancia, la mejora de la puntuación CLS para su sitio web.
Control de selección de cantidad para productos WooCommerce - En las páginas de productos de WooCommerce, es posible que hayas notado un control además del botón 'añadir al carrito'. Es aquel en el que los usuarios pueden seleccionar la cantidad del producto. Aunque se trata de un pequeño control, estaba afectando a la puntuación CLS durante la carga. Lo hemos solucionado con la última actualización de Astra utilizando los valores de los márgenes izquierdo y derecho del botón.
Además de mejorar la puntuación CLS de su sitio web, la actualización Astra 3.6 aporta otras dos mejoras significativas.
No más jQuery para el scroll to top: mejora de la velocidad de carga de la página
¿Utiliza nuestro sencillo pero eficaz complemento Astra Pro - Scroll To Top en su sitio web?
Como su nombre indica, este complemento ayuda a añadir la acción "desplazarse al principio" en tus páginas.
En las páginas más largas, esto evita tener que desplazarse hasta la parte superior cuando se ha llegado al final de la página.
La última versión Astra Pro aporta impresionantes mejoras de rendimiento mediante la optimización de este complemento. Originalmente dependía del código jQuery para funcionar. Pero ya no.
Hemos sustituido jQuery por un código JavaScript de vainilla completo. Esta conversión trajo consigo algunas mejoras de rendimiento impresionantes, como se muestra a continuación.
El tiempo de carga de la página completa se ha reducido en aproximadamente 7%, ¡y el tamaño total de la página en 45%!
Aquí hay un informe para la versión anterior Astra Pro -
Aquí está el informe para la última versión Astra Pro -
¡Increíble! ¿A que sí?
Mejor compatibilidad de diseño para el editor de bloques Gutenberg
Es sabido que Astra funciona a la perfección con el editor de bloques Gutenberg.
Llevando esto un paso más allá en la compatibilidad con el editor de bloques, Astra 3.6 trae mejoras que mejorarán la UI/UX.
El personalizador de Astra ofrece prácticas opciones para definir los colores y la tipografía de tu sitio web. Cuando vea la parte frontal de su sitio web, podrá ver todos los estilos.
Sin embargo, al trabajar en el backend con el editor de bloques, recuperar estas opciones de estilo del personalizador llevaba mucho tiempo.
Astra 3.6 eliminó esta limitación y devolvió todo el estilo del personalizador directamente al editor de bloques.
Así que no es necesario guardar la página y verla en el frontend para ver cómo quedará el diseño final. Puedes previsualizar la página con todos los colores y la tipografía aplicados justo dentro del editor de bloques.
Este es otro esfuerzo para que el flujo de trabajo de diseño de su sitio web sea fluido.
Lo que ves es lo que hay.
¡Mejore la experiencia de página de su sitio web con Astra 3.6 hoy mismo!
Google ya ha comenzado a desplegar su actualización de Core Web Vitals, por lo que ahora es el momento perfecto para actualizar a la última versión Astra 3.6.
Prueba los últimos controles para Google Fonts autoalojadas y experimenta un notable aumento en tu puntuación CWV.
Esto es sólo el principio. Mientras la actualización de Google progresa, las actualizaciones de Astra seguirán. Astra explorará todos los aspectos posibles para mejorar la puntuación CWV de tu sitio web y seguirá ofreciendo una versión mejor y más rápida con cada actualización.
¿Cuál es la puntuación de su sitio web para CWV? Adelante, compruebe su puntuación y mejorar tu experiencia de usuario. Háganos saber los resultados en los comentarios a continuación.
Además, cuéntanos qué te parece trabajar con el estilo mejorado del editor de bloques y las mejoras de rendimiento que observas con el desplazamiento optimizado a la parte superior.
La serie Astra 3.0 está dedicada a mejorar la velocidad y el rendimiento de Astra en todos los aspectos. Nuestra misión es hacer que tu sitio web sea más ligero y rápido con cada versión. Permanece atento a las próximas actualizaciones 🙂 .
Si tiene alguna pregunta sobre Astra 3.6, póngase en contacto con nuestro equipo de asistencia.
Hasta la próxima, ¡salud!
Divulgación: Este blog puede contener enlaces de afiliados. Si realiza una compra a través de uno de estos enlaces, es posible que recibamos una pequeña comisión. Leer información. Tenga la seguridad de que sólo recomendamos productos que hemos utilizado personalmente y que creemos que aportarán valor a nuestros lectores. Gracias por su apoyo.
¿Puede proporcionar una guía paso a paso sobre cómo autoalojar Google Fonts?
Hola Lee,
Este artículo debería ayudar - https://wpastra.com/docs/performance-is-the-key/#load-google-fonts-locally
Además, la entrada del blog explica los puntos en breve. No dudes en ponerte en contacto con nosotros a través de nuestro Portal de Soporte si necesitas más ayuda 🙂 .
Informar sobre mi experiencia en el sitio como se solicita. Ejecutando Astra Pro 3.6 (con la nueva opción para fuentes Google autoalojadas habilitada) y Elementor Pro (versión actual) en mi sitio. Acabo de probarlo.
Web.dev obtiene una puntuación de 20 en rendimiento. Una segunda iteración de la prueba mejoró la puntuación a 38. Los aspectos de mayor impacto fueron la reducción del Javascript no utilizado y evitar redireccionamientos múltiples de páginas. Los problemas de impacto medio fueron la reducción del tiempo de respuesta inicial del servidor y la eliminación de módulos duplicados en los paquetes de Javascript.
Hola David, hay varios factores que afectan a la velocidad de la página y el rendimiento del sitio web. Además, dar los pasos mencionados en este artículo un intento. Espero que te sirva de ayuda 🙂 .
Qué gran actualización del tema. Gracias por el rendimiento añadido.
Saludos, ¡espero que tengas sitios web rapidísimos con Astra! 🙂 .
¡Esto es realmente impresionante! . 🎉 su wow sólo para ver las fuentes de Google locales dentro de tema. Grandes pasos hacia el rendimiento por Astra Temas
¡Salud! 🙂
Brillante, siempre estáis a la última cuando se trata de acelerar los sitios web. Todas estas pequeñas mejoras nos ayudarán a conseguir más trabajos cuando podamos demostrar a los clientes potenciales que podemos crear sitios web para aumentar el CWV.
Por favor, sigan haciendo estas increíbles mejoras.
He utilizado el Soporte Premium de Astra varias veces desde que integré mi sitio con anuncios de Ezoic - lifeupswing[dot]. El soporte ha sido absolutamente magnífico y me ha ayudado a conseguir unos resultados de CWV que han superado con creces mis expectativas, teniendo en cuenta la pérdida de velocidad que suelen suponer los anuncios. Me encanta AstraPro y las continuas actualizaciones y el soporte que ofrecéis. ¡Seguid así!
Hola Chris, me alegra saber de tu experiencia a la hora de conseguir los resultados CWV requeridos con el último Astra 3.6 🙂 .
Hola, ¿Cómo podemos construir plantilla de cabecera (plantilla astra) con gutenberg?
Hola, sentimos no estar seguros de la consulta, ¿puede darnos más detalles? No dude en ponerse en contacto con nosotros a través de nuestro Portal de asistencia o Comunidad Facebook para obtener ayuda de nuestra comunidad de usuarios.
Me alegro mucho de oír que han tomado medidas con respecto al CWV de Google. Me alegro de que hayamos elegido Astra. Seguid así.
¡Gracias, Monique! 🙂
Waoh, grandes mejoras. Por cierto mi sitio se ve muy afectado por la "respuesta inicial del servidor" de ahí que obtenga pobres LCP. Estoy atascado sin saber qué hacer.
Hola, por favor refiérase a esto artículo que podría ayudar.
Estoy usando el tema Astra con Elementor. He notado un ajuste en Elementor llamado "Google Fonts" activar / desactivar. ¿Interfiere este ajuste con la opción de Astra de autoalojar las fuentes de Google? (Es decir, ¿necesito desactivar la opción en Elementor para que la opción de autoalojamiento de Astra funcione?)