Ten Textpattern Tips, #5: Deflate Your Pages and Cut Load Times


Textpattern CMS is often used for websites where there’s a considerable amount of text content that needs to be managed for consumption on the front end. Page load times are important, especially with the prevalence of mobile browsers around the world. To that end, it’s often beneficial to reduce the amount of time it takes for your website pages to load in a browser. One of the ways this can be achieved is to deflate the text components of your site. In order to show you the difference in performance, I’m going to use an A/B example of before and after a deflate has been applied.

Before I do that, however, it’s important you know that the content of your pages, forms, articles and so forth will not be modified. The configuration change to enable deflation takes place outside the Textpattern interface. A hidden file in the root of your Textpattern installation called .htaccess is where changes will be made. This file can be edited on Arvixe Shared, VPS and Dedicated hosting without any known issues. In the unlikely event a problem arises, you can quickly and easily undo the changes you made.

I’ll be checking the two main text components served from a Textpattern default installation: a rendered front page, and the associated CSS. Using Textpattern version 4.5.5, the file sizes reported in my browser are:

/ = 9.79KB
/css.php?n=default = 26.71KB

This example uses an independent website – http://www.whatsmyip.org/http-compression-test/ – to check for compression. Using the same 2 URLs from my browser test, they are reported by the compression test website as:

/ = 9.8KB
/css.php?n=default = 26.7KB

Both about the same as my own browser and, crucially, both URLs are reported as not compressed. I can see that my browser is requesting compressed content if it exists, so I’m going to make life easier for everyone else using compression-aware browsers and deflate my text. If I apply the deflate configuration, the differences in size are considerable. The same website now recognises that both URLs are compressed, and reports much smaller file sizes:

/ = 3.3KB
/css.php?n=default = 5.9KB

I’ll save you the calculations and tell you the good news: prior to deflation being enabled, the reported combined size of the two files was 36.5KB. Now, with some easily-copied text, it’s 9.2KB. There is inevitably some additional overhead in each A/B case, but the deflated version is approximately 25% of the size. The browser will inflate the deflated files, so the source code appears the same in both situations. Your users will be able to check if your content is compressed by looking in the browser inspector, should that kind of thing be important to them.

Here’s how it’s done. Make a safe backup of your existing .htaccess file, and then add the following lines to the end of the .htaccess on your site:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

You don’t need to reboot your server or do anything fancy – your Textpattern website will now be serving up compressed (deflated) text.

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

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 *

6 × 6 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>