Script optimization

Reduce the number of requests and number of bytes needed to load your site!

The dilemma

When it comes to optimizing scripts we have a small dilemma. To keep your site easy to develop and maintain you want to split your code into multiple files, some are third party plugins or libraries and others are your own. You'd also want the files to be easy to understand and maintain by using good commenting conventions, code indentation and descriptive naming conventions.

From a performance point of view you would like the opposite! Of course you can manage to get both by messing around with server settings, build tasks, filters or similar. Or you can keep the files as they are and let Skymorph optimize them for you without any hassle.

Google page speed

By using Skymorph our script optmization will help you score higher in the following areas:

How to solve this?

To get the best of the two worlds, scripts that are easy to maintain AND optimized for performance, you just need to follow two simple steps:

  1. Tell us which scripts to bundle and name the bundle e.g. scripts.js or style.css
  2. Remove all references to the orignal scripts and replace them with just one that refers to your bundle e.g. http://youralias.skymorph.com/scripts.js

What we do

1. Combine your files

By bundling your scripts through Skymorph your visitors doesn't have to request and load multiple scripts, just one.

Example:

Your site With Skymorph
Number of JavaScript(s) 20 1
Number of CSS-file(s) 5 1
Total 25 2

This means 92% less HTTP-requests for scripts!

2. Minify your scripts

We clean up your scripts from all the extra weight they carry from nice indentation, friendly naming and comments!

  • Remove unnecessary whitespace
  • Remove other unnecessary tokens
  • Remove comments
  • Rename/shorten local variables

Example:

Your site With Skymorph
Weight of JavaScript(s) 20 x 25KB = 500KB 1 x (500KB minified) ≈ 300KB
Weight of CSS-file(s) 5 x 20KB = 100KB 1 x (100KB minified) ≈ 80KB
Total 600KB 380KB

This means 37% less bytes to download!

3. Compress the output

Even though we minified your scripts there is still more that can be done! Before sending the combined and minified script to your visitors we make sure to compress them really good further reducing the number of bytes transferred to the browser.

We handle both GZip and Deflate compression, depending on what the requesting browsers prefers.

Example:

Uncompressed With Skymorph
Weight of JavaScript(s) 20 x 25KB = 500KB 300KB x compression = 90KB
Weight of CSS-file(s) 5 x 20KB = 100KB 80KB x compression = 16KB
Total 600KB 106KB

After minification and compression there is 82% less bytes to download!

4. Serve your scripts from a CDN

To further speed up your site we make sure your scripts are loaded from a server as close to your visitors as possible. The CDN uses solid state drives and is one of the fastest in the world.

The CDN will also cache the optimized scripts so that new visitors gets them without any delay. We also make sure to tell the browser that they can cache the scripts as well so that they don't even need to ask for it on subsequent page loads.

Example summary:

Starting of with 20 JavaScripts à 25KB and 5 CSS-files à 20KB gave us a total of 25 HTTP-requests and 600KB to download for each visitor. Also keep in mind that all this traffic hits our server!

With Skymorph the total number of HTTP-requests (for scripts) are down to 2 and the total number of bytes only 106KB. And NONE of the traffic hits your server. Your server can use it's bandwidth, RAM and CPU to do more important stuff.