jonarne

OTA13 - Jon Arne S: Mobile Web Performance

Joe Davine

10/3/2013 8:40 AM

Performance Mobile Web Development Opinion

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

ifoundgoogle

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

averageweb
downloadspeed
totalseconds

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.

rwdsame

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

bbcrwd

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
hammer

How to Improve Performance

serverrant

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
ressrecipe

82% of the top 100 Alexa ranked websites use device detection to help optimise their web content for mobile devices.

marshall

Conclusion

summingup

Some performance rules to follow:

  1. Make fewer HTTP requests
  2. Use a content delivery network
  3. Add an expires header
  4. Gzip components
  5. Put stylesheets at the top
  6. Avoid CSS expressions
  7. Make JavaScript and CSS external
  8. Reduce DNS lookups
  9. Minify JavaScript
  10. Avoid redirects
  11. Remove duplicate scripts
  12. Configure ETags
  13. 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.