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

• Install dependencies: npm install
• Serve: npm start
• Expose localhost: npm run expose

In various feature branches I've optimized different bolts and pieces of the Bootstrap documentation website. Below I explain for each feature branch what the benefit of the optimization is, and how it helps the end user. Included are screenshot comparisons of load times for each feature, compared to the original.

The final comparison shows all optimizations combined. The comparison screenshot graphs below are not representative of a production environment and may not be reproducable.

They were made using WebPagetest through an ngrok tunnel to a very simple ExpressJS server running on a development machine.

Asynchronous CSS loading was implemented using Filament Group's loadCSS. It is meant to be used only for non-critical CSS, e.g. CSS you don't need for the first meaningful paint.

This feature on its own is not much of an improvement for the end user. It even increases the timespan during which FOUT occurs. Other features like generating critical path CSS make this really shine, by reducing the time the parsing and loading of a CSS script is render-blocking.

Added code can be found in layout.html.

Asynchronous font loading is implemented using Bram Stein's FontFaceObserver.

Font Face Observer is a small @font-face loader and monitor (3.5KB minified and 1.3KB gzipped) compatible with any web font service. It will monitor when a web font is applied to the page and notify you. It does not limit you in any way in where, when, or how you load your web fonts. Unlike the Web Font Loader Font Face Observer uses scroll events to detect font loads efficiently and with minimum overhead.

— Bram Stein

FontFaceObserver is used to set a class on the html element as soon as the required fonts are loaded. That way, a user sees the default sans-serif fallback font until the class is switched. This enables the user to see the content around 0.5 seconds earlier, a long time when you are frustrated by your shitty CSS framework.

Added code can be found in layout.html.

Caching headers were set to a Max-Age of 3155760000, which translates to a full year. This makes sure clients (users) only have to request static assets once a year, after the browser cache is cleared, or after the assets have changed. This increases page load speed for the user, making content available faster.

Note: the screenshot graph shows a repeat view because that is the most relevant view for this feature branch.

Added code can be found in server.js.

Bootstrap's CSS & Javascript as well as jQuery are often requested assets. As such they have been propagated around the world by various CDN's. A CDN will route a request for an asset to the server closest to the client requesting it, reducing the time bytes spend traveling.

Added code can be found in layout.html.

The CSS used in the web site has been concatenated together and optimized and minified using clean-css. This results in a smaller in total filesize, single CSS bundle, decreasing the time a browser needs to request and receive the resource and parse it.

Added code can be found in layout.html as well as in gulpfile.js.

The Javascript used in the web site has been concatenated together and mangled using uglify. This results in a single, smaller JS bundle, the time a browser needs to request and receive the resource.

Added code can be found in layout.html as well as in gulpfile.js.

Addy Osmani's critical has been used to generate critical-path CSS for each page in the web site. The right critical-path CSS is included by the server on request.

Added code can be found in critical-path.js as well as in layout.html and server.js.

The compression package is used to compress files sent to the browser. This reduces page load time for the end user.

Added code can be found in server.js

All images in the repository have been optimized using imagemin. This reduces filesize.

Additionally, all images have been converted to WebP, and img tags have been replaced with picture tags, with a source for the WebP image, and a fallback to the regular image for browsers that do not support WebP.

Relevant added code can be found in gulpfile.js

All of the above optimizations combined yield the largest effect on the time to first meaningful paint, e.g. the time until a user has something useful on their screen.

All of the changes above can be found merged in release/2.0.0.

All changes together net a 100/100 result on Google's Pagespeed Insights, for both desktop and mobile.

All in all, the documentation website sports so much unused CSS and Javascript on each page, the best optimization would be to chuck it all and do a complete, lean rewrite of the required stylesheets and Javascript. That completely defeats the purpose of a Bootstrap documentation site, where among other things, it would be nice if Bootstrap is showcased.