{"id":14485,"date":"2019-10-09T08:18:46","date_gmt":"2019-10-09T08:18:46","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=14485"},"modified":"2020-02-10T09:58:33","modified_gmt":"2020-02-10T09:58:33","slug":"how-to-solve-50kb-css-limit-validation-issue-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-solve-50kb-css-limit-validation-issue-in-amp\/","title":{"rendered":"How to solve 50KB CSS Limit validation issue in AMP"},"content":{"rendered":"\n<p>If you are facing this error <strong>The author stylesheet specified in tag &#8216;style amp-custom&#8217;<\/strong> is too long then follow these two steps to fix it:<\/p>\n\n\n\n<ol><li><a href=\"https:\/\/ampforwp.com\/tutorials\/article\/how-to-solve-50kb-css-limit-validation-issue-in-amp\/#1-minify\">Minify<\/a><\/li><li><a href=\"https:\/\/ampforwp.com\/tutorials\/article\/how-to-solve-50kb-css-limit-validation-issue-in-amp\/#2-optimize-css\">Optimize CSS<\/a><\/li><\/ol>\n\n\n\n<h4><mark style=\"background-color: yellow;\">1. Minify<\/mark><\/h4>\n\n\n\n<ul><li>You will find this option in <strong>WordPress dashboard<\/strong> -&gt; <strong>Navigate to AMP option panel<\/strong> -&gt;<strong> Settings<\/strong> -&gt; <strong>Performance<\/strong> -&gt; Enable <strong>Minify<\/strong> option.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"434\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/5-1-1024x434.png\" alt=\"\" class=\"wp-image-16088\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/5-1-1024x434.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/5-1-300x127.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/5-1-768x326.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/5-1-50x21.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/5-1-60x25.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/5-1-100x42.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/5-1.png 1308w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul><li><strong>Minify:<\/strong> Minify is the process by which unnecessary space or characters are removed from the code. These spaces and characters are not necessary to run the code and hence just add size to the file. When they are removed, the files become lighter which in turn improves the page loading time. Minify is a great strategy to improve meet visitor\u2019s expectations and rank better.<\/li><\/ul>\n\n\n\n<h4><mark style=\"background-color: yellow;\">2. Optimize CSS<\/mark><\/h4>\n\n\n\n<ul><li>You will find this option in the <strong>WordPress Dashboard<\/strong> -&gt; <strong>AMP option panel<\/strong> -&gt; <strong>Settings<\/strong> -&gt; <strong>Performance<\/strong> -&gt; Enable &#8220;<strong>Optimize CSS(beta)<\/strong>&#8221; option and then click on the &#8220;<strong>Save Changes<\/strong>&#8221; button.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"478\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/7-2-1024x478.png\" alt=\"\" class=\"wp-image-16090\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/7-2-1024x478.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/7-2-300x140.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/7-2-768x359.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/7-2-50x23.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/7-2-60x28.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/7-2-100x47.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/7-2.png 1312w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul><li><strong>Optimize CSS(beta):<\/strong> Once you enable this option it will remove unused CSS  and reduces the size of the CSS.<\/li><li><strong>Want to clear the Cache?<\/strong>: Just click this option and hit save and it will automatically clear the Cache.<\/li><li>If you want to check how much CSS is optimized then you need to enable &#8220;<strong>Dev Mode in AMP<\/strong>&#8216;  option. You will find this option in the <strong>WordPress Dashboard<\/strong> -> <strong>AMP option panel<\/strong> -> <strong>Settings<\/strong> -> <strong>Advanced Settings<\/strong> -> Enable &#8220;<strong>Dev Mode in AMP<\/strong> &#8221; option.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"188\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/2-5-1024x188.png\" alt=\"\" class=\"wp-image-14317\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/2-5-1024x188.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/2-5-300x55.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/2-5-768x141.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/2-5-50x9.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/2-5-60x11.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/2-5-100x18.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/09\/2-5.png 1346w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p style=\"background-color: #ffdddd; border-left: 2px solid #f44336; padding:10px;\"><strong>Note:<\/strong> Once you check the optimization then make sure you disable the &#8221; Dev Mode in AMP &#8221; option. <\/p>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>If you are facing this error The author stylesheet specified in tag &#8216;style amp-custom&#8217; is too long then follow these two steps to fix it: Minify Optimize CSS 1. Minify You will find this option in WordPress dashboard -&gt; Navigate to AMP option panel -&gt; Settings -&gt; Performance -&gt; Enable&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[34],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/14485"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=14485"}],"version-history":[{"count":15,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/14485\/revisions"}],"predecessor-version":[{"id":16240,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/14485\/revisions\/16240"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=14485"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=14485"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=14485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}