Over a million developers have joined DZone.

More on CSS Optimization

· Performance Zone

See Gartner’s latest research on the application performance monitoring landscape and how APM suites are becoming more and more critical to the business, brought to you in partnership with AppDynamics.

As CSS files are first downloaded to the client and then executed, the main optimization is to make those files smaller. But that doesn’t mean only minifing!


The Minification Process

While with minification you can strip all the symbols that only take space, but are useless when the browser parses the file, there are some other techniques, which in fact aren’t so simple, to speed up the loading process. By minification you get rid of the white spaces, tabs, new lines, etc., but the file may remain too large.

Useless Rules

Yes, sadly the browser doesn’t need all those white spaces, actually web developers need them. Just because this makes the file more readable, or readable at all. However most of the web applications have one large CSS file, typically named layout.css, main.css or whatever, that contains all the rules for the entire application. In many of the cases one page of a site doesn’t need all the rules for the site, so a possible solution is to remove all of the rules that aren’t used.

There are tools that may help you do the job. Such a tool, that I’m using is the Firefox add-on – Dust-Me Selectors. Of course there are a lot other tools doing the same job, so it’s up to you to pick up one.

After removing all those useless rules you’ll see that the size of the file can be something like 20% of the size of the source file. This is interesting to note, because most of the time the minification cannot give you such performance benefit. In fact this comes with some issues.

One Request or What?

This is the dilemma of the web programming, isn’t it? However thus you can split the main CSS file to few smaller files, but they are named differently so you cannot expect the browser to cache them when the user visits the site for the first time.

The case must be, of course, tested against various situations, so you can decide what suits you. However the typical scenario is to optimize only few of the pages, as they might be the most visited – as for example the homepage. If two of the pages are mainly visited, than you can make custom, small, CSS files for them with only the necessary rules, and let the other pages with the main CSS file. If you’ve a lot of returning visitors, you can be sure the custom files will be cached (if the client cache is turned on) and the second time somebody visits the “homepage” for example the page will load faster.

Related posts:

  1. Optimizing CSS. Five simple steps!
  2. What if your site doesn’t use all of the CSS selectors?
  3. CSS sprites. Go beyond the limits with base64!

~ End Article and Begin Conversation ~

The Performance Zone is brought to you in partnership with AppDynamics.  See Gartner’s latest research on the application performance monitoring landscape and how APM suites are becoming more and more critical to the business.


Published at DZone with permission of Stoimen Popov, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}