How I reduce CSS size under 50KB for AMP


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 request to build AMP pages from existing pages.

However, there are manny occasions that the existing pages contains large chunk of CSS.

The problem is, almost all of site owners I met, asked to make their site's AMP page to look like as similar as the site's look on mobile phone.

That makes sense.

But this also raised another big problem: AMP pages had 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 on invalid AMP.

There's no point to have invalid AMP pages because Google won't event 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 doing this.

I've tried manual way by checking each of HTML and CSS, which CSS class are not needed, then remove it.

That way works for small site with simple CSS implemented on the page, but not for medium to large site 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 favourite code's editor.

Also, copy all of the HTML loaded there to your favourite 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 )

uncss-online

And, voila!

You get the reduced, cleaned up 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 can be omitted -- and this means you can remove the CSS for that one.

Is it really need under 50KB? One of project owners asked me very long time ago.

My answer is yes, because it's the AMP mandatory requirement.

Otherwise, the AMP pages we built will be invalid and Google will refuse to include it on their search result page.

This means, there's no point to have 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.


Final note:

If uncs-online was down, you can try another alternative here: https://purifycss.online/

However, you may also run the uncss tool on your own by cloning the source code from Github https://github.com/uncss/uncss ( yes, it is open source )

If you're still in doubt about whether or not to implement AMP for your site, feel free to read my writing about why AMP is important.

Click to bookmark


Related Links


  1. Why AMP is important?