Speed up your site.. lose {stylesheet}

[kermit]

was messing around with some default installs and came to realize that stylesheet generation is a HUGE part of page load times..  so, give your cmsms site a speed boost by simply replacing {stylesheet} with static files... no database hits for the stylesheets and no php script to call for them translates to faster pages, especially on subsequent page loads where everything is already cached by the browser except the html page itself...  TWICE AS FAST (here, anyway, and i just have one screen and one print stylesheet attached to a template)...

even when apache returns a 304 not modified for a stylesheet, cmsms still has to generate the css to see if it's different than what the browser says it has, the only thing different is that instead of sending the css, it sends the 304.

how to you find your compiled css code? load up a front-end page in your browser and look at the generated html source. you'll see lines like:

<link rel="stylesheet" type="text/css" href="http://www.yourdomain.com/stylesheet.php?templateid=23" />
<link rel="stylesheet" type="text/css" media="print" href="http://www.yourdomain.com/stylesheet.php?templateid=23&amp;mediatype=print" />

take the part in bold and load the links in your browser (take out the red part if it's there...). save the resulting output to text files like 'yoursite-screen.css' and 'yoursite-print.css'; upload them to your web space, and then replace the {stylesheet} tag in your template with links to those files.

<link rel="stylesheet" type="text/css" href="/uploads/yoursite-screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="/uploads/yoursite-print.css" />

So, when you've got your css tweaked to perfection, export it to static files and link to them instead.. you WILL see an improvement in site performance.. GUARANTEED (or your money back)

NOTE: if you've got more than one template, and they use different CSS.. find the styles common to all templates (those would be the stylesheet associations that are the same among them) and put them in one css file.. then find the ones needed for a specific template that can't go in that common file and stick those in a different one (and link to it only on the template that needs it).  a lot of people with multiple templates and stylesheets can still probably get away with a single stylesheet if they do it right..

ANOTHER BONUS to losing {stylesheet} and linking to static files instead is you'll no longer have references to "stylesheet.php" clogging up things like webalizer and awstats....

and while you're at it, if you've only got a single template to your site, and no one will be messing around with the global meta data, stick your meta data (grab it from your page's output html so you don't miss anything) in there too and lose {metadata}.. another query chopped off each page.

ted, this part's for you. ...since css is static content, i dunno why it's generated on every page view.. it could generated and stored as static files (in addition to the database storage of each individual stylesheet.. cuz it is kinda cool having everything in the db for backup & server migrations) by the back-end whenever someone performs a task that would alter a template's generated css.... and then on the front-end, {stylesheet} could send the browser that static file, if it exists (or a 304 immediately), instead of generating it for every single page view (and if it does generate the css, it stores the static files for 'next time').

[cyberman]

My cache project includes a stylesheet tag which do the same ...

[Signex]

In Wordpress you can also edit a static stylesheet in the back-end, maybe thats a good idea for cmsms also?

[chead]

In Wordpress you can also edit a static stylesheet in the back-end, maybe thats a good idea for cmsms also?

I like this idea; the same editing capabilities could also support other "external" files like menu templates that aren't saved into the database. Some permission setting might be needed to allow this type of "live" file editing.

[kermit]

My cache project includes a stylesheet tag which do the same ...

{cstylesheet} puts the cached css in the output html, so you trade css generation time for larger html pages (which still must be transferred to the browser on every page view). allowing the browser to cache the stylesheets is more efficient and faster... perhaps {cstylesheet} could be updated to serve the actual text/css, allow browser caching, provide the 304's when they apply, and maybe have a configurable expires parameter so the site admin still has some control over how long the stylesheets are cached by the browser.


i have been messing around with {ccontent} though. i'm using the rss module on one site. a frontpage feed i want updated every 2-3 hours, but feeds on other pages i only want updated daily. IF {ccontent} caches the rss module output, then i can use it to control the rss updates on those other pages without hacking the rss module code to pass along a lifetime parameter of its own (rss module caches the feeds).


i've also played around with a different site, and put EVERYTHING above the content block on the page, up to and including <head> in the template in a global content block, and then on the top line of every page's content area references that gcb... breadcrumbs? cached. meta data? cached. MENUS? cached......  and i end up with something like this...

<!-- Generated in 0.126577 seconds by CMS Made Simple using 6 SQL queries and 3552288 bytes of memory  -->

<!-- Generated in 0.129864 seconds by CMS Made Simple using 6 SQL queries and 3551736 bytes of memory  -->

yes, that's SIX queries and under 3.5mb ram....

(note this is a 'static' web site, so caching everything is no big deal.. i set the lifetime real high and will just clear the cache manually on content changes during this little experiment)


(note mysql server does not reside on 'localhost', so part of that 0.12 is latency across the lan..)

EDIT.. this little scheme has basically been obsoleted by my full-page caching mod:
http://forum.cmsmadesimple.org/index.php/topic,23244.0.html

[Pierre M.]

Has someone tried a somewhat benchmark (features and performance) with :
-this hack from kermit, (@kermit : I like to have CSS as real static files, but managed from CMSms)
-the ccache module from cyberman,
-the out of the box current CMSms v1.0.4 behind an apache mod_cache reverse caching proxy,
-the integrated "full page caching" of CMSms v2.0, already in SVN ?
I'm just curious and looking for 2.0. 304 smiles to everybody !
Pierre M.

[biffs]

So the full page caching is already in the svn?

[Pierre M.]

Yes, full page caching is already in the svn according to my understanding of this :
http://blog.cmsmadesimple.org/2007/02/08/20-needs-your-help/

Pierre M.

[Gregor]

When using

Code:

{ccontent lifetime='3600'}

in the template, the Guestbook module gives an error:

string(127) "Smarty error: [in content:content_en line 1]: syntax error: invalid attribute name: '

The url is: http://www.uisge-beatha.eu/index.php?page=gastenboek

Anyone else who encountered this problem?

Thanks,
G

[cyberman]

Maybe there's a bug so I have to rewrite ccontent now (write it to my todo list) ...

[Gregor]

oopps, hd to clear the cache first. Error is gone after doing so 

[Gregor]

By using cstylesheet and ccontent, I noticed that Album is having troubles. Only the album thumbnails are shown, however clicking a thumbnail does not show the pictures laying under that specific thumbnail. I've cleare the cache oevr and over, but that did not solve the problem. Anyone else who recognize this issue?

[henrik]

This is my solution:

I created a new directory in the CMSMS base directory and named it "stylesheet".
I copied the stylesheets from the administration area into some files.
They start with the media and end with ".css".
These are the contents:

Code:

handheld.css
print.css
screen.accessibility-and-cross-browser-tools.css
screen.module.news.css
screen.navigation.simple-vertical.css
screen.standard.css

Then I created a user tag called "static_stylesheet":

Code:

$dir = dir('stylesheet');

while ($file = $dir->read()) {
    if ($file{0} == '.') continue;
    if (!preg_match('/\.css$/i', $file)) continue;

    $media = preg_replace('/^([^\.]+)\..*$/', '\1', $file);
    echo "<link rel='stylesheet' type='text/css' media='$media' href='stylesheet/$file' />\n";
}

Then I replaced {stylesheet} by {static_stylesheet}.

And it works

Henrik

[Gregor]

Thanks Henrik,

This takes some more time for me to realise. Have a look at it later.

Gregor

[mww]

This is my solution:
...
 {static_stylesheet}.

This is good. You could even take this a step further and use gzip compression on each of the css files inside your stylesheet directory.

First rename your stylesheets with a .php instead of .css
Then add this php code to the top of the sheet

Code:

<?php 
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " . 
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>

Here's an article that talks about this:
http://www.fiftyfoureleven.com/weblog/web-development/css/the-definitive-css-gzip-method