Cómo acelerar el tiempo de carga de una página web con muchas imágenes

Lo primero que debe hacer es ver si puede disminuir el tamaño de sus imágenes mediante compresión. Si está utilizando WordPress, puede usar un complemento como Optimus Image Optimizer. Esto utiliza compresión sin pérdidas, lo que significa que no verá ninguna pérdida de calidad.

Incluso puede ir un paso más allá y convertir a imágenes WebP que disminuirán drásticamente el tamaño de sus imágenes.

• PNG a WebP: comparación de tamaños de compresión
• JPG a WebP – Comparación de tamaños de compresión

Lo segundo que haría es implementar un CDN que admita HTTP / 2. ¿Por qué? Porque HTTP / 2 hace un gran trabajo en paralelismo y multiplexación . Aquí hay una gran demostración de eso: https://http2.golang.org/gophert … Puede ver cuánto más rápido se cargan 180 imágenes en mosaico frente a HTTP / 1.

Y, por supuesto, con un CDN, está sirviendo sus imágenes desde servidores de todo el mundo ubicados más cerca de sus visitantes, por lo que el tiempo de descarga de contenido y TTFB serán menores.

Consulte la Comparación de CDN para obtener una buena lista de proveedores.

Gracias por A2A. Hay tres cosas que puede hacer para que su página web se cargue rápidamente.

1. Compresión de imágenes sin pérdida (mira imagemagick y mozJpeg que pueden reducir drásticamente el tamaño de tus imágenes sin reducir la calidad percibida por un ojo humano)
2. Ir para la carga perezosa. No necesita mostrar todas las imágenes a la vez. Hay muchas técnicas de carga diferida disponibles en el paisaje web.
3. Use un CDN

En lo que respecta al tiempo de respuesta, si está en el negocio minorista web, 2 segundos parecen ser la norma.

# 1 Use un CDN (Content Delivery Network): Alojar sus imágenes o cualquier otro archivo multimedia en una red de entrega de contenido es una de las mejores formas de acelerar su sitio, y a menudo puede ahorrar hasta un 60% de ancho de banda y la mitad del número de solicita su sitio web.

# 2 Comprima sus imágenes: esto reducirá el tamaño físico de las imágenes, lo que reducirá el tiempo de carga de las imágenes en la página.

# 3 Especifique las dimensiones de la imagen: antes de que su navegador pueda mostrar su página web, tiene que descubrir cómo distribuir su contenido alrededor de sus imágenes. Sin conocer el tamaño de estas imágenes, el navegador lo resuelve, lo que hace que trabaje más y tarde más. Entonces, cuando tiene demasiadas imágenes, es conveniente especificar los atributos de ancho y alto con la etiqueta img. Las dimensiones de imagen evitan que el navegador tenga que pasar por este paso, lo que ayuda a acelerar las cosas.

# 4 Use CSS Sprites: Un sprite es una imagen grande que contiene todas sus imágenes. Entonces, cuando sea posible, use CSS Sprites en lugar de usar imágenes individuales.

Puede comprimir todas sus imágenes, pero debe hacerlo sin pérdida de calidad. Recomiendo a compresor sobre otras herramientas de compresión de imagen, porque compresor tiene muchas ventajas, no usa internet y comprime la imagen en tamaño del cliente, lo cual es muy rápido y no desperdicia su internet.