Detecting Network Speed and Screen Size for Responsive Design
Home
Part of responsive design includes customizing content based upon the network speed and screen size.

Screen SizeConnection SpeedSend Him
5-inch smartphone 3-G Small Images
9-inch tablet 4-G Medium Images
24-inch LCD Monitor FIOS Large Images


But how does one measure the screen size and network speed?

Here is how:

The client requests an image, and measures transfer time. It reports back to the server (by AJAX) the screen size, file name, and the transfer time.

The server measures the file size (bytes), and divides by the network time (ms) and multiplies by 8 to calculate network speed (kbps). It stores this information in session, and reports back to the client by AJAX.

Transfer time includes overhead like initiating the connection, DNS Lookup etc, which is why a 500k image does not take 10x the transfer time of a 50k image. My browser reports a transfer time of 259ms for a 1px file, so I estimate that to be the overhead with my network topology.

One paradox is that a 100k file consistently reports a faster time than a 50k or 15k file, which may be due to a threshold for Apache to implement gzip compression.

Larger file sizes will yield more accurate and meaningful test results, so a complete implementation might first transfer a small file to get a rough estimate of network speed and overhead, and then transfer a larger file to get a more accurate measurement.

See the Result Stored in PHP Session