{"id":17754,"date":"2020-12-16T17:00:34","date_gmt":"2020-12-16T16:00:34","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=17754"},"modified":"2020-12-16T10:46:12","modified_gmt":"2020-12-16T09:46:12","slug":"combine-external-css","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/combine-external-css\/","title":{"rendered":"How to Combine External CSS in WordPress"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]A slow-loading website is quite harmful to your business and brand in general as it can put off visitors. Luckily, there are a lot of things that you could do to improve the load speed of your website. To start with, website owners should test their websites in GTmetrix<\/a>, Pingdom<\/a>, or Google PageSpeed Insights<\/a> and use the results they get as suggestions for improvement. Also, we covered some website-slowing issues such as removing render-blocking resources<\/a> and minifying Javascript and CSS files<\/a> already. Now, we\u2019re going to look at how to combine external CSS in WordPress and explain the reasons why you would need to do so.[\/vc_column_text][vc_empty_space height=”80px”][vc_widget_sidebar sidebar_id=”new-top-picks-banner”][vc_empty_space height=”81px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Why you need to combine external CSS in WordPress<\/h2>\n

[\/vc_column_text][vc_column_text]Before a website finishes rendering, there are a lot of assets that need to be loaded, including images, CSS and JS files, and videos. While having a CDN (content delivery network) for loading those assets can help speed up your website in general, it can have the opposite effect with CSS files. Having a lot of CSS files that are hosted on CDN can increase their load time significantly, as they need to be loaded separately. To overcome this load time issue, you need to combine all your external CSS files into one to reduce the number of HTTP requests.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Please note, these issues occur for users whose hosting only supports the HTTP\/1.1 protocol. Those that use the HTTP\/2 protocol don\u2019t experience the same problem, as HTTP\/2 allows for the loading of multiple CSS files in parallel. With that being said, let us explain how external CSS can be combined.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to combine external CSS in WordPress<\/h2>\n

[\/vc_column_text][vc_column_text]The easiest way of combining external CSS in WordPress is to use a WordPress plugin. The most helpful ones are caching plugins and\/or plugins for improving website performance. One example that falls into both categories and which can combine, i.e. aggregate, CSS files is the Autoptimize plugin.[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Autoptimize<\/h3>\n

[\/vc_column_text][vc_column_text]Autoptimize<\/a> is a great plugin for optimizing your website in general. It is extremely useful for aggregating and minifying JS and CSS files, deferring CSS or asyncing non-aggregated JS, optimizing images and Google fonts, and a lot more. As aggregating is simply a different term for combining, this plugin is a perfect solution for combining external CSS.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To combine external CSS using Autoptimize, you would need to install and activate the plugin<\/a> first. Then, navigate to Settings > Autoptimize<\/strong> and scroll down to the CSS Options<\/em><\/strong> subsection. Simply tick the checkbox next to the Optimize CSS Code?<\/em> option<\/strong>. By doing that, a whole subset of options will become available to you. Of those options, the first two\u2014Aggregate CSS-files and Also aggregate inline CSS\u2014will be checked.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Autoptimize <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Keep these options checked, and proceed to save changes. Scroll down below the Misc Options<\/em><\/strong> and press the Save Changes and Empty Cache<\/em> button<\/strong>. And the plugin will do the rest. When it finishes, your CSS files will be combined and your load time on HTTP\/1.1 improved.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Autoptimize <\/div>\n<\/div>[vc_empty_space height=”78px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Final Thoughts<\/h2>\n

[\/vc_column_text][vc_column_text]Having a great number of CSS files hosted on CDN can negatively impact a website\u2019s load time. Fortunately, solving this problem is very easy\u2014you just need to combine your external CSS. And, if you follow our recommendation and install the Autoptimize plugin the solution will be a moment\u2019s work. Make sure to adjust the options we mentioned and proceed to enjoy your new, faster, load times.
\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

When working on improving your site loading speed, one of the solutions is to combine external CSS. Take a look at our how-to guide for help!<\/p>\n","protected":false},"author":11229,"featured_media":17815,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[20,4,13],"class_list":["post-17754","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\/17754","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\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=17754"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/17754\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/17815"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=17754"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=17754"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=17754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}