Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

amp-html

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?

like image 809
pidabrow Avatar asked Dec 21 '16 17:12

pidabrow


3 Answers

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.

like image 197
Jim Jeffries Avatar answered Nov 15 '22 07:11

Jim Jeffries


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...)

like image 45
Marcio Avatar answered Nov 15 '22 07:11

Marcio


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.

like image 27
Nate Avatar answered Nov 15 '22 07:11

Nate