Optimización de carga web con CSS Sprite para tienda online

hola a todos
Tengo una tienda online con woocomerce que al hacer el analisis de la web me dice que es muy lenta , la web es esta BURKEVA - Distribuidor de productos para hostelería, carne, kebab, hamburguesas ( va dirigida a grandes consumidores a si que espero que no se condidere spam).
queria juntar las imagenes en un css sprite , no se si es buena idea abajo de la web se muestran 3 columnas con productos radom, ultimos añadidos y sugerencias.Creo que se muestram 15 productos con 15 fotos , si hago un css sprite con todas las fotos tengo alrededor de 200 productos y aun faltan 50 mas lo mismo creo una imagen muy pesada y tarda mucho en cargar la web.
En caso de que fuera buena idea ¿como se haria?, ya que los tutoriales que visto son para imagenes que estan siempre fijas, los productos de la columna de abajo cambian cuando quieren , lo mismo anuncio un producto X y me sale la foto de otra cosa totalmente distinta.
He leido este tutorial que he visto en otro post
Tutorial básico sobre CSS Sprite | Kabytes



gracias

Según pingdom tools, tu sitio tiene 85/100 de performance grade, nada mal para ser una tienda. Google también la tiene en 84 /100.

puedes hacer lo de los sprites, pero necesitas de alguien que maneje bien la plantilla de tu sitio ya que hay que ver que re acomodar todo en el css para que no se pierdan las imágenes ni se vea feo.

No creo que el impacto sea muy fuerte.

Ahora la parte de tienda online es aún más rápida que el index. Yo no me preocuparía. En esa parte las imágenes son de cada producto, de modo que ponerlas en un sprite es imposible.

gracias por respomder
¿y si hago el css srpite en las imagnes de la plantilla? imaginemos que la web se queda como esta sin ningun cambio mas podria hacerlo, algunas de las imagenes que mas tardan en cargar son del thema en concreto crinkles.png, woothemes. png, body.gif
Por ser imagenes estaticas mereceria la pena hacerlo? al tener dos tipos . png y . gif se puede hacer?

si vas a usar un sprite, este, como es uno solo debe tener solo una extensión.

De que puedes puedes, pero como digo debes conocer bien el css de tu sitio para moverle las imágenes, de valer la pena, no lo sé tendrías que hacer las pruebas necesarias.

El sprite está pensado para evitar tener que hacer mucha conexiones y por lo tanto muchas descargas contra el servidor (y así reducir el tiempo de carga). Las que tu dices que más tardan "en cargar" son porque ocupan más espacio directamente. Ese tiempo, seguirá siendo ya que al hacer el sprite tampoco se reducirá el tamaño de las imágenes, simplemente hará menos consultas.

Normalmente los sprites están pensados para agrupar todos los "iconos" e imágenes pequeñas de la Web, que con eso ahorras tener que hacer muchas solicitudes al servidor. En tu caso, la web tiene pocas imágenes (eso está bien). Quizás podrías hacer un sprite con las flechas, la estrellita, mi cuenta, categorías, etc... Pero no mucho más.

Hacer un sprite con los thumbnails de los productos como dices es complicado, porque para usar sprites hay que usar las fotos con background de css y no usando la etiqueta img de html.

Viendo que usas un wordpress, podrías intentar configurar algún plugin de caché, y quizás así mejorarías mucho más el rendimiento y con mucho menos esfuerzo 🙂

es cierto wp super caché podría venirte bien

Yo creo que es por el hosting, porque una imagen de 90K me da un ping de 742ms y 1,72 segundos de tiempo de descarga, me pasa igual con varias imagenes y con otros archivos .js con 400 ms mientras que con los css usa un tiempo de carga de 30ms. Me parece que tu hosting tiene problemas de ancho de banda, también puede ser que desde españa no de buen ping.

Yo te recomendaría que según en el país que vendas busques un hosting de ese país para ganar en velocidad. Si necesitas ayuda avisame.

Un saludo

gracias a todos por la ayuda
El hosting es español aunque el plan es mas bien barato, mirare aver si me puedo cambiar a otro mejor durante el tiempo que me queda y sino funciona me ire a otro lado.
plugggins tengo varios wp -super cache creo que la configuracion es por defecto o en su caso algun tutorial simple de marcar 3 casillas
wp- miniy
wp http compresion
y tengo el wp smush este ultimo le tengo desactivado porque no hacia nada , relentizaba la web al hacer pruebas en gtmetrix.

¿Deberia de reconfigurarlos? quitar alguno o añadir algo mas? algun tutorial mas avanzado?

Respecto al css sprite a lo mejor lo pruebo ya que me liedo algunas cosas con las imagenes de la plantilla por ver si se nota o no, pero lo dejare para mas adelante porque aun la web tiene trabajo pendiente y lo hare un fin de semana cuando no entre nadie de noche
un saludo

he reducido el tamañao de varias imagens png de la plantilla y el tamaño de la web se ha reducido a la mitad, pero al hacer el test de gtmetrix mi page speed se ha reducido de 70 C a 59 E, ademas el tiempo de carga de la web solo a bajado 0,5 sg.
Como puede ser que punte menos si la web carga un pelin mas rapido y el tamaño a disminuido un 30% o algo mas?
las barras verdes de los indicadores estan igual que en la captura sin reducir