CODEWITHSUNDEEP
performanceimage
user855
user855

Reputation: 19918

Can a human eye perceive a 10 milliseconds latency in image load time

Can a human eye perceive a difference between an image that takes 150ms to load and another image that takes 160ms to download? If a page has 30-40 images, then does this 10ms difference start making a difference?

Upvotes: 19

Views: 24171

Answers (3)

David Leppik
David Leppik

Reputation: 3304

According to 3D Developer John Carmack, "Human sensory systems can detect very small relative delays in parts of the visual or, especially, audio fields, but when absolute delays are below approximately 20 milliseconds they are generally imperceptible."

That is to say, 20ms is a good rule of thumb, even though flicker may be noticeable quicker. So 10ms (150 vs. 160ms) shouldn't be perceptible. However, you're asking about whether the user will notice the difference between 150ms and 160ms. If it's a one time event (as opposed to something blinking at 15 or 16 kHz), I don't see how people could notice the difference.

People will see the 30-40 images loading, if they look carefully and there's no buffering. However, there are a lot of other things going on with web pages.

  1. Network plus OS latency varies far more than 10ms, so your 150ms load time will vary-- even if you're talking to localhost.
  2. The browser will typically have several connections open at one time to load files more efficiently. So files will seem to load simultaneously or out-of order. If there's any file size to pay attention to, it's the size of one Ethernet packet. If the complete response fits in one packet (typically 1500 bytes, including packet headers), making it smaller shouldn't improve performance.
  3. The browser may delay displaying images for a few milliseconds to minimize frame buffer (window) re-writes.
  4. The browser needs to parse the CSS rules for displaying the image. Browsers start loading images before they have completed the CSS parsing, and CSS parsing may take longer than image loading.
  5. If you are testing animations, your knowledge and anticipation of an event makes it seem slower. Other users won't notice things that are glaringly obvious to you.

So long story short, image file size is probably the least of your worries. If it's important, don't rely on heuristics-- do your own testing. All the modern web browsers have great timing tools, although Google's are the most focused on latency. (They may get leap-frogged at any time, though.)

Also, test over different types of Internet connections (local network, across 1000 miles, cellular network) and on different browsers and devices. Cellular networks are particularly weird, since the initial network connection takes a long time and then shuts down shortly thereafter.

Upvotes: 8

MusiGenesis
MusiGenesis

Reputation: 75296

10 ms might be just barely noticeable. On a typical laptop with a refresh rate of 60 Hz, each frame is on the screen for about 16-17 ms, so (all else being equal) a 10 ms delay means a roughly 66% chance of making the image show up one frame later.

However, a 1-frame delay (which is the maximum delay possible as a result of this) would in all likelihood not be noticed by most users. It would be very noticeable for animation, but not very noticeable in terms of when the static image appears.

Upvotes: 8

Steven
Steven

Reputation: 13975

If the page takes 150 ms to load and the image takes 160ms that's 310 ms total. The human eye can read 10-12 images per a second, or about 1 every 100 ms's. So yes they would notice the loading if they looked hard enough.

Upvotes: 1

Related Questions