Estoy tratando de entender cómo los sprites CSS mejoran el rendimiento en un sitio?¿Cómo los sprites de CSS aceleran un sitio web?
¿Por qué la descarga de varias imágenes pequeñas es más lenta que la descarga de una sola imagen que contiene las imágenes más pequeñas si el tamaño total de la imagen individual es la suma de las imágenes más pequeñas?
Es importante entender por qué la sobrecarga de una solicitud de HTTP tiene tal impacto.
En su forma más simple, una solicitud HTTP consiste en abrir un socket, enviar la solicitud en el socket abierto y leer la respuesta.
Para abrir un socket, la pila TCP/IP del cliente envía un paquete TCP SYN al servidor. El servidor responde con un SYN-ACK y el cliente responde con un ACK.
Por lo tanto, antes de enviar un solo byte de datos de la aplicación, tiene que esperar al menos una vuelta y media de ida y vuelta al servidor.
Luego, el cliente debe enviar la solicitud, esperar a que el servidor analice la solicitud, encontrar los datos solicitados, enviarlos de vuelta, eso es otro viaje redondo más algunos gastos indirectos del servidor (con suerte, una pequeña sobrecarga, aunque se han visto algunos servidores lentos) más el tiempo para transmitir los datos reales, y ese es el mejor caso, suponiendo que no haya congestión de la red, lo que provocaría que los paquetes se descartaran y retransmitieran.
Cada vez que tenga que evitar esto, debe hacerlo.
Los navegadores modernos emitirán varias solicitudes en paralelo en un intento de reducir parte de la sobrecarga involucrada. Las solicitudes HTTP teóricamente se pueden hacer en el mismo socket, mejorando un poco las cosas. Pero en general, los viajes redondos de red son malos para el rendimiento y deben evitarse.
Menos viajes de ida y vuelta al servidor. En lugar de 6 (por ejemplo) solicitudes de 6 imágenes diferentes, obtienes una solicitud y 6 usos de la misma imagen. Si el servidor va a responder "no ha cambiado desde la última vez que preguntó" la mayor parte del tiempo, eso puede significar una reducción significativa en la cantidad de tráfico de la red.
Porque varias imágenes requieren múltiples solicitudes http. Consulte la regla de rendimiento n. ° 1 de Yahoo: Minimize HTTP Requests.
Además de minimizar el número de solicitudes, dependiendo de las imágenes, también puede encontrar que el tamaño del archivo es más pequeño combinado de lo que sería si estuvieran separados (debido, creo, a la cantidad reducida de metadatos, entre otras cosas). Otro beneficio añadido al uso de sprites es que no tiene el efecto de parpadeo cuando coloca el cursor sobre un elemento que tiene un estado de desplazamiento, que puede mejorar la percepción del usuario sobre el rendimiento de su página. Un recurso interesante sobre la optimización de imágenes que tal vez desee leer es este series de publicaciones de blog en el Blog de interfaz de usuario de Yahoo. Al volver a leer las prácticas recomendadas de Yahoo para el rendimiento, me sorprendió ver que también ellos suggested que la organización de sus imágenes horizontalmente en lugar de verticalmente también puede reducir el tamaño de su archivo.
Además de las razones anteriores, me resulta más fácil trabajar con ellas. Solo tiene un archivo que necesita modificar y cargar, y una URL para cambiar en su código, si actualiza la imagen.
En realidad, este no es el caso: las imágenes con sprites son mucho más difíciles de manejar, ya que debe hacer un seguimiento de las coordenadas de la subimagen en la imagen principal. – levik
Recuerde que "arriba" puede cambiar: si su respuesta es votada, o si otros entran después de usted, podría terminar por encima de los demás. Use el nombre de usuario o los nombres de usuario del usuario cuando se refiera a otros comentarios aquí y tendrá sentido sin importar qué. –
Hice algunas cifras hace unos años: para un gif de 43 byte 1x1, la tara de HTTP (sin incluir la sobrecarga del paquete TCP) superaba los 240 bytes. –
Puede agregar, que dependiendo de la imagen, la compresión puede ser más eficiente. –
Además, TCP/IP es más eficiente cuando se trata de transferir archivos más grandes. – David