This project serves an adapted version of the Bootstrap documentation website. It is based on the github pages branche of Bootstrap.
Differences from actual Bootstrap documentation:
- Added custom webfont
- Removed third party scripts
- The src directory is served with Express.
- Templating is done with Nunjucks
The first run was extremely slow and unoptimized for slow 3G connections. There were multiple critical problems with a total load time of 31 seconds. The first paint was only rendered at the 9th second. This means that the user stared at a blank screen for almost 10 seconds! Other then the slow render speed the total download size was huge, at 1.2mb.
First meaningful paint: 09.60s
Total load time: 30.73s
For the minifying process, I used a vs code plugin named Minify. Somehow Google Chrome bugged out and didn't want to render the paint screenshots. However, it was a bit faster but not really significant as you can see in the total load time. Mostly because of the blocking behavior of the CSS and JavaScript files.
First meaningful paint: -
Total load time: 30.48s
This was a bigger performance boost then I had imagined. The one second gain on the first meaningful paint is, of course, nice but the real boost can be found in the total load time. A 08.38s boost is huge. For the image optimization, I used the Tinypng web interface.
First meaningful paint: 08.99s
Total load time: 22.10s
For the javascript minifying process I used the same Minify plugin. Somehow the first paint performance went backward but I gained a few more seconds on the total load time. I am quite happy with this, mostly because I know that my first paint will get an enormous boost in the last 2 optimization steps.
First meaningful paint: 11.70s
Total load time: 19.94s
Same as the JavaScript files but with 0 gains.
First meaningful paint: 11.80s
Total load time: 19.96s
What a boost! By deleting the unused CSS properties and using the new font swap technique my total load time went to 18.77 and my first meaningful paint to 04.69 seconds!
First meaningful paint: 04.69s
Total load time: 18.77s
Ok, this is unreal. The critical CSS and async CSS combinations is huge! I am not sure why I never heard about this before but I can ensure everyone that this will be my new standard. The total load time got a 1-second performance boost but my first meaningful paint went to 293 milliseconds! For the critical CSS, I used the Critical Path CSS Generator website.
First meaningful paint: 293ms !
Total load time: 17.55s
- Install dependencies:
npm install
- Serve:
npm start
- Expose localhost:
npm run expose