Joomla Templates

Joomla Extensions

Joomla Reviews

Joomla Tutorials

Brendan - CSS Optimization

Let me mention right from the start, there are other ways to accomplish CSS optimization, this article talks about just a few of those, and what works for us, may not for you.

Let's begin with a question.

What is CSS?

CSS is an acronym for Cascading Style Sheets. Got it? No? I thought not! Okay, so CSS is the code that controls the styling of your website, your website will operate without it, but it will look terrible, your visitors will be running away quick smartish.

CSS is what makes this text red, this green and this blue. It makes this text big, and this text small.

It positions this to the left
and this to the right.

Sometimes when we view a website on a mobile device we have to use special CSS to adjust the styling for the small screen size, or it will not look right.

So, now we have an idea what CSS is let's talk about why optimizing it is important.

Many of our blog articles are written with SEO in mind, this article is no exception. CSS optimization is a critical part of improving your SEO, and there are different ways of achieving it.

Although we love Joomla, it does have it's flaws, just as any CMS does (WP included!). One of those flaws is it's CSS. It's not unusual to have 10, 20 or even 30 different CSS files that are needed to make your website run and operate as you want it to. The biggest problem with that is that when your website loads into the browser, the browser has to make many requests for those files from your server, and that equals time, this means that your website will take longer to appear in the browser of your visitor.

statistics image

Image courtesy of hobo-web

From a SEO perspective, if it takes too long to load your website, your visitor may give up and go to another site. Hobo SEO Services have a nice article explaining more about this here.

The main objective in optimizing CSS is to reduce the number of times the browser has to request files from your server and to make those files that are requested as small as possible. Thus making the delivery of the CSS as efficient as is possible.

In general this is achieved in 2 ways.

1. Minimizing the file size.
2. Minimizing the number of files needed.

Let's look at them one at a time.

1. Minimizing the file size. There are different ways to achieve this, but they all involve removing any wasted space and unnecessary text contained within the file. The wasted space is the 'white' space in the file, the spaces between characters and new lines.
You can do this via a Joomla plugin specifically designed for the task that dynamically removes the space as the file is requested and loaded, JCH Optimize is a good example. Or, you can use an online service to minify the CSS files on your server independently. CSSMINIFIER.COM is a good example of a free online minifier. If you chose this route you will have to find all of the CSS files for your site, download them, modify them and re-upload them. One drawback on doing this task manually is that your modified CSS files maybe overwritten during an update and revert back to an unminified state without your knowledge.

Have a look at the two examples below.

1. Normal CSS file structure.

body {
font-family: 'Montserrat', sans-serif;
}

p {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 23px;
}

* {
transition: all 500ms ease-out;
-webkit-transition: all 500ms ease-out;
}

html, body, section, .page {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
transition: all 1s cubic-bezier(.5, -0.005, 0.2, 1) !important;
-webkit-transition: all 1s cubic-bezier(.5, -0.005, 0.2, 1) !important;
color: #fff;
background-image: url(../img/home-bg.png);
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}


2. Minimized CSS File structure. This is the same code as above, but with all the unnecessary content removed.

body,p{font-family:Montserrat,sans-serif}p{font-size:14px;font-weight:300;line-height:23px}*{transition:all .5s ease-out;-webkit-transition:all .5s ease-out}.page,body,html,section{width:100%;height:100%;margin:0;padding:0;transition:all 1s cubic-bezier(.5,-.005,.2,1)!important;-webkit-transition:all 1s cubic-bezier(.5,-.005,.2,1)!important;color:#fff;background-image:url(../img/home-bg.png);background-repeat:no-repeat;background-size:cover;overflow:hidden}

As we can see in the two examples above the content is the same but in example 2, there is no wasted space, and that equals a smaller file size that is quicker to download and process.

Joomla templates sometimes have their own CSS optimization built in, you could activate this, but we think that it is better to use a 'catch all' plugin instead. The main reason for this is that the templates own CSS minifier often ignores CSS files from other sources, therefore only being partially successful at optimizing your CSS fully.


2. Minimizing the number of files needed. Again there are different ways of attacking this problem. But, by far the best option for Joomla is to use a plugin like JCH Optimize to take care of this. The main reason for this is that, unlike a regular HTML website that has fixed, hard coded pages, a CMS 'dynamically' inserts information into each page as it is served from your server to the browser. That means that each CSS file is added to the <head> section of your web page by different extensions that you are using on that page, and not every page will require all files to be loaded.

It is possible to combine several CSS files into just one larger file, but then you have to find the code that calls for the files and modify it in some way. It all gets a little complicated to keep on top of. And again, an update could overwrite all your changes or modifications. If you use a plugin to do this job for you it will combine all the CSS files needed on your website into just one efficient, correctly ordered file.

exclude css image

If you run into problems and your CSS stops working, most plugins give you an option to exclude that awkward CSS file from the combined one.

Again, many templates give you the option of combining CSS files in the admin area, but these often give problems on more complicated websites. We generally do not use the templates combine feature, but would rather use a plugin like JCH Optimize to do this job.

In summary:

It is getting more and more important to produce websites that are as efficient as possible to keep your visitors happy and on site. If your visitors are happy, so will Google be. And that means better ranking for your website in search results. You have to use every trick in the book to achieve this, working with your CSS files is an easy way of speeding up your website and minimizing the load on your server. Remember, remove unnecessary content from the files and minimize the number of files needed. In the world of SEO every little helps.

Read 289 times Last modified on Monday, 23 October 2017 21:04
Brendan

About:

Hi, I have been a Joomla fan and website developer since 2005. UJoomla is an attempt to give back to those who are in the same place I was in 2005. Green around the ears and eager to learn!

ujoomla.com
More in this category: « The importance of the Title Tag
Best Joomla Templates - Joomla-Monster.com

Latest Templates on UJoomla

Find the latest Joomla templates added to our database here.
Top
We use cookies to improve our website. By continuing to use this website, you are giving consent to cookies being used. More details…