Optimise Magento CSS & JavaScript Links
This post has been updated – You can see the new version here
Things in life are much better when they’re local. A local supermarket is better than one 10 miles away. A local pub is even better than that. These values should also be applied to Magento websites, though I wouldn’t recommend building websites in the pub… Following on from Luci’s excellent post about making the CSS and JavaScript links local, I’d like to show an alternative which does exactly the same thing. Why you ask? Only a very small reason I answer. Running a str_replace command on a file that is loaded directly on the frontend by the server will slow the load time, though only fractionally. The way round it is to carry out the hacks at an earlier stage, deep in the murky depths of the Magento core PHP…
1. Find the file: app > code > core > Mage > Page > Block > Html > Head.php
2. Copy this file into your local directory (app > code > local > Mage > Page > Block > Html > Head.php)
This local file will now be given priority over the core file. Remember to never change core files!
3. Open this file and go to line 248. Remember this line number may change in future versions, anyway you’re looking for this line of code:
$items[$params][] = $mergeCallback ? Mage::getBaseDir() . DS . 'js' . DS . $name : $baseJsUrl . $name;
Simply change the part where it says $baseJsUrl to ‘/js/’, so your new line of code will look like this:
$items[$params][] = $mergeCallback ? Mage::getBaseDir() . DS . 'js' . DS . $name : '/js/' . $name;
4. Now shoot your way up to line 220, time to reposition our str_replace. Find the line which looks like this:
return $html;
Just wrap the str_replace around the html variable, which is responsible for bolting your domain URL onto the front of your CSS links.
return str_replace("http://www.domain.co.uk/", "/", $html);
5. You now need to create a new function which will be used for the canonical link tags, which looks like this:
public function getOtherHeadLinks()
{
// separate items by types
$lines = array();
foreach ($this->_data['items'] as $item) {
if (!is_null($item['cond']) && !$this->getData($item['cond']) || !isset($item['name'])) {
continue;
}
$if = !empty($item['if']) ? $item['if'] : '';
$params = !empty($item['params']) ? $item['params'] : '';
switch ($item['type']) {
default:
$this->_separateOtherHtmlHeadElements($lines, $if, $item['type'], $params, $item['name'], $item);
break;
}
}
// prepare HTML
$html = '';
foreach ($lines as $if => $items) {
if (empty($items)) {
continue;
}
if (!empty($if)) {
$html .= '<!-- [if '.$if.']-->'."\n";
}
// other stuff
if (!empty($items['other'])) {
$html .= $this->_prepareOtherHtmlHeadElements($items['other']) . "\n";
}
if (!empty($if)) {
$html .= '<!--[endif]-->'."\n";
}
}
return $html;
}
6. In the getCssJsHtml function remove the following lines (conveniently named ‘other stuff’:
// other stuff
if (!empty($items['other'])) {$html .= $this->_prepareOtherHtmlHeadElements($items['other']) . "\n";
}
if (!empty($if)) {
$html .= '<!--[endif]-->'."\n";
}
Now you’ve separated the canonical links tag and the CSS/JS into different functions. Remember to call this new function in your head.phtml file:
<?php echo $this->getOtherHeadLinks() ?>
You’ll be left with links in your header that are much shorter and neater thus improving your website’s overall SEO. Thanks for reading the Magento blog at Ecommerce Web Design. If this blog post has helped, or there’s something you’d do differently, let us know by posting a comment below!
