Page loading optimization for a better user experience

This video has been making the rounds recently. It is somewhat longer than it could have been, but I still think every web developer should watch it.

Loading a web page is a slow affair, especially on mobile devices. Everybody knows that. The important point, explained in the video, is that there are techniques that can make this faster. It is surprising how easily some of the solutions can be applied to a website: it appears to me that in our effort to stack feature over feature on a website, we tend to forget about performance.

I’ve recently applied some of the lessons reinforced in this video to this very own blog, reducing the page load times by half on the desktop (on average) and making navigation much more responsive; and it’s just the start. I’ve also came up with some other small things in the process. So, in a practical sense, I’d recommend everyone who manages a website do this:

  • Double-check to see if you’re not loading any useless or near-useless stuff on your pages. This includes third-party extensions or plugins that are seldom used. In my case, WordPress’ semi-mandatory plugin JetPack was doing a lot of load hogging, including loading third-party analytics scripts I did not want. I only used JetPack for statistics – something that was somewhat redundant, since I already used Google Analytics – so turning off JetPack was a no-brainer.
  • Run Chrome audits on the website to determine what are the major loading bottlenecks. This is a great tool that will give you an easy, itemized list of things you could do to improve page loading; here’s a good tutorial on using audit. In my case, I identified a few CSS files that could be combined or have their loading order changed, and this was enough to provide some additional load boosting. The audit goes much deeper, though, including listing you individual CSS properties that are never used or the caching settings of individual files.
  • Start using Google Analytics Site Speed. This is a somewhat new, but invaluable tool on Google Analytics, as it can measure load times of pages for your users. One slightly tricky thing about it is that if you have a low number of visitors, you may need to boost the tracking sample rate to get meaningful results – this can easily be done by editing your Google Analytics embedding code.

It’s interesting how often and how easily websites don’t take any of that into consideration. It’s easy to find websites loading dozens of third-party scripts (mostly for tracking and ad-serving) synchronously, slowing down the user experience in unnecessary ways. Maybe I’m more aware of it now since I started using Ghostery on my desktop browsers to list (and, sometimes, block) scripts that are useless to me, but it’s still surprising how some websites are designed with a kitchen sink approach when it comes down to extensions.

Here’s to hope things like Google Analytics Site Speed and Chrome audit will make web developers more aware of the problem.

  • If you run WordPress, try checking your site with the GTMetrix online tool. It will return recommendations for speeding up your site by pulling in information from YSlow and Google Page Speed.

    • Zeh

      I have to admit that at first I thought this was comment spam, but I’ve just given it a try and the tool is really good indeed.

    • Suggestion #1 – optmize the ga.js that eboyrvedy has embedded on their sites.1. please gzip the javascript!according to google webmaster tools I could save 13.7kb per page request!2. don’t put cookies on every sub domain! please! even on my images, and static1, static2 sub domains I’ve now got cookies. s_vi=[CS]v1|25B3A39E05011DE1-60000113404EA4B3[CE]; rsi_ct=2010_2_12:6; AxData=; s_cc=true; s_sq=%5B%5BB%5D%5D; Axxd=1GOOGLE! STOP SLOWING DOWN THE INTERNET!

  • Have you seen http://browserdiet.com?

    • Zeh

      I haven’t. Pretty good.

  • mike

    Great article, ze.