Style sheet – stoimen's web log

More on CSS Optimization

Stoimen — Fri, 07 Jan 2011 14:40:14 +0000

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.

Manage JavaScript and CSS includes within Zend Framework application

Stoimen — Wed, 10 Feb 2010 07:29:18 +0000

How to include JavaScript and CSS files?

In Zend Framework there is a very elegant way to include CSS and JavaScript. Because in one single view of any action you cannot include a JavaScript or CSS because they wont be executed from the browser, you can simply use a helper.

You can see the original source of how that’s done here. And in breve you can include a JS file like so:

headScript()->appendFile('/media/js/global.js') ?>

but where the problem is?

As a very good PHP point of view, there is really that way to include JS into the application. But a PHP point of view is not a JavaScript point of view so this solution is not the best one.

As almost everybody knows JavaScript blocks other content until it’s loaded and executed from the server and nowadays the most popular way to include JS is just before the closing tag.

That’s why the ZF solution is not optimal. What we actually need as both PHP and JavaScript developers is a most robust solution!

Optimizing CSS. Five simple steps!

Stoimen — Sat, 30 Jan 2010 07:04:40 +0000

In the spirit of the optimization wave this post is about CSS optimization. There are some simple rules that you can apply. I’m pretty sure most of us have already been familiar with that list, but you never know.

1. Minify

As the JavaScript the CSS also can be minified. This only strips every character that makes the traffic bigger. As you know a well constructed and pretty looking CSS file consists of many new lines, tabs and spaces. Almost every software minifies the CSS by simply removing them. Some of the programs go even further with replacements of different parts of the code considered to be not efficient.

2. Use effective selectors

Some CSS selectors aren’t really efficient. Imagine something like: body div a just to describe only one specific link. That’s really bad. Better practice is to replace that line with something like a.my-class and to replace the a tag into the DOM with that class name. That will be far more effective. Actually if you’re wondering how to find such bad selectors, there’s a tool by Google called Page Speed that’s a Firebug’s plugin and can extract a list of all bad selectors.

3. Inheritance

CSS is really powerful when dealing with inheritance. That’s something that is not some clear but however really powerful. This technique is in the basics of the next rule.

4. Sprites

I’ve written already about CSS sprites. This is nothing new, but be careful when making a new site’s layout. CSS sprites spend you HTTP request and that’s rule number one according to Steve Souders’ list of optimization.

5. Separate logic

Sometimes developers put the site logic in only one file that become to large. Be aware of that. This is hard to maintain and you load things that you don’t need.

That’s a really short list of what you can do with CSS to speed the site up. I hope that can help someone when dealing with cascading style sheets.

What if your site doesn’t use all of the CSS selectors?

Stoimen — Mon, 18 Jan 2010 19:59:09 +0000

Why my site doesn’t use all of the CSS however?

Well someone can ask how you can have CSS that contains selectors that aren’t used on the site. There are two reasons to happen and most of the cases both of them are true.

The first reason is that not all of the pages in a site need all of the selectors. Imagine large web based application with lines of CSS and one of the sites’ pages is the “about” page where you’ve only the header, the footer and some text. That’s my favorite example! In fact you don’t need to load the whole CSS file just to apply only few selectors for this page. In most of the cases this is the reason to have unused selectors.

The second reason is that during the development process most of the code become old and therefore unused. You start by writing some CSS selectors which after changing the requirements, and the layout are no longer used. But the fear to ruine the layout because some other page can break after the removal of some selectors make the CSS to grow and fill with unused code.

Now you can overcome this problem by simply using a software (JavaScript) that helps you determine which selectors are never used. Check out this brilliant solution called helium.