{"id":33250,"date":"2022-01-05T15:00:17","date_gmt":"2022-01-05T14:00:17","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=33250"},"modified":"2022-01-31T13:14:23","modified_gmt":"2022-01-31T12:14:23","slug":"how-to-optimize-css-delivery-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-optimize-css-delivery-in-wordpress\/","title":{"rendered":"How to Easily Optimize CSS Delivery in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]There are many different ways in which you can customize the look and feel of your WordPress site. Aside from using the customization options that come with your <a href=\"https:\/\/qodeinteractive.com\/themes-list\/\">WordPress theme<\/a>, sometimes you may want to <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-add-custom-css\/\">add some custom CSS<\/a> to be able to adjust your site\u2019s visual appearance completely according to your preferences. And while this custom CSS can be quite useful, if your CSS code isn\u2019t delivered properly, then it can do more harm than good to your site\u2019s overall performance.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This time around, we\u2019ve decided to show you how to optimize your CSS delivery to help prevent your WordPress website from slowing down due to any potential CSS loading issues. <strong>We will show you how to do this using two different plugins<\/strong>, and also talk about <strong>some of the possible reasons behind CSS delivery slowing down your website<\/strong> in the first place.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will cover:<br \/>\n[\/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=\"#how-can-wordpress-css-delivery-slow-down-your-websites-performance\">How Can WordPress CSS Delivery Slow Down Your Website\u2019s Performance?<\/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=\"#optimizing-the-css-delivery-of-your-wordpress-site-using-the-autoptimize-plugin\">Optimizing the CSS Delivery of Your WordPress Site Using the Autoptimize Plugin<\/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=\"#optimizing-the-css-delivery-of-your-wordpress-site-using-the-speed-up-plugin\">Optimizing the CSS Delivery of Your WordPress Site Using the Speed Up Plugin<\/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=\"how-can-wordpress-css-delivery-slow-down-your-websites-performance\"><\/a>How Can WordPress CSS Delivery Slow Down Your Website\u2019s Performance?<\/h2>\n<p>[\/vc_column_text][vc_column_text]While CSS files are quite useful when it comes to customizing the visual appearance of a WordPress site, these files can still have a negative impact on its speed and performance. Slow speed can lead to a bad user experience, which can further lead to lower page rankings, reduced traffic, and ultimately, less possibility for your business to succeed.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now, one way in which CSS files slow down a website is <strong>when they get loaded before a page itself gets displayed<\/strong>, resulting in your visitors seeing a blank page. Another possible cause of this occurrence is <strong>your CSS files being larger than necessary, which naturally means they will load longer.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Fortunately, there are a few ways in which you can prevent these CSS files from slowing down your site. The first method requires you to install a plugin that will <strong>use only the most necessary pieces of CSS, or the so-called critical CSS,<\/strong> to load and display the first part of the page to users. The rest of the CSS will load only after your visitors are able to view your page\u2019s contents. The critical part of the code will be added inline to the page\u2019s HTML instead of being added in a separate stylesheet. This will allow the critical CSS to load on its own (without loading the entire CSS file first).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Another way is to <strong>segregate \u201cvital\u201d and \u201cnon-vital\u201d CSS files by having vital files load right away and non-vital CSS files load only after your page is displayed<\/strong>, which has the potential to boost your page loading speed immensely.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will show you how to use both of these methods with the help of two different plugins, so make sure to read on.<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=\"optimizing-the-css-delivery-of-your-wordpress-site-using-the-autoptimize-plugin\"><\/a>Optimizing the CSS Delivery of Your WordPress Site Using the Autoptimize Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you\u2019re not familiar with coding, we recommend using the <a href=\"https:\/\/wordpress.org\/plugins\/autoptimize\/\" target=\"_blank\" rel=\"noopener\">Autoptimize<\/a> plugin. This plugin will allow you to optimize and improve the delivery of your CSS files in no time.[\/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\/2022\/01\/Autopitmize.jpg\" class=\"attachment-full size-full\" alt=\"Autopitmize\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Autopitmize.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Autopitmize-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Autopitmize-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Autopitmize-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, even though the plugin itself is free to install and use, you will still have to connect the plugin to a premium third-party service (called <a href=\"https:\/\/criticalcss.com\/\" target=\"_blank\" rel=\"noopener\">criticalcss<\/a>) to get the most optimal results. This service will allow the plugin to automatically identify critical CSS, but you will have to spend some money to use it. Still, the end result will be well worth it, and the tool itself does not cost much \u2013 it is available for only $3 per month.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After you <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">install the plugin<\/a> and activate it, <strong>head to<\/strong><em><strong> Settings &gt;&gt; Autoptimize<\/strong><\/em> in your WordPress admin dashboard.[\/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\/2022\/01\/Settings-Autoptimize.jpg\" class=\"attachment-full size-full\" alt=\"Settings Autoptimize\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Settings-Autoptimize.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Settings-Autoptimize-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Settings-Autoptimize-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Settings-Autoptimize-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then,<strong> find the <em>CSS Options<\/em> section<\/strong> (in the <em>JS, CSS &amp; HTML<\/em> tab) and make sure to <strong>mark the box called <em>Optimize CSS Code.<\/em><\/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=\"657\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/CSS-Options.jpg\" class=\"attachment-full size-full\" alt=\"CSS Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/CSS-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/CSS-Options-300x203.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/CSS-Options-768x521.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/CSS-Options-620x420.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, you should unmark the \u201cAggregate CSS files\u201d option and mark the option called \u201cEliminate render-blocking CSS\u201d instead.<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=\"469\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Aggregate-CSS-Files.jpg\" class=\"attachment-full size-full\" alt=\"Aggregate CSS Files\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Aggregate-CSS-Files.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Aggregate-CSS-Files-300x145.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Aggregate-CSS-Files-768x372.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Aggregate-CSS-Files-620x300.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you do this, you should <strong>hit the \u201cSave Changes and Empty Cache\u201d button<\/strong> located at the very bottom of the page.[\/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\/2022\/01\/Save-Changes-and-Empty-Cache.jpg\" class=\"attachment-full size-full\" alt=\"Save Changes and Empty Cache\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Save-Changes-and-Empty-Cache.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Save-Changes-and-Empty-Cache-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Save-Changes-and-Empty-Cache-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Save-Changes-and-Empty-Cache-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, as we mentioned in the beginning, you will need to sign up for a third-party premium service called Critical CSS if you want the plugin to work properly. This service will provide the Autoptimize plugin with the best parameters for the optimization of your CSS delivery.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Simply go to the <em>Critical CSS<\/em> tab (which you will be able to find in your plugin\u2019s settings screen). To start, hit the sign up link:[\/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\/2022\/01\/Critical-CSS.jpg\" class=\"attachment-full size-full\" alt=\"Critical CSS\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Critical-CSS.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Critical-CSS-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Critical-CSS-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Critical-CSS-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After you sign up for their premium service, you will be able to get access to the Critical CSS API key. Head down to the API key section and paste the key into the \u201cYour API key\u201d field. Then, hit the <em>Save Changes<\/em> button.[\/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\/2022\/01\/Enter-API-Key.jpg\" class=\"attachment-full size-full\" alt=\"Enter API Key\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Enter-API-Key.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Enter-API-Key-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Enter-API-Key-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Enter-API-Key-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And that\u2019s it. This will link the CriticalCSS service with your Autoptimize plugin and ultimately optimize your CSS code delivery, allowing your WordPress site to load more quickly.[\/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=\"optimizing-the-css-delivery-of-your-wordpress-site-using-the-speed-up-plugin\"><\/a>Optimizing the CSS Delivery of Your WordPress Site Using the Speed Up Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]Another option you can use is the plugin called <a href=\"https:\/\/wordpress.org\/plugins\/speed-up-optimize-css-delivery\/\" target=\"_blank\" rel=\"noopener\">SpeedUp \u2013 Optimize CSS Delivery<\/a>. While the plugin is completely free to use and requires no additional premium services to work properly, you will still have to add a code snippet into your theme\u2019s functions.php file yourself (after you install and activate the plugin, of course). In other words, you need to be familiar with coding in order to use it.[\/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\/2022\/01\/Speed-Up.jpg\" class=\"attachment-full size-full\" alt=\"Speed Up\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Speed-Up.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Speed-Up-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Speed-Up-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Speed-Up-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The plugin helps optimize the CSS delivery of your WordPress site by differentiating between so-called \u201cvital\u201d and \u201cnon-vital CSS files\u201d. In this context, vital CSS files would be those files that are used regularly, or across various pages of your site. On the other hand, non-vital CSS files are usually those CSS files used less frequently, like the ones used on a single page or post, for example.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So essentially, the plugin will allow you to load those non-vital CSS files asynchronously, i.e. they will be loaded after your page is displayed, thus helping optimize your WordPress CSS delivery. As for the vital CSS files, they will still be loaded synchronously, with no change in how WordPress loads them before or after installing the plugin.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can <strong>choose the files you want to load synchronously by inserting a filter into your theme\u2019s function.php file.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here&#8217;s an example of the code snippet you can add to your file (it can be also found on the plugin\u2019s page):[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">\/\/ exclude main and child stylesheets from delivery optimization\r\nfunction exclude_from_delivery_optimization($handle){\r\nreturn in_array($handle, array(\u2018main-stylesheet\u2019, \r\n\u2018child-stylesheet\u2019));\r\n}\r\nadd_filter(\u2018speed-up-optimize-css-delivery\u2019, \r\n\u2018exclude_from_delivery_optimization\u2019);<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This particular code snippet will allow you to exclude main and child stylesheets from delivery optimization, but you should modify it according to your needs.[\/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\">Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]And there you have it \u2013 two different ways in which you can successfully optimize the CSS delivery in WordPress. Although the Autoptimize plugin requires some minimum payment on your part, it handles the slow CSS delivery problem quite successfully, which makes the additional cost worth it. And if you want to go the free route, the SpeedUp plugin will get the job done \u2013 but keep in mind that you need to be comfortable with adding code to your WordPress files in order to use it. Just make sure to choose the plugin that works best for you, and you\u2019ll have your WordPress site running at top speed in no time.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Want to learn how to optimize CSS delivery in WordPress and prevent your website from slowing down? Here are two different plugins you can use to do just that.<\/p>\n","protected":false},"author":2,"featured_media":33267,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[20,4,13],"class_list":["post-33250","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-css","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/33250","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=33250"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/33250\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/33267"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=33250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=33250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=33250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}