With Over the Air 2013 coming to a close last Saturday, I took some time to reflect on some of the more memorable talks given over the two-day event. Mobile and web performance guru Jon Arne Sæterås' presentation was particularly informative, and inspired me to write a quick summary for people that did not get the chance to see it live in person.
Web on Mobile is Slow
Slow websites offer very poor user experiences. With businesses such as Amazon and Bing seeing direct revenue impact when improving web performance. So why is the web slower on mobile devices? Some reasons include:
Mobile issues:
- Processing power
- Browser
- Battery preserving strategies
Network issues:
- Network latency
- Available bandwidth
The above problems are also plagued by poor implementation & design of websites and mobile solutions.
The Current State of the Web and Mobile
The average web page weighs around 1.6MB with around 94 requests. This equates to an average download speed of around 6.7 seconds. This takes around 10.6 seconds on average to load when you include the rendering time in the browser, the server response time, the radio wake up and also the actual download of the page itself.
What Our Current Solution Involves
Most web designers and developers are moving their focus to a technique called Responsive Web Design. This technique involves using media queries to create a content layout that works well on all screen sizes.
Over 72% of responsive websites are the same size as their desktop counterparts, meaning mobile users on average are forced to download 1.6mb of data through their mobile network.
Responsive Web Design ? Mobile Friendly
The BBC rebuilt their much loved mobile website using responsive techniques. This caused a large increase in size and loading times, which many users were very vocal about on their comments section.
[EasyDNNnews:PageBreak]What are the primary issues with RWD?
- Over downloading of:
- Unused assets
- Large images
- Excess 'stuff'
- Network issues including:
- High latency
- Bandwidth
- Flaky connection
How to Improve Performance
REsponsive web design with Server Side components (RESS) is a technique used to do the following:
- Reduce the need for client side processing
- Eliminate 'over downloading'
- Let the server do the work instead of the browser
82% of the top 100 Alexa ranked websites use device detection to help optimise their web content for mobile devices.
Conclusion
Some performance rules to follow:
- Make fewer HTTP requests
- Use a content delivery network
- Add an expires header
- Gzip components
- Put stylesheets at the top
- Avoid CSS expressions
- Make JavaScript and CSS external
- Reduce DNS lookups
- Minify JavaScript
- Avoid redirects
- Remove duplicate scripts
- Configure ETags
- Make AJAX cacheable
"Speed is really about how fast the user can achieve their goals"
To see the full slide deck from Jon's very informative OTA13 talk, visit his slideshare.