Optimize your stylesheet.

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
jonnay
Regular
Posts: 5
Joined: Wed Apr 28, 2004 1:41 am
Contact:

Optimize your stylesheet.

Post by jonnay » Thu May 19, 2005 6:08 pm

Because S9y has an event-hook for displaying the css, your css files are actually parsed php files. What does this mean exactly? Well your css files aren't cached, and on every page load, the serendipity.css.php file has to be re-parsed, and re-executed. The execution time could take a little while longer, depending on the plugins you are using as well.

Now, my blog is on a SLOW connection, on a slow machine, so I can use every ounce of speed I can get, and I came up with this handy little optimization:
  1. In the current theme you are using, copy the style.css to main.css.
  2. Change style.css to this: @import "/templates/your-theme-dir/main.css;.
  3. View the text of http://yourblogdomain/serendipity.css. Ideally you should just have the @import directive.
  4. If you don't that means that some plugins are defining their own default styles. To make sure the directives in your /main.css override them properly, you can just put the name of the class in a comment. For instance, I override the defaults of the FreeTag and searchQuery plugins in my style.css. So, my main css looks like this:

    Code: Select all

    @import "/templates/midibuffer/main.css";
    /*
    .serendipity_searchQuery {}
    .serendipity_freeTag {}
    */

    Be careful that you only do this trick for styles you actually over-ride.


The benefits of this are twofold. First of all, your css files can be properly cached. I checked it out in my apache logs, and low and behold, a GET to /templates/midibuffer/main.css returned a 304. The second benefit, is that the css event hook sends the entire contents of the css to each event (that asks for it), and the event will usually parse that string to see if any styles were overridden, and if not insert their own. Obviously if you are passing around and parsing a 112 byte string, its far faster then a 5K string. This part of the optimization might be minimal though.



Hope that helps!

jojje
Regular
Posts: 41
Joined: Thu Dec 08, 2005 4:09 pm
Location: Sweden
Contact:

Post by jojje » Sat Jan 14, 2006 10:11 pm

Thx for this tip. I got to try right away.

My blog is extremely slow and I think that this could some. My style.css is 11kb

Post Reply