0
Welcome Guest! Login
0 items Join Now

Optimizing CSS

Last Post
Search Topic

  • Optimizing CSS

    Posted 12 years 8 months ago
    • The css grid frameworks built into gantry handle a large variety of layouts. And much like when you work with BlueprintCSS or Grid960, you are supposed to only use the classes and styles that you need for your project and remove the rest.

      I have been using CSS Usage plugin to firebug to see all the unused css and the results show that I am using far less that what is actually present. My goals are to get the css as small as I can before sending it to rokbooster for the final compressing and combining.

      So to make a long question even longer: is there a method or plan I should follow before going through the source css files and removing unused styles?

      Has anyone done something like that and had good or bad experiences?
    #862082
    • Ben Simon's Avatar
    • Ben Simon
    • Elite Rocketeer
    • Posts: 4301
    • Thanks: 8
    • Full-time web developer

    Re: Optimizing CSS

    Posted 12 years 8 months ago
    • When I'm creating a speed analysis for a site, I don't think I've ever considered deleting unused CSS. Although compressing it probably can make a noticeable difference because the time it takes to request several individual CSS files takes more time than to actually download them. Image sprites exist for the same reason.

      Images, server misconfiguration, server speed, large JavaScript files, and other issues that I'm not thinking of right now have been the worst culprits in my experience.
    • B e courteous to staff and members that volunteer their time helping you
      E ssential Tool - FireBug
      N ever assume I know what version you're talking about

      S earch the forum for a solution first
      I nclude a link to the problem
      M ark your resolved issues as [SOLVED]
      O nly PM moderators if they request it first
      N o...
    #862449

  • Re: Optimizing CSS

    Posted 12 years 8 months ago
    • I tend to agree with you, but using the Firefox extension called Dust-Me, I found that I am not using (and I am estimating here) about 90% of all the CSS selectors that are defined (and there are around 10,000 CSSselectors just on the front page of my site!). This is typical in large templates especially with all the abilities of RT templates.

      I am thinking about commenting out all the unused styles so that when RokBooster works on them, it will remove the comments in the final combined and compressed CSS.
    #862505
    • Ben Simon's Avatar
    • Ben Simon
    • Elite Rocketeer
    • Posts: 4301
    • Thanks: 8
    • Full-time web developer

    Re: Optimizing CSS

    Posted 12 years 8 months ago
    • Actually you go me interested in this idea of unused Classes and IDs. I'm guessing that's what Dust-Me is referring to. CSS Selectors and Sudo Selectors are a specific type of CSS sytax ( www.w3schools.com/cssref/css_selectors.asp ) but I'm sure it's looking at all ID's and classes.

      It got me thinking about the type of speed I could actually save by removing the unused CSS so I ran a test on RocketTheme.com. I don't have a link to use your site, but I'd be happy to do the same for it.

      Here's a compressed waterfall chart showing connection, TTFB, and download times for RocketTheme.com. It is visual representation of the total time taken to process the many elements of a site.
      This image is hidden for guests.
      Please log in or register to see it.

      The CSS is small but certainly takes time to request, download, and process. One thing to point out is that the site's CSS files have no compression, meaning there is still room for improvement, so more time is need to process each file individually. But... typically up to six files can be processed simaltainiously so I predict that the improvement would not be significant.

      Now... to illustrate the actual increase in speed one would get if some (or all) of the CSS were eliminated, lets look at another chart:
      This image is hidden for guests.
      Please log in or register to see it.
      The CSS files (lines 3-7) take about 1.5 seconds to process completely, then the images are requested, and the page starts to render in the browser which is represented by the long vertical purple line. One thing you'll want to know about is that both the JavaScript and CSS files are processed before moving on to the rest of the content and rendering the page regardless of the browser used.

      Now lets assume there isn't any CSS on the site at all and see what happens. In this illustration I've removed the CSS and I have marked difference of where the JavaScript originally started loading and where it loads after removing the CSS.
      This image is hidden for guests.
      Please log in or register to see it.
      You can see that the JS starts as soon as the DNS lookup is complete and lasts as long as the longest JS file takes to process, THEN the rest of the site is requested and starts to render in your browser. Because the browser waits until all the JS files are completely processed to move on, even though the browser processes several (6 to be exact) files at once. Removing the CSS saves about 350ms.

      This is really the first time I've paid attention to unused CSS. I don't think I can say that CSS should be a lower priority for all sites but most of the ones I've optimized for speed for have had weakness in other areas. I'm sure I'll find a site were it will make a significant difference.
      kers7754 wrote:
      I found that I am not using (and I am estimating here) about 90% of all the CSS selectors that are defined (and there are around 10,000 CSSselectors just on the front page of my site!).
      Are they used anywhere else on your site?
    • B e courteous to staff and members that volunteer their time helping you
      E ssential Tool - FireBug
      N ever assume I know what version you're talking about

      S earch the forum for a solution first
      I nclude a link to the problem
      M ark your resolved issues as [SOLVED]
      O nly PM moderators if they request it first
      N o...
    #862537

  • Re: Optimizing CSS

    Posted 12 years 8 months ago
    • Wow, great analyzation! What I did was run the dust-me extension and visit every page on my website. As each selector is found, Dust-me removes them from the unused list.

      Do you optimize sites for a living? You would probably be good at it! :)
    #863435
    • Ben Simon's Avatar
    • Ben Simon
    • Elite Rocketeer
    • Posts: 4301
    • Thanks: 8
    • Full-time web developer

    Re: Optimizing CSS

    Posted 12 years 8 months ago
    • kers7754 wrote:
      Wow, great analyzation! What I did was run the dust-me extension and visit every page on my website. As each selector is found, Dust-me removes them from the unused list.
      I see, that could make it very useful. I might add it to my arsenal of analytic tools.
      kers7754 wrote:
      Do you optimize sites for a living? You would probably be good at it! :)
      Lol. I'm just an newbie in the world of "Speed Optimization" compared to the vetrans in this community. But I've just spent a lot of time testing sites and researching issues for clients. I've amassed a lot of tools and experience but I'm always learning too. Here are a few people/sources I follow:

      Joshua Bixby
      President of Strangeloop
      His blog - webperformancetoday.com

      Billy Hoffman
      Founder and CEO of Zoompf

      And lots of annual conferences that you can sift through like velocityconf.com
    • B e courteous to staff and members that volunteer their time helping you
      E ssential Tool - FireBug
      N ever assume I know what version you're talking about

      S earch the forum for a solution first
      I nclude a link to the problem
      M ark your resolved issues as [SOLVED]
      O nly PM moderators if they request it first
      N o...
    #864179

Time to create page: 0.070 seconds