Concrete5 is a powerful, flexible and yet easy-to-use Open Source Content Management System (CMS). These days we have seen an increase of clients switching their Wordpress and Drupal sites to use Concrete5, mostly for its user-friendly interface and tools, which takes out a lot of the guess work for clients trying to manage their own sites.
If you are anything like us, you have tested out and taken full advantage of the caching features that Concrete5 provides to assist in keeping your website loading quickly and keeping performance at an optimum level.
However, while Concrete5 has done a great job on their optimizations, there is always room for improvement. Here we are going to show you how to add some additional optimizations that we use to really increase the performance of the system and most importantly the website for its end-users. Lets get started!
For the purposes of this tutorial, we are going to show you how to implement these optimizations through cPanel. If you do not manage your web hosting account through cPanel, the concepts can still be adopted for most systems.
Step 1: Bigger Is Not Always Better
When it comes to sending the display to your site visitors, the smaller the data, the faster things can load. This is where we introduce the use of GZIP Compression for your content.
From your cPanel Main Page, you will want to select the Optimize Website option, which usually is under the Software/Services category.
Once you have the Optimize Website page loaded, you will want to ensure that you set your Compress Content setting to Compress All Content. Then click Update Settings to save your changes.
Step 2: Controlling the Compression
Here is where we need to dig a little deeper to make the magic happen. You will need to access your .htaccess file in the directory in which your Concrete5 website was installed. With cPanel you can use the File Manager to access your .htaccess file for your Concrete5 installation.
You will want to add the following to your .htaccess file:
<IfModule mod_deflate.c> # Force compression for mangled headers. # http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping <IfModule mod_setenvif.c> <IfModule mod_headers.c> SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding </IfModule> </IfModule> # Compress all output labeled with one of the following MIME-types # (for Apache versions below 2.3.7, you don't need to enable `mod_filter` # and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines # as `AddOutputFilterByType` is still in the core directives). <IfModule mod_filter.c> AddOutputFilterByType DEFLATE application/atom+xml \ application/javascript \ application/json \ application/rss+xml \ application/vnd.ms-fontobject \ application/x-font-ttf \ application/x-web-app-manifest+json \ application/xhtml+xml \ application/xml \ font/opentype \ image/svg+xml \ image/x-icon \ text/css \ text/html \ text/plain \ text/x-component \ text/xml </IfModule> </IfModule>
Step 3: Let Web Browsers Do Some Work Too
One of the things that Concrete5 does is tells browsers not to cache anything. While this is great for allowing their caching system to do the heavy lifting, having to fully load all images and stylesheets on every page load really hits the performance of a website in a negative way.
The way to tackle this is by setting some rules that will allow the web browsers to handle some of the heavy lifting by allowing them to cache some content types. Simply add the following to your .htaccess file and adjust the settings as you see fit for your setup.
<IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 month" # CSS ExpiresByType text/css "access plus 1 year" # Data interchange ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" # Favicon (cannot be renamed!) ExpiresByType image/x-icon "access plus 1 week" # HTML components (HTCs) ExpiresByType text/x-component "access plus 1 month" # HTML ExpiresByType text/html "access plus 0 seconds" # JavaScript ExpiresByType application/javascript "access plus 1 year" # Manifest files ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" ExpiresByType text/cache-manifest "access plus 0 seconds" # Media ExpiresByType audio/ogg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # Web feeds ExpiresByType application/atom+xml "access plus 1 hour" ExpiresByType application/rss+xml "access plus 1 hour" # Web fonts ExpiresByType application/font-woff "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" </IfModule>
Summary
The previous optimizations will work for most hosted setups, however each web hosting setup is different and you may need to speak with your Server Administrator to tackle some of this work.
We have implemented these website performance enhancements on several Concrete5 websites and it has dramatically improved their performance. We continue to look at new ways to enhance the end-user experience and as we find additional performance enhancements, we will be sure to keep you informed.