Speed enhancement at the expense of not working with JS turned off

Question

I have an image gallery that currently loads the images using standard img tags and since it has a lot of large images it loads quite slow.

I can speed things up by having the gallery script dynamically load the images after the page loads. I tested this and there is a significant performance gain. The problem is by doing it like this the picture don't get loaded if the user has JS disabled.

So the question is, Is it a worthwhile trade-off to gain performance at the expense of having the page not work if JS is disabled?

In this specific case I think I'll use the noscript tag, but what if I didn't have control of the html output (say in a CMS).

Answer 1

Some quick thoughts:

• Redesign your UI so that you don't need to load more than N images. For instance, introduce pagination.
• Many browsers only render images that are visible to the user. Consider hiding the other images by moving them off-screen or into a div with overflow: hidden or something.
• Load the first N images on pageload and then the rest afterwards. Loading the remaining images would require javascript, and you could add a noscript tag that adds pagination for the few users who don't have JS enabled.
• Depending on the kind of images you're dealing with, combine the images into a sprite sheet and load them all as background images using background-position in CSS to show only the right parts. Upfront load time will be hefty, but cacheable.

Ultimately I can't answer whether JS being turned off is a worthwhile tradeoff because I don't know what your audience is. I'd need more info. In most cases with websites I've worked on, we tend to lean towards progressive enhancement. So the third example in my list would be the one I'd probably go for.

Answer 2

What if instead of requiring JS to speed up image load, you load the images at the end of another page so that when you want to view the gallery, they are already loaded. You just want to make sure the images are after all of the important content and that you use the same names so it can cache.

If you did want to stick with loading with JS, I would recommend checking for JS first and using the dynamic load if they support JS, and fall back onto a standard if they do not have JS.

Answer 3

You can do this progressively. Ie, the initial HTML outputs IMG tags, as it does now. But immediately on load, your jQuery fires and dynamically replaces the IMG tags with your custom loaders. Best of both worlds.

Answer 4

The "What If They Have Javascript Turned Off" question is one that should live on it's own. While you should make sure that your app/site is still usable with JS turned off you also should think about who your audience is. Honestly - it's 2010 and web devs shouldn't even need to think about this issue (I don't anymore).

Use analytics to figure out if your users have JS turned off / on. If it's less than 5% of your users don't even waste time on a workaround.

Answer 5

Even the big companies are beginning to require Javascript. For example, if you have Javascript turned off in IE, did you know that you can't even download Google Chrome? The Accept and Install button doesn't work. They simply show this bit of text at the top of the screen:

You need a JavaScript-capable browser to download this software. Click here for instructions on how to enable JavaScript in your browser.

Personally I feel the Javascript requirement is a mistake on their part for this scenario, but I digress.

Of course it depends on your audience but for the past couple years I too have been building quite a few web interfaces that require Javascript to work.

The one remaining concern is SEO. If you want the images in your gallery to be indexed by Google you will need them to appear in the HTML.