on a train devouring the land
Mobile web developers! I have a tip for you that should speed up the rendering of your site by a significant margin, close to 50% in my stopwatch tests. And what do you know? It’s totally counter intuitive to normal web development practice. I’ll let the Nokia team who are porting the KHTML rendering engine (the tech behind Apple’s Safari) to Series 60 (it’s the default browser in devices from the N70 onwards) take up the story from here on:
“What technical challenges do you face in that work?”
Mobile devices are constrained by ROM , RAM, network latency and bandwidth, display, input mode, and less powerful CPU as compared to desktop world. We need to make some changes to take into account these constraints. The code execution behaviors which are correct in the desktop world do not always work well on mobile device.
To give an example, in browsers Javascript needs to be executed at the point that it is found in the markup, resulting in blocking the parser. External Javascript files take a much longer time to arrive at the client over GPRS. In the worst case scenario, the consecutive multiple external javascript references cause the requests to go out serially. Similar problems are encountered in CSS processing since rendering blocks on external CSS. We do not encounter these problems when the Javascript and CSS are inline.”
What you’d expect is that referring to the CSS and JS externally via a link element would save bandwidth and thus speed, since bandwidth is a huge resource and cost constraint on a mobile device. But it turns out that the main limiting factor is actually CPU speed, something that pretty much every desktop computer these days just doesn’t care about but that are real issues in the mobile world. The great advantage is that a lot of recent mobiles now support gzip compression of the content and text, as we know well, compresses very well indeed. In real world testing, on a real world GPRS and 3G network putting your CSS in the header prevents a ‘Pause Of Unstyled Content‘ and speeds up page rendering to boot. It’s a win.