Front-end Performance Masterclass

Quick start

This project requires Node.js and npm.

After installing dependencies using npm install the following scripts are available on all exercise branches:

npm run ...	Description
build	Copies and optimises files from src/optimised/ to dist/optimised/.
start	Starts an Express.js server on http://localhost:3004.
watch	Watches for file changes and triggers relevant (sub) build tasks.

More (sub) tasks are available in package.json > scripts.

Setup

src/
    ├── original/     <-- copy of getbootstrap source with small changes.
    └── optimised/    <-- working directory for this masterclass, based on original.
        └── _base/    <-- templates shared between pages.

dist/
    ├── original/     <-- copy of src/original/, generated via `npm run copy:original`.
    └── optimised/    <-- optimised version of src/optimised/, generated via `npm run build`.
    
tasks/                <-- build tasks called from `package.json`.

server-original.js    <-- serves `dist/original/` on `localhost:3003`.
server-optimised.js   <-- serves `dist/optimised/` on `localhost:3004`.

Exercises

• 01 - Minify HTML, CSS, JS
• 02 - Subset fonts
• 03 - Use image srcset
• 04 - Use picture elements
• 05 - Set cache header
• 06 - Cache revisioned files only
• 07 - Load fonts async
• 08 - Load JS
• 09 - Load CSS async
• 10 - Use critical CSS
• 11 - Use dynamic compression
• 12 - Precompression

Solutions are linked from each individual exercise.