Web
Article

Video: Using CSS Stats to Remove Bloated CSS

By Tim Evko

Site performance is a big topic these days, and although CSS isn't the biggest bandwidth hog, every little bit of optimization helps.

In this video, I’ll be reviewing a website's CSS rules to improve site performance with cssstats.com. It's amazing how much duplication and inefficientcy can creep into our style sheets, so let's see how much we can trim down our files to maximize efficiency.

Loading the player…

  • M S i N Lund

    The site looks nice, but lacks almost any information at all about what the displayed information means or what it is supposed to be used for.

    I can find only one single “Learn More”-link for one of the graphs, and that one leads to a crappy low-contrast site.
    Anyone who do low-contrast design, has no business teaching others anything about css.

  • http://uk.linkedin.com/in/karlbrownactor Karl Brown

    Thanks, Tim! This is looking really useful. Once we get wider support for CSS variables we should be in a far stronger place to reduce the code bloat.

    I ran the site of my last employer through it and shared the results with them as I know they’re replatforming the code, and they’ve already said it’s going to come in handy for them. I’ll be reviewing the CSS of my own site this weekend to try and reduce some of the unnecessary bloat that I’ve noticed. I think sometimes people don’t realize just how many times they declare things when they don’t need to.

    • http://timevko.com Tim

      Glad this could be of use Karl! It is really hard to keep track of, especially for CSS. I’m sure I could run this on my own portfolio site and find plenty to fix!

  • http://www.linkedin.com/profile/view?id=4687952 Serge Krul

    Hey, thanks for the vid!
    You’ve mentioned variables few times, and also SASS so I guess you’ve referred to SASS variables.
    But just by using SASS variables I don’t see how my CSS will get any better, cause all those $colors and $fonts will end up compiled to the same CSS. I thought maybe you meant to use @extend, but sometimes it’s not a good tool, i.e. when you want to share styles between arbitrary elements, or when you want to pass parameters.

    Care to explain it further?
    Thanks again :)

  • Kenneth Davila

    @timevko:disqus definitely kudos for making another video, but I’m really finding it hard to gather anything meaningful from the videos. I think you cover a lot of obvious or base level stuff. If you titled your videos with Beginner or Novice in there it would reach your intended target audience. I think you chose a site that obviously had no style guide and multiple front-end or back-end developers working on it. I think comparing to another site that has better organized CSS is a good idea. But the site you chose also has a very small CSS file which in the end will trump any organization in my opinion. Speaking about performance the smaller the file the faster the load. So I think that site you chose is not a good candidate because their CSS is so small that it’s probably also easy to maintain.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Instant Website Review

Use Woorank to analyze and optimize your website to improve your website to improve your ranking!

Run a review to see how your site can improve across 70+ metrics!

Get the latest in Front-end, once a week, for free.