Too many javascript calls? Combine them into one.

When a website doesn’t load very quickly, you have a serious problem.

First of all, you lose traffic.  Few people have the patience to wait more than a few seconds.  Second, slow load time can hurt your search rank.  Google measures how long it takes for your site to send a page to a visitor.  If it’s too long, you get a lower place on the results list.

Third, a slowdown can cause a white flash between page loads each time users navigate your pages.  This can annoy visitors and undermine the beauty of your design.

If your site goes noticeably blank between page loads, you have a problem

A white flash on page load when navigating a site is a distressing symptom.  It is a sign that something is slowing down the images going to your browser.  Many WordPress developers have noticed it and the WordPress.org forum offers many well-debated threads.  WordPress updates, themes, plugins, jquery versions and css files have all received their share of blame.

The best insight I’ve found so far comes not from WordPress, but from Stackoverflow.

Avoid loading background images and scripts one by one

Designer Jackson Gariety noticed that most websites have background images.  And the time needed to load them can add up.  Meanwhile javascript is loading – even if it’s placed in the footer. The delay while the javascript loads ahead of the background image can cause the white flash.  You can read his question in this post, “How to prevent the white ‘flash’ on page load created by background image loading delay?”

So — how about we minify the javascript so it loads as fast as possible?

Javascript provides so many useful website enhancements, it’s tempting to use several scripts at a time. Web design instructor David Ramos recently discussed a demo website with a header full of javascript links, and told us: “Don’t do this”.  Meaning, don’t set up a website to make several calls to the server for javascript files.

Minify them, he said.  In other words, make them all one file.

So, I just tried this advice.

Minifying makes a big difference

There’s a wonderful plugin called Better WordPress Minify, by Khang Minh. It puts all your javascript calls AND css calls into one big file, each.

This step alone was enough to banish the white flash on my customer’s website.

Are you going to try this? Not so fast!  Like this post before you go!