It's time to spare a thought for the slower browsers, says Scott van Looy.
In our quest to become fast-yet-full-featured, I feel we're missing some tricks. How often have you added a library to your frontend code? And then added a framework? Maybe a selection of plugins. A dash of responsive grid. Some shims and polyfills. And finally a sprinkling of images?
Quick and simple
A technique that seems to have been eclipsed somewhat is that of progressive enhancement. Use the server to create your pages, don't send everything to the client and make them assemble it. Write valid, semantic HTML. Target your slowest browsers and do everything you can to make them fast. If you have to support IE8, code with a copy of IE8 open. Test everything for speed and performance.
- If you're using templates to construct HTML on the fly within the browser client, make those templates work on the server as well as on the client. Twitter spent a fair amount of time removing its old hashbang scheme for tweets, turning tweets into physical pages on the web. The company claims this dropped page-load times by 20 per cent.
- Load only what you need to see, when you need to see it. Sounds obvious, but often you'll have a long, scrolling page and all the images on that page will be set to be downloaded at once. This leads to a cascade effect – web browsers only open a certain amount of connections at a time to a specific host, so only a certain amount of your images will be downloaded at once. Use CSS to show background images when they're needed.
- With photographs and retina images, you can often get away with using 30 per cent quality in Photoshop's 'Save for web' feature, and doing the resizing in the browser. You end up with images that are almost the same file size as the normal ones, saved at 70-80 per cent quality, but with a higher resolution.
- If you use PNGs with alpha transparency, you can often get away with changing them from 24-bit colour to a 256-bit colour palette using software such as Fireworks or ImageOptim with no discernible loss in quality but sometimes more than 50 per cent smaller file sizes.
With this approach, you get some added extras. SEO for free. Older clients will, for the most part, work too. Same with screen readers. It'll be trivial to add ARIA accessibility support. On top of that, you get the fluffy feeling of being a good net citizen.
Words: Scott van Looy