¿Cómo mejorar sus puntuaciones de Google Core Web Vitals?

Publicado el

(23 de agosto de 2020)

Próxima era en el rendimiento de las páginas web

Hace un par de meses que he estado trabajando sobre estrategias para mejorar el rendimiento de la página web en los sitios web de mi empresa y, para ser honesto, es un trabajo realmente interesante para compartir con ustedes.

Entiendo que trabajar en el rendimiento de la página web no es una novedad y a la gente se le han ocurrido muchas ideas y trucos para aumentar la velocidad de carga de la página. ¡Pero ahora parece que eso ya no es suficiente y necesitas pasar al siguiente nivel!

Como ustedes deben saber acerca de la importancia del SEO (optimización de motores de búsqueda) y sacar los resultados de su página web no solo en la primera página de resultados de Google sino en la parte superior de la misma primera página es realmente una gran oferta. En pocas palabras: permítame garantizarle que, de ahora en adelante, Google Core Web Vitals será uno de los mayores contribuyentes al ranking SEO de los resultados de búsqueda de Google.

Breve & Explicación simple sobre Google Core Web Vitals

Core Web Vitals, presentado en el primer trimestre de este año, es un conjunto de métricas relacionadas con la velocidad, la capacidad de respuesta y la estabilidad visual de su página web.

Google los ha definido como los elementos fundamentales de la Web:

  • La pintura con contenido más grande : el tiempo que tarda en cargarse el contenido principal de una página. Una medición de LCP ideal es 2,5 segundos o más rápido.
  • Retraso de la primera entrada : el tiempo que tarda una página en volverse interactiva. Una medida ideal es menos de 100 ms .
  • Cambio de diseño acumulativo : la cantidad de cambio de diseño inesperado del contenido de la página visual. Una medida ideal es menor que 0,1 .

Este conjunto de métricas se diseñó para ayude a los propietarios de sitios a medir la experiencia del usuario que brindan en lo que respecta a la carga, la interactividad y la estabilidad visual.

En general, a continuación, el rendimiento de su página se clasificará de la siguiente manera.

Lista completa de métricas consideradas para las métricas de rendimiento de la página.

La siguiente sección básicamente habla sobre las ideas o métodos para mejorar el rendimiento de carga de su página y las puntuaciones de CWV.

Consejos para mejorar sus puntuaciones de Core Web Vitals

A continuación se muestran algunos métodos eso me ayudó a mejorar drásticamente mis puntuaciones de Core Web Vitals, así como a mejorar el rendimiento general de la página.

  1. Utilizar de manera efectiva el navegador y la caché de CDN (mejora FID y LCP)
    Este es un enfoque muy simple ch para mejorar sus puntuaciones FID y LCP. Asegúrese de que sus activos estáticos se entreguen desde una CDN (si es AWS, puede almacenarlo en caché en Cloudfront). Por lo tanto, esto da como resultado que los recursos lleguen rápidamente a sus navegadores. Para mejorar la carga por segunda vez, asegúrese de que los recursos que llegaron en el lado del cliente estén almacenados en caché en su navegador.
    cache-control: max-age=120: significa que el recurso devuelto es válido por 120 segundos, después de los cuales el navegador debe solicitar una versión más reciente.
    También puede almacenar en caché sus páginas dinámicas también en su CDN con un valor TTL adecuado según el comportamiento de su aplicación.
  2. Establezca atributos de tamaño exactos o dimensiones para sus medios y anuncios (mejora CLS)
    Esto es algo muy importante para mejorar sus puntajes CLS. Asegúrese de tener un height:XXpx; width: YYpx adecuado para su imagen o cualquier etiqueta multimedia. Nuevamente, esto es muy importante al menos para los componentes que están por encima del pliegue. Un atajo para esto es que si se está quedando sin ideas para obtener la altura exacta de la imagen, puede establecerla como height:auto;, lo que realmente me ayudó. Aparte de los medios, si su sitio muestra anuncios, asegúrese de haber configurado espacios publicitarios adecuados con las dimensiones adecuadas, ya que presionar hacia arriba o hacia abajo los componentes de la página definitivamente reducirá su puntuación CLS. ¡Por lo tanto, esté atento a los anuncios también!
  3. Carga diferida de imágenes con resolución correcta según el tipo de dispositivo (mejora LCP)
    ¡Esto es realmente una victoria rápida para ti! Hay muchos paquetes de carga diferida en el mundo que puedes usar en tu página web para cargar todas las imágenes de tu página.Esto reducirá el peso general de la página y el tiempo de carga para representar su página en el navegador. Otra pieza importante es que, predefine la resolución de la imagen que desea cargar en función del tipo de dispositivo. No debería cargar imágenes con la misma resolución en diferentes tipos de dispositivos.
  4. Utilice SSR y CSR de manera eficaz en su página web (mejore FID & LCP)
    Debes saber que Google promueve y fomenta las páginas del lado del servidor (SSR) para obtener buenos valores de SEO. Pero, idealmente, es una compensación con el rendimiento de carga de página de SEO Vs. Si su página es demasiado grande en términos de contenido y si decide representar la página completa en el servidor, definitivamente tomará más tiempo cargar toda la página, así como la página El peso será alto también. Para resumir: mi recomendación es que es mejor hacer el renderizado SSR para los componentes de su página que aparecen en la parte superior del pliegue y renderizar el resto de los componentes del lado del cliente que aparece debajo del pliegue. De esta manera, el usuario carga la página en la mitad superior de la página y el resto de la página se representa de forma asíncrona sin obstaculizar la experiencia del usuario.
  5. Usar código Dividir & divide tus activos en fragmentos (mejora el FID & LCP)
    No siempre es una buena idea tener activos enormes (cualquier cosa por encima de 100 Kb es enorme) (archivos JS especialmente) en su aplicación. Por lo tanto, es mejor utilizar paquetes como «webpack» para dividir los activos pesados ​​en fragmentos pequeños que cargarán sus activos de forma asincrónica en su navegador (si habilita el protocolo h2). También puede aprovechar las funciones de división de código para dividir los componentes de su página en archivos separados en lugar de empaquetarlos en un solo archivo HTML.
  6. Comprime todos tus activos estáticos con la compresión Brotli (mejora el LCP)
    Recomiendo el uso de Brotli para comprimir tus activos estáticos, lo que ofrece una mejor ratios de expresión en comparación con otras bibliotecas del mercado. Al mismo tiempo, tenga en cuenta que cuando utiliza Brotli con una relación de compresión más alta, definitivamente aumentará el tiempo de compilación y paquete en el proceso de desarrollo de DevOps. Para mí, estuvo bien sacrificar el tiempo de compilación de la aplicación, ya que obtengo un mejor valor en términos de rendimiento de carga de la página.
  7. Optimice la solicitud de API y contenido de respuesta (mejora FID & LCP)
    Es muy importante tener en cuenta que cada byte importa aquí cuando hablamos de rendimiento de la página. Confío en que no se arrepentirá de volver atrás y comprobar sus solicitudes de API & respuestas para completar su página. Asegúrese de que está recuperando solo los datos que necesita para que su página ser procesado a partir de las respuestas de la API. Otra cosa tonta que posiblemente podría cometer un error es que sus llamadas a la API se invocan internamente en lugar de usar puntos finales públicos o a través de Internet, porque siempre es costoso en términos de tiempo cuando están invocando sus API a través de Internet cuando tiene sus API alojadas en la misma subred o al menos en la misma red.
  8. Reduzca la página / documento general tamaño (mejora LCP)
    Idealmente, si su página de destino es pesada (clasificaría cualquier página con> 80 Kb como pesada), esto definitivamente contribuirá negativamente a la puntuación de LCP ya que aumentará proporcionalmente la velocidad de búsqueda y descarga de su página. Por lo tanto, asegúrese de no obtener una gran cantidad de datos no utilizados del lado del servidor y cargue solo los datos necesarios para representar su página.
  9. Utilice formatos de imagen NEXT-GEN (mejora LCP)
    JPEG 2000, JPEG XR y WebP son formatos de imagen que tienen características de calidad y compresión superiores en comparación con sus archivos JPEG y Contrapartes de PNG. Codificar sus imágenes en estos formatos en lugar de JPEG o PNG significa que se cargarán más rápido y consumirán menos datos móviles. Puede utilizar cualquier tipo de herramienta en el mercado para convertir las imágenes a imágenes con formato NEXT-GEN o incluso puede crear un servicio de imágenes en tiempo de ejecución que pueda hacer una conversión de imágenes en tiempo real de JPEG a WebP y servir en el navegador.
  10. Habilitar el respaldo a las fuentes nativas compatibles con el navegador (mejora el FID)
    Está comprobado que las fuentes realmente puede reducir sus puntuaciones de rendimiento si el navegador se demora en cargar la fuente personalizada que se utiliza en su aplicación, a menos que sea una fuente predeterminada compatible con el navegador. En este caso, una ventaja rápida para usted es tener un enfoque alternativo en la carga su fuente con las fuentes que son admitidas por defecto por el navegador. A continuación, se muestra un fragmento de código de muestra sobre cómo tener un enfoque alternativo con otras fuentes.
@font-face { 
font-family: “Open Sans Regular” "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-style: normal;
src: url(“fonts/OpenSans-Regular-BasicLatin.woff2”) format(“woff2”); font-display: swap;
}

Todos los consejos dados anteriormente podrían implementarse gradualmente en su aplicación y nuevamente, como se mencionó antes, los puntajes de Core Web Vitals evolucionan a partir del usuario real datos y ya no de ningún dato de «laboratorio». Por lo tanto, se necesita tiempo para reflejar las mejoras en su puntaje, que en su mayoría son 28 días para reflexionar. Aún puede usar la herramienta PageSpeed de google – https://developers.google.com/speed/pagespeed/insights/ para obtener sus puntajes CWV.

¡Espero que te ayude y te deseo todo el éxito en tus trabajos! ¡Salud!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *