Here’s how I reduce CSS size under 50KB for AMP. It’s mandatory requirement from Google AMP. The short answer: remove the unused CSS codes for the page you’re going to convert to AMP.
Long answer:
Easier said than done, especially when the webpage you’re going to convert to AMP had very large CSS codes.
Read on my own story below . . .
I am getting more and more requests to build AMP pages from existing pages.
However, there are many occasions that the existing pages contain a large chunk of CSS.
The problem is, almost all of the site owners I met, ask to make their site’s AMP page to look similar to the site’s look on the mobile phones.
That makes sense.
But this also raised another big problem: AMP pages had a restriction for CSS size, 50 KB at maximum.
Not only that, it’s not allowed to load any custom external CSS.
All styles must be loaded inside the style tag inside the head tag.
Violating one of these restrictions will result in invalid AMP.
There’s no point to having invalid AMP pages because Google won’t even index it, and it won’t show up on their search result page.
This means, we, developers had no other choice but to remove the unused CSS codes for the AMP pages we built.
There are several ways of doing this.
I’ve tried a manual way by checking each of HTML and CSS, which CSS class is not needed, then remove it.
That way works for a small site with simple CSS implemented on the page, but not for medium to the large sites where there are large and many CSS files to serve the page, that will be big no to go with manual way.
Here’s the point where UnCSS Online! came in.
It’s pretty easy and simple to use this tool.
You only need to view the mobile’s view of the site’s page you’re going to convert to AMP with Chrome developer tools.
Then, copy all of the CSS loaded there to your favorite code’s editor.
Also, copy all of the HTML loaded there to your favorite code’s editor, on a separate tab of course.
Look up all of those CSS codes you just copied.
Remove any “important!” attributes because AMP did not allow it.
If needed, format and beautify it. There are many free online tools to do this.
Finally, we arrived at the step where we need to open
uncss-online.com
Copy the clean and formatted CSS to the CSS area.
Do the same with HTML codes to the HTML area there.
Then, click the button “UNCSS MY STYLES!” and wait for some seconds ( or minutes, if your codes are large )
And, voila!
You get the clean CSS only for the web page you’re going to convert to AMP.
Just copy those un-css codes to style tag on your AMP page.
Make sure their size is no more than 50KB.
What if it’s still more than 50KB?
Good question.
If it’s still more than 50KB, you had no choice but to talk with the project owners or your clients about which part of the page you can omit — and this means you can remove the CSS for that one.
Does it really need under 50KB? One of the project owners asked me a long time ago.
My answer is yes because it’s the AMP mandatory requirement.
Otherwise, the AMP pages we built will have errors and Google will refuse to include it on their search result page.
This means, there’s no point to having invalid AMP pages.
Over time, you can monitor the site with implemented AMP on Google Web Master Tools.
There used to be a menu to check if your indexed AMP pages are all valid.
If not, Google Web Master Tools will give you an alert or even sent you an e-mail about the error you need to fix.