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