This is part three our series on using Yslow to improve website speed. Today, I am going to focus on how properly using JavaScript can result in a faster loading website.
YSlow JavaScript Tips
Under the JavaScript tab in Yslow, you will find major recommendations:
- Put Scripts at the Bottom
- Make JavaScript and CSS External
- Minify JavaScript
- Remove Duplicate JavaScript and CSS
Now, I am by no means an expert in front-end optimization. I spend most of my time providing server management services for our clients, but in doing in many cases, I have found what needs to be fixed cannot be fixed from the server side of things.
Put JavaScript at Bottom
Many browsers will make between 2-8 connections to a server at the same time. This parallel download approach speeds up page delivery. Unfortunately, when JavaScript is encountered parallel downloads are blocked. New downloads will not start until the JavaScript is loaded. This slows down your website.
On rackAID’s own site, we improved our site speed by 200 ms by simply relocating some JavaScript.
While I have not tested explicitly with JavaScript changes, in general if your pages load faster users can look at more pages within the same amount of time. On some sites, such as games, forums, and blogs, we have found improving page speed increases the number of pages viewed per visitor. So you could find increased server throughput (requests/sec) if you have faster loading pages.
Make JavaScript and CSS External
Instead of placing CSS and JavaScript in your document body, consider using an external include. The reason for this is caching. Caching is one of the best ways to speed up your website.
If your site re-uses the same components over and over, you can set the server to cache these files. This way the site visitor is not re-downloading the same content over and over. As a result, your HTML page size can be smaller.
By caching js and css files, your server has fewer requests to handle. When web servers send out HTTP headers, they contain caching information. If the js or css files are already in the browser’s cache, then they will not be downloaded again. This reduces the requests/sec on your HTTP server.
Minify JavaScript
Minifying is simply a process of removing all unnecessary characters from code. This makes for smaller files. Smaller files download faster and speed up your pages’ load time.
From the sever-side, if you assume your server has a maximum bandwidth that it can support, the smaller the files size the more files you can serve at the same time. While in practice tuning an Apache server for speed is not this simple, you still want to make files as small as possible.
JSMin is a popular minfier for JavaScript. Just be sure to save a normal version because editing a minified file can be challenging.
Remove duplicate JavaScript and CSS
As I do not do a lot of frontend optimization, I did not know that including the same JavaScript twice hurts performance. In some browsers, such as Internet Explorer, the script generates two blocking HTTP requests which can slow page speed. In addition to the additional HTTP requests, the browser must evaluate the script each time it is included.
We had an AddThis social bookmarking JavaScript on our blog’s index page. Since it was next to every title, the page had to evaluate it multiple times. The result was nearly 500ms wasted. Since it was not used much, we removed it.
While Yahoo does not comment directly on CSS, the issue is the same. You should not call the same CSS file more than once on a page. This is less of a problem but I have seen it on some sites. CSS files were renamed and people just included both to “be safe”.
From the server side, fewer includes means fewer HTTP requests to load the page. While HTTP request happen quickly, the time require for them can add up. If you want to speed up your site, you need to reduce HTTP requests to a minimum.
Yslow Series
- Fix Slow Loading Websites – Yslow Image Tips
- Faster Loading Websites – Yslow’s JavaScript Tips
- Speed up Your Site – Yslow Server Tips
- Content
- Cookie
- CSS
Your Tips
Please send in your tips regarding JavaScript and page speed. I am not a front-end developer, so I have plenty to learn.