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

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

Preparing feo.json

  "url" : "src",
  "dist" : "dist",
  "js" : {
    "compressor" : "yui-js",
    "root" : "src"
  "css" : {
    "compressor" : "yui-css",
    "root" : "src"
  "backgroundImage" : {
    "base64" : true
  "image" : {
    "base64" : true,
    "root" : "src"
  "clean" : true



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 contents before optimized source.


Original source is first row and next is optimized source.

Rendering speed

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


If you wanna see more detail, please check WebPageTest results