{"id":596,"date":"2021-03-04T07:10:00","date_gmt":"2021-03-04T07:10:00","guid":{"rendered":"https:\/\/www.wpwebify.com\/?p=596"},"modified":"2024-02-24T16:54:08","modified_gmt":"2024-02-24T16:54:08","slug":"avoid-remove-unnecessary-css-wordpress","status":"publish","type":"post","link":"https:\/\/www.wpwebify.com\/wordpress\/avoid-remove-unnecessary-css-wordpress\/","title":{"rendered":"How To Avoid and Remove Unnecessary CSS in WordPress"},"content":{"rendered":"\n<p>If you want to optimize the speed of your WordPress website, you need to remove unnecessary CSS. It delivers a faster page loading experience to the users and improves your site ranking in the Google page speed test.<\/p>\n\n\n\n<p>We focus on using reliable and fast web hosts, enabling caching, <span style=\"text-decoration: underline;\"><a aria-label=\" (opens in a new tab)\" class=\"rank-math-link\" href=\"https:\/\/www.wpwebify.com\/blog\/image-optimization-image-optimizer-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">optimizing images<\/a><\/span>, and removing unused plugins to reduce server load, compress Javascript &amp; CSS, use a content delivery network, etc.<\/p>\n\n\n\n<p>But sometimes, we can improve our page performance even more by avoiding those components that load as bloats. So, next in the list, you can remove unnecessary CSS and JS files from WordPress to make your page feel smooth and fast. In this article, we will mainly focus to avoid and remove unnecessary CSS. <\/p>\n\n\n\n<p>Of course, there are great plugins to unload specific CSS from a page, such as <span style=\"text-decoration: underline;\"><a aria-label=\" (opens in a new tab)\" href=\"https:\/\/wordpress.org\/plugins\/wp-asset-clean-up\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"rank-math-link\">Asset CleanUp<\/a><\/span>, or <span style=\"text-decoration: underline;\"><a aria-label=\" (opens in a new tab)\" href=\"https:\/\/www.webperftools.com\/purifycss-wordpress-plugin-remove-unused-css\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"rank-math-link\">Purify CSS<\/a><\/span>, to name a few. In this article, we will show how to do it with and without installing plugins on your WordPress site.<\/p>\n\n\n\n<p>Before that, let&#8217;s go through&#8230;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What is unused CSS?<\/strong><\/li>\n\n\n\n<li><strong>Why do plugins load all CSS?<\/strong><\/li>\n\n\n\n<li><strong>What if we don&#8217;t serve these CSS&#8217;?<\/strong><\/li>\n\n\n\n<li><strong>Why is removing CSS not an easy task?<\/strong><\/li>\n<\/ul>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.wpwebify.com\/wordpress\/avoid-remove-unnecessary-css-wordpress\/#What_Is_Unused_CSS\" >What Is Unused CSS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.wpwebify.com\/wordpress\/avoid-remove-unnecessary-css-wordpress\/#Why_Does_the_Plugin_Load_All_CSS\" >Why Does the Plugin Load All CSS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.wpwebify.com\/wordpress\/avoid-remove-unnecessary-css-wordpress\/#What_if_We_Dont_Serve_These_Elements\" >What if We Don\u2019t Serve These Elements?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.wpwebify.com\/wordpress\/avoid-remove-unnecessary-css-wordpress\/#Why_Is_Removing_CSS_Not_an_Easy_Task\" >Why Is Removing CSS Not an Easy Task?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.wpwebify.com\/wordpress\/avoid-remove-unnecessary-css-wordpress\/#How_To_FindAnalyze_Unused_CSS_Files_This_Cover_JS_Files_As_Well\" >How To Find\/Analyze Unused CSS Files (This Cover JS Files As Well)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.wpwebify.com\/wordpress\/avoid-remove-unnecessary-css-wordpress\/#How_To_Remove_Unnecessary_CSS\" >How To Remove Unnecessary CSS?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.wpwebify.com\/wordpress\/avoid-remove-unnecessary-css-wordpress\/#1_You_Can_Avoid_Inline_CSS_Styling_in_the_WP_Editor\" >1. You Can Avoid Inline CSS Styling in the WP Editor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.wpwebify.com\/wordpress\/avoid-remove-unnecessary-css-wordpress\/#2_Generate_Critical_CSS\" >2. Generate Critical CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.wpwebify.com\/wordpress\/avoid-remove-unnecessary-css-wordpress\/#3_Use_a_CDN_To_Deliver_CSS_Files\" >3. Use a CDN To Deliver CSS Files<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.wpwebify.com\/wordpress\/avoid-remove-unnecessary-css-wordpress\/#4_Use_Asset_CleanUp_Plugin_To_Remove_CSS_Files_Plugin\" >4. Use Asset CleanUp Plugin To Remove CSS Files (Plugin)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.wpwebify.com\/wordpress\/avoid-remove-unnecessary-css-wordpress\/#5_Use_Perfmatters_Plugin_To_Remove_CSS_Plugin\" >5. Use Perfmatters Plugin To Remove CSS (Plugin)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.wpwebify.com\/wordpress\/avoid-remove-unnecessary-css-wordpress\/#6_Create_a_Plugin_Manually_To_Remove_CSS_and_JS_Files\" >6. Create a Plugin Manually To Remove CSS (and JS) Files<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.wpwebify.com\/wordpress\/avoid-remove-unnecessary-css-wordpress\/#Final_Words\" >Final Words<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading has-text-align-center\"><span class=\"ez-toc-section\" id=\"What_Is_Unused_CSS\"><\/span>What Is Unused CSS?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.keycdn.com\/blog\/remove-unused-css\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\">Unused CSS<\/a><\/span> is the CSS code that loads regardless of its importance on a particular page. Some of these codes do their work to design page elements. However, the rest (most) of them are not required because a single page does not demand all the CSS codes written for the entire website.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/CS-files.png\" alt=\"Unused CSS is the CSS code that loads regardless of its importance on a particular page.\" class=\"wp-image-603 lazyload\" title=\"\"><noscript><img decoding=\"async\" width=\"750\" height=\"338\" src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/CS-files.png\" alt=\"Unused CSS is the CSS code that loads regardless of its importance on a particular page.\" class=\"wp-image-603 lazyload\" title=\"\" srcset=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/CS-files.png 750w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/CS-files-300x135.png 300w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/CS-files-100x45.png 100w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/CS-files-700x315.png 700w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/noscript><\/figure>\n<\/div>\n\n\n<p>Most of the time, almost 80% of the CSS files probably do not do anything on a single page. You can test it on your personal site&#8217;s homepage and observe how many CSS files are being used on the page against the total number of CSS files being served.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\"><span class=\"ez-toc-section\" id=\"Why_Does_the_Plugin_Load_All_CSS\"><\/span>Why Does the Plugin Load All CSS?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>During development, the theme developers need to write the theme in such a way that it will support all kinds of websites, whether it&#8217;s a blog, forum, WooCommerce site, and so on. It has a decent level of complexity because individual sites require various HTML elements along with their adjustments.<\/p>\n\n\n\n<p>These include our daily used elements:<\/p>\n\n\n\n<ol class=\"wp-block-list\" style=\"list-style-type:1\">\n<li><strong>Search bar<\/strong><\/li>\n\n\n\n<li><strong>Navigation bar<\/strong><\/li>\n\n\n\n<li><strong>Widgets<\/strong><\/li>\n\n\n\n<li><strong>Icons<\/strong><\/li>\n\n\n\n<li><strong>Typography<\/strong><\/li>\n\n\n\n<li><strong>Comment box<\/strong><\/li>\n\n\n\n<li><strong>Social media section<\/strong><\/li>\n\n\n\n<li><strong>Author bio section<\/strong><\/li>\n\n\n\n<li><strong>Buttons<\/strong><\/li>\n\n\n\n<li><strong>Tables<\/strong><\/li>\n<\/ol>\n\n\n\n<p>and the list goes on\u2026<\/p>\n\n\n\n<p>For example, when a plugin is including the <span style=\"text-decoration: underline;\"><a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/main-stylesheet-style-css\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\">style.css<\/a><\/span> file, it would be something like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n    @import url(\"style.css\");\n    p {\n           color: blue;\n           font-size: 16px;\n        }\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<p>99% of the time, developers put all the CSS codes in this <strong>style.css <\/strong>file<strong>. <\/strong>It loads all the codes from the style.css file regardless of the certain elements you are using on a particular page, and all the CSS will be served to your visitor&#8217;s browser. And for this, you have no right to blame the developers either.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\"><span class=\"ez-toc-section\" id=\"What_if_We_Dont_Serve_These_Elements\"><\/span>What if We Don\u2019t Serve These Elements?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In your blog, you don&#8217;t need WooCommerce if you are not running an additional store; you don&#8217;t need a comment box or use a third-party commenting system (<span style=\"text-decoration: underline;\"><a aria-label=\" (opens in a new tab)\" class=\"rank-math-link\" href=\"https:\/\/disqus.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Disqus<\/a><\/span>, for example). So these elements can certainly be avoided while loading the page.<\/p>\n\n\n\n<p>Although they are not necessary for all pages on your site, some elements are needed on certain pages. A good example is the author box; it is a part of your blog posts; however, on pages such as the homepage and a privacy policy, an author box is worthless.<\/p>\n\n\n\n<p>Avoiding this CSS will only improve your page performance because they are unused CSS and simply are not doing anything good.<\/p>\n\n\n\n<p><strong>Note<\/strong>: It&#8217;s not just the elements of your theme. Plugins do inject additional CSS into your pages. This is another good reason for keeping the installed plugin count low on your site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\"><span class=\"ez-toc-section\" id=\"Why_Is_Removing_CSS_Not_an_Easy_Task\"><\/span>Why Is Removing CSS Not an Easy Task?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Filtering out the unnecessary CSS is not an easy job to deal with, mainly because of dynamic classes. It&#8217;s a technology to load the function of a class at runtime. It allows loading CSS functions that are uncertain or not known before a web page starts loading.<\/p>\n\n\n\n<p>The Javascript function of your site can load CSS classes as needed, and it does not have to keep track of the name of classes before any one of these classes is loaded and run. This behavior makes it challenging to identify which part of the CSS you will unload and whether it is safe, given missing CSS can break your page.<\/p>\n\n\n\n<p>Also, extraction of <strong>used CSS<\/strong> is not easy like critical CSS because there might be JS files that call a specific CSS class following a particular event of a button click. These CSS classes might be required for animation, such as the &#8220;<strong>go-to top&#8221;<\/strong> button on your page. Being dynamically inside Javascript, these CSS classes are extremely difficult to find for removal.<\/p>\n\n\n\n<p><strong><u>Note<\/u>: Critical path CSS<\/strong> is an important style\/CSS required to render above-the-fold contents. The rest of the required CSS is loaded in the page&#8217;s footer section to avoid render blocking.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Critical-Path-CSS.png\" alt=\"Critical path CSS is an important style\/CSS required to render above the fold contents.\" class=\"wp-image-605 lazyload\" title=\"\"><noscript><img decoding=\"async\" width=\"600\" height=\"243\" src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Critical-Path-CSS.png\" alt=\"Critical path CSS is an important style\/CSS required to render above the fold contents.\" class=\"wp-image-605 lazyload\" title=\"\" srcset=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Critical-Path-CSS.png 600w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Critical-Path-CSS-300x122.png 300w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Critical-Path-CSS-100x41.png 100w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/noscript><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading has-text-align-center\"><span class=\"ez-toc-section\" id=\"How_To_FindAnalyze_Unused_CSS_Files_This_Cover_JS_Files_As_Well\"><\/span>How To Find\/Analyze Unused CSS Files (This Cover JS Files As Well)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To remove unnecessary CSS files, we need to analyze those files first. The most comfortable way to do this is the coverage tab in the Chrome dev tool. To initiate it;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First, open the page you want to debug.<\/li>\n\n\n\n<li>Press <strong>Ctrl + Shift + I<\/strong> to open the Chrome dev tool.<\/li>\n\n\n\n<li>Click on the settings icon > select more tools > select coverage.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Find-unused-CSS-feat.png\" alt=\"Analyze files first to remove unnecessary CSS files.\" class=\"wp-image-610 lazyload\" title=\"\"><noscript><img decoding=\"async\" width=\"750\" height=\"402\" src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Find-unused-CSS-feat.png\" alt=\"Analyze files first to remove unnecessary CSS files.\" class=\"wp-image-610 lazyload\" title=\"\" srcset=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Find-unused-CSS-feat.png 750w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Find-unused-CSS-feat-300x161.png 300w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Find-unused-CSS-feat-100x54.png 100w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Find-unused-CSS-feat-700x375.png 700w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/noscript><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Then click on the reload button that appears below.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Analyze-webpage-feat.png\" alt=\"Click on the reload button and Chrome will analyze your webpage.\" class=\"wp-image-613 lazyload\" title=\"\"><noscript><img decoding=\"async\" width=\"750\" height=\"462\" src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Analyze-webpage-feat.png\" alt=\"Click on the reload button and Chrome will analyze your webpage.\" class=\"wp-image-613 lazyload\" title=\"\" srcset=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Analyze-webpage-feat.png 750w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Analyze-webpage-feat-300x185.png 300w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Analyze-webpage-feat-100x62.png 100w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Analyze-webpage-feat-700x431.png 700w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/noscript><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Chrome will analyze your webpage, and it will prepare a report where you can see the element&#8217;s URL, their types, total bytes, unused bytes, and Usage virtualization.<\/li>\n<\/ul>\n\n\n\n<p>You need to focus on the <strong>Usage virtualization <\/strong>tab, mainly the correlation between used and unused bytes of page elements. The red color represents the number of unused bytes, whereas the blue color means the number of used bytes.<\/p>\n\n\n\n<p>Then you can select the URL to dig a little more to find out what exactly is being used and what are unused codes. You can see the unused and used code section in the same red-blue color representation.<\/p>\n\n\n\n<p>See this example below;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Usage-Virtualization.png\" alt=\"Focus on the Usage virtualization tab in Chrome.\" class=\"wp-image-615 lazyload\" title=\"\"><noscript><img decoding=\"async\" width=\"750\" height=\"392\" src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Usage-Virtualization.png\" alt=\"Focus on the Usage virtualization tab in Chrome.\" class=\"wp-image-615 lazyload\" title=\"\" srcset=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Usage-Virtualization.png 750w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Usage-Virtualization-300x157.png 300w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Usage-Virtualization-100x52.png 100w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Usage-Virtualization-700x366.png 700w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/noscript><\/figure>\n<\/div>\n\n\n<p>(As we aim to look for unused CSS, make sure you have selected the URL of a CSS file. In this example, I did select a JS file only for tutorial purposes)<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\"><span class=\"ez-toc-section\" id=\"How_To_Remove_Unnecessary_CSS\"><\/span>How To Remove Unnecessary CSS?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>There are multiple approaches to avoid, reduce or remove unnecessary CSS on your webpage. I will try to keep the hierarchy in reverse order of difficulty.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\"><span class=\"ez-toc-section\" id=\"1_You_Can_Avoid_Inline_CSS_Styling_in_the_WP_Editor\"><\/span>1. You Can Avoid Inline CSS Styling in the WP Editor<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>While creating a post, we usually type in the <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.wpwebify.com\/wordpress\/wordpress-gutenberg-editor-guide\/\" target=\"_blank\" data-type=\"post\" data-id=\"3896\" rel=\"noreferrer noopener\">default Gutenberg editor<\/a><\/span>, which is good because it allows you to create a beautiful-looking well-organized page. But the block adds additional inline CSS to your page.<\/p>\n\n\n\n<p>Typically, if you keep your posts simple and do not use advanced Gutenberg styles, then you can avoid the inline CSS by using the code editor. You can use HTML elements such as &lt;p&gt; for paragraphs, &lt;H1&gt;, &lt;H2&gt;, etc for headings, &lt;li&gt; for list, and so on.<\/p>\n\n\n\n<p>For example;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Inline-CSS-Styling-Feat.png\" alt=\"Avoid the inline CSS by using the code editor.\" class=\"wp-image-629 lazyload\" title=\"\"><noscript><img decoding=\"async\" width=\"750\" height=\"211\" src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Inline-CSS-Styling-Feat.png\" alt=\"Avoid the inline CSS by using the code editor.\" class=\"wp-image-629 lazyload\" title=\"\" srcset=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Inline-CSS-Styling-Feat.png 750w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Inline-CSS-Styling-Feat-300x84.png 300w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Inline-CSS-Styling-Feat-100x28.png 100w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Inline-CSS-Styling-Feat-700x197.png 700w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/noscript><\/figure>\n<\/div>\n\n\n<p>You will be able to use the <span style=\"text-decoration: underline;\"><a href=\"https:\/\/wordpress.org\/plugins\/classic-editor\/\" class=\"rank-math-link\" target=\"_blank\" rel=\"noopener\">classic editor<\/a><\/span> too once you paste the final copy of HTML into your WordPress code editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\"><span class=\"ez-toc-section\" id=\"2_Generate_Critical_CSS\"><\/span>2. Generate Critical CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Critical CSS can help improve <span style=\"text-decoration: underline;\"><a aria-label=\" (opens in a new tab)\" class=\"rank-math-link\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/First_contentful_paint\" target=\"_blank\" rel=\"noreferrer noopener\">First Contentful Paint<\/a><\/span> (FTP), where it only renders above-the-fold contents in the header and delays the loading of other styles to last. Ultimately this improves your page speed and resolves the render-blocking warning in the page performance testing tool.<\/p>\n\n\n\n<p>More than removing the CSS from a page, delaying is the key mechanism here, which avoids CSS loading during page load.<\/p>\n\n\n\n<p>Various WordPress plugins can generate critical CSS, for example, Autoptimize, WProcket, etc. Alternatively, you can use <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/criticalcss.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"rank-math-link\"><span style=\"text-decoration: underline;\">Criticalcss.com<\/span><\/a> to generate critical CSS in a couple of simple steps.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\"><span class=\"ez-toc-section\" id=\"3_Use_a_CDN_To_Deliver_CSS_Files\"><\/span>3. Use a CDN To Deliver CSS Files<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>CDN can drastically improve the content delivery speed because of its widely distributed network, which reduces the distance between users and servers. Thus it can reduce server latency and download of CSS (not only just CSS, though). Even if you have a lot of unused CSS files on your page, CDN can deliver them in less than 50 ms.<\/p>\n\n\n\n<p>So the use of CDN won&#8217;t necessarily remove unnecessary CSS from your page; instead, it will quickly deliver the complete CSS along with other contents in so much less time. You can use good CDNs such as <span style=\"text-decoration: underline;\"><a aria-label=\" (opens in a new tab)\" href=\"https:\/\/www.stackpath.com\/products\/cdn\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"rank-math-link\">StackPath<\/a><\/span>, <span style=\"text-decoration: underline;\"><a aria-label=\" (opens in a new tab)\" href=\"https:\/\/sucuri.net\/website-performance\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"rank-math-link\">Sucuri<\/a><\/span>, <span style=\"text-decoration: underline;\"><a aria-label=\" (opens in a new tab)\" href=\"https:\/\/www.cloudflare.com\/cdn\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"rank-math-link\">Cloudflare<\/a><\/span>, etc.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\"><span class=\"ez-toc-section\" id=\"4_Use_Asset_CleanUp_Plugin_To_Remove_CSS_Files_Plugin\"><\/span>4. Use Asset CleanUp Plugin To Remove CSS Files (Plugin)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The <span style=\"text-decoration: underline;\"><a aria-label=\" (opens in a new tab)\" class=\"rank-math-link\" href=\"https:\/\/wordpress.org\/plugins\/wp-asset-clean-up\/\" target=\"_blank\" rel=\"noreferrer noopener\">Asset CleanUp<\/a><\/span> plugin makes it very easy for the users to unload CSS from your site. It has a free version available in the WordPress repository. All you need to install and activate it to find and unload CSS files in the CSS\/JS manager.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Asset-Cleanup.png\" alt=\"The Asset CleanUp plugin makes it easy to unload CSS from your site.\" class=\"wp-image-620 lazyload\" title=\"\"><noscript><img decoding=\"async\" width=\"750\" height=\"331\" src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Asset-Cleanup.png\" alt=\"The Asset CleanUp plugin makes it easy to unload CSS from your site.\" class=\"wp-image-620 lazyload\" title=\"\" srcset=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Asset-Cleanup.png 750w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Asset-Cleanup-300x132.png 300w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Asset-Cleanup-100x44.png 100w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Asset-Cleanup-700x309.png 700w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/noscript><\/figure>\n<\/div>\n\n\n<p>I recommend using this plugin because you will find tips for each CSS file to choose whether you would want to unload or keep it. Also, debugging your site becomes easy because it provides a simple enable\/disable option. You will know which action is breaking the site and which one is improving the performance.<\/p>\n\n\n\n<p>You can also open any published page, and you will see a list of loaded CSS and JS files. These files are classified, so it&#8217;s easy to go through them. Then you can see which are stylesheets not getting used on your page and then unload them sitewide or for individual pages.<\/p>\n\n\n\n<p>Remember, sometimes CSS that seems unused on a particular page may still have work to do, so removing them can break the page. The good news is you can immediately revert the change if unloading of any CSS breaks a page.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Asset-Cleanup-features.png\" alt=\"Removing CSS can sometimes break the page.  \" class=\"wp-image-622 lazyload\" title=\"\"><noscript><img decoding=\"async\" width=\"750\" height=\"269\" src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Asset-Cleanup-features.png\" alt=\"Removing CSS can sometimes break the page.  \" class=\"wp-image-622 lazyload\" title=\"\" srcset=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Asset-Cleanup-features.png 750w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Asset-Cleanup-features-300x108.png 300w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Asset-Cleanup-features-100x36.png 100w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Asset-Cleanup-features-700x251.png 700w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/noscript><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading has-text-align-center\"><span class=\"ez-toc-section\" id=\"5_Use_Perfmatters_Plugin_To_Remove_CSS_Plugin\"><\/span>5. Use Perfmatters Plugin To Remove CSS (Plugin)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><span style=\"text-decoration: underline;\"><a aria-label=\" (opens in a new tab)\" href=\"https:\/\/perfmatters.io\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"rank-math-link\">Perfmatters<\/a><\/span> is a premium plugin, which is another excellent option when it comes to unloading JS and CSS files from a page. It comes with a <strong>script manager<\/strong> that is super simple to use. You will have the ability to unload an entire plugin or individual js\/CSS files from a page.<\/p>\n\n\n\n<p>There is nothing to configure on your part. All you need to install the plugin, and activate it, and you can see the script manager on the WordPress toolbar for each page of your site.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Perfmatters.png\" alt=\"Perfmatters is an excellent option to unloading JS and CSS files from a page. \" class=\"wp-image-625 lazyload\" title=\"\"><noscript><img decoding=\"async\" width=\"750\" height=\"254\" src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Perfmatters.png\" alt=\"Perfmatters is an excellent option to unloading JS and CSS files from a page. \" class=\"wp-image-625 lazyload\" title=\"\" srcset=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Perfmatters.png 750w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Perfmatters-300x102.png 300w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Perfmatters-100x34.png 100w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Perfmatters-700x237.png 700w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/noscript><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading has-text-align-center\"><span class=\"ez-toc-section\" id=\"6_Create_a_Plugin_Manually_To_Remove_CSS_and_JS_Files\"><\/span>6. Create a Plugin Manually To Remove CSS (and JS) Files<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>It is a manual approach to remove unused CSS files, and you can create a plugin that will keep the record of removed CSS. In WordPress, when you want to remove unnecessary CSS\/JS. There are four main functions you will require.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>wp_deregister_script($handle): Remove the registered scripts.<\/li>\n\n\n\n<li>wp_dequeue_script($handle): Remove the scripts enqueued before.<\/li>\n\n\n\n<li>wp_deregister_style($handle): Remove the registered stylesheet.<\/li>\n\n\n\n<li>wp_dequeue_style($handle): Remove the stylesheet that you enqueued before.<\/li>\n<\/ul>\n\n\n\n<p>And other required functions to create the plugin are,<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>__return_false()<\/li>\n\n\n\n<li>__return_empty_array()<\/li>\n<\/ul>\n\n\n\n<p>You may also need <span style=\"text-decoration: underline;\"><a href=\"https:\/\/codex.wordpress.org\/Conditional_Tags\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\">conditional WordPress tags<\/a><\/span> to remove unused CSS\/JS files on a certain page. Now to create the plugin go to <strong>wp-content &gt; plugins<\/strong>, create a new folder named \u201cremove-resources\u201d followed by <strong>.php<\/strong> extension.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/remove-resources.png\" alt=\"Create a new folder named remove-resources.\" class=\"wp-image-626 lazyload\" title=\"\"><noscript><img decoding=\"async\" width=\"700\" height=\"90\" src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/remove-resources.png\" alt=\"Create a new folder named remove-resources.\" class=\"wp-image-626 lazyload\" title=\"\" srcset=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/remove-resources.png 700w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/remove-resources-300x39.png 300w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/remove-resources-100x13.png 100w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/noscript><\/figure>\n<\/div>\n\n\n<p>Add the following content in the file:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Remove-Resources2.png\" alt=\" Add the following content in the file remove-resources.\" class=\"wp-image-627 lazyload\" title=\"\"><noscript><img decoding=\"async\" width=\"750\" height=\"156\" src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Remove-Resources2.png\" alt=\" Add the following content in the file remove-resources.\" class=\"wp-image-627 lazyload\" title=\"\" srcset=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Remove-Resources2.png 750w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Remove-Resources2-300x62.png 300w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Remove-Resources2-100x21.png 100w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Remove-Resources2-700x146.png 700w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/noscript><\/figure>\n<\/div>\n\n\n<p>For example, if you want to remove styles and scripts of the <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.wpwebify.com\/go\/jetpack\" data-type=\"link\" data-id=\"https:\/\/www.wpwebify.com\/go\/jetpack\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Jetpack plugin<\/a><\/span>, you need to add the following code to the remove-resources.php file.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Remove-styles-scripts-jetpack.png\" alt=\"Remove styles and scripts of the Jetpack plugin.\" class=\"wp-image-628 lazyload\" title=\"\"><noscript><img decoding=\"async\" width=\"750\" height=\"164\" src=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Remove-styles-scripts-jetpack.png\" alt=\"Remove styles and scripts of the Jetpack plugin.\" class=\"wp-image-628 lazyload\" title=\"\" srcset=\"https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Remove-styles-scripts-jetpack.png 750w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Remove-styles-scripts-jetpack-300x66.png 300w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Remove-styles-scripts-jetpack-100x22.png 100w, https:\/\/www.wpwebify.com\/wp-content\/uploads\/2021\/03\/Remove-styles-scripts-jetpack-700x153.png 700w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/noscript><\/figure>\n<\/div>\n\n\n<p>Finally, go to the WordPress plugin manager and activate the<strong> Remove Resources<\/strong> plugin. It will remove the CSS you have mentioned in your newly created plugin.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\"><span class=\"ez-toc-section\" id=\"Final_Words\"><\/span>Final Words<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>It&#8217;s not easy to remove unnecessary CSS from your site, and it&#8217;s almost impossible for us as a user of <a aria-label=\" (opens in a new tab)\" class=\"rank-math-link\" href=\"https:\/\/www.wpwebify.com\/wordpress\/wordpress-future-development-platform\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"text-decoration: underline;\">WordPress<\/span><\/a>! But with the mentioned steps, you will be able to reduce or remove unnecessary CSS from a page and improve page speed + user experience.<\/p>\n\n\n\n<p>After reading the article, share your thoughts with us in the comment section, and don&#8217;t forget to share it.<\/p>\n\n\n\n<p><em>Disclosure: We sometimes use affiliate links in our content. Some of the links in this post are \u201caffiliate links.\u201d It means if you click on the link and purchase the item, we will receive an affiliate commission. It helps our website keep on running and allows us to offset our writing team&#8217;s cost. Thanks for your support.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you want to optimize the speed of your WordPress website, you need to remove unnecessary CSS. It delivers a faster page loading experience to&#8230;<\/p>\n","protected":false},"author":4,"featured_media":601,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[3],"tags":[20,12],"class_list":["post-596","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-css","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.wpwebify.com\/wp-json\/wp\/v2\/posts\/596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wpwebify.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wpwebify.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wpwebify.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wpwebify.com\/wp-json\/wp\/v2\/comments?post=596"}],"version-history":[{"count":0,"href":"https:\/\/www.wpwebify.com\/wp-json\/wp\/v2\/posts\/596\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wpwebify.com\/wp-json\/wp\/v2\/media\/601"}],"wp:attachment":[{"href":"https:\/\/www.wpwebify.com\/wp-json\/wp\/v2\/media?parent=596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wpwebify.com\/wp-json\/wp\/v2\/categories?post=596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wpwebify.com\/wp-json\/wp\/v2\/tags?post=596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}