blinkloader

    1.0.7 • Public • Published
    blinkloader

    Delightful Website Optimization Toolkit

    CircleCI XO code style Slack Community

    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.

    🍺🍕 All you need is terminal! Built by developers for developers. 🍺🍕

    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

    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

    Install

    npm i blinkloader

    DownloadsWeekly Downloads

    1

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    713 kB

    Total Files

    65

    Last publish

    Collaborators

    • mac-r