A few weeks ago, I stumbled across a blog post on Optimizing JavaScript Performance. It was a great read and I learned quite a bit from it. Also, after applying some of the optimizations mentioned in the article, my Google PageSpeed score for my site skyrocketed from 60/100 to 98/100. I thought it would be helpful to share my learnings with others in a more detailed, step-by-step format.
To optimize JavaScript performance, we’re going to work through the following steps:
Inlining Small Scripts
Minifying and Concatenating Large Scripts
Compiling V8 Native Extensions with Closure Compiler
Minifying CSS Files
Reducing HTTP Requests by Using CSS Sprites
The goal of the article is to help you increase your Google PageSpeed and YSlow scores. However, these steps can also help reduce load times on your site as well. If you’re interested in reducing load times for your website or application, check out this awesome article on optimizing front end performance.
At the end of the day, understanding JavaScript and Google PageSpeed are essential for optimizing your website’s performance. There are many things to consider before diving in, so let us help you out.
In this article, we’re going to break down what you need to know about Google PageSpeed and how it can affect your website’s performance. We’ll also share a few tips on how to optimize JavaScript performance and three of our favorite tools to help you analyze and improve your site’s speed.
JavaScript is the most dynamic and fluid of the three main web technologies. It’s also the one that browsers understand the least, which makes it the hardest one to optimize for performance. There are a lot of different factors that can go in to determining your JavaScript performance, and many of them are outside of your control.
Google PageSpeed Insights is a popular tool for developers wanting to test their page speed and find out how they can make their sites faster. But unless you’re an expert in JavaScript performance optimization, it’s hard to know what it really means when PageSpeed tells you “Eliminate render-blocking JavaScript and CSS in above-the-fold content”. In this article we’ll take a look at how Google defines this problem, how we can solve it, and whether or not optimizing for Google PageSpeed Insights will actually make our site faster.
The Problem with JavaScript
JavaScript is a very flexible language, but that flexibility comes at a cost. The browser has no idea what our code does until it runs, so until then it can’t tell if any resources (such as stylesheets) are needed, or if the page needs to be re-rendered. This means that any external scripts must be fetched (if they aren’t
JavaScript takes a little longer to load and execute than other website elements such as images or CSS, hence it’s necessary to optimize JavaScript performance in order to optimize your Google PageSpeed. There are a couple of ways we can do this, so let’s get started.
The easiest and quickest way, with fewest steps is to use a plugin called Autoptimize. After installing the plugin, simply go to Settings -> Autoptimize to enable the JavaScript optimization features.
Alternatively, you can follow the steps below for manual optimization:
1. Minify your JS
The very first thing to do is minifying your JavaScript code. Minification is a process of removing all unnecessary characters from source code without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute. Removing them can reduce the size of your code by ~20% or more.
2. Combine your JS files
Combining all of your external JavaScript files into a single file will reduce the number of HTTP requests that need to be made which in turn improves performance.
3. Avoid document.write()
The use of document.write() has been frowned upon since JavaScript’s inception because it can cause a severe performance hit as it is synchronous in nature and forces the browser to re-parse the HTML document structure. That being said, there are some exceptions where its use is acceptable such as ads and third party scripts that you have no control over or that you would like to render asynchronously (see item 9).
4. Don’t rely on global variables and functions
Global variables and functions are extremely error-prone because they can be overwritten by other
JavaScript code can be written in such a way that it starts executing as soon as the JavaScript file is downloaded. If a script contains a lot of DOM manipulations or other intensive processing, then the browser will be visibly unresponsive while the script executes. This is particularly bad for mobile devices with slower processors.
In this example, we are going to see how to defer execution of a script until after the page has loaded. The key idea is to use the async attribute on the script tag, which tells the browser that it should not wait for the JavaScript file to download before continuing to parse and render the rest of the page.
The following snippet shows how you would use async on an external script:
This approach means that your scripts will execute in parallel with parsing, so you’ll get performance gains from it. However, if you have scripts that depend on each other or that require some other initialization logic, you can’t just break them apart and run them in parallel. Instead, you need to refactor them into modules and use module loaders like RequireJS.
function () {
return ‘Hello World!’;
}