What is Tree Shaking (Optimize CSS) in AMP

CSS Tree Shaking will automatically remove all the unused CSS to bring the total under 50KB limit on the AMP pages, So if you want to optimize your CSS then follow these steps

  • You will find this option in the WordPress Dashboard -> AMP option panel -> Settings -> Performance -> Enable “Optimize CSS(beta)” option and then click on the “Save Changes” button.
  • Optimize CSS(beta): Once you enable this option it will remove unused CSS and reduces the size of the CSS.
  • Want to clear the Cache?: Just click this option and hit save and it will automatically clear the Cache.
  • If you want to check how much CSS is optimized then you need to enable “Dev Mode in AMP‘ option. You will find this option in the WordPress Dashboard -> AMP option panel -> Settings -> Advanced Settings -> Enable “Dev Mode in AMP ” option.

Note: Once you check the optimization then make sure you disable the ” Dev Mode in AMP ” option.

That’s it for this tutorial!!

We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.

Share
Published by
Sonali R

How to add Adobe Analytics in AMP

Follow these steps to add Adobe Analytics in AMP Step 1: Go to WordPress Admin Area -> AMP…

4 months ago

What is the CWV plugin all about

Core Web Vitals are the subset of Web Vitals that apply to all web pages,…

6 months ago

How to fix “Alternate page with proper canonical tag” Page Index issue in Google Search Console

The following reasons can be shown for non-indexing. Server error (5xx) Your server returned a 500-level…

7 months ago

Google Analytics ( GA4 ) integration in AMPforWP

We have added the Google Analytics 4 ( GA 4 ) integration in AMPforWP v1.0.80.…

12 months ago

How to add Marfell Analytics in AMP

In this article, I will show you how to add Dotmetrics Analytics to your AMP…

1 year ago

How to modify the H1-H6 size for mobile devices

In this option, we will show you how to modify the H1-H6 size for mobile…

1 year ago