Yslow javascript



Keywords: yslow javascript
Description: 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 . Put Scripts at the

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 .

  • 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.

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.

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.

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.

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.

JSM in is a popular minfier for JavaScript. Just be sure to save a normal version because editing a minified file can be challenging.

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.

Please send in your tips regarding JavaScript and page speed. I am not a front-end developer, so I have plenty to learn.






Photogallery Yslow javascript:


YSlow - Official Open Source Project Website


JavaBlog.fr / Java.lu - Tool/Browser: Brief presentation of YSlow


Healthcare.gov Performance Review - website speed audit of ...


Big Performance Wins On The Front End | Drupal Watchdog


Phantom.js with TDD Introduction


Picture-11.png


YSlow - Official Open Source Project Website


Exceptional Performance: YSlow Update : arguments.callee


My Users Don't Like SharePoint because it is too slow! | David ...


Open Source Monitoring Hypervisor  Introducing PhantomJS and CasperJS


Big Performance Wins On The Front End | Drupal Watchdog


blog_preview.png


Building a Better Website With Yahoo!


OmniTI ~ YSlow! to YFast! in 45 minutes.


Jon D Jones | How To Improve Your EpiServer Website's Performance ...


YSlow Firebug addon to optimize Website n increase performance


RCSB Protein Data Bank - RCSB PDB


Network Monitoring | PhantomJS


Drupal Performance Optimization: How to Get Your Site to Perform ...


MIHTool: iOS web inspector and debugger


YSlowImage2.jpg