homepage Welcome to WebmasterWorld Guest from 54.161.228.29
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Remove unused css
pagespeed warnings
studyguidevn




msg:4268778
 1:30 am on Feb 18, 2011 (gmt 0)

Hi every one,

I am working on improving my website speed. Still, there is some feature that I don't understand. It says that I must remove unused css and use efficient CSS selectors. I installed Dust Me already. My question is what will I do next if I have had the used and unused css? Must I separate my style css into two?

My website here: [edit]
Any advise is highly appreciated.

Regards,

[edited by: alt131 at 7:03 pm (utc) on Jul 9, 2011]
[edit reason] Site review [/edit]

 

SevenCubed




msg:4268794
 2:50 am on Feb 18, 2011 (gmt 0)

Hi studyguidevn and welcome to Webmaster World

I just spent some time looking through your code. I almost don't even know where to begin in trying to assess this to any point at all that can be helpful for you. I'll start by saying this is typical CMS extreme code-bloat. I don't have experience with CMS's but I will attempt to answer your questions to point you in the right direction. Beginning at the top it appears you are linking to 10 separate external CSS files. Within those 10 CSS files there are enough DIVS and CLASSES for all of this life and maybe your next 2 -- it left me speechless. Of all those styling attributes being brought into the page you are only using a very small percentage of them. I know that is what you are asking help with but honestly if someone gave me a choice of sorting it out or being fired from my job -- I'd gladly put on my coat and leave without resistance.

Here's what I can help you understand:

Do worry about any instances of this -- Remove unused CSS: q:before, q:after, clear:after -- because that PageSpeed plugin isn't capable of detecting them even if they are being used in the page. That is a reporting error. But even so that's minor in comparison to the amount excessive unused CSS overall.

To explain the "Use efficient CSS selectors"...
This...
.topnav li ul li a
.topnav li ul li a:visited
.topnav li ul li a:hover

Can be turned into this (but not all the time)...
.topnav a
.topnav a:visited
.topnav a:hover
...it would really depend on whether or not there are multiple different styled UL's or LI's within the topnav class. I can only suggest trying one at a time and take a look at the result to see if it is doing what you expect.

After all that, you then have to realize that if you do make changes in any or all of the 10 external style sheets you are linking to then you are going to also have to change them in the page template. Overall it can be done but I hope you have a good search and replace feature in your editor if you tackle it.

Also, no it's not better to have two different style sheets. You should have everything in one if you are able to figure out which bits and pieces you have used from which of the 10 different ones brought in.

That's about as best I can offer for an explanation but maybe someone else might jump in with some suggestions. I wish you luck if you attempt it!

SuzyUK




msg:4268925
 9:40 am on Feb 18, 2011 (gmt 0)

Hi studyguidevn and Welcome!

a lot of what sevencubed says is correct, in the case of CMS theme, it' very often not worth the heartache!

your Home page PageSpeed score is 92/100 - that's very good without doing anything else! The unused CSS and "inefficient" CSS are just yellow 'warnings' and not affecting the score too much, the bigger point to tackle to try and get an even higher score would be spriting and/or smushing those icon images.. but back to the CSS question.

to follow on from the 10 stylesheets! for sevencubed, this is typical CMS behaviour as each module or plugin usually has it's own "namespaced" CSS, and unless you want to hand write the CSS and merge it into your own, and do that every time you update a plugin - the way it's being handled is as well as it can be, studyguidevn, or a WP plugin, are already compressing the the CSS into one file and then minifying it too.

---
Modules or Plugins have such specific CSS i.e.
#somewidget .content ul li a {} - so they make sure they don't interfere with a themes existing CSS, this leads to lots of "warnings" about inefficient CSS, which I personally think are Garbage! Yes in some cases the CSS can be made a little bit leaner by removing part of the selector however as sevencubed points out that is not always the best way to go - it could affect the specificity of the selector causing it not work as it used to.. This is why I think the "warning" is garbage.. IMHO using specific CSS is a necessity in CMS's when the CSS is being pulled from different plugin sheets, the Cascade cannot always be relied on and specificity is the way to go.

Specificity is one of the beauties of CSS, that particular part of the PageSpeed warning can cause more trouble than it's worth unless you intend to combine your multiple stylesheets by hand and rewrite them to the Cascade every time a widget/ plugin is updated.. You don't want to do that, trust me, no longer could you then just click the update widget in the WP control panel and be good to go ;)

The same applies to using the DustMe Add-On, that is also not very efficient, I haven't got it downloaded any more but from what I remember you have to run it then visit every single page of your site in order for it to produce the full picture of what might not be being used. And even if you do this and decide to start chopping out bits of your various CSS sheets, you then land back with the problem of what to do when you need to update a Plugin or your Theme, these updates will in all likelihood put back what you take out

In reality the bytes that unused or specific selectors use are so tiny on the grand scale of things it really isn't worth it. Browsers cope very well with simple and unused Selectors I be willing to wager that even if you completed this whole exercise you might see a slightly increased PageSpeed score but you would not see, or be able to discern, an actual difference in the speed of the page!

.. where it says a selector has unnecessary qualifiers,
.topnav li.last a this means it's suggesting that you don't use the "li" bit - Most times that would be there for a reason in a CMS theme.. it could be the stylesheet authors coding practice, it could be the "last" class is being reused on another element at times so the "li" bit is for clarity, readability.. more importantly it could mean the whole selector needs to be that specific in order to override a similar weighted selector.. I'm mad that PageSpeed deems these type of selectors as "inefficient" in this way - giving out a scary warning instead of a suggestion

I guess they (Google and Yahoo) would rather we use their Blueprint/Grids CSS in which case we really would have tons of unused selectors and a whole pile of unnecessary class names! ;)

OK I'll stop ranting now and get back on topic!

If anything you may want to go back to the development and recode your sites theme, i.e. check it without any plugins or minification of the combined CSS - Make sure the theme CSS is coded as efficiently as it can be, e.g. a lot of themes use resets and standard code blocks like clearfix: after{}, your site's theme e.g uses a standard reset (Eric Meyers). Once it is coded as efficiently as you think possible then make sure you're only using what widgets are necessary for your site, don't go overboard on the "just in case"

often resets, grids, fonts (CSS frameworks) are built into themes. In most cases once you have your site theme customised to suit - these extras, or at least parts of them, are not necessary -- however if you are relying on a Plug 'n' Play theme that you're not sure how to optimise - then be careful as to what you remove.

in short it is possible but there's no easy way without getting intimate with your own CSS and basically re-writing it to suit - although I hate to see multiple sheets or "unnecessary" CSS - with CMS'es unless you want to spend your whole days recoding themes and widgets I'd say let it go ; and like I said in your case they are already combined and minified which is fab..

now as for the sprites, that is something you can do I think

SevenCubed




msg:4269055
 3:27 pm on Feb 18, 2011 (gmt 0)

Do worry about any instances of this --


To correct my own typo I meant to say "Do NOT worry about any instances of this" -- wrote it late last night and didn't re-read it.

Thanks SuzyUK for helping me better understand the inner dependencies of a CMS. It just reinforces my understanding of them and why I prefer to not work with them. I hand-code everything, always have and probably always will. I'm going to have to install one of these things someday and dig around in it though -- just because.

Brett_Tabke




msg:4271943
 1:26 am on Feb 25, 2011 (gmt 0)

> I must remove unused css and use efficient CSS

Search engines are your friend.

There are dozens of CSS cleaners out there for free. There is no reason ever to pay for ANYTHING related to css. If it is CSS related and NOT free - be very very suspicious. They are not worth your time or money.

SuzyUK




msg:4272581
 10:10 pm on Feb 25, 2011 (gmt 0)

I agree Brett, not worth the money!

I will add that there is no substitute for getting down and dirty with your CSS, it's not a clean cut language like scripting languages are, there are so many ways to do something. (I have examples later)

anyway spurred on by this thread, I have spent the last couple weeks on and off "optimising" a Drupal site I have.. @sevencubed if you thought 10 sheets was scary.. this site has 28 when uncompressed, dangerously close to IE's 31 sheet maximum :o

I hate hate hate it ;) [the fact I have 28 stylesheets that is!] but it is, via a module, compressed into one sheet so it's not all bad. This a community site so I have had to forgo my CSS neatness (perfectionism) while concentrating on the functionality for the non-tech users. This community functionality is the whole reason why it's Drupal site in the first place (I do work with WP too) - I always knew that there would be a time I could go back and "clean up" when the site started getting busier.. we are now 3 years later and so I'd like to share what I've been able to do to increase my Page Speed scores. (not that that was my sole goal, and I don't know if this is the right place either.. so apologies if not.. but I think it crosses with all, or at least everything I know yet, or know where to go to find out)

1st out of the stall (nearly 4 years ago now) I built my own theme, control freak yes, but that meant I did not have to rely on theme support as well as modules (plugins in WP speak) if you'd have seen it, viewed source and knew I did it you would have laughed me out of the coding world, however on the surface it looks beautiful and has remained stable through 2 versions now, that's what's more important. not the darned code!

Drupal is quite well known for becoming slow to load, which is no wonder because of what it's actually capable of doing, even though initially I wasn't sure of all requirements, so second I found a Drupal optimised host this has kept the site running as best it can while I found out what was going to be needed/used

3rd I set the databases to backup nightly and email these backups to a gmail address, which can store heaps, but I do go in and remove the older ones from time to time and check that they're coming through OK!

see nowhere near CSS yet ;)

I could not live with the admin module, which is only one of the extra stylesheets, and from here on in for about 3 years it was about adding modules as the functionality was required.. though I did obviously made sure the the CSS and JS aggregators were also one of the first things I added..

3 years later, a forum and a lightbox gallery and never touching "core files" so I keep up with updates and I realise there's 28 blinking sheets!

So I *know* there's unused CSS in them, but I also know I don't need to be 'breaking' any of the JS/Jquery reliant modules (lightbox for one) which rely on what the regular visitor/crawler may see as "unused CSS" - I don't know enough about the inner working of JS or have enough time to find the DOM that a JS module might generate to see if it's CSS is really unused or not. [warning twitterspeak: #gotbetterthingstodo]

So back to basics for me, using PageSpeed, Y!Slow and webpagetest.org, I set out to see what I, a mere front end person, could do.. it turned out to be quite a lot!.. once I ignored the silly, don't make sense, warnings from the visual SE tools and started to see what actually affected the Speed of the Page load

I've come to the conclusion that no real world site can get top "scores" across the board as each site will differ as to it's complexity and requirements and these blinking CSS "warnings" are, in part, FUD!

.. as I "improved" my site, at least according to one guideline, it then threw up something else at me.. so it's not always as as simple as clearing one "yellow flag" (not that I ever believed the the one about so called efficient selectors or unused CSS anyway)

here's what I've done so far, which may be subject to change as I learn more from you readers..

out of the 28 stylesheets I have in fact customised 5 enough to want to override them completely and write my own, (6 inc my main theme style sheet) in Drupal you can override a entire stylesheet and bring a copy into your theme for just these purposes so instead of using 6 separate sheets I refactored them (removed uneccessary rules) and amalagamated them into one sheet which i then minified without comments, this act alone cut about 4KB from the sheets, which is in fact nothing once gzip compression comes into play, bu it did make me feel better ;)

so that leaves 22 I know I can, but don't want to touch.. but when they're all compressed together who cares anyway!

Now each of these modules often brings with it a couple or 6 background images.. so that's I'm going to work on as these are the images that are throwing up the "consider sprites" warning.. yeah yeah! I've considered, but have you any idea how long it takes to make and calculate a sprite, let alone pull the images from outwith core without touching the original files so I can upload your next security update without having to remember not to overwrite a stylesheet? [read that all in one breath, it's how I wrote it, I know about sprite generators but again that's not the point of the exercise]

but my theme and the 6 sheets I've now incorporated I can do.. so image optimisation it is.. that's an eye opener according to webpagetest.org (not blindly reading FF add-on PageSpeed results) it matters not if I optimise all images or not :o it's parallel downloading! Oh for Goodness sake I just want to do what I can..

..so off I trots to find out what parallel downloading is.. this I can do with a "Fake CDN" which actaully works and doesn't care if I optimise images or not, in fact as I discovered even if I did optimise the images it didn't matter a monkeys, f they couldn't parallel download it was a waste of time. Then of course I had the Data URI trick up my sleeve, so I set to and converted the icons to data URI's instead of spriting them (I did try a sprite first but fell afoul of the parallel download issue)

So what I have now is a blinking great mixture, and it works! I have pngs pulling from one place, jpg's from another and gifs from another, then the smaller icon and tab or repeating images are coming from DATA URI's all are downloading quite happily together, whereas if I'd have just "sprited" the ones I could and optimised the rest and kept pulling them from the ame place, the downloads would have still blocked (though admittedly not for as long as they would without said optimisations)

My point.. my page speed score has not really improved 89 at last count, but but but.. the loading time has actually halved from about 5s (uncached first view) to 2.9s with a 0.5s on second view

And I've still got 22 sheets to find "unused" selectors in ;) though somehow I don't think that's actually going to help do you..

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved