Core Web Vitals: Por qué JAMstack podría tener la clave

Core Web Vitals, o métricas web principales en español, son tres nuevas métricas que se incluirán en el nuevo algoritmo de experiencia de página de Google, que comenzará a implementarse a partir de junio de 2021. Estos nuevos factores afectarán la forma en que clasifica los resultados de búsqueda, por lo que familiarizarse con ellos es crucial para el rendimiento del SEO.

Tips and inspiration

6 min read

Core Web Vitals JAMstack

Equipo de Contenido de Cobiro

En este artículo explicamos cuáles son las métricas, cómo medir tu puntuación y por qué las páginas web de JAMstack son ideales para cumplir y superar los nuevos estándares.

El nuevo algoritmo de experiencia de página de Google

El objetivo final de Google es estar al servicio de las personas, y una de las formas en que lo hace es ver qué tan buena es la experiencia de usuario de tu página web. Es probable que las páginas web que responden a lo que el usuario quiera hacer, de la manera más eficiente posible, obtengan una clasificación más alta que las que no lo hacen.

Con un lanzamiento gradual a partir de junio de 2021, Google comenzará a combinar algunas de sus indicaciones de búsqueda existentes con sus nuevas métricas web principales, que se unen para formar el algoritmo de experiencia de página. Se espera que la actualización esté terminada a finales de agosto.

Las indicaciones de búsqueda existentes incluyen aspectos como la compatibilidad con dispositivos móviles, navegación y conexión segura, sobre las cuales puedes leer en nuestro artículo sobre la experiencia de página. En este artículo, nos centraremos en los nuevos Core Web Vitals.

Core Web Vitals

Dividido en tres medidas específicas, las métricas web principales son un conjunto de factores que Google cree que son importantes para la experiencia general del usuario de una página web.

Son más profundos que nunca y miden cuestiones como el tiempo de carga, la interactividad y la estabilidad, lo cual tiene un impacto significativo en la forma en que un usuario percibe e interactúa con una página web.

1. LCP: Renderizado del mayor elemento con contenido

Esta es una medida del tiempo que tarda en cargar la mayor parte de contenido en tu página web.

Google toma como referencia en la imagen o el bloque de texto más grande de una página web y calcula el tiempo de procesamiento (cuando está completamente cargado y visible) en relación con el momento en que la página empezó a cargarse. Cuanto más tiempo tengan que esperar los usuarios, peor será la experiencia al usar la página web.

A qué apuntar: un tiempo de carga de 2,5 segundos o menos.

2. FID: Latencia de la primera interacción

Mide cuánto tiempo tarda tu página web en volverse interactiva y receptiva.

Google calcula el tiempo que pasa desde que un usuario interactúa por primera vez con tu página (haciendo clic en un enlace, tocando un botón o enviando un formulario) hasta el momento en que el navegador es capaz de responder a esa interacción.

A qué apuntar: un retraso de entrada de menos de 100 milisegundos.

3. CLS: Cambios de diseño acumulados

Mide la frecuencia con la que ocurren movimientos inesperados en tu página.

Los elementos, como anuncios de terceros o imágenes sin dimensiones que cambian mientras el usuario está viendo la página, pueden contribuir a una mala experiencia en la página. Google analiza el espacio que ocupa un elemento y cuánto se mueve en una pantalla para determinar una puntuación CLS.

A qué apuntar: una puntuación inferior a 0,1.

How to measure your website’s Core Web Vitals

With Core Web Vitals taking up the biggest chunk of your page experience score, it’s worth doing an audit of your website and taking steps to optimize it ahead of the update.

There are several tools out there, but Google’s PageSpeed Insights is a good place to start. 

Enter the full URL for one of your pages to get started. Once you’ve clicked ‘analyse’ your score will show. Note - at the top of the page you can switch between mobile and desktop versions.

Your web page’s overall score is out of 100. Below 50 (red) is considered poor, between 50 and 89 (orange) as needing improvement and 90 to 100 (green) as good.

Each area is broken down, with recommendations given on the steps needed to achieve a better score.

Mejora tu puntuación de Core Web Vitals con una página web JAMstack

Hacer las mejoras necesarias en tu página web puede ser complejo y llevar mucho tiempo, pero la transición al enfoque JAMstack puede facilitar mucho el proceso.

Echemos un vistazo más de cerca a lo que es JAMstack y cómo puede superar los problemas que conducen a puntuaciones bajas de Core Web Vitals.

¿Qué es JAMstack?

JAMstack es un enfoque moderno para la creación de páginas web. No es un lenguaje de programación o una herramienta, sino una arquitectura que ofrece páginas web rápidas y fáciles de usar.

Es un acrónimo de JavaScript, Interfaces de Programación de Aplicaciones (API) y markup. Cada componente está separado para que sea más fácil trabajar con ellos. Esto se conoce como desacoplamiento. Pero interactúan juntos para entregar el resultado final (la parte de ‘stack’).

CDNs

Con una página web JAMstack, el contenido se genera en forma de archivos desde el servidor de origen del sitio web, que luego se almacena en caché y se entrega a través de una red de distribución de contenidos (CDN), una red global de servidores.

Esta red trabaja en conjunto para reducir la distancia que tiene que recorrer el contenido de una página web antes de llegar al usuario final. Entonces, si un usuario en Estados Unidos está accediendo a tu página web basada en España, el contenido se entregará desde el servidor más cercano al lugar donde se encuentra, en lugar de tener que viajar al servidor de origen de la página web en España.

Lee más sobre JAMstack en nuestra guía completa. 

Lo llevamos a la realidad

Vamos a tomar como ejemplo tres factores que hacen que un usuario tenga una mala experiencia y vamos a investigar como las páginas web JAMstack están configuradas para solucionarlo.

Problema #1: El contenido se carga lentamente

Solución: mejorar tu capacidad de web hosting. Con una página web de JAMstack, no tienes que depender de un solo host para entregar todo tu contenido. Debido a que las páginas se generan desde el servidor más cercano en la CDN, hay menos distancia para que viajen los datos. Esto significa que las páginas son increíblemente rápidas y, a menudo, se cargan en menos de un segundo.

Problema #2: Las imágenes y otros elementos solo se cargan cuando deslizas hacia abajo en la página

Solución: generar contenido con anticipación para que no ralentice una página web. Con una página web JAMstack, el contenido se genera en forma de archivos, que luego se almacenan como copias en la red CDN. Esto significa que cuando una página web se carga, las imágenes y los elementos están disponibles de inmediato y listos para aparecer en la página.

Problema #3: Los elementos dinámicos influyen en la velocidad

Solución: mover las funciones dinámicas de tu página web al lado del cliente (el ordenador del usuario). Las páginas web de JAMstack utilizan APIs para comunicarse con los archivos JavaScript renderizados previamente para facilitar los datos dinámicos. Por lo tanto, cada vez que se requiere una tarea interactiva (como completar un formulario), se puede hacer lo más cerca posible del lugar donde se encuentra el usuario, lo que lo hace súper receptivo.

Estos son solo algunos ejemplos, pero notarás un factor común: el poder de las CDN y su capacidad para superar los típicos cuellos de botella que conducen a un rendimiento decepcionante de la página web.

Transforma tu página web actual a una página web JAMstack 

¿Tienes una página web estática pero deseas alojarla a través de una CDN? Deja que Cobiro se encargue del hosting y transfórmala en una página web JAMstack ultrarrápida.

La conexión GitHub de Cobiro (beta) proporciona un vínculo perfecto entre tu headless CMS, el generador de sitios estáticos y el host CDN.

Una vez implementado, el contenido de tu página web se entregará a través de la CDN de Cloudflare, que se encarga de las solicitudes de Internet para el 16% de las empresas Fortune 1,000 y atiende 20 millones de solicitudes HTTP por segundo de media.

Del código al JAMstack en seis pasos:

  1. Elige tu headless CMS (por ejemplo, Dato CMS, Contentful o Agility)
  2. Utiliza un generador de sitios para crear tu página web estática.
  3. Implementa tu código en un repositorio de Git en GitHub.
  4. Inicia sesión en la plataforma de Cobiro y selecciona la conexión de GitHub
  5. Busca tu código y selecciona "reconstruir"
  6. Tu página web ahora está alojada a través de la CDN de Cloudflare.

Próximamente: el CDN hosting estará disponible en todos nuestros planes pagos, que comienzan desde solo $19 al mes. Descubre más.

Crea una página web JAMstack desde cero

El creador de páginas web de Cobiro es el único creador de sitios web gratuito del mercado que utiliza el enfoque JAMstack. No requiere codificación, instalaciones ni complementos.

Cuando esté lista para su publicación, tu página web será rápida y segura desde el principio.

Sencillez

Utiliza la interfaz de arrastrar y soltar y elige entre una multitud de elementos y diseños.

Potenciado por una CDN

Aumenta la velocidad de tu página web y su rendimiento al distribuirla a través de una CDN. 

Integración de marketing

Elige tus aplicaciones preferidas y accede a ellas desde la plataforma.

Certificado SSL gratuito

Protege la información confidencial de tus clientes obteniendo la mejor calidad en seguridad de páginas web.

Registro de dominio

Obtén un dominio profesional. Escoge una extensión de dominio gratis o compra una.

¡Prueba el creador de páginas web de Cobiro gratis!

Ludzie też czytają

What is jamstack
What is JAMstack? Your complete guide

Tips and inspiration

6 min read

Illustration of a person holding a tablet with lots of ideas
How to structure the perfect website

Tips and inspiration

3 min read

Zacznij za darmo już dziś!

Zacznij za darmo już dziś!

Zaczynaj
Zacznij za darmo już dziś!