combine external css in wordpress

How to Combine External CSS in WordPress

combine external css in wordpress

Cascading Style Sheets – CSS for short is a style sheet language that describes how content in your website display. Every WordPress theme has default CSS settings. They make your site appear just the way it does. But it’s possible to customize your website by adding custom CSS to make it look better. Moreover, you can edit and maintain the default CSS as you wish. Here, we will show you easy ways to combine external CSS in WordPress.

Perhaps you’ve noticed an increase in page load time of your site. This may be because CSS and JS or other files load at the same time, with each one taking nothing less than two seconds. They are also known to block other resources until they are fully downloaded. 

 

CSS exists in three forms: 

  1. Inline CSS: Codes are embedded in an HTML tag.
  2. Internal CSS: Codes are specified in the head section of the HTML page, but performs an action in the entire HTML body.
  3. External CSS: Codes are saved as .css file and are linked in HTML pages. 

 

Having a lot of external CSS files can contribute to an increase in load time of a website. However, you can make multiple stylesheets load in a WordPress page or site by using the enqueue style function.

 

In this article:

Why do you need to Combine CSS Files?

Several processes happen in the browser before a website is fully rendered. Apart from converting PHP scripts to HTML, assets such as CSS, external JavaScript, images and videos have to be loaded to the browser.

If you are using a CDN to speed up your site, they could in rare cases also slow it down somewhat. 

Websites that have lots of CDN-hosted CSS may take longer to load as these different files must be loaded before the page renders properly. Combining the files into one will help reduce load time as there are fewer things to load.  

You can use the CSS delivery tool to view all the CSS there is on your webpages. This tool also shows the type or category of each CSS file.

 

Ways for Combining External CSS files in the WordPress site

 

1. Copying and pasting all CSS in a single file

This method of combining CSS might seem very simple, but it is very effective. Let’s assume you have about five CSS files on your WordPress site. You need to open up the first of them in your editor as you will be making changes to it. Next thing you need to do is copy out the content of the others and paste them in the first file respectively. This will give you a single CSS file.

 

Remove the call for all the other CSS files that you have merged to the single CSS file from your ‘header.php’.

 

2. Combining external CSS via plugins

WordPress speed optimization and caching plugins provide features like minification, merging that enable you to combine CSS(and other files) files easily. We’ll review Fast Velocity Minify and W3 Total Cache plugins. As well as their features and how to use them to combine external CSS.

 

Fast Velocity Minify

 

fast velocity minify CSS

 

Fast Velocity Minify is a WordPress speed optimization plugin. It merges and combines Cascading Style Sheets and Javascript files in groups and this reduces the number of HTTP requests.

 

From your WordPress Admin Dashboard, Install and Activate the plugin.

 

After activation completes, go to Settings > Fast Velocity Minify.

 

Go through the Basic settings and check your desired settings.

Fast Velocity Minify plugin settings

Next scroll to CSS Options section.

Ensure to uncheck “Disable CSS processing” . Select other details options as you decide (read tips about them on the right).

Disable CSS processing

Then click Save Changes.

Click on Save Changes Button

That’s it. Your CSS files will be combined.

 

W3 Total Cache

 

W3 Total Cache Plugin

 

W3 Total Cache is a WordPress plugin for caching static resources in order to optimize performance It improves site speed and user experience. This is achieved by caching compressed and minified sheets and scripts.

From your Admin Dashboard, Install and Activate the plugin.

After activation, and still on the dashboard, click on Performance > Minify.

 

Minify Option in Performance tab


Scroll to CSS minify settings and ensure enable is checked.

 

CSS minify settings


Next, Save Settings or Save Settings & Purge Caches
. You’re good to go!

 

Conclusion

Your website loads more quickly when you combine external CSS and other files. Knowing this, and considering that it’s so easy to combine your CSS files, there is no reason you shouldn’t.

There are many other aspects to speeding up your site and reducing load time. Please read our complete WordPress speed optimization guide to learn more.