When we think about optimizing web pages, we usually have in mind the sort of results that services like Pingdom Tools report: the total load time of web pages. Web hosting is, of course, an essential part of creating a latency-free experience for users; it provides the foundation on which all other optimizations rely.

But the fastest web hosting in the world won’t make an excessively heavy page load quickly. There’s a limit to how far we can go with stripping back a page to its bare essentials. Providing the required functionality is going to take some HTML, CSS, JavaScript, and probably images too.

Total load time isn’t the only way to think about performance optimization. While there is no substitute for actually improving the performance of a page, perceived load time can be just as important. If a page appears to load quickly and become usable without undue latency, then the user is just as satisfied as if the page had in fact completely loaded.

There are a number of optimizations we can use to improve perceived load times.

Asynchronous Loading

There’s no avoiding loading and running JavaScript, but JS loading blocks the parsing of the rest of a page. The browser will stop doing anything while the JavaScript is loading. Clearly, that’s not good for perceived load times.

The <async> attribute allows JavaScript to be loaded asynchronously, which avoids blocking requests and decreases the time it takes for the page to load.

Take a look at this article for the full skinny on <async>.

Code In- lining

Sometimes you just can’t get around the fact that JavaScript needs to load before the rest of the page. Every time a JS file loads from an external server, there’s a delay. We can mitigate that latency by including the JS inline — within the HTML itself. JavaScript can be inlined between <script> and you can do the same with CSS with <style> elements.

So, why shouldn’t you just put all of your JS and CSS inline? Because when you do it can’t be properly cached, which will slow down perceived performance for your site. Use inlining sparingly and only inline CSS and JavaScript that is required for the initial page render.

Lazy Loading of Images

Load times take a big hit when we include large images, but including large full-bleed images is fashionable at the moment. One way to get around the latency penalty of these images is to lazy load them, only load images as they are about to appear in the browser window.

There are several ways to achieve lazy loading. If you want to go with a JavaScript solution, the easiest way is to use jQuery and a lazy load plugin.

If you’re a WordPress user, BJ Lazy Load will do the job for you.

Progressive JPEG Loading

If you’re as old as I am, you’ll remember that, back in the old days of web, images loaded so slowly that they’d scroll in line by line. On image heavy sites or slow connections that still happens because of the “baseline” method by which JPEGs are created. It makes pages look slow.

Progressive loading plays a trick by displaying the “whole” image, but in a pixilated state. Progressive JPEGs are made of several layers that can be downloaded and displayed incrementally, which helps improve perceived load times.

Loading Animations

If you have a particularly complex site or application — one that depends on significant server side processing or database queries — there’s not much you can do about latency; it’s going to take some time to load.

Studies have shown that perceived performance can be improved if there is something happening on the page. Using loading bars, spinners, or other animations can help user perception. If the page just hangs perceived performance drops and the user has no idea what’s happening. On the other hand, there are counterexamples that show perceived performance decreases with the inclusion of animated spinners, so your mileage may vary. Playing with human temporal perception is a complex business.

None of these optimizations take the place of high performance web hosting, but all can make a significant difference to the experience your site offers to users.

Author Bio:

Jilli Rose is a creative content writer and digital marketer at Outreachgeeks. She works closely with B2C and B2B businesses providing blog writing, ghostwriting, copywriting and social media marketing services.