> 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:

!blinkloader optimize

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

$3

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.

`console
$ yarn global add blinkloader
$ blinkloader init
`

If you prefer using npm:

`console
$ npm install --global blinkloader
$ blinkloader init
`

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

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

`

$3

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:

`console
$ 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:

`console

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.

$3

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

`console
$ blinkloader server
`

The output would be similar to this:

`console

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:

`console
$ blinkloader server --port 3000
`

$3

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:

`console
$ blinkloader deploy
`

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

`console
? 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.

$3

`console
$ blinkloader

Usage
$ blinkloader

where is one of:
init, sync, optimize, server, deploy

Quick help on
$ blinkloader --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