Hidden elements and Http requests

With cross-devices development, media-queries and new techniques, loading times, http requests are a “new” concern as often some assets won’t be displayed. Here’s a little research about what browsers will download or not.

The test

To know what techniques would prevent the browsers from downloading useless assets, I wrote a simple test page. It counts the hits on an image and, if the numbers before and after the page is loaded are different, it means the image has been loaded.

If you want to write your own test, you’ll most likely need to use a server-side language (I used Php), some Html and Css to test the different ways to use and hide content, and some Ajax calls to compare the numbers after the page has been loaded.

The current test page is rather ugly and messy, I’ll fix that soon, and add more explanations on this page.

Go on http://lab.justinmarsan.com/download-test/ if you want to see my test page in your browser.

Various results in major browsers

Chrome and Safari (WebKit)

WebKit downloads the file every time except when a background is applied through a non-matching media-query.

Firefox

Firefox won’t download the image called with background image if the styles are hidden but they will still download assets from img tags.

Opera

Like Firefox does, Opera won’t load useless background-images.

Internet Explorer

IE, like WebKit will download background-images even if they have display: none;

Something odd appears with IE6 : Elements with a background-image and display: none set inline won’t be downloaded… But they will be if those styles aren’t applied inline.

Workaround

It’s rather clear that the way things are isn’t optimal, in too much situations, some assets will downloaded for no reason.

Mobile first

Using media-queries and the mobile first approach, it is possible to use background-image without useless http requests. The issue with this solution is that it won’t work for img tags and will require other techniques such as…

Javascript

With javascript it’s possible to get the viewport’s size and inject some content accordingly. This solution isn’t optimal either as it could break for users that browse with JS disabled, and often will require you to write a lot of scripts to insert content where you need it

MobileReadyFramework

I’ve worked a while ago on a frontend framework that was meant to be a workaround to this issue : Not have content downloaded for no reason without having a more painful workflow. It’s not optimal yet and could be improved but until it is, it can still be a starting point to find your own way to deal with the problem at hand.

https://github.com/justinmarsan/MobileReadyFramework

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>