O'Reilly logo

Responsive Media in HTML5 by Alex Libby

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Making allowances for mobile devices

Adding visual content to our pages will begin to bring the site alive, but we should bear in mind the increase in latency times. Latency is a major killer on mobile devices; if we take a 1 MB page with 80 plus requests, for example, loading the page can take over 4 seconds!

Using JavaScript is expensive in terms of resources. It takes time and can block the rendering of pages. A much better alternative is to only load the resource when it is needed. On desktops, this is less of an issue, but becomes crucial for mobile devices. Take, for example, Google's Gmail service—using this principle reduces the latency for loading JavaScript from 2600 ms to just 240 ms. With this in mind, let's take a look at some useful ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required