¿Cómo acelerar la web en 2021? (casi todo lo que hay que saber — Parte I)

Google está implementando gradualmente una actualización de algoritmo llamada Page Experience donde las métricas de experiencia del usuario, incluidas las métricas de velocidad web llamadas Core web vitals, tienen un nuevo significado .

Contenido

• El contenido sigue siendo el rey
• ¿Cuándo empezará a usarse?
• Señales
• Mide bien
• Lazy en casi todas partes
• Preconnect & dns-prefetch para recursos criticos
• Nuevos formatos de imagen

“Y yo sigo siendo el rey, el rey sigo siendo yo” (El contenido:

Los sistemas continuarán priorizando las páginas con la mejor información en general, incluso si algunos aspectos de la experiencia de la página son insatisfactorios. Una buena experiencia en la página no anula tener contenido excelente y relevante.

¿Cuándo empezará a usarse?

Google aplicará los cambios a sus sistemas a partir de mediados de junio de 2021. Lo implementará gradualmente para depurar cualquier error y espera completar el evento a fines de agosto.

Señales (Que buena peli)

¿Qué atributos de la página verán en las clasificaciones automáticas de Google durante la Experiencia de página?

Las señales se dividen en las siguientes áreas:

Velocidad:

• Pintura de contenido más grande (LCP)
  La mayor representación de contenido. Métrica que describe la velocidad de carga de la página: rendimiento de carga . Debe tener un LCP de 2,5 segundos o menos para cumplir.
• Retardo de la primera entrada (FID) Retardo de la primera entrada. Métrica que describe la rapidez con la que un usuario puede comenzar a realizar tareas en una página: el rendimiento de la interactividad . Debe tener un FID de 100 ms o más rápido para cumplir.

Seguridad y privacidad:

• HTTPS
  Debe tener habilitado el protocolo HTTPS seguro en su sitio web. Es posible que ya tengas esto, pero por si acaso un enlace a los materiales de Google .
• “Navegación segura”. Su sitio web o página no debe ser detectado como una amenaza para los usuarios. Hay más en el texto de Google .

Accesibilidad y los cuatro principios:

• Amabilidad para los usuarios de dispositivos móviles: En esta sección, Google supervisa si las páginas están bien optimizadas para los usuarios de dispositivos móviles. Es posible probar la usabilidad en teléfonos móviles desde acá.
• Perceptible: ¿pueden los usuarios percibir el contenido? Esto nos ayuda a tener en cuenta que solo porque algo sea perceptible con un sentido, como la vista, no significa que todos los usuarios puedan percibirlo.
• Manejable: ¿pueden los usuarios componentes de IU y navegar por el contenido? Por ejemplo, alguien que no puede usar mouse o pantalla táctil no puede manejar algo que demanda interacción de desplazamiento.
• Comprensible: ¿pueden los usuarios comprender el contenido? ¿Pueden los usuarios comprender la interfaz y es esta lo suficientemente consistente como para evitar confusiones?
• Sólido: ¿puede una amplia variedad de usuarios-agentes (navegadores) consumir el contenido? ¿Funciona con tecnología asistencial?

Mide bien

La clave es saber que la puntuación de Lighthouse no indica la velocidad del sitio. Solo indica aproximadamente cuántos problemas tiene en la web. Devuelve diferentes números en diferentes campos y, por lo general, no tiene sentido esforzarse por lograr una evaluación del 100%.

Es esencial que los desarrolladores puedan usar DevTools en el navegador y dentro de la nueva medición de Google podemos trasladarnos a la consola / Lighthouse para poder encontrar las metricas reunidas.

Lazy en casi todas partes

La carga diferida para <img>o <iframe>realmente ayuda. Reduce el volumen de datos de la página, mejora la priorización de recursos, ahorra datos y puede acelerar la reproducción de la página.

Está disponible en casi todos los navegadores, así que simplemente agregue el atributo loading:

<img src="niki.jpg" loading="lazy"
  alt="…">

También es posible establecer para los iframe:

<iframe src="https://niki.com" loading="lazy">
</iframe>

Preconnect & dns-prefetch

Usa preconnect & dns-prefetch para conectarte a dominios de terceros de manera oportuna y aumentar la velocidad del sitio.

Muy a menudo, necesitamos descargar elementos de otros dominios en el sitio y utilizar metaetiquetas preconnecty dns-prefetch informan al navegador sobre nuestras intenciones de establecer conexiones con dominios externos.

<link rel="preconnect" href="https://www.example.com">
<link rel="dns-prefetch" href="https://www.example.com">

Entonces sucede que el navegador establece estas conexiones desde el principio del procesamiento de la página. Y gracias a eso, la página se puede cargar un poco más rápido.

Bien configurado preconnect/ dns-prefetchmejorará métricas como Time to interactivity (TTI) o Load. Esto es especialmente útil para sitios que se ejecutan en HTTP / 2 .

Nuevos formatos de imagen: AVIF & WebP

Ahora podemos usar el formato WebP en todos los navegadores modernos.

La forma más sencilla de implementar es usar la marca<picture> :

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="…">
</picture>

Proximamente mas info.

¡Opinen y valoren!