Slow Speeds and Speeding up Concrete5 5.4

*UPDATE: Read the comments, the server hard drive was dying and that is the reason why files were never being cached. However these methods will still help speed your concrete5 website up.*

If you’re using the new Concrete5 5.4.x package you may have noticed your website has slowed down  from previous versions. After doing some NET tests with Firebug we can see where the bottleneck presents itself.

Default Concrete5 5.4 Speeds

After examining the chart you can see that loading Concrete5′s jquery takes up the most time per page, at over 1 second in this case.  Under normal circumstances we could live with this as it will get cached next load, let’s click on the page again:

Cached load of Concrete5 5.4

As we can see, ccm.base.css, jquery.js and ccm.base.js are being loaded every single time a page load is executed. These files seems to load insanely slow, especially the extra second it takes to load jquery. My theme is currently not editable, which slows down your site even more, causing more CSS files to be loaded every page load. The CSS files being loaded in this example are only needed when you are logged in editing pages and do not need to be loaded on the front-end.

Your tests may very depending your server setup, location from server and of course your template itself, but in the end this may be overhead you don’t need, so let’s speed up concrete5 page loading.

If you do not need jquery at all you can follow this guide on the Concrete5 website. This will stop jquery and all the non needed CSS files from loading in your front-end giving your website a snappy boost. If you do need jquery, I recommend loading it directly from google’s servers. This can speed up performance significantly and allows for actual file caching.

1. Copy concrete/elements/header_required.php into your local elements/ directory.
2. Open the file and find these lines:

$this->addHeaderItem($html->css(‘ccm.base.css’), ‘CORE’);
$this->addHeaderItem($html->javascript(‘jquery.js’), ‘CORE’);
$this->addHeaderItem($html->javascript(‘ccm.base.js’), ‘CORE’);

3. Replace them with the following, loading jquery direct from Google’s servers and not using their API for better performance:

if ($u->isRegistered()) {
$this->addHeaderItem($html->css(‘ccm.base.css’), ‘CORE’);
$this->addHeaderItem($html->javascript(‘jquery.js’), ‘CORE’);
$this->addHeaderItem($html->javascript(‘ccm.base.js’), ‘CORE’);
} else {
echo ‘<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>’;
}

Results of our modifications

Non-cached load after Concrete5 modifications

Already we have taken our page load down a bit from 2.68 seconds to 2.41 seconds. Compare Concrete5′s 1.16 second jquery loading to Google’s 91 millisecond time. A significant difference. Now let’s compare a cached page load.

Cached page load after Concrete5 modifications

At last, a full page cache! Compare this from our previous cache test of 1.55 seconds to our new 619 milliseconds!

Tags: browser cache, CMS, concrete5, optimization