How to clean up CSS unused Style Sheet Elements to make your web pages Load Faster

Clean your CSS to have faste page load speed

You have a website – well done for starters!

Google favours faster websites and one of the ways in which you can achieve this is by having your website developed in clean HTML by a professional who would have taken various steps to make your page fast, including cleaning up the CSS used by your website.  If we developed your site, you would not need to read this blog, as we’ve taken this step ALREADY before we asked you to pay for your website.

Clean your CSS to have faster page load speed
Clean your CSS to have faster page load speed

If not, you can still fix this yourself if you are the self-directed type who enjoys stretching yourself AND if you have some technical know-how and you feel like doing something fiddly…

Hint: this is a fantastic procrastination tool if you actually need to do your tax return!

LaughingEmoji

Let’s begin at the beginning.

Definition of CSS (Cascading Style Sheet) – CSS is a behind the scenes web development tool that contains a defined language which is used to describe the presentation of a web page written in markup language (like HTML). So the CSS is where you’d define elements like the background colour, font, text size for different headings and other rather more complex layout aspects.  The beauty is that these elements are defined ONCE instead of repeating it in each and every place within each and every web page.  Your browser then parses the CSS with your web page at the time of display and applies the style elements in a specific order (so don’t mess with the order unless you understand the impacts!)

If you have a website you do not believe to be cleanly crafted, there is a relatively easy way you can identify and remove elements defined in your CSS that are not used anywhere in your website. This will shorten your CSS (I have seen cases where over 95% of the CSS was not used anywhere!) making it smaller, hence resulting in faster page loads.

As always, back up your website before you attempt any changes!

Your handy How to Clean Up CSS check-list:

1 ~ Ensure you have a sitemap web page or sitemap.xml file

Your sitemap web page should be on your menu or in your footer somewhere.  To see if you have a sitemap.xml file, type in your domain name followed by /sitemap.xml and something like this should come up:

css-tutorial1

You should have both these if you made use of a professional developer, as sitemaps are used to help Google index your website, which is, uhm, rather important if you want your website to work for you.  Not to mention helping a lost web visitor who struggles to find what they are looking for.  If you cannot find a sitemap page on your website, contact us to help you set this up – not only is it professional and Google likes it; it is plain best practice.

2 ~ Check that all your web pages are in your Sitemap/sitemap.xml

To do this, either print out your sitemap.xml or your Sitemap web page.

Then go through your website and diligently crawl through your site, page by page, link by link – ticking each web page off on your site-map as you go.  Don’t forget Enquiry forms that are often not on the main menu.

Add in any missing web pages that are not on your Sitemap web page or Sitemap.xml – before you can continue!  Read on below anyway, as a similar editing process will be used to edit your sitemap to include missing links, as is described below for editing the CSS.  Or, this is a fine time to delegate and  ask us to help you fix it.

You can ignore 3rd party plug-ins and pages as you have no control over them anyway.

3 ~ Download this handy Firefox add-on

If you do not already have the free Firefox browser, we recommend you download Firefox anyway.  Firstly, you in ANY CASE need to check how your website displays in all browsers (e.g. Internet Explorer and Chrome too, as well as on various smart phones and pads).  HINT: Firefox is also quite fast so if, for example, you are battling to do work on a slow banking site that keeps timing out when you have something urgent to do over a poor connection, it may just help to give Firefox a try.

Next you download Firefox Dust-me Selectors extention and it will automatically install in Firefox.  You will need to restart Firefox. You will see the little red duster in the top right tool bar:

css-tutorial2

4 ~ You are now going to “spider” your sitemap  : )

Select the arrow next to the little red duster and select “Spider Sitemap“:

css-tutorial3

Next, enter the link to either your web page site map, or your sitemap.xml and click start.

css-tutorial4

5 ~ Save the results as a CSV file and print it out

css-tutorial5

To save as a CSV file, you will need to add .CSV at the end of the file name when you save it, as the tool does not seem to do it properly first time.

You will then open the CSV file, resize the columns to make them readable, delete any CSS files that may be included from 3rd parties, and print out the remaining list of unused elements for your website’s CSS file/s.

6 ~ Edit your own CSS to remove unused elements

The tool above shows the name of your CSS file that you’d need to edit and it will be very clearly linked to your own domain name.  In the example above, it is in the gray block as: http://paballokomanephysiotherapy.co.za/physiotherapist-parklands3.css.

There may be other 3rd party CSS style sheets that the tool picked up but they are likely not under your control, so please ignore them and only work on the CSS that is clearly associated with your domain name.

NB! BACK UP YOUR CSS FILE BEFORE YOU START WORKING ON IT (e.g. by saving it as existing-name-backup.css

If you are already comfortable editing HTML and CSS, just edit the CSS file as you usually would using the html editor of your choice.  I use MS Web Developer 10 Express; HINT: I open both the CSV file and the CSS file and just flick between the two tabs to delete each unused element from the CSV file as I’ve removed it from the CSS file (saving paper).

css-tutorial6

Alternatively you can right-click your CSS file via FileZilla and view/edit it in a standard text editor like Notepad; remember to go back and activate the FileZilla to Save it there, not just in the text editor itself.

NOTE: If you don’t have FileZilla (a popular FTP client that allows you to transfer files to and from your web server), and you likely don’t know the log-in details to your web server, or you don’t know what I am talking about, this is a good place to bow out and ask for help, or get started on that tax return instead!

Find the first unused element and select it all from the element name to the last bracket associated with that element, then press the Delete button.  Find the next element and repeat, etc.

css-tutorial7

Save and/or upload the edited CSS file to your website via FileZilla.

7 ~ TEST all aspects of your website to ensure it looks good

As before, visit each page of your website, including sub-pages, enquiry forms etc, and ensure that everything still looks as expected.

If not, either:

Act FAST before you lose business from your website not behaving / displaying as it should!

A couple final thoughts:

If you have a website developed in a CMS (like WordPress) – it is possible for you to also clean up the CSS used by your Theme in the same way, but this requires you to understand where to find the various files referenced in your WordPress file structures.  This is also a lot more dangerous to attempt as WordPress has wonderful weird ideas of its own that you can really fall foul of, so unless you are very tech savvy, I suggest you leave this well alone or ask for professional help.

You may use your discretion and leave in certain unused CSS elements that you know are likely to be called on in future (e.g. in my case clients often start with a simple website with single-level menu items; in future, as they grow, they want to add sub-menus).  In this case I choose to leave in the CSS for that future sub-menu presentation handling.

That’s it and in our individual small way, we each help to make the internet a faster place!

Well done!  Whether you did all this yourself or asked for help; either way it marks you as the Master of your Ship.

gift

STAY AHEAD OF YOUR COMPETITION!

Occasionally receive our blog posts in your inbox for free:





 

 

 

Author: Ronel Pieterse

Ronel has spent 24 years in the corporate world (finance, banking, mining, manufacturing and agriculture) and has also started 5 small businesses herself over the past 20 years. Four of these are still operational today in one form or another. Ronel's passion is to use her considerable skills in spheres of business and IT to help other small business owners and entrepreneurs to grow their businesses to the next level and to attain sustainable competitive advantage in the process.

3 thoughts on “How to clean up CSS unused Style Sheet Elements to make your web pages Load Faster”

  1. Excellent read, I just passed this onto a friend who was doing a little research on that.
    And he actually bought me lunch since I found it for him (smile). Therefore let me rephrase that:
    Thanks for lunch!

  2. Superb blog! I’m hoping to start my own weƅsite soon but I’m a little lost on evеrythіng.

    Would you recommend ѕtarting with a free platfߋrm lіke WordPress or go for a paid option? Ꭲhere are so many
    choicеs oᥙt there that I’m comрletely confused.. Any recommendations? Many thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *