Sample site demonstrating the critical css inlining optimization
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
img
js
vendor
.gitignore
LICENSE
README.md
aero-debug.log
aerobatic.yml
index.html

README.md

Critical CSS Optimization Demo

This Aerobatic demo site showcases the performance improvements offered by the critical css inline optimization. The site was generated using the Bootstrap Agency quick start.

aero create --quick-start html5/sb-agency

There are two versions of the site - with and without the critical CSS inlining optimization enabled. The aerobatic.yml contains the following configuration:

deploy:
  optimizer:
    inlineCriticalCss: true

Results

The Google PageSpeed Insights tool was run against each version. The improvement is particularly significant on mobile devices.

Mode URL Desktop Score Mobile Score PageSpeed Results
Without critical CSS inlining https://critical-css-demo.aerobatic.io/ 90 / 100 74 / 100 View Results
With critical CSS inlining https://critical-css-demo--optimized.aerobatic.io 98 / 100 98 / 100 View Results