Detect and explain opportunity for reduced network usage

[dontcallmedom]

One of the primary UX improvements for mobile devices is reducing the usage of network, both from a latency and bandwidth perspective.

The checker should help identify the places where one can get the biggest gains in terms of network usage. These includes:

• [x] gzip-compressing textual resources (HTML, CSS, SVG, JS)
• [ ] combining distinct CSS stylesheets into a single one
• [ ] combining distinct JS scripts into a single one
• [ ] remove meaningless whitespaces from textual resources
• [x] remove non-rendered content from images (e.g. EXIF metadata from JPEG)
• [ ] optimize raster images (e.g. via pngcrush)

[dontcallmedom]

• [ ] For raster images, another thing to detect is when the intrinsic size of the image is bigger than its rendered size.

[gbaudusseau]

https://groups.google.com/forum/#!msg/selenium-users/Zzv-KV9eFpg/7OW8GeMVNEMJ

[dontcallmedom]

Some investigations for the http/https proxy approach:

• https://github.com/axiak/filternet is probably a good starting point for the proxy
• to intercept ssl traffic, we would need to generate keys on the fly signed by a local certificate authority we would add to the browser; https://github.com/andris9/pem would probably help for generating these keys

The difficulty would be to link the intercepted requests to a specific initial page; I thought we could have the proxy run on a different port for each page, but Chrome doesn't seem to have the architecture to allow per-tab proxy settings. So this would require starting a new Chrome (with a separate user-data-dir) for each page checked; maybe that's OK.

Another approach would be to do it client side, with the Resource Timing API; but for security purposes, it hides cross-origins detailed information.

Maybe Resource Timing used via a Chrome extension would get us there, though (that's how the Chrome dev tool network panel is built apparently.)