¿Tener demasiadas imágenes de fondo en CSS afecta el rendimiento?

Question

Algunos usuarios informan que mi sitio es demasiado lento y creo que las imágenes de fondo en CSS podrían ser un posible culpable

Tengo un sitio que utiliza un sistema de compilación personalizado para concatenar todos los CSS, comprimirlos (compresor YUI), hacer sprites CSS automáticamente (SmartSprites) y termino con un CSS de 9 kb para toda la página, esto incluye todas las CSS para imágenes de fondo Por fin hay D, tenían alrededor de 60 (varios van al mismo sprite, no estoy seguro de cuántos)

Me preguntaba si el comportamiento predeterminado de los navegadores es descargar las imágenes según sea necesario (cuando coincidan con un selector) o descargarlas todas.

En este momento, Firebug en Firefox parece sugerir que se han descargado todos.¿Qué técnicas sugeriría que usaría para evitar el problema y mitigarlo?

editar:Leí mal Firebug, las imágenes que se están descargando pertenecen a una vista de luz que está oculta, pero las imágenes de fondo coinciden con el DOM.

Answer 1

No, de hecho es mejor ponerlos en CSS que en el marcado.

Las llamadas de imágenes no bloquearán la página y, a medida que se carguen las imágenes, se representarán en la página, por lo que, en general, es una buena idea cargarlas mediante CSS.Sin mencionar que este diseño también es más flexible.

(No hace falta decir que cada una de esas imágenes consumirá ancho de banda y solicitudes HTTP adicionales)

Answer 2

El comportamiento predeterminado del navegador es descargar dos elementos a la vez (es decir,2 solicitudes http), si cree que tiene muchas imágenes, cree un subdominio para sus imágenes como images.yoursite.com y comenzará a ver que los navegadores realizan solicitudes paralelas y podrá ver algunas mejoras en el rendimiento.

Answer 3

(Tema paralelo.Realmente no respondo a tu pregunta.Pero podría ser interesante o incluso relevante).

Creo que otro posible culpable es que "algunos usuarios" siempre sentirán que su sitio es "demasiado lento".(¿Tal vez sea más una crisis mental que un desbordamiento de pila?¿Qué consideran estos usuarios que es un sitio rápido?¿Pueden dar ejemplos?¿Qué tan rápida es su conexión y su computadora?¿Dónde están y dónde está ubicado su servidor?Qué exactamente ¿es lento?¿El proceso de registro?¿Ver vídeos en HD?¿Desplazarse por la ventana?¿Cargando Firefox?Después de todo, son humanos...¿No pasa?)

Answer 4

Tal vez eche un vistazo más de cerca a las imágenes que está enviando, especialmente si hay muchas compiladas en una sola imagen de "sprite".

Lo que podría estar pasando es que la imagen que estás señalando es muy grande.Claro, sólo debe cargarse una vez (el beneficio del método sprite), pero si tiene varios cientos de KB, ciertamente podría causar algunos problemas de rendimiento.

Answer 5

Hay un buen complemento de Firefox llamado Yslow que le brinda información útil sobre la optimización del rendimiento.Le muestra los problemas de rendimiento que detectó y le brinda enlaces a artículos que sugieren una mejora.http://developer.yahoo.com/yslow/

Alguna información sobre las mejores prácticas.http://developer.yahoo.com/rendimiento/rules.html