How to fix CSS Issues with AMP WordPress plugin

Today we are going to talk about one issue that can look terrifying, but it is simple to fix. The CSS budget issue.

How the AMP plugin works

It happens because the AMP framework only allows 75 KB of CSS on each page.

But the AMP plugin adds CSS optimizations, compressing CSS and removing CSS not used by the current page, but in some cases, the CSS will be exceeded by third-party plugins or themes.

If the limit exceeds the budget AMP plugin will prioritize the CSS loaded on that page.

How can I fix it?

First, we need to find the cause of the problem, and we need to check with the amp plugin that is causing the issue:
I will click at the top Bar and check which plugins or theme is causing the issue.

1) Make sure you have enabled the AMP validation tool
Go-to: Users - Profile - check the checkbox for AMP Development tool - save

2) Visit the AMP page exceeding the CSS budget check the Admin bar for the AMP option locate the submenu CSS budget and click on it.

3) Locate the source of excessive CSS.

a) If one of the plugins adds excessive CSS find an alternative plugin from the AMP ecosystem
b) I can also disable the CSS for this plugin only for amp pages


Best practices

Look for AMP-compatible themes and plugins
If it is possible use the core editor
Avoid overcrowded your website with plugins that are doing similar jobs

AMP plugin Support: https://wordpress.org/support/plugin/...