The trend is definitely towards mobile devices. Having used the Chromium webbrowser on a Raspberry PI, which is powered by a 700 MHz ARM processor, I much computation power even small webpages require. Let's take Google as an excellent example. It should be obvious that pure web applications like gmail require quite some computation power. In the end there are tons of JavaScripts to be loaded and executed and thousands of elements to be rendered. Also the webpage is very dynamic, resulting in many changes that need to invoked and displayed.
But what about the search page? In the past the Google search page has been known for its simplicity. But that time has long passed. The design still seems to be very elementary. However, there is a huge pile of JavaScript code that is ready for running. This makes the Google search page really slow on the Raspberry PI. It takes me about 5 seconds from seeing the input box to writing some text into the text field.
My homepage has been slightly faster, but there have been too many elements and also too many scripts. I had to load 3 separate scripts on the landing page alone. The total weight was also too much. Finally I displayed too many elements and used transparent colors too often. The result was that the homepage was unnecessary slow in both, loading and rendering.
Now I focused on three main issues:
- Reducing the number of requests
- Reducing the number of elements
- Increase readability by making the design more simple
In the end everything looks similar to before, but slightly improved. Also the social stream and the CodeProject articles are now only displayed in the news section - and not on every page (which was unnecessary). The central JavaScript has been completely rewritten and provides now an event driven model, which enables quite cool controls.
The best feature is that every script that is not required on every single page will only be loaded once it has been required. This is possible by using an asynchronous lady loading pattern, which basically allowed me to define dependencies. Once code accesses particular functions the arguments are buffered and the loading is started.
In the end the overall page performance is now really great - also on mobile platforms and the Raspberry PI.