{"id":29455,"date":"2021-09-09T15:00:24","date_gmt":"2021-09-09T13:00:24","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=29455"},"modified":"2021-09-08T09:25:26","modified_gmt":"2021-09-08T07:25:26","slug":"how-to-safely-remove-unused-css-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-safely-remove-unused-css-in-wordpress\/","title":{"rendered":"How to Safely Remove Unused CSS in WordPress &#8211; And Why"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]The guiding principle of WordPress is that the internet is for everyone, and that anyone can make a website, even without coding knowledge. And it\u2019s true \u2013<strong> you need precisely zero coding knowledge<\/strong> to create a website, but that means relying on somebody else\u2019s coding.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The pitfalls are obvious: it may so happen that your website comes to contain code, often in CSS, that it doesn\u2019t really need to run. This tutorial is all about <strong>how to remove unused CSS from your WordPress website<\/strong>. But what is CSS? How come your website has code it doesn\u2019t need? If the code does nothing, why not just leave it? We will attempt to answer these questions, and more. Here\u2019s what we\u2019ll be talking about:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-css\">What Is CSS?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#where-does-unused-css-come-from-and-why-remove-it\">Where Does Unused CSS Come From and Why Remove It?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#determine-whether-website-has-unused-css\">How to Determine Whether My Website Has Unused CSS<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#safely-remove-unused-css\">How To Safely Remove Unused CSS<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-css\"><\/a>What Is CSS?<\/h2>\n<p>[\/vc_column_text][vc_column_text]CSS stands for cascading style sheets. It is <strong>a set of instructions for a browser which dictate how a web page looks to users<\/strong>. A web page is structured using a markup language, such as HTML, but HTML is not legible to the user. A web browser reads HTML and presents contents to a user in human-readable form.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But a browser\u2019s default interpretation of a marked-up text would make for a lot of indistinguishable pages, and that\u2019s where CSS comes in. CSS has many uses: <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-change-font-size-in-wordpress\/\">changing font size<\/a>, colours, and type, <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-line-break-o-single-line-spacing-in-wordpress\/\">line breaks and paragraph spacing<\/a>, <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-background-image-wordpress\/\">adding and manipulating background images<\/a>, and much more.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"where-does-unused-css-come-from-and-why-remove-it\"><\/a>Where Does Unused CSS Come From and Why Remove It?<\/h2>\n<p>[\/vc_column_text][vc_column_text]There are many ways how unnecessary code could find its way to your website. When it comes to CSS, it will likely be down to<strong> something you have installed<\/strong> on your WordPress website which affects the way it\u2019s presented to the user. For instance,<strong> a theme has its own CSS<\/strong>, making your website different from all others not using the same theme. A plugin such as <strong>a page builder might have its own CSS<\/strong>, and so have fonts, icon fonts, and many other pieces of software you may install.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But what\u2019s the harm, we hear you asking. Well, the end result is that your website is loading a lot of files it doesn\u2019t need to function, meaning that your loading time is unnecessarily extended. <strong>Slow loading times<\/strong> do not affect just your visitors\u2019 user experience \u2013 search engines take bounce rates (how quickly a user \u201cgives up\u201d on your website) and loading time into account.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And while CSS files tend to be small, there can be very many of them on any given website. This is why there is no such thing as harmless useless code.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"determine-whether-website-has-unused-css\"><\/a>How to Determine Whether My Website Has Unused CSS<\/h2>\n<p>[\/vc_column_text][vc_column_text]Determining whether a website suffers from unused CSS issues is relatively easy: Google has a tool specifically for it. You can use <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener\">Google PageSpeed Insights<\/a> to determine whether your website suffers from any unnecessary slow-ups and see how many of them can be ascribed to unused CSS.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Google-PageSpeed-Insights.jpg\" class=\"attachment-full size-full\" alt=\"Google PageSpeed Insights\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Google-PageSpeed-Insights.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Google-PageSpeed-Insights-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Google-PageSpeed-Insights-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Google-PageSpeed-Insights-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve run the test on a website which, clearly, has many issues. You can expand the results for deleting unused CSS to see Google\u2019s suggestions.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"649\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Googles-suggestions.jpg\" class=\"attachment-full size-full\" alt=\"Google\u2019s suggestions\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Googles-suggestions.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Googles-suggestions-300x201.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Googles-suggestions-768x514.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Googles-suggestions-620x415.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Clearly, this only works for Google\u2019s criteria. However, while all search engines have different algorithms, they tend to work in similar ways. Besides, slow loading times are slow loading times no matter how you cut it, and nobody wants that.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"safely-remove-unused-css\"><\/a>How To Safely Remove Unused CSS<\/h2>\n<p>[\/vc_column_text][vc_column_text]The challenge here is knowing which CSS is useless. The answer? You don\u2019t need to know that yourself. You can, and should, rely yet again on somebody else\u2019s code. In this case, it is a plugin: <a href=\"https:\/\/wordpress.org\/plugins\/wp-asset-clean-up\/\" target=\"_blank\" rel=\"noopener\">Asset CleanUp<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First, install and activate the plugin. You will immediately be taken to the plugin\u2019s <strong>Getting Started<\/strong> screen. To get started removing unused CSS, select <strong>Settings<\/strong> from the right-hand side menu.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Settings.jpg\" class=\"attachment-full size-full\" alt=\"Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Settings-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In order to test different settings without affecting website visitors, you need to enable the plugin\u2019s test mode. To do that, select the <strong>Test Mode<\/strong> tab and slide the slider and click <strong>Update All Settings<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"589\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Test-Mode.jpg\" class=\"attachment-full size-full\" alt=\"Test Mode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Test-Mode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Test-Mode-300x182.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Test-Mode-768x467.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Test-Mode-620x377.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, this plugin has a lot of options and settings. We will be concentrating on removing unused CSS. To do that, we need the <strong>CSS &amp; JS Manager<\/strong> settings. It will open on the <strong>Homepage<\/strong> sub-tab. This is where you can see which files are loaded on your website\u2019s homepage.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"516\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/CSS-JS-Manager.jpg\" class=\"attachment-full size-full\" alt=\"CSS &amp; JS Manager\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/CSS-JS-Manager.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/CSS-JS-Manager-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/CSS-JS-Manager-768x409.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/CSS-JS-Manager-620x330.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Scrolling down the list, you can see each of these files, along with a lot of relevant data, such as its source, position, file size, and the rest. You might also get a <em><strong>Tip<\/strong><\/em>, a useful hint on whether a piece of code is needed on the page or not.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the case of <strong>Contact Form 7<\/strong>, for instance, you can see that the file is related to a form. The recommendation is that the file be unloaded on the <strong>Homepage<\/strong> if there are no forms on it. The same also goes for all the other pages not using a form.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To unload <strong>Contact Form 7<\/strong>\u2019s CSS from the <strong>Homepage<\/strong>, activate the slider and click <strong>Update<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"715\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Unload-Contact-Form-7.jpg\" class=\"attachment-full size-full\" alt=\"Unload Contact Form 7\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Unload-Contact-Form-7.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Unload-Contact-Form-7-300x221.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Unload-Contact-Form-7-768x567.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Unload-Contact-Form-7-620x457.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And it\u2019s as simple as that: you have now made your website a little quicker to load by removing unused CSS.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The trouble is, you need to do all this for all the posts and pages, too. To load a list of CSS for a post, for instance, switch to the <strong>Post<\/strong> tab, and search for it in the search field and select a post from the list.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"564\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Post-Search.jpg\" class=\"attachment-full size-full\" alt=\"Post Search\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Post-Search.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Post-Search-300x175.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Post-Search-768x447.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Post-Search-620x361.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you are satisfied with the CSS you have unloaded, test if everything loads properly, and you\u2019re done. You can <strong>then switch the test mode off<\/strong>, to make the settings apply to all users, and not just the logged-in admins.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As you can see, there are good reasons for you to make sure whether your website suffers from unused CSS. It takes some work to remove all unused CSS from your website, especially if it contains a lot of pages, but the results are well worth it \u2013 your visitors will appreciate faster loading times, while search engines will not penalize you for slowness and bounce rate, leading to more potential visitors.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Your WordPress may be loading unused CSS: check out our guide on how to remove unused CSS for a better user experience.<\/p>\n","protected":false},"author":16990,"featured_media":29509,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[4,13],"class_list":["post-29455","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/29455","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=29455"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/29455\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/29509"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=29455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=29455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=29455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}