Minify Textpattern CSS for speed

admin-ajax

Textpattern CSS typically uses cascading stylesheets to style its text output to the browser. These styles should ideally be located in files rather than inline as this ensures the browser render runs smoothly. In an ideal world, styles should be in as few external files as possible to reduce http requests. Textpattern CSS is stored in one file by default, and the styles are presented for relatively easy modification by way of the Admin → Presentation → Styles tab in the admin-side.

When you’re happy with your styles as they are, you can further speed up the loading of your page(s) by minifying the CSS; that is to say, the comment and white space will be trimmed back, the size of the CSS ruleset will be smaller and as a result your pages will load in a shorter time. The default CSS for Textpattern 4.5.7 runs to around 35KB, plus a further 1.5KB for the Internet Explorer fallback CSS. Both of these files include helpful comments and advisories if you’re modifying and learning, but they can be trimmed back to save space. In my experience, the most straightforward way of changing nicely-formatted CSS into something a browser can process more quickly is to minify it. If you want a web-based minify tool, check out CSS Compressor (http://csscompressor.com). There are many compressors around on the web, find one that works for you because they all do pretty much the same thing.

Standard issue Textpattern CMS looks like this:

/* ==========================================================================
Styling and layout for all media
 ========================================================================== */
/* HTML5 display definitions
 ========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
/* 1 */
display: inline-block;
/* 2 */
vertical-align: baseline;
}

Lots of comments, lots of line breaks – it’s easy to interpret and read, but can be shrunk down considerably with a compressor. Copy and paste the CSS rules from your Textpattern site into your CSS compressor of choice and note the difference in the output:

article,aside,details,figcaption,figure,footer,header,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}

No comments, no line breaks, and it’s much neater overall. You might think it’s uglier, but your browser doesn’t care. Copy and paste the compressed code into Admin → Presentation → Styles and click or tap Save. If I do this on the standard issue Textpattern 4.5.7 styles, it reduces the CSS payload size from 35KB to 15KB. That’s less than half its original size.

Looking for quality Textpattern Hosting? Look no further than Arvixe Web Hosting and use coupon TEXTPATTERN for 20% off your first invoice!

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 *