Use asynchronous scripts.


The use of asynchronous scripts for page speed are kind of a recent thing. In short, asynchronous script loading makes it possible to load scripts separately from your usual page rendering path. Using this type of script loading works wonders for your initial view loading times.

Why are asynchronous scripts good for page speed?

By using asynchronous scripts you ensure that loading these scripts cannot hinder the rendering of your web page in any way because they are loaded separately from the actual page. So even when loading a very slow script your web page can finish rendering without having to wait for the script to finish loading, the script is not considered part of the files the page needs to render the first view of your page. This means visitors can see your content no matter if the script has loaded or not.

Which scripts should I load asynchronously?

You can’t load all scripts asynchronously. The reason for this is that some of the scripts are needed for the initial view of your web pages. These scripts have to load synchronously because your web page needs them to correctly display your web pages. So you can only load those scripts asynchronously which you don’t need for the initial view.

How to make your Javascripts load asynchronously?

Using the Async tag(recommended)

<script src="yourscript.js" async></script> ** Async works on almost all browser versions but is not supported by some older browsers. Though this is not an issue anymore since most browsers make use of preload scanners today (even the older browsers) and can handle the scripts.

There’s another older code which also loads Javascripts asynchronously. This is the code which was used in the past but it is even more outdated as async now. The support for the recommended async version is sufficient enough today. Though, here is the code if you still wish to use it:
Older Javascript code(not recommended)

<script> var resource = document.createElement('script'); resource.src = "//domain.com/thescript.js"; var script = document.getElementsByTagName('script')[0]; script.parentNode.insertBefore(resource, script); </script>

Google Adsense, Analytics and Plus

Google provides us with great asynchronous script for many of their services. If you have implemented one of their scripts recently it’s almost certain you are already using their asynchronous scripts as this is their default now. But if you have older versions of these scripts on your site it’s likely you are using their old synchronous versions. There is no reason to use the synchronous scripts anymore, you should update them with the newer asynchronous versions. Here is more information how to do this for every particular Google service:
Google Adsense Asynchronous Ads
Google Analytics Asynchronous Tracking
Asynchronous Google Plus Button
Asynchronous Google Maps Loading

Most major web services use asynchronous scripts

Most of the popular web services use asynchronous scripts for their external web services nowadays. Disqus, Pinterest, Facebook, Twitter and most other widely used services. So with most external services you use on your website you don’t really have to worry about loading them asynchronously, it’s already done for you unless you use their older codes.