[Pido ayuda] Optimizar carga de mi web (Combine images using CSS sprites)

vicase98 · 2 Mar 2014

Buenas a todos, le he realziado un test de carga a mi web de cara a optimizar la carga para mejorar el SEO, y por lo general está bien, pero hya un punto que flojea bastante, y me recomienda la página que haga Combine images using CSS sprites. ¿Alguien sabe qué es eso o como lo hago para optimizar ese aspecto? Muchas gracias a todos
La web del test y el análisis: http://gtmetrix.com/reports/vicalibera.com/q7t6feuO

lobogris · 2 Mar 2014

Los sprites son imágenes combinadas, una imagen vale más que mil palabras (de YouTube):
https://s.ytimg.com/yts/imgbin/www-hitchhiker-vflxp32d5.png

vicase98 · 2 Mar 2014

lobogris dijo:
Los sprites son imágenes combinadas, una imagen vale más que mil palabras (de YouTube):
https://s.ytimg.com/yts/imgbin/www-hitchhiker-vflxp32d5.png

Gracias, ya me has aclarado algo pero, que tengo que hacer para optimizar la carga de eso?

Enviado desde mi 06_v89_jbla768_asx_s4lockscreen usando Tapatalk 2

mrr276 · 2 Mar 2014

vicase98 dijo:
Gracias, ya me has aclarado algo pero, que tengo que hacer para optimizar la carga de eso?

Enviado desde mi 06_v89_jbla768_asx_s4lockscreen usando Tapatalk 2

Usar sprites para tus imágenes, es decir, juntar todas y que mediante código acceda a la imagen incluida en el sprite

Enviado desde mi iPhone con Tapatalk

vicase98 · 2 Mar 2014

mrr276 dijo:
Usar sprites para tus imágenes, es decir, juntar todas y que mediante código acceda a la imagen incluida en el sprite

Enviado desde mi iPhone con Tapatalk

Ah vale, gracias por la aclaración, pero eso se puede hacer con prestaship?

Enviado desde mi 06_v89_jbla768_asx_s4lockscreen usando Tapatalk 2

Zeokat · 2 Mar 2014

vicase98 dijo:
Ah vale, gracias por la aclaración, pero eso se puede hacer con prestaship?

Enviado desde mi 06_v89_jbla768_asx_s4lockscreen usando Tapatalk 2

Nunca he trabajado con prestashop pero si usa CSS se debería poder.

Sebas · 2 Mar 2014

la combinación de imagenes como sprites es un tema de codigo html y css, no tiene nada que ver con el gestor de contenidos, de todos modos hay varias cosas para optimizar ademas de los sprites. Para trabajar con sprites es posible que tengas que modificar toda la estructura del template que estas usando en prestashop :S
Acá tenes un artículo que explica bastante sobre sprites
Optimiza tu sitio con CSS sprites | Diseño web

lo que podés hacer en todo caso es transformar muchas de esas imagenes que te sugiere gtmetrix y en lugar de transformarlas en sprites, pasalas a formato gif o jpeg y se van a comprimir bastante más, lo suficiente incluso como para que sean más livianas que utilizando el metodo de sprites

Incluso una vez que optimices todas las imagenes, si te animas a toquetear el template, podés combinar esa optimización con el método de sprites y te ahorras unos bytes en cada vista de página, lo que implica unos milisegundos de optimización que nunca vienen mal

también hay muchas imagenes que aunque parezcan optimizadas, se pueden optimizar mucho mas
por ejemplo http://www.vicalibera.com/modules/blockreinsurance/img/reinsurance-1-1.jpg
subila a facebook (que tiene un sistema de optimizacion de imágenes increíble) y luego compará el tamaño del archivo original y de la imagen optimizada a ver si te sirve

vicase98 · 2 Mar 2014

Zeokat dijo:
Nunca he trabajado con prestashop pero si usa CSS se debería poder.

Sebas dijo:
la combinación de imagenes como sprites es un tema de codigo html y css, no tiene nada que ver con el gestor de contenidos, de todos modos hay varias cosas para optimizar ademas de los sprites. Para trabajar con sprites es posible que tengas que modificar toda la estructura del template que estas usando en prestashop :S
Acá tenes un artículo que explica bastante sobre sprites
Optimiza tu sitio con CSS sprites | Diseño web

lo que podés hacer en todo caso es transformar muchas de esas imagenes que te sugiere gtmetrix y en lugar de transformarlas en sprites, pasalas a formato gif o jpeg y se van a comprimir bastante más, lo suficiente incluso como para que sean más livianas que utilizando el metodo de sprites

Incluso una vez que optimices todas las imagenes, si te animas a toquetear el template, podés combinar esa optimización con el método de sprites y te ahorras unos bytes en cada vista de página, lo que implica unos milisegundos de optimización que nunca vienen mal

también hay muchas imagenes que aunque parezcan optimizadas, se pueden optimizar mucho mas
por ejemplo http://www.vicalibera.com/modules/blockreinsurance/img/reinsurance-1-1.jpg
subila a facebook (que tiene un sistema de optimizacion de imágenes increíble) y luego compará el tamaño del archivo original y de la imagen optimizada a ver si te sirve

Muchas gracias a los dos, intentare optimizarla un poco sin tocar el codigo para no estropear nada

Enviado desde mi 06_v89_jbla768_asx_s4lockscreen usando Tapatalk 2

Zeokat · 2 Mar 2014

Para optimizar las imágenes de forma manual yo te recomiendo que uses RIOT eligiendo el formato adecuado para cada imagen: Mejor programa para optimizar imágenes

Sebas dijo:
Incluso una vez que optimices todas las imagenes, si te animas a toquetear el template, podés combinar esa optimización con el método de sprites y te ahorras unos bytes en cada vista de página, lo que implica unos milisegundos de optimización que nunca vienen mal

Eso no es po lo que se hacen los sprites, no es por el tamaño de la imagen o por ahorrarse unos bytes. Se hacen sprites para reducir el tiempo de carga ya que se reducen las peticiones HTTP de imágenes. Me explico, una web que tiene en su template unos 20 iconos, pues sino tiene un sprite cada imagen requiere una petición HTTP, es decir, 20 peticiones HTTP. Si tenemos en un sprite esos 20 iconos combinados, sólo realizamos una petición HTTP y en consecuencia no sólo reducimos el tiempo de carga de la página web sino la carga en el servidor, ya que el servidor HTTP sólo tendrá que atender a una petición HTTP en lugar de atender a 20.

Algunas bases sobre optimización de imagenes: Guía de optimización de imágenes

vicase98 · 2 Mar 2014

Zeokat dijo:
Para optimizar las imágenes de forma manual yo te recomiendo que uses RIOT eligiendo el formato adecuado para cada imagen: Mejor programa para optimizar imágenes

Eso no es po lo que se hacen los sprites, no es por el tamaño de la imagen o por ahorrarse unos bytes. Se hacen sprites para reducir el tiempo de carga ya que se reducen las peticiones HTTP de imágenes. Me explico, una web que tiene en su template unos 20 iconos, pues sino tiene un sprite cada imagen requiere una petición HTTP, es decir, 20 peticiones HTTP. Si tenemos en un sprite esos 20 iconos combinados, sólo realizamos una petición HTTP y en consecuencia no sólo reducimos el tiempo de carga de la página web sino la carga en el servidor, ya que el servidor HTTP sólo tendrá que atender a una petición HTTP en lugar de atender a 20.

Algunas bases sobre optimización de imagenes: Guía de optimización de imágenes

Lo de las peticiones lo leí cuando busque cosas sobre el sprite, lo de optimizar las imágenes, voy a ponerme a ver como va lo que me has dicho del porgrama para optimizar las imagenes, a ver si así mejora unos milisegundos la carga

Enviado desde mi 06_v89_jbla768_asx_s4lockscreen usando Tapatalk 2

- - - Actualización- - -

Zeokat dijo:
Para optimizar las imágenes de forma manual yo te recomiendo que uses RIOT eligiendo el formato adecuado para cada imagen: Mejor programa para optimizar imágenes

Eso no es po lo que se hacen los sprites, no es por el tamaño de la imagen o por ahorrarse unos bytes. Se hacen sprites para reducir el tiempo de carga ya que se reducen las peticiones HTTP de imágenes. Me explico, una web que tiene en su template unos 20 iconos, pues sino tiene un sprite cada imagen requiere una petición HTTP, es decir, 20 peticiones HTTP. Si tenemos en un sprite esos 20 iconos combinados, sólo realizamos una petición HTTP y en consecuencia no sólo reducimos el tiempo de carga de la página web sino la carga en el servidor, ya que el servidor HTTP sólo tendrá que atender a una petición HTTP en lugar de atender a 20.

Algunas bases sobre optimización de imagenes: Guía de optimización de imágenes

Se ve bueno el programa, pero me tira error con algunas imágenes. Ves bien hacer lo del sprites o no merece la pena?
Échale un ojo al análisis este y dime por favor si lo ves bien, decente, o una catástrofe. http://gtmetrix.com/reports/vicalibera.com/GNp50wkD
Aquí el análisis de otra web que analiza tiempo de carga, lo pinta mejor que la otra http://tools.pingdom.com/fpt/#!/TVi6D/http://www.vicalibera.com

Sebas · 4 Mar 2014

Zeokat dijo:
Para optimizar las imágenes de forma manual yo te recomiendo que uses RIOT eligiendo el formato adecuado para cada imagen: Mejor programa para optimizar imágenes

Eso no es po lo que se hacen los sprites, no es por el tamaño de la imagen o por ahorrarse unos bytes. Se hacen sprites para reducir el tiempo de carga ya que se reducen las peticiones HTTP de imágenes. Me explico, una web que tiene en su template unos 20 iconos, pues sino tiene un sprite cada imagen requiere una petición HTTP, es decir, 20 peticiones HTTP. Si tenemos en un sprite esos 20 iconos combinados, sólo realizamos una petición HTTP y en consecuencia no sólo reducimos el tiempo de carga de la página web sino la carga en el servidor, ya que el servidor HTTP sólo tendrá que atender a una petición HTTP en lugar de atender a 20.

Algunas bases sobre optimización de imagenes: Guía de optimización de imágenes

Es cierto lo que decis, no tiene nada que ver la optimización de imagenes con la combinacion de sprites, de hecho yo no sugerí que fueran lo mismo o que optimizar una imagen fuera lo mismo que usar sprites, pero estamos hablando de optimizar una web tratando de tocar el codigo lo menos posible. Si el usuario no quiere o no sabe implementar el uso de sprites puede optimizar las imagenes del modo en que varios le explicamos aquí, así, en cada petición que el navegador le haga el server, se puede ahorrar varios miles de bytes en procesamiento y tambien en ancho de banda, reduciendo así el tiempo de carga de la web

Zeokat · 4 Mar 2014

vicase98 dijo:
Lo de las peticiones lo leí cuando busque cosas sobre el sprite, lo de optimizar las imágenes, voy a ponerme a ver como va lo que me has dicho del porgrama para optimizar las imagenes, a ver si así mejora unos milisegundos la carga

Enviado desde mi 06_v89_jbla768_asx_s4lockscreen usando Tapatalk 2

- - - Actualización- - -

Se ve bueno el programa, pero me tira error con algunas imágenes. Ves bien hacer lo del sprites o no merece la pena?
Échale un ojo al análisis este y dime por favor si lo ves bien, decente, o una catástrofe. Latest Performance Report for: [url]http://vicalibera.com/ | GTmetrix[/url]
Aquí el análisis de otra web que analiza tiempo de carga, lo pinta mejor que la otra Website speed test

Segun ese analisis de Gtmetrix puedes mejorar otras cosas antes que hacer el sprite. No son resultados malos pero tampoco buenos. Conseguir el grado "B" es lo mínimo en mi opinion.
Segun ese analisis en tu web hay redirecciones, no especificas las dimensiones de las imágenes y las imágenes no están optimizadas. Si usas WordPress instala este plugin: WordPress › WP Smush.it « WordPress Plugins a ver si asi optimizas las imágenes.

vicase98 · 4 Mar 2014

Uso prestashop, estoy comprimiendo las imágenes con el riot, y voy a investigar como especificar el tamaño de las imagenes @Zeokat

Enviado desde mi 06_v89_jbla768_asx_s4lockscreen usando Tapatalk 2

vicase98 · 6 Mar 2014

Pues le he hecho retoques y he mejorado en casi 1.7s la carga además de ahorrar 4kbs en imágenes, a ver por dónde puedo seguir optimizandola

[Pido ayuda] Optimizar carga de mi web (Combine images using CSS sprites)

Comparte esta página