The most important part of the speed optimization is Critical CSS.

Swift Performance uniquely generates Critical CSS on the fly for all pages. You can choose Unused CSS method or Viewport Based (recommended).

 

Unused CSS
Unused CSS method will remove all CSS rules where the selector is not exists in the HTML source. It is also checks selectors in javascript files.

Note: It can cause issues if your CSS is not valid. Unfortunately many plugins contains some CSS issues. If some of them breaks the Critical CSS, you should exclude them from merging.

 

Viewport Based
To generate Viewport based Critical CSS our API will render the page, and generate CSS which is required for “above the fold” content. It is the better way, also it won’t break Critical CSS generation if the original CSS contains some smaller issues.

 

Extra Critical CSS
If you would like to modify or extend the generated critical CSS, you can add Extra Critical CSS. It can be useful if some content is not visible without javascript, but you would like to use Delay Async Scripts or Lazyload Scripts feature.