Optimizing Responsive Design For Mobile

The key area in optimizing page downloads on mobile is reducing download sizes, which are usually most heavily influenced by images. Using the following methods, I was able to reduce the desktop download size from 1.3 MB to as low as 475 KB on a site I am currently finishing up.

Trimming Content

The first line of defense against large mobile downloads and slow page renderings is tailoring the content to use cases on a mobile device, as opposed to how a user might be using the site on a desktop. While you never want frivolous content, the content present on mobile should honed with a razor focus. For example, elements that serve to enhance the presentation or aesthetic on wide-screen desktop displays should be stripped out of the mobile version. This includes things like large images or introduction paragraphs; they aren’t content mobile users will appreciate. How this trimming is handled though determines how effective it will be at enhancing the page load.

Media Queries

My design process usually involves hashing out the complex desktop first, then stripping out content and rearranging things as the screen gets narrower. However, when writing CSS media queries, the opposite approach must be used.

If media queries use the principle of graceful degradation:

Then the background image will still be loaded on mobile, even if it isn’t rendered. Rather, media queries should involving background images should be structured with wide format as the special case:

With this format, the image will only be requested if the page is wide enough to render it, instead of wasting bandwidth.

The <picture> Element

The <picture> element is a god-send for mobile optimization, allowing different images to be loaded based on size with little overhead. Although it is current only only supported in Chrome (desktop & mobile), Opera, and Firefox (by flag, although full support is coming soon), you can start using it now, because the syntax includes a fallback <img> tag. Using it is pretty simple:

As with CSS media queries, depending on which media condition is met, a specific source will be requested and rendered by the browser. If the browser does not support the <picture> element, it will render what ever default source is defined in the <img> tag.

In fact, the sources are applied to the <img> tag, so you can still style the image and completely forget about the <picture> tag altogether. It really is brilliant piece of web engineering and you can read more about how the <picture> element came to be on Ars Technica.

PHP Proxy Image Scripts

Although this technique will quickly be replaced by the <picture> element, for certain situations, it may be a valid solution. The basic idea is to insert a PHP script in front of the given image(s) that takes a GET argument for the width and re-sizes the image on the fly.  The PHP script can be seamlessly hidden with URL rewrite. Using a JavaScript, a width can be appended to the image request:

Obviously this technique has significant limitations/drawbacks:

  • You have to wait for the page to load before executing a JavaScript call to request the image.
  • Re-sizing the image takes time and server resources.

Probably the most valid situation for this is working with dynamic images, where you can’t manually re-size the images or store multiple copies.

A derivation of this could be to store different resolutions of an image, loading a default low resolution image. When the page loads, JavaScript could be used to request a higher resolution image, possibly mapped with a URL rewrites to request the appropriate higher resolution image.