How to Find Unused CSS Styles in Webpage by Firebug Extension

In attempt to make the blog load faster, i have been trying various techniques that actually worked for quite a bit of people all around the globe. One of the first things one can go for is to find the unused CSS codes that are no longer being called by any div or any where in your template. They're just laying there slowing down your webpage.

'CSS Usage' is a neat firebug (Firefox plugin) that would easily help resolve your problem to find un used CSS in your blog.

How does 'CSS Usage' Work?

CSS usage adds up an extra button/option in firebug plugin for firefox. Once you enable firebug to run, you would notice a field saying 'CSS-Usage'. Thats what you would be using to find all the junk in your template.

css usage

Install Firebug and CS-Usage

Download Firebug is you haven't already. Next, install CSS Usage add-on.

install firebug for firefox

install css usage for firebug

How to Use 'CSS Usage' to find Unused CSS Styles?

Step #1 Turn on Firebug

turn on firebugGo to the web page that you wish to scan. Though you might be thinking of to find all the unused CSS chunk in your template, though CSS Usage doesn't work that way. It scans pages that you land on and thus find all the uncalled styles.

Turn on firebug.

Step #2 Turn on 'CSS Usage' within Firebug

Hit CSS-usage button with in firebug pannel

turn on css usage

Thats about it. CSS styles marked in 'red' are the uncalled styles that aren't being used for that particular page that you're upon. Though, DONT be mistaken. This doesn't mean that these are all junk as they're not being called 'at the moment'.

You have to analyze each style and recall if you have that style usage anywhere on the blog or not. For example, if you're not longer using a 'slide show' anywhere on the blog and your blog template shows a lot of slideshows styles, that clearly refers to unused chunk of code that is making your blog slow.



Always backup your template before making any changes to your template. Hope this post would help you guys find some hidden folks (css styles) in your template.

Stay blessed :)



AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
BloggingeHow | Making Blogging Simpler: How to Find Unused CSS Styles in Webpage by Firebug Extension
How to Find Unused CSS Styles in Webpage by Firebug Extension
BloggingeHow | Making Blogging Simpler
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy

Tools of the Trade