PageSpeed Insights es una herramienta gratuita de medición del rendimiento proporcionada por Google. Analiza el contenido de una página web para dispositivos móviles y de escritorio. Proporciona una única puntuación numérica (1 a 100) que resume varias métricas clave que miden el rendimiento. Si no ha ejecutado PageSpeed Insights en su sitio web, debe detenerse y hacerlo. Ahora… Este es un indicador importante de cómo Google está evaluando y evaluando su sitio.
Si su puntaje de PageSpeed Insights está por debajo de 80, no se asuste. Usted no está solo. Muchos sitios web no están optimizados para el rendimiento. La buena noticia es que puede tomar medidas que mejorarán inmediatamente su rendimiento.
Notará que PageSpeed Insights destaca los problemas que hacen que la página se cargue lentamente. Sin embargo, es posible que necesite instrucciones adicionales para resolver estos problemas. A continuación, le mostraremos cómo solucionar cuatro problemas comunes de imagen. También le mostraremos cómo ImageEngine, una imagen CDN, puede simplificar, automatizar y proporcionar la mejor solución de optimización de imágenes posible.
Contenido del Articulo
El rendimiento impulsa las clasificaciones de SEO de Google
¿Por qué es importante la puntuación y el rendimiento de PageSpeed Insights? ¿No se clasifica el SEO en función de la relevancia del contenido, los vínculos de retroceso y la autoridad del dominio? Sí, pero el rendimiento importa más ahora que hace un año. A partir de 2021, Google ha agregado métricas de rendimiento a los factores que influyen en las clasificaciones de los motores de búsqueda. En un mercado donde los sitios web intentan constantemente coincidir con las páginas de sus competidores (en cuanto a relevancia de contenido, palabras clave y otros problemas de SEO), el rendimiento es importante en la clasificación de los motores de búsqueda para las palabras clave.
¿Qué son las métricas principales de Web Vitals?
PageSpeed Insights se basa en un conjunto de métricas de rendimiento llamadas Core Web Vitals. Estos indicadores:
Pintura de mayor contenido (LCP): Mide el tiempo de procesamiento (en segundos) de la imagen o el bloque de texto más grande visible en la ventana gráfica, en relación con el momento en que la página comenzó a cargarse. Normalmente, la imagen más grande es la imagen principal en la parte superior de las páginas.
Retraso de la primera entrada (FID): Mide el tiempo desde que el usuario interactúa por primera vez con la página (es decir, cuando hace clic en un enlace, hace clic en un botón o usa un control personalizado basado en JavaScript) hasta que el navegador puede comenzar a procesar controladores de eventos en respuesta a esa interacción. .
Cambio de diseño acumulativo (CLS): Mide el cambio de diseño que se produce cada vez que un elemento visible cambia de posición de un fotograma renderizado al siguiente.
Las imágenes y JavaScript son los principales culpables
PageSpeed Insights clasifica los problemas en función de cómo afectan esas métricas de Core Web Vitals. Las dos razones principales por las que puede tener una puntuación baja tienen que ver con JavaScript y las imágenes.
Los problemas de JavaScript suelen estar relacionados con el código que bloquea o retrasa la carga de la página. Por ejemplo, las imágenes de carga diferida pueden incluir JavaScript para bloquear la carga. Por lo general, no utilice una biblioteca de JavaScript de terceros para controlar la carga de imágenes. Estas bibliotecas a menudo rompen la funcionalidad de carga de imágenes incorporada del navegador. La carga diferida puede ralentizar la carga de imágenes en la parte superior de la página (LCP más largo) porque el navegador comienza a cargarse más tarde y porque el navegador debe ejecutar JavaScript primero.
Otro problema de JavaScript tiene que ver con el código que es grande o innecesario para la página. En otras palabras, código hinchado. Hay buenos recursos en Internet para resolver estos problemas. Sin embargo, en este blog, nos centraremos en cuestiones de imagen.
Las imágenes contribuyen en gran medida a un rendimiento deficiente. La carga útil promedio del sitio web es de 2 MB en 2021 y el 50% de esa carga son imágenes. Las imágenes suelen ser más grandes de lo que deberían ser y se pueden optimizar para el tamaño sin sacrificar la calidad … si lo haces bien.
Cuatro problemas de imagen resaltados por PageSpeed Insights
El Contentful Paint más grande es la métrica principal que influye en las imágenes. PageSpeed Insights a menudo recomienda los siguientes cuatro consejos:
- Sirve imágenes en formatos de próxima generación.
- Codifique imágenes de manera eficiente.
- Tamaño de imagen correcto.
- Evite grandes cargas de red.
Este consejo parece sencillo. Google ofrece excelentes consejos para trabajar con imágenes en su comunidad de desarrolladores. Se puede resumir en los siguientes pasos:
- Seleccione el formato de archivo apropiado.
- Aplique la compresión de imagen adecuada.
- Aplique el tamaño de pantalla correcto.
- Renderiza la imagen.
- Escriba un código de imagen receptivo para seleccionar la versión correcta de la imagen.
Llamamos al proceso de Google el enfoque de “sintaxis receptiva en tiempo de compilación”. Si tiene un sitio web relativamente estático que no genera nuevas páginas o cambia de imagen con frecuencia, entonces probablemente pueda vivir con este enfoque. Sin embargo, si tiene un sitio grande y dinámico con muchas imágenes, rápidamente sentirá el dolor de este enfoque. El propio Google enfatiza que los desarrolladores deben esforzarse por automatizar este proceso de imagen. ¿Por qué? Debido a que el proceso tiene serias fallas en el flujo de trabajo:
- Aumenta los requisitos de almacenamiento debido al gran aumento de las opciones de imagen.
- Aumenta la hinchazón y la complejidad del código.
- Los desarrolladores necesitan tiempo y esfuerzo para crear variaciones e implementar la capacidad de respuesta.
- Se requiere lógica para adaptarse a la compatibilidad con varios navegadores para formatos de imagen de próxima generación.
- No se adapta a diferentes contextos. Se basa en conjeturas (puntos de interrupción) sobre qué dispositivo está visitando la página web.
- Se requiere un CDN separado para aumentar aún más la velocidad de entrega.
- Se requiere un mantenimiento continuo para adaptarse a los nuevos dispositivos, puntos de interrupción, formatos de imagen, mercados y prácticas.
Pasos clave para la obtención de imágenes de alto rendimiento
En lugar de utilizar un enfoque de sintaxis receptiva en el momento de la compilación, una solución de CDN de imágenes automatizada puede solucionar todos los problemas de imagen planteados por PageSpeed Insights. Los pasos clave de la imagen CDN que debe buscar son:
- Descubrimiento de dispositivos móviles: identifica el modelo de dispositivo de un visitante del sitio web y sus capacidades técnicas. Estos incluyen: versión del sistema operativo, versión del navegador, densidad de píxeles de la pantalla, ancho y alto de la resolución de pantalla, compatibilidad con formatos de imagen y video de próxima generación. Aquí es donde ImageEngine es único en el mercado. ImageEngine utiliza la verdadera detección móvil para mejorar aún más la optimización de la imagen. Esto tiene un gran impacto en la eficiencia del proceso de optimización de imágenes.
- Optimización de imágenes: el CDN de imágenes utilizará la configuración del dispositivo para cambiar el tamaño, comprimir y convertir automáticamente imágenes originales grandes en imágenes optimizadas utilizando formatos de archivo de próxima generación como WebP y AVIF. A menudo, la imagen CDN, como ImageEngine, reducirá la carga útil de la imagen hasta en un 80%.
- Entrega de CDN: Los CDN de imágenes como ImageEngine tienen servidores de borde ubicados estratégicamente en todo el mundo. Al colocar imágenes optimizadas más cerca de los clientes solicitados y entregarlas inmediatamente desde la caché, a menudo proporciona tiempos de carga de páginas web un 50% más rápidos que los CDN tradicionales.
Proceso de integración simple para Image CDN
Después de registrarse para obtener una cuenta de ImageEngine y una prueba gratuita, recibirá una dirección de envío. Después de configurar los elementos para incluir una dirección de envío, ImageEngine comenzará a buscar las imágenes originales de su sitio web (no es necesario moverlas o descargarlas), optimizarlas automáticamente y entregarlas.
Puede automatizar la adición de la dirección de envío a la etiqueta img src utilizando los complementos de WordPress y Magento. Los desarrolladores también pueden usar marcos de JavaScript ImageEngine React, Vue o Angular para simplificar el proceso.
Además, hay muchas formas de simplificar la implementación ajustando plantillas para muchas plataformas de comercio electrónico y CMS.
Resultados: rendimiento mejorado, SEO mejorado.
La mayoría de los usuarios de ImageEngine ven una mejora significativa en las puntuaciones de LCP y, como resultado, una mejora significativa en su puntuación general de PageSpeed Insights. ImageEngine proporciona un análisis de demostración gratuito de sus imágenes antes y después de la optimización de imágenes. En muchos casos, los desarrolladores ven mejoras de muchos segundos en su LCP y su índice de velocidad.
Por lo tanto, el rendimiento contribuye a una clasificación de búsqueda más alta y una mejor UX, y también aumenta la tasa de conversión de los sitios web de comercio electrónico. Los pasos que tome para mejorar el rendimiento de su imagen se traducirán en un aumento de las ventas y conversiones, un flujo de trabajo optimizado y una reducción de los costos de entrega de CDN.
…
