Auto updates is out with WordPress 3.7!

You know, almost 20% of all websites are created with WordPress. Many of them have security risks as their version of WordPress is not updated and old versions usually will have lots of vulnerabilities and make them easy to be hacked in. Cases of WordPress sites getting hacked is getting more serious today.

Finally, in the WordPress 3.7 update, it introduces a new feature that is quite attractive to me and solve the problem of using old versions of the WordPress core. Now, the WordPress system will check for core updates, plugins updates and themes updates & automatically install them when they have new versions.

For me, this feature has a great potential that I don’t need to check and install updates as often as what I’ve done in this blog. Also for blogs & sites that don’t need to update so often, this feature reduces the work to keep up the site.

However, as I tried, I can’t see any controls to fine tune the behaviour of this great auto update feature as some people may not want auto updates or they want to control how it should behave.

Overall, I’ve waited this feature to be available in WordPress for a long time and it has come true!

How to “Really” defer loading of JavaScript?

The websites nowadays uses a LOT of JavaScript. However, defer loading of JavaScript is actually a big headache as there’s really, really many ways to do it.┬áSomeone may call you “just use defer” or “just use async” or even “just put it on the bottom of the page”.

Actually, none of these methods really solve the problem that allows a page to be fully loaded before loading scripts. None of these methods actually gets passed of the “Defer loading of scripts” if you’re trying to test it with Google PageSpeed.

The right way

In here, I’ll show you the right method of defer loading JavaScript that Google also recommends.

Beware: You should put this just before </body> (near the end of an HTML file)

<script type="text/javascript">
function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "defer.js"; // replace defer.js with your script instead
    document.body.appendChild(element);
}

if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

What it really does is to load the JavaScript after the page has been fully load i.e. The onload event has been triggered.

Why the other methods don’t work?

The methods of inlining, placing scripts at the bottom, using “defer” or using “async” all do not accomplish the goal of letting the page load first then loading JS and they certainly do not work universally and cross browser.

Speed

defer-methods

You can see that with this method, the page load speed has a very great increase. As the other methods don’t match the goal of loading JavaScript only after the page has finished loading, it can be very slow especially for large JS files.

Final word

Our first priority is to deliver the content to the user as soon as possible. If a user waits because there’s some JavaScripts still loading that doesn’t affect the content, the user may leave because of the long waiting. (The average wait time for a visitor is around 2 – 3 seconds) Therefore, you should remember the right method of deferring JavaScript loading.