He mentions how Stanford computer scientist Narendran Thiagarajan and colleagues used an Android phone hooked up to a multimeter to measure the energy used in downloading and rendering popular websites. Using their experimental setup they measured the energy needed to render popular web sites as well as the energy needed to render individual web elements such as images, Javascript, and Cascading Style Sheets (CSS). They claim that complex Javascript and CSS can be as expensive to render as images. Moreover, dynamic Javascript requests (in the form ofXMLHttpRequest) can greatly increase the cost of rendering the page, since it prevents the page contents from being cached. Finally, they show that on the Android browser, rendering JPEG images is considerably cheaper than other formats, such as GIF and PNG for comparably sized images.
- Minifying and concatenating
- → which reduces the code’s size and parsing/download time
- JavaScript files, CSS files and interface messages are loaded in a single special formatted “ResourceLoader Implement” server response.
- Batch loading
- → which reduces the number of requests made
- The server response for module loading supports loading multiple modules so that a single response contains multiple ResourceLoader Implements, which in itself contain the minified and concatenated result of multiple javascript/css files.
- Data URIs embedding
- → which further reduces the number of requests, response time and bandwidth
- Optionally images referenced in stylesheets can be embedded as data URIs. Together with the gzippping of the server response, those embedded images, together, function as a “super sprite”.
Patrick Reilly, Senior Software Developer, Mobile
- Copyright notes: “Phone charging” by Eml5526.sp11.team1.adam, in the public domain, from Wikimedia Commons.