As more people connect to the Web over slower, less consistent mobile networks, the performance of Web pages matters even more. One of the simplest ways to increase performance is to reduce the overall size of Web pages by sending less stuff to devices. So how much are we sending to mobile devices and are separate mobile sites and responsive designs helping or hurting performance?
- The average size of a web page in 2012 was 1.25MB. (source)
- Assuming this trend continues, average page sizes in 2014 will be over 2 MB. (source)
- 3G network speeds are 40% slower and 4G/LTE connections are 12% slower on average than desktop connections. (source)
- 86% of responsive designs tested from a sample of 347 sites sent the same assets/files to all devices. (source)
- An analysis of 54 higher education responsive sites found the average page size to be 1.54MB on large screens and 1.2MB on small screens. So a few of these are optimizing things a bit for mobile. (source)
- The same study found mobile only sites for half of these schools averaged only 180kb in file size. (source)
Such a dramatic difference in file size can be seen in other comparisons of responsive designs and separate mobile sites as well. Does this mean responsive design should be avoided? Absolutely not. But performance needs to thought through as it doesn't come for "free" like it can with simple mobile specific sites.
This comparison also looks at the impact of combing server-side optimization with responsive design (RESS) and the results are very promising. Building responsive designs mobile first and aggressively relying on Javascript for content and interaction enhancements is also being discussed and explored actively. So we're moving in the right direction... towards more performant multi-device solutions.