Qué significa la actualización de la experiencia de nueva página de Google para las imágenes de su sitio web

Es fácil olvidar que, como motor de búsqueda, Google no se limita a comparar palabras clave para generar resultados de búsqueda. Google sabe que si las personas no disfrutan de su experiencia en una página web, no permanecerán en ella el tiempo suficiente para consumir el contenido, sin importar cuán relevante sea.

Como resultado, Google ha estado experimentando formas de analizar la experiencia del usuario de las páginas web utilizando métricas cuantificables. Al tenerlos en cuenta en su clasificación en los motores de búsqueda, se espera brindar a los usuarios no solo contenido excelente y relevante, sino también experiencias de usuario increíbles.

La actualización de la experiencia de la página que Google lanzará próximamente es un paso importante en esta dirección. Los propietarios de sitios web con muchas imágenes deben estar especialmente atentos para adaptarse a estos cambios o correr el riesgo de quedarse en el camino. En este artículo, hablaremos sobre todo lo que necesita saber sobre esta actualización y cómo aprovecharla al máximo.

Nota: Google presentó sus planes para Page Experience en mayo de 2020 y anunció en noviembre de 2020 que comenzará a implementarse en mayo de 2021. Sin embargo, desde entonces, Google ha retrasado sus planes para una implementación gradual a partir de mediados de junio de 2021 . Esto se hizo para dar tiempo a los administradores de sitios web para lidiar primero con las condiciones cambiantes provocadas por la pandemia de COVID-19.

Algunos antecedentes

Antes de entrar en la última versión de cambios en la forma en que Google influye en las métricas de la experiencia del usuario en las clasificaciones de los motores de búsqueda, veamos un poco de contexto. En abril de 2020, Google dio su paso más importante en esta dirección hasta el momento al presentar una nueva iniciativa: core web vitals.

Los Core Web Vitals (CWV) se introdujeron para ayudar a los desarrolladores web a enfrentar los desafíos de intentar optimizar las clasificaciones de los motores de búsqueda utilizando métricas comprobables, algo que es difícil de hacer con algo tan subjetivo como la experiencia del usuario.

Para ello, Google identificó tres métricas clave (lo que llama “métricas de rendimiento centradas en el usuario”). Estos son:

1. LCP (Pintura con contenido más grande): el elemento más grande en la mitad superior de la página cuando se carga inicialmente una página web. Por lo general, se trata de una imagen o encabezado destacado de gran tamaño. La rapidez con la que se carga el elemento de contenido más grande juega un papel muy importante en la rapidez con la que el usuario percibe la velocidad de carga general de la página.
2. FID (Retraso de la primera entrada): el tiempo que transcurre entre el momento en que un usuario interactúa por primera vez con la página y el momento en que el hilo principal está libre para que el navegador procese el evento. Esto puede ser hacer clic/tocar un botón, enlace o interactuar con cualquier otro elemento dinámico. Obviamente, los retrasos al interactuar con una página pueden resultar frustrantes para los usuarios, por lo que mantener el FID bajo es crucial.
3. Cambio de diseño acumulativo (CLS): calcula la estabilidad visual de una página cuando se carga por primera vez. El algoritmo tiene en cuenta el tamaño de los elementos y la distancia que se mueven en relación con la ventana gráfica. Las páginas que se cargan con alta inestabilidad pueden provocar errores por parte de los usuarios, lo que también genera situaciones frustrantes.

Estas métricas han evolucionado a partir de otras más rudimentarias que se utilizan desde hace algún tiempo, como SI (Speed ​​Index), FCP (First Contentful Paint), TTI (Time-to-interactive), etc.

La razón por la que esto es importante es porque las imágenes pueden desempeñar un papel importante en la puntuación de los CWV de su sitio web. Por ejemplo, el LCP suele ser una imagen en la mitad superior de la página o, como mínimo, tendrá que competir con una imagen que se cargará primero. Las imágenes que no se utilizan correctamente también pueden afectar negativamente a CLS. Las imágenes de carga lenta también pueden afectar el FID al agregar más retrasos en la representación general de la página.

Es más, esto se produjo gracias al renovado enfoque de Google en la indexación centrada en los dispositivos móviles . Por lo tanto, estas métricas no solo son importantes para su sitio web, sino que también debe asegurarse de que sus páginas obtengan una buena puntuación en dispositivos móviles.

¿Qué va a cambiar? Experiencia de página para la Búsqueda de Google

Está claro que, en general, Google está dando cada vez más prioridad a la experiencia del usuario cuando se trata de posicionamiento en los motores de búsqueda. Lo que nos lleva a la última actualización: Google ahora planea incorporar la experiencia de la página como factor de clasificación, comenzando con un lanzamiento temprano a mediados de junio de 2021.

Entonces, ¿qué es la experiencia de la página? En resumen, es una señal de clasificación que combina datos de una serie de métricas para intentar determinar qué tan buena o mala es la experiencia del usuario de una página web. Se compone de los siguientes factores:

• Core Web Vitals: utilizando los mismos core web vitals, sin cambios. Google ha establecido pautas y clasificaciones recomendadas que puedes encontrar aquí . Necesita una calificación CWV “buena” general para calificar para una puntuación de experiencia de página “buena”.
• Usabilidad móvil: una URL no debe tener errores de usabilidad móvil para calificar para una puntuación de experiencia de página “buena”.
• Problemas de seguridad: cualquier problema de seguridad señalado descalificará los sitios web.
• HTTPS: las páginas deben publicarse a través de HTTPS para calificar.
• Experiencia publicitaria: mide en qué medida los anuncios afectan negativamente la experiencia del usuario en su página web, por ejemplo, al ser intrusivos, distraer, etc.

Como parte de este cambio, Google anunció su intención de incluir un indicador visual, o insignia, que resalte las páginas web que han superado sus criterios de experiencia de página. Esto será similar a las insignias anteriores que el motor de búsqueda ha utilizado para promocionar AMP (Páginas móviles aceleradas) o páginas optimizadas para dispositivos móviles.

Este reconocimiento oficial dará a las páginas web de alto rendimiento una enorme ventaja en el ámbito altamente competitivo de las SERP de Google. Sin duda, esta señal visual aumentará el CTR y el tráfico orgánico, especialmente para los sitios que ya tienen una buena clasificación. Esta función puede desaparecer en mayo si pasa su fase de prueba actual.

Otra buena noticia para los usuarios que no son de AMP es que todas las páginas ahora serán elegibles para las Historias destacadas tanto en el navegador como en la aplicación Google News. Aunque Google afirma que las páginas pueden calificar para Top Stories “independientemente de su puntuación Core Web Vitals o del estado de experiencia de la página”, es difícil imaginar que esto no influya en la elegibilidad ahora o en el futuro.

Conclusión clave: ¿Qué significa esto para las imágenes de su sitio web?

Google notó un aumento del 70% en el uso de sus herramientas Lighthouse y PageSpeed ​​Insight por parte de los consumidores , lo que demuestra que los propietarios de sitios web se están poniendo al día con la importancia de optimizar sus páginas. Esto significa que los estándares sólo serán cada vez más altos cuando se compita con otros sitios web por la clasificación en los motores de búsqueda.

Google ha reafirmado que, a pesar de estos cambios, el contenido sigue siendo el rey . Sin embargo, el contenido es más que solo el texto de sus páginas, y el contenido verdaderamente atractivo y fácil de usar también consiste en medios cuidadosamente utilizados, la mayoría de los cuales probablemente serán imágenes.

Con las insignias de experiencia de página propuestas y la elegibilidad para Historias destacadas en juego, lo que está en juego nunca ha sido tan alto para obtener una clasificación alta en el algoritmo de Búsqueda de Google . Necesita todas las ventajas que pueda obtener. Y, como estoy a punto de mostrar, la optimización de los recursos de imagen puede tener un efecto tangible en la obtención de una buena puntuación según estas métricas.

¿Qué puedes hacer para mantenerte al día?

Antes de proponer mi solución para ayudarle a optimizar los recursos de imágenes para los elementos básicos de la web, veamos por qué las imágenes suelen ser perjudiciales para el rendimiento:

• Las imágenes aumentan el tamaño general de las páginas de su sitio web, especialmente si no están optimizadas (es decir, no están comprimidas, no tienen el tamaño adecuado, etc.)
• Las imágenes deben responder a diferentes dispositivos. Necesita tamaños de imagen mucho más pequeños para mantener la misma calidad visual en pantallas más pequeñas.
• Los diferentes contextos (navegadores, sistemas operativos, etc.) tienen diferentes formatos para representar imágenes de manera óptima. Sin embargo, la mayoría de las imágenes todavía se utilizan en formato .JPG/.PNG.
• Los propietarios de sitios web no siempre conocen las mejores prácticas asociadas con el uso de imágenes en las páginas del sitio web, como especificar siempre explícitamente los atributos de ancho/alto.

Utilizando métodos convencionales, puede hacer falta mucha sangre, sudor y lágrimas para abordar estos problemas. La mayoría de las soluciones, como la edición manual de imágenes y la sintaxis responsiva de codificación, tienen problemas inherentes con la escalabilidad, la capacidad de actualizar/ajustarse fácilmente a los cambios y sobrecargar su proceso de desarrollo.

Para optimizar sus recursos de imagen, particularmente centrándose en mejorar los CWV, necesita:

• Reducir las cargas útiles de imágenes
• Implementar un almacenamiento en caché efectivo
• Acelerar la entrega
• Transforme imágenes en formatos óptimos de próxima generación
• Asegúrese de que las imágenes respondan
• Implementar lógica de tiempo de ejecución para aplicar la configuración óptima en diferentes contextos.

Afortunadamente, existe una clase de herramientas diseñadas específicamente para resolver estos desafíos y brindar estas soluciones: las CDN de imágenes . En particular, quiero centrarme en ImageEngine, que ha superado consistentemente a otras CDN en las pruebas de rendimiento de página que he realizado.

ImageEngine es un CDN de imágenes inteligente y compatible con el dispositivo que puede utilizar para ofrecer imágenes de su sitio web (incluidos GIF). ImageEngine utiliza la detección de dispositivos WURFL para analizar el contexto desde el que se accede a las páginas de su sitio web (dispositivo, tamaño de pantalla, DPI, sistema operativo, navegador, etc.) y optimizar sus recursos de imagen en consecuencia. Según estos criterios, puede optimizar las imágenes cambiando su tamaño, formateándolas y comprimiéndolas de forma inteligente.

Es una solución completamente automática, configúrelo y olvídese y requiere poca o ninguna intervención una vez configurado. La CDN tiene más de 20 PoP globales con la lógica integrada en los servidores perimetrales para una mayor velocidad en diferentes regiones. ImageEngine afirma lograr índices de aciertos de caché de hasta un 98 %+, así como reducir la carga útil de imágenes en un 75 %+.

Prueba paso a paso + Cómo utilizar ImageEngine para mejorar la experiencia de la página

Para ilustrar la diferencia que puede hacer el uso de una CDN de imágenes como ImageEngine, le mostraré una prueba práctica.

Primero, echemos un vistazo a cómo una página con una gran cantidad de contenido de imágenes obtiene puntaje usando PageSpeed ​​Insights. Es una página sencilla, pero consta de una gran cantidad de imágenes de alta calidad con algunos elementos interactivos, como botones y enlaces, además de texto.

FID es único porque se basa en datos de interacciones del mundo real que los usuarios tienen con su sitio web. Como resultado, la FID sólo se puede recolectar “en el campo”. Si tiene un sitio web con suficiente tráfico, puede obtener el FID generando un Informe de experiencia de página en Google Console.

Sin embargo, para los resultados de laboratorio, de herramientas como Lighthouse o PageSpeed ​​Insights, podemos suponer el impacto del bloqueo de recursos al observar TTI y TBT.

Ah, sí, y también me centraré en los resultados de una auditoría móvil por varias razones:

1. El propio Google está dando prioridad a las señales móviles y a la indexación móvil primero.
2. La optimización de las páginas web y los recursos de imágenes suele ser el mayor desafío para los dispositivos móviles y la capacidad de respuesta general.
3. Brinda la oportunidad de mostrar la máxima mejora que una CDN de imagen puede proporcionar

Con eso en mente, aquí están los resultados de nuestra página:

Entonces, como puede ver, tenemos algunos problemas. De manera útil, PageSpeed ​​Insights marca los dos CWV presentes, LCP y CLS. Como puede ver, debido a la enorme carga útil de la imagen (aproximadamente 35 MB), tenemos un LCP ridículo de casi 1 minuto.

Debido al diseño sencillo y al hecho de que di explícitamente atributos de ancho y alto a las imágenes, nuestra página resultó ser estable con 0 CLS. Sin embargo, es importante darse cuenta de que la carga lenta de las imágenes también puede afectar la estabilidad percibida de sus páginas. Por lo tanto, incluso si no puede mejorar directamente CLS, cuanto más rápido se carguen elementos importantes, como las imágenes, mejor será la experiencia general para los usuarios del mundo real.

TTI y TBT también estuvieron por debajo del promedio. Pasarán al menos dos segundos desde el momento en que aparece el primer elemento en la página hasta que la página pueda comenzar a volverse interactiva.

Como puede ver en las oportunidades de mejora y diagnóstico, casi todos los problemas estaban relacionados con la imagen:

Configurar ImageEngine y probar los resultados

Bien, ahora es el momento de agregar ImageEngine a la mezcla y ver cómo mejora las métricas de rendimiento en la misma página.

Configurar ImageEngine en casi cualquier sitio web es relativamente sencillo. Primero, vaya a ImageEngine.io y regístrese para una prueba gratuita . Simplemente siga el sencillo proceso de registro de 3 pasos en el que deberá:

1. proporcionar el sitio web que desea optimizar,
2. la ubicación web donde se almacenan sus imágenes y luego
3. copie la dirección de entrega que ImageEngine le asigna.

Este último tendrá el formato {random string}.cdn.imgeng.in pero se puede actualizar desde el panel de ImageEngine.

Para publicar imágenes a través de este dominio, simplemente regrese al marcado de su sitio web y actualice los imgatributos src. Por ejemplo:

De:

img src=”mywebsite.com/images/header-image.jpg”/

A:

img src=”myimages.cdn.imgeng.in/images/header-image.jpg”/

Eso es todo lo que necesitas hacer. ImageEngine ahora extraerá automáticamente sus imágenes y las optimizará dinámicamente para obtener mejores resultados cuando los visitantes vean las páginas de su sitio web. Puede consultar las guías de integración oficiales en la documentación sobre cómo usar ImageEngine con Magento, Shopify, Drupal y más. También hay un complemento oficial de WordPress .

Estos son los resultados de mi página de prueba de ImageEngine una vez configurada:

Como puede ver, los resultados son casi perfectos. Se mejoraron todas las métricas, puntuando en verde, incluso el índice de velocidad y el LCP, que se vieron significativamente afectados por las imágenes grandes.

Como resultado, no hubo más oportunidades de mejora. Y, como puede ver, ImageEngine redujo la carga útil total de la página a 968 kB, reduciendo el contenido de la imagen en aproximadamente un 90 %:

Conclusión

Hasta cierto punto, es más de lo mismo por parte de Google, que constantemente se ha movido hacia los dispositivos móviles y ha empleado una lista cada vez mayor de métricas para perfeccionar la mejor “experiencia de página” posible para los usuarios de sus motores de búsqueda. Además de reafirmar su movimiento en esta dirección, Google afirmó que continuará probando y revisando su lista de señales.

Otras métricas que pueden aparecer en sus herramientas, como TTFB, TTI, FCP, TBT o posiblemente métricas completamente nuevas, pueden desempeñar un papel aún más importante en futuras actualizaciones.

Encontrar soluciones que le ayuden a obtener una puntuación alta en estas métricas ahora y en el futuro es clave para mantenerse a la vanguardia en este entorno altamente competitivo. Si bien la optimización de imágenes es sólo una faceta, puede tener implicaciones importantes, especialmente para sitios con muchas imágenes.

Una CDN de imágenes como ImageEngine puede resolver casi todos los problemas relacionados con el contenido de imágenes, con un mínimo de tiempo y esfuerzo, además de preparar su sitio web para futuras actualizaciones.