Ten Textpattern Tips, #8: Speed Up Your CSS Loading


In this article, I’ll be showing you how to decouple your cascading style sheets (CSS) from the Textpattern CMS database and subsequently speed up delivery of them.

Textpattern CMS serves up cascading style sheets from its database, along with articles, language strings and other things. There are pros and cons to this method: from a portability standpoint it’s really easy to just scoop up all your stuff and transfer it to another Textpattern installation, for example. You want to back up your posts, sections, and such? No problem, they’re all in one place – and if the backup process is easier, you’re more likely to do it, right?

This single point of access has some drawbacks, though. If you’re serving a page on a Textpattern website, there’s a lot happening with database access – page scaffolding to build the blocks, CSS to style them, article content being retrieved, forms being processed to display these articles, and lots more. While Textpattern is less database intensive than some other CMSes, there’s scope to take some of the load off of the database by serving CSS from static files.

Out of the box, CSS is served from the following URL:

<link rel="stylesheet" href="http://example.com/css.php?n=default">

That’s a PHP file being called, which in turn queries the database for a style sheet called default. The default stylesheet is around 27kB at present, and that can be easily offloaded to a static file instead To decouple the stylesheets, there are a few options you can consider:

  • manage your own external stylesheet and edit it manually
  • use the rvm_css plugin to serve external CSS stylesheet and edit it from the Textpattern administration interface

Personally, I prefer the first option as I can use my own text editor and set up CSS caching on my terms. The second option is an excellent choice if you’re moving beyond the administration interface for the first time and want to speed up your load times.

In the first example, creating an external stylesheet is as straightforward as copying the style contents to a file. So, I’ll do that. I’ll create a file in the root of my website called default.css and copy the style contents verbatim. Now the new file is in place, I need to switch the URL of the CSS. In the page templates, look for this line:

<txp:css format="link" media="" />

Now, this code instructs Textpattern to query the CSS associated with the section and then output it. My example site uses one stylesheet, so I can switch that line with this one:

<link rel="stylesheet" href="http://example.com/default.css">

This will load the default.css file in place of the associated stylesheet. The association you have in Presentation -> Sections really doesn’t matter if you’re serving up external files. In the case of having purely external stylesheets, I usually create a blank stylesheet called ‘placeholder’ and use that in Presentation -> Sections; sections need to be associated with a style, but don’t _have_ to use it, which can be confusing at first.

You can make the default load faster still by minifying it – that is, removing the line breaks and other unnecessary characters. If you intend to edit your CSS on an ongoing basis, I recommend you edit the non-minified version and then cook up a smaller, minified version each time you push changes to your site. Refresh-SF is a reliable and efficient CSS compressor that I like, and it’s easy to use. Paste your style into the window, and then compress it.

At the current time, the 27kB default stylesheet can be minified to 16kB – representing a 40% saving on file size. Saving this minified CSS file as default.min.css in the root of the site will remind you that it’s a minified version of default.css. Update your pages to load the minified CSS – find this line:

<link rel="stylesheet" href="http://example.com/default.css">

…and switch it to this:

<link rel="stylesheet" href="http://example.com/default.min.css">

Done. Congratulations, you just took a chunk of database work out of the equation and reduced the load weight of your website pages by a considerable margin.

Next time I’ll show you have rvm_css does its thing and bridges the gap between the administration interface and external loading. I do hope you’ll join me.

Looking for quality Textpattern Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , , , , , , , , , | Posted under Textpattern | RSS 2.0

Author Spotlight

Pete Cooper

Pete Cooper has been using Textpattern since 2005. Textpattern is his preferred CMS weapon of choice. Its logical and flexible approach to content management makes Pete happy, as does its lightweight core and helpful user community. Pete's website - petecooper.org - runs on top of Textpattern and chronicles his day-to-day experiences from his home near the Atlantic in north Cornwall, United Kingdom.

Leave a Reply

Your email address will not be published. Required fields are marked *