Slow Speeds and Speeding up Concrete5 5.4

CMS, Web Development, Work

*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

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

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 – (cut and paste from here):

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

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

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: , , ,

17 Comments

  1. joe says:

    are you sure that the v=6a090ad0238723 thing in the javascript urls are tied to the concrete5 version number? I thought they only changed when a newer version of concrete was released?

  2. defunct says:

    I think they are tied to the Concrete5 release, however for whatever reason those files with the “v” variable are never cached by the browser. Another thing I don’t know is why they load very very slow.

  3. defunct says:

    Sorry guys hard disk died on the server, which could possibly explain why nothing ever got cached for me, I will update the article soon to show proper results.

    Lost your comments Andrew sorry :( Feel free to repost.

  4. Mnkras says:

    Great job Defunct ;) it does speed it up!

  5. RiotAJ says:

    Love this tweak in order to get jQuery from Google’s CDN.

    One note is that it will break the “Layout” functionality built into the recent versions of Concrete5 for users that are not logged in; however, if you want to get the layout function to work, simply insert the if ($u->isRegistered()) { AFTER ccm.base.css. Should look something like this:


    $this->addHeaderItem($html->css('ccm.base.css'), 'CORE');
    if ($u->isRegistered()) {
    $this->addHeaderItem($html->javascript('jquery.js'), 'CORE');
    $this->addHeaderItem($html->javascript('ccm.base.js'), 'CORE');
    } else {
    echo '';
    }

    Hope that helps. Cheers folks,

    -Adam

  6. RiotAJ says:

    Looks like this site’s editor stripped the script tag referencing the Google CDN (after echo “…) when I posted that last comment. See the main post for the script tag reference.

  7. Omar says:

    I am using Concrete5 latest version.

    When I tried your code above 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 ‘’;
    }
    I am getting an error referring to this line echo ‘’;

    It says string cannot reading!

  8. defunct says:

    @Omar

    That’s not my code, why are you echoing nothing?

    if you just want to hide the concrete5 jquery/css you don’t need the else statement.

  9. Omar says:

    that how is written the code above!

  10. defunct says:

    @Omar

    No it’s not…read it again


    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 ‘’;
    }

  11. defunct says:

    hrmm it’s filtering the script tag out in the comment. Now I see the problem. It’s certainly written different at the top and should work. The problem you’re having is probably wordpress is converting the double quotes.

    Here this should work for you: http://pastie.org/1437404

  12. RiotAJ says:

    Use this link to get the correct code from my above comment:

    http://pastie.org/1438763

    This will enable you to use the CDN in conjunction with “Layouts” in C5. That said, Defunct’s code will work if you don’t use layouts at all.

  13. Rafael says:

    I was having trouble with Godaddy.com server loading a client’s website slow.
    This code really helped a lot.

    You also kinda killed the need to purchase they CDN add-on.
    Saved me some money.

    Thanks for tut.

  14. Rodney says:

    In the examples above be careful of the difference between the quotes used eg:
    1. $this->addHeaderItem($html->css(‘ccm.base.css’), ‘CORE’);
    2. $this->addHeaderItem($html->css(‘ccm.base.css’), ‘CORE’);
    In line 1, the quote characters are ‘xxxxx’ and in line 2 the quote characters are ‘xxxxx’.
    If you look VERY closely there is a difference. In the line 1, the ‘’ quotes are accepted by php on an Apache host but they fail in php on a shared windows IIS host.
    So if your site editing (tinyMCE) gets broken on Windows IIS after using this patch, just change the quote characters.

  15. defunct says:

    @Rodney I added a cut and paste link that goes to here since wordpress is butchering my code formatting: http://pastie.org/1437404

  16. Rodney says:

    Mmm I see this blog engine changes the quotes so they all look the same. What you need is two ordinary straight quotes ( '' ) , not open quote, close quote.

  17. defunct says:

    Have a look it converted what you wrote as well, that’s normal for wordpress.

    Anyway the pastie link is there for a plain text cut and paste.

Leave a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>