Skip to Main Content

Beat Google PageSpeed & Get Faster with Async

Posted on 2.23.2017
This one small hack is going to do wonders for your page speed and the resulting experience provided to website users. 

The JavaScript scripting language is used everywhere on the Web, including in just over 90 percent of the top 100,000 sites according to Quantcast data as reported by BuiltWith. And at the library level, jQuery, with its fast, concise approach to traversing HTML documents, handling events, performing animations, and adding Ajax interactions to Web pages, has become the predominant library in use today. 

The problem is that webmasters and developers are implementing jQuery in ways that essentially slow the rendering of Web pages as using a JavaScript library almost always means including a "call" to retrieve the file itself (unless you're going to inline it).

Since search engines now take into account the user experience provided (as page rendering time is a factor) when determining rank or position on the results list it is important to concentrate on taking advantage of methods that accelerate the Web experience and there's a really, really easy way to get around the problem of render blocking JavaScript - you can leverage the async method. 

In the simplest explanation, when a browser executes something synchronously, it must wait to finish before moving on to another task. When the browser executes something asynchronously, however, it is possible to move on to another task before it finishes. See where are we going with this? What if there was a way to load these elements asynchronously instead of synchronously? Guess what? There is! 

How can you take advantage of the async method? Simple, first run your website through Google's Page Speed Insight tool. If you receive the indication/notification that the site is blocking the rendering of Javascript, identify which file is causing the problem, and then open the file that makes the call (that may be an index file for example).

Javascript/jQuery is usually called in the header, but search for the file name you identified in Google's Page Speed tool and add "async" after the src file path and before the close of the tag as is seen below:  

PREVIOUS VERSION without Async:

< script src="assets/js/vendor/jquery-1.11.3.min.js">< /script>

NEW VERSION with Async:

<script async src="assets/js/vendor/jquery-1.11.3.min.js">< /script> 

Pretty easy, right? It is and you'll notice a big improvement to the way in which your website is rendered and the speed in which that is done. Yes, there are some drawbacks to using the async method but for the millions of websites using this approach it could be an effective way to increase site speed and improve the Web experience in general.

On one of my test domain names, the page speed before implementing this was a 63 on mobile and 70 on desktop. Adding async to the call for those .js files, however, improved the site's mobile score to 77 and its desktop to 85. That's reason enough for Web warriors to consider using the async method.



js-async1



js-async2

Async

Leave Your Comment

Login to Comment

Become a Member

Not already a part of our community?
Sign up to participate in the discussion. It's free and quick.

Sign Up

 

Leave a comment
    Load more comments
    New code
  •