Recent Comments
Tags
Categories
- CMS (9)
- Design (2)
- Languages (1)
- Life (2)
- Travel (1)
- Uncategorized (2)
- Web Development (9)
- Work (6)
*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.
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:
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>’;
}
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.
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
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?
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.
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.
Great job Defunct
it does speed it up!
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
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.
I am using Concrete5 latest version.
When I tried your code above
if ($u->isRegistered()) {I am getting an error referring to this line$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 ‘’;
}
echo ‘’;It says string cannot reading!
@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.
that how is written the code above!
@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 ‘’;
}
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
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.
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.
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.
@Rodney I added a cut and paste link that goes to here since wordpress is butchering my code formatting: http://pastie.org/1437404
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.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.