En un nuevo video de Google, el Developer Advocate Alan Kent comparte seis consejos de optimización de imágenes para sitios de comercio electrónico.
Si bien el video está dirigido específicamente a sitios de comercio electrónico, los consejos se aplican a cualquier sitio que ofrezca una gran cantidad de imágenes.
En más de 14 minutos, Google Video es muy comprensible si está ocupado trabajando en sitios web.
Aquí tienes un resumen más delicioso que puedes consumir en menos de cinco minutos.
Estos son los consejos de Google para que sus imágenes se carguen más rápido y de manera más eficiente.
Contenido del Articulo
1. Eliminar el cambio de diseño de imagen acumulativo (CLS)
CLS se refiere a los casos en los que el contenido de la página se mueve visualmente o cambia de un lugar a otro mientras se carga.
Aunque este problema no es causado únicamente por las imágenes, pueden contribuir al problema si se usan incorrectamente.
En la mayoría de los casos, CLS es fácil de detectar buscando tráfico en una página cuando se carga, pero existen muchas herramientas para medirlo.
Para obtener más información sobre CLS, cómo medirlo y cómo solucionarlo, consulte nuestra guía detallada:
2. Dale a tus imágenes el tamaño adecuado
Elija el ancho y el alto correctos para sus imágenes, ya que los archivos más grandes tardan más en descargarse.
Obtener el tamaño de imagen correcto puede ser complicado debido a la variedad de tamaños de pantalla y resoluciones que visitan su sitio.
Si el navegador recorta la imagen por sí solo, el tamaño de la descarga termina siendo más grande de lo necesario, lo que simplemente reduce las cosas.
Una manera fácil de detectar imágenes de tamaño incorrecto es usar imágenes del tamaño adecuado sección en la sección Oportunidades en Informe de información de PageSpeed.
Una vez que encuentre imágenes que son más grandes de lo necesario, puede solucionar el problema con soluciones como imágenes receptivas.
3. Usa el mejor formato de archivo de imagen
Considere el formato de archivo de sus imágenes, como si fuera a usar archivos PNG, JPEG o webP.
El formato de archivo afecta el tamaño del archivo, por lo que tomar la decisión correcta requiere una consideración cuidadosa.
Hay ventajas y desventajas que deben sopesarse para cada forma. Por ejemplo, los archivos JPEG y webP tienden a tener tamaños de archivo más bajos, aunque se logran tamaños más pequeños a expensas de la calidad de la imagen.
Sin embargo, es posible que los compradores no sientan el deterioro de la calidad de la imagen y que el beneficio de la velocidad sea significativo.
Para averiguar si su sitio puede beneficiarse del uso de un formato de imagen diferente, consulte ver imágenes en formatos de próxima generación sección del informe de PageSpeed Insights. Este informe enumera las imágenes que se pueden convertir a un formato de archivo más eficiente.
4. Comprime las imágenes correctamente
Use el factor de calidad adecuado para sus imágenes para codificarlas de manera efectiva, manteniendo la calidad de imagen deseada.
Él Codificación de imágenes efectiva La sección de informes de PageSpeed Insights se puede utilizar para identificar imágenes que son buenas candidatas para la optimización de la compresión. El informe también muestra posibles ahorros en el tamaño de los archivos.
Para encontrar un factor de calidad con el que esté satisfecho, utilice la herramienta de conversión de imágenes de su elección en varias imágenes con diferentes valores de calidad y compare el antes y el después.
Google recomienda Squoosh.app como una manera fácil de comparar imágenes con y sin compresión.
Dígale al navegador cuánto tiempo puede almacenar imágenes de forma segura.
Cuando devuelve una imagen, puede devolver un encabezado de respuesta HTTP con una instrucción de caché, como cuánto tiempo le toma a un navegador almacenar una imagen en el caché.
Nuevamente, puede usar el informe de PageSpeed Insights para averiguar si los encabezados de caché de respuesta HTTP están configurados correctamente en su sitio.
Él sirva elementos estáticos con una política de caché eficaz La sección identifica las imágenes que pueden beneficiarse de las mejoras de almacenamiento en caché.
Para solucionar problemas con su sitio, vea si tiene alguna configuración de plataforma o servidor web que pueda cambiar para ajustar la vida de caché de las imágenes en su sitio.
Si no cambia las imágenes con frecuencia, puede establecer una vida útil prolongada de la memoria caché.
6. Sigue tus fotos correctamente
Como sugerencia más avanzada, Google recomienda la secuencia correcta para ordenar los recursos del sitio.
Se recomienda el siguiente orden de descarga:
- Imágenes de héroes en la parte superior de la página.
- Otras imágenes arriba del pliegue
- Imágenes justo debajo del aspecto
Las imágenes restantes en una página web se pueden cargar lentamente.
Para saber si su sitio está cargando imágenes de manera efectiva, puede consultar el informe de PageSpeed Insights. En el posponer imágenes fuera de pantalla en la sección de informes, verá una lista de imágenes que podrían cargarse después de otras imágenes.
Para obtener más detalles sobre cualquiera de los consejos anteriores, vea el video completo de Google a continuación:
Imagen seleccionada: Tada Images / Shutterstock
