How to handle "the author stylesheet specified in tag 'style amp-custom' is too long" in AMP?

Question

My css on AMPed page exceeds 50,000 bytes. When I was looking for solution of this problem, I found this page cssminifier.com but the result doesn't satisfy me (the CSS is admittedly smaller than earlier and website works properly but it's still far from permitted size).

Anyone knows any other workaround for this?

Answer 1

There is no work around. By design your CSS has to be small on AMP pages. You will need to remove some rules to get it down to 50KB.

We automate this using the critical node module.

Answer 2

I use gulp-purifycss and than gulp-minify-css-names. With these 2 you will be able to remove unused css classes and than also rename all css names to shorten names to (a0, a1, a2 etc...)

Answer 3

There is no go around, I ran into the same problem, so I used minify. The best practice is to keep a minify file of your css and a regular file. You can do a php include of the appropriate css file. Whenever you need to make changes, change the regular file and re-minify. Minify will knock off between 10k and 20k. At least it did for my page.