Critical CSS Optimization Demo
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
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|