landing-booster 🚀

Node-js program designed to optimize dev landing pages and make Google robot happy.

Table of contents

1. Setup
   1. Environment
   2. Download
   3. Installation
   4. First use
   5. Configuration
2. Features
   1. babel
   2. postcss
   3. webp
   4. purgecss
   5. CSSO
   6. sharp
3. Licence

Setup

Environment

First you need install Node.js, download here (choose latest LTS or Current version) and follow installation steps :

• Welcome to the Node.js Setup Wizard :
  • Select Next.
• End-User License Agreement (EULA) :
  • Check I accept the terms in the License Agreement.
  • Select Next.
• Destination Folder :
  • Select Next.
• Custom Setup :
  • Select Next.
• Ready to install Node.js :
  • Note : This step requires Administrator privlidges.
  • Select Install.
• Installing Node.js :
  • Let the installer run to completion.
• Completed the Node.js Setup Wizard :
  • Click Finish.

After installation you need check Node.js and NPM installation, use command :

node -v && npm -v

You should see output like this :

v15.5.1
7.18.1

Download

To download booster tool, use command :

git clone https://github.com/Unknown-Robot/landing-booster.git

Navigate to project installation folder :

cd landing-booster

You should see output like this :

C:\\Users\\USERNAME\\Document\\Github\\landing-booster>

If you don't use Github you can download the project directly with "Download ZIP" from the repository.
Unzip downloaded folder and navigate to project installation folder :

cd C:\\Users\\USERNAME\\Download\\landing-booster

You should see output like this :

C:\\Users\\USERNAME\\Download\\landing-booster>

Installation

To install booster tool and dependencies, simply use command :

npm install

First use

After installation, to start booster tool use command :

npm start

You should see output like this :

Start landing booster 🚀
? Select landing path : (Use arrow keys)
> Insert new path

Insert new path is your only choice, you will need to specify a new landing path.
Push enter to select choice.

Now select all booster script with a and push enter to proceed :

Start landing booster 🚀
? Select landing path : Insert new path
? Select booster script : (Press <space> to select, <a> to toggle all, ...
❯◉ Babel (Transform code for old browser, remove unused code, minify code)
 ◉ Postcss (Transform background CSS rules)
 ◉ Purgecss (Remove unused CSS rules)
 ◉ Webp (HTML <img> to <picture>)
 ◉ CSSO (Minify CSS rules)
 ◉ Sharp (Images conversion WebP)

Each new path and script executed is stored in "config.json" for next use.
Paste new landing path and push enter to proceed :

Start landing booster 🚀
? Select landing path : Insert new path
? Select booster script : Babel ...
? Insert new landing path : C:\\Wamp\\www\\fen\\lan\\57

Perfect you have optimised your first landing !

...
Run booster script ✔
Document size saved : 206.6 Kb
Webp size saved : 3.67 Mb
Duration : 5 seconds

? Need start again [Y/n] ?

Now you can just push enter to restart program (Yes by default) or close tool with CTR-C or CTR-Z.

Configuration

Need ignore folder or file, add your path selector in array of the "ignore" key in "config.json".
Need script sdtout in console, change value of the "output" key in "config.json" (current configuration) or directly in config.js (configuration model).
In any case, the last one script sdtout execution is available in "output.json" file.

This is not recommended but if you want to change the behaviour or have problems you can change the configuration of the scripts used, see :

• babel : babel.config.js
• purgecss : purgecss.config.js
• postcss : postcss.config.js

Features

Once landing optimisation is done, you can see a build folder at the root of landing.
This folder contains all the work done by the tool.

babel

In tool Babel script is used to convert code for old browser, remove unused, minify code from inline script or Javascript files.
Babel script work with all Javascript files and inline script in all documents of types (HTML, PHP).
Browser targets is specified with "targets" object in babel.config.js.
By default the browser targets are IE version >= 11 and 2 latest version for other browser.
Need change browser targets see documentation.

postcss

In tool Postcss script is used to transform all rules from inline style and CSS files.
Postcss script work with all CSS files in /css folder and inline style in all documents of types (HTML, PHP) contains at the root of landing.
The script inject polyfill in header, used to check if the browser is compatible with the .webp format.
All background and background-image CSS rules, will be converted by postcss with plugin.

Before conversion :

header {
    background-image: url(./images/background.jpeg);
    background-position-x: -150px;
    background-size: cover;
}

After conversion :

header {
    background-position-x: -150px;
    background-size: cover;
}

html.no-js header, html.no-webp header {
    background-image: url(images/background.jpeg);
}

html.webp header {
    background-image: url(images/background.webp);
}

webp

In tool Webp script is used to transform all HTML img element to picture.
Webp script work with all documents (HTML, PHP) contains at the root of landing.
All HTML img element, will be converted to picture to ensure cross-browser compatibility.

Before conversion :

<img src="images/logo.png" alt="img"/>

After conversion :

<picture>
    <source srcset="images/logo.webp" type="image/webp">
    <source srcset="images/logo.png" type="image/png">
    <img data-transform type="image/png" src="images/logo.png" alt="img"/>
</picture>

purgecss

In tool Purgecss script is used to remove unused rules from inline style and CSS files.
Purgecss script work with all CSS files and inline style in all documents of types (HTML, PHP).

CSSO

In tool CSSO script is used to minify all rules from inline style or CSS files.
CSSO script work with all CSS files and inline script in all documents of types (HTML, PHP).

sharp

In tool Sharp script is used to transform all images of types (PNG, JPG, JPEG) to format .webp.
Sharp script work with all images in /images folder contains at the root of landing.

Licence

Copyright (c) 2021 Unknown-Robot Licensed under the MIT license.