Hola Habr! Le presento la traducción del artículo
"Cómo optimizar la carga de imágenes en su sitio web" .
Si el sitio tiene muchas imágenes hermosas, entonces esto es excelente, pero pueden degradar significativamente el tiempo de carga y, como resultado, el SEO sufrirá, y muchos usuarios cerrarán el sitio antes de que se cargue. A menudo sucede que se descargan varios megabytes de imágenes simplemente para mostrar el control deslizante en la página principal.
Imagine que visita un sitio de este tipo a través de una Internet móvil lenta, puede llevar mucho tiempo y la mayoría de los usuarios en esta situación simplemente cerrarán su sitio incluso antes de descargarlo. Una buena manera de probar esto es aprovechar la capacidad de limitar la velocidad de Internet a través de
Chrome Devtools .
El problema
El problema es que a menudo sucede que el contenido en sí ya está cargado y las imágenes aún se están cargando. Como resultado, el usuario puede ver el espacio vacío donde las imágenes se cargan lentamente. Claramente, esto no es lo que te gustaría.
En el siguiente ejemplo, creé un sitio web simple con una imagen de fondo que pesa 4.8MB. Como puede ver, el DOM se inició en 1.14 segundos, es decir de hecho, el usuario ve el contenido después de 1.14 segundos, lo cual es bastante bueno para internet 3G. Sin embargo, la imagen de fondo se carga en 27.32 segundos. Durante este tiempo, el usuario ya puede abandonar su sitio.
Y no solo la experiencia del usuario sufre esto. En 2010,
Google anunció que la velocidad de descarga es uno de los factores en su algoritmo de clasificación y creo que en el futuro este factor será cada vez más importante.
Solución
Entonces, ¿cómo resolver este problema? Bueno, para empezar, podemos comprimir nuestra imagen de fondo usando varias herramientas. Por ejemplo,
TinyPNG ,
ImageOptimizer o
JPEGmini . Será una victoria fácil y reducirá el tiempo de arranque a ~ 10 segundos. Y aunque parece un gran paso en la decisión, 10 segundos todavía es demasiado.
El siguiente paso puede ser descargar la imagen de código auxiliar antes de cargar la imagen original. Un trozo es una versión de la imagen original, pero con una resolución baja. Cuando creamos dicha imagen, reducimos la resolución de 7372x4392 píxeles a 20x11. Como resultado, el tamaño de la imagen se reduce de 4.8MB a 900 bytes.
Esto reducirá la velocidad de descarga de 10 segundos a 550 milisegundos. Pero ahora, como fondo, tenemos una imagen borrosa de baja resolución. Esta es una gran solución mientras la página carga los primeros segundos, pero aún queremos mostrar a los usuarios la imagen original en alta resolución.
Para hacer esto, primero tendremos que descargar la imagen de baja resolución, y solo entonces, de forma asíncrona en segundo plano, cargar el original de alta resolución, y cuando se cargue la versión de alta resolución, podemos colocarla en el lugar de la imagen de resguardo. Para esto, usé el siguiente código antes.
(() => { 'use strict';
Este código busca elementos con la clase
asyncImage , después de lo cual carga todas las imágenes especificadas en el atributo
data-src , y tan pronto como se carga la imagen, reemplaza
src para el elemento
<img> , y para los elementos restantes establece la imagen de fondo a través de css.
<div class="asyncImage" data-src="/images/background.jpg"> ... </div>
o
<img class="asyncImage" src="/images/background-min.jpg" data-src="/images/background.jpg" alt="Beautiful landscape sunrise">
Dado que el script elimina la clase del elemento después de cargar la imagen, podemos crear hermosas animaciones usando CSS si lo desea. Por ejemplo, la animación de entrada y salida hará que el trozo desaparezca cuando se reemplace la imagen.
Conclusión
Entonces, ¿qué hemos logrado? Hemos mejorado la experiencia del usuario, acelerado la carga del sitio, lo hemos hecho más accesible para los usuarios sin Internet rápido y posiblemente hemos mejorado nuestra clasificación en Google. Estas son grandes mejoras para un cambio tan pequeño.
Como puede ver, descargamos el trozo durante 570 milisegundos, tan pronto como se carga, el usuario verá una versión de baja resolución de nuestra imagen original, y tan pronto como se cargue la imagen original, reemplazará la versión de baja resolución.
Vea un ejemplo de trabajo aquí.Imágenes de carga lenta
Si desea ir más allá y mejorar aún más la carga de imágenes, puede resultarle útil utilizar la carga diferida de imágenes.
La carga diferida es una técnica en la que las imágenes fuera del área visible de la página no se cargan hasta que la imagen se acerca al borde del área visible.
Su ventaja es que se cargarán menos datos durante la carga inicial, ya que a menudo solo una pequeña parte de las imágenes se muestran en el área visible de la página, y el resto se puede descargar a medida que el usuario se desplaza. Un
observador de intersección es el más adecuado para implementar esto.