Delightful Website Optimization Toolkit

This is a preliminary release for internal review.
The official release will be announced later.
Any suggestion for modification is welcome.

Modern web standards require websites to load quickly. This includes both the minimal response time and the minimal size of the loaded content. Blinkloader takes care of all website optimization complexities. It follows Google Page Speed recommendations and applies advanced algorithms to achieve even better performance. Focus on building great websites, Blinkloader will take care of javascript/css bundles and images.

:beer::pizza: All you need is terminal! Built by developers for developers. :beer::pizza:

Highlights

• Guided configuration (inspired by yeoman).
• Adaptive images (automatic resizing of images to load quickly on each device).
• Gzip compression of html, images, css, javascript.
• Image size reduction for png/jpeg using (imgmin, png-quant and others).
• Webp image conversion for supported browsers.
• Relevant CSS extraction into page head (no need to wait for heavy css libs to see the page).
• Html minification.
• Images are automatically distributed via CDN.
• Maximizes your Google Page Speed score.

Currently we only support static websites not using React or similar frontend frameworks.

Usage

Add Blinkloader to your project

Install Blinkloader globally and run it with init to add Blinkloader configuration file to your project folder. Yarn currently provides significant speed improvements over npm during the installation process. Consider using Yarn if the installation is too slow for your needs.

$ yarn global add blinkloader
$ blinkloader init

If you prefer using npm:

$ npm install --global blinkloader
$ blinkloader init

After you complete the guided configuration your blinkloader.json will then look similar to this:

{
  "apiKey": "<BLINKLOADER_API_KEY>",
  "projectId": "<BLINKLOADER_PROJECT_ID>",
  "domains": [
    "example.com"
  ],
  "stack": "static-website-via-s3",
  "optimizations": [
    "instant-css",
    "adaptive-images",
    "images",
    "webp",
    "async-js",
    "minify",
    "gzip"
  ],
  "directory": "build"
}

Optimize

Optimization is the core purpose of this package. And it's very easy to use. Assuming that blinkloader.json already exists in the project directory, you just need to run the following command:

$ blinkloader optimize

It's important to note that your static website should be located in the subfolder of your project (dist, build or similar). This subfolder should be specified during the initialization process. If everything is set up properly, then we archive your static website and send it to our cloud servers. According to your configuration, we do multiple optimizations. After optimizations are complete, the end result is fetched and stored in a new folder. If your website is located in the build folder, then the optimized website will be at build_optimized.

This is an example of the output, which you can see after running the command:

    static website directory: build
    output directory: build_optimized
    identified 2 optimization targets


    INFO      there are 8,257 optimization units on your balance


    DONE      established connection with the Blinkloader API
    INFO      archiving optimization targets and sending to Blinkloader
              uploading [====================] 100%


    DONE      requested optimization for /about.html
    DONE      requested optimization for /index.html
    DONE      optimized /about.html
    DONE      optimized /index.html


    Woohoo! Optimization complete!
    Now you can run blinkloader server to check optimization results.

To be able to run blinkloader optimize you should have enough optimization units. We give you 1,000 optimization units for free. This should be enough for few optimizations of a typical static website (few pages). Each subsequent optimization will use fewer optimization units, because we do caching of your images and transformations on top of them.

Check Results

It may be difficult to preview the optimized website locally, because files may be compressed. This is why we've built an additional command:

$ blinkloader server

The output would be similar to this:

    DONE      blinkloader started serving build_optimized at port 59256
    DONE      copied http://localhost:59256 to clipboard, use Ctrl-V to paste anywhere


    GET       / 200 16 ms - 1.3 kB
    GET       /favicon.ico 404 9 ms - 150 Bytes

The port is assigned automatically and the link is added to clipboard. So you can paste it to the browser easily. However, in case you want to deploy the website to Heroku and need a custom port, you can do it the following way:

$ blinkloader server --port 3000

Deploy

Static websites are usually deployed to AWS S3. Setting up proper content types and caching may be a challenge. We decided to help you a little bit. You should have AWS_REGION, AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY set in your environment. Then run this command:

$ blinkloader deploy

As a result we deploy your static website automatically! You should see the following output:

? S3 deployment will use your AWS credentials and change the content of buckets
 having same names as domains. Would you like to proceed? Yes


    stack: static-website-via-s3


    DONE      bucket example-test-123.com already exists
    DONE      started syncing the bucket with build_optimized
              uploading [====================] 100%


    DONE      set up static website parameters
    DONE      set up the bucket policy to make your website available


    DONE      Woohoo, it's deployed!
    DONE      http://example-test-123.com.s3-website-us-west-1.amazonaws.com
    DONE      copied the link to clipboard, use Ctrl-V to paste anywhere

Please, keep in mind that this is not a complete setup. We don't touch your DNS records or Cloudfront Distributions.

CLI

$ blinkloader

  Usage
    $ blinkloader <command>

  where <command> is one of:
    init, sync, optimize, server, deploy

  Quick help on <command>
    $ blinkloader <command> --help

  Examples
    $ blinkloader init
    $ blinkloader sync 
    $ blinkloader optimize
    $ blinkloader server
    $ blinkloader server --port 3000
    $ blinkloader deploy

  Tips
    - Generate blinkloader.json using init command. Change it later if needed.

Changelog

Read the releases page for more information.

License

MIT license