sideroad

Front-end optimize tool

Front-End Optimization

In recent years, front-end became a bottleneck in site performance. We should take measures this concern. Douglas Crockford found the practice of optimizing front-end. We can optimize manually. But the work spent much time and sucks. I strongly recommend to use automatic optimizing solution on cache layer such as Akamai blaze. modpage_speed also can optimize on Web server layer. However, if you can't use these for some reason or other. I've made an optimization tool only one command to use.View on Github

Install feo

npm install -g feo

Setup directory for optimization

src
source directory including all site contents as html, css, js and images. feo tool can pick up html files recursively.
dist
directory for optimized site contents
feo.json
optimize configure file refer to next section

Preparing feo.json

{
  "url" : "src",
  "dist" : "dist",
  "js" : {
    "compressor" : "yui-js",
    "ignore":[
      "show_ads.js"
    ],
    "inline":true,
    "root" : "src"
  },
  "css" : {
    "compressor" : "yui-css",
    "ignore":[],
    "inline":true,
    "root" : "src"
  },
  "backgroundImage" : {
    "base64" : true
  },
  "image" : {
    "base64" : true,
    "root" : "src"
  },
  "clean" : true
}

Optimize

  feo

You've already seen optimized contents as in front of you. This sites all contents optimized by this tool. As you know you can see optimized HTML source. the contentsbefore optimized source.

Results

Original source is first row and next is optimized source.

Rendering speed

Red graph is original source and blue one is optimized source.

Requests

If you wanna see more detail, please checkWebPageTest results

Comment