I have found it difficult to get a good performance level out of a simple local installation on OS X 10.5.x – not helped by a multitude of issues getting PHP setup and running with the required modules for Magento.

However… I do have a remote Magento server running with a UK hosting company which is lightning fast with very little modification whatsoever. The key to it seems to be three-fold:

1. Server Specification

Magento is a pretty processor-intensive and memory-intensive application so having a server that can handle this is a good start. The specification for my development server is:

• Dell R200, Dual Core Xeon, 2.33GHz, 4MB Cache
• 2GB DDR2 RAM
• 2 x 160GB SATA Hard Drive 7200RPM
• Software RAID1

On the face of it this seems like a fairly meaty server but it’s relatively inexpensive – it costs under £100 per month from Melbourne Hosting in Manchester who I would highly recommend.

2. Server Configuration

I am by no means a Linux expert and don’t pretend to be but found that by following some pretty straightforward advice from Varien I was able to significantly improve the database element of the setup. There is already plenty of detail on this subject – this article is a good place to start – particularly the my.cnf modifications.

In addition, the recommendations in that article to install a PHP opcode cache and use a memory-based file system for /var/cache are recommendations you should seriously consider.

3. Website Configuration

Out of the box, the Magento front-end isn’t particularly quick – even with the Blank interface as a starting point (you are creating your own interface based on the Blank interface, right?). The main culprit here is Prototype & Scriptaculous – they are bulky frameworks and are included uncompressed. Magento funnels these files through a PHP conduit to compress them in to a single file but in my opinion that still isn’t ideal – you are just giving your server more work to do.

Web servers like Apache are brilliant at serving static files – so let them serve static files.

On most sites I build using Magento, I choose not to use the included javascript framework files but instead to roll my own. I have found the best way to do this is to create a packed version of the latest Prototype file and then a minified version of the Scriptaculous files and the various Magento specific javascript files. (For some reason when I packed the Scriptaculous and Magento/Varien-specific files I had some issues).

The result is my typical javascript usage is something like this:

<script type="text/javascript" language="javascript" src="/skin/frontend/[theme]/default/js/framework.pack.js"></script>
<script type="text/javascript" language="javascript" src="/skin/frontend/[theme]/default/js/application.min.js"></script>

Even though I have two javascript calls rather than one in the standard Magento configuration, the improvements in speed are huge – largely because Apache is doing what it does best – serving a packed, gzipped static file.

I will write up point 3 in more detail at some point when I have more time as it’s quite an involved process to determine which files you need and which you don’t and of course it varies depending on the site configuration, multi-language requirements etc. however the key points to take away for the amateur performance tweaker are:

• Don’t use an under-specced machine – it will be painful.
• Do follow Magento’s basic performance advice – it makes a big difference.
• Do maximise the efficiency of your front-end javascript and CSS

There is no silver bullet for perfect performance – but the advice above will certainly point you in the right direction.

Thanks to Jude at Packt Publishing for the review copy!

Many may question the amount of code required to develop Magento – particular given the fact that it’s often quoted how Ruby on Rails and Django based applications can do the same or more than PHP/ASP.NET type applications with a fraction of the lines of code. However nobody can question the huge amount of effort that Varien have poured in to an open source platform. Roy did not provide any figures on the cost of developing the application and the community framework around it however on these numbers it’s not unreasonable to think that Varien’s investment is comfortably in to seven figures.

With these kind of figures in mind, it’s not unreasonable to recognise that Varien need to shift their focus to selling and supporting the Enterprise Edition if they are to continue with their amazing contribution to open source.

In the example below I will simply be extending the navigation class to create a slightly modified version of the drawItem class which Magento uses to draw out the main menu. This modified version will be free of the javascript calls and spans of the original to enable me to provide a cleaner HTML output.

There are 4 basic steps in the process:

1. Create a PHP file for the extended class in the /local code repository
2. Create an XML file to let Magento know about this extended class
3. Create a PHP template to utilise the output of the extended class
4. Modify the XML layout files to bring in this new template

1. Create a PHP file for the extended class in the /local code repository

In this case I have taken the existing Magento drawItem function and modified it to create a cleaner output and renamed it drawItemClean. This file should be saved to /app/code/local/Magetips/Catalog/Block/Navigation.php – note you should use whatever name you prefer for your modifications. I have placed all of my modifications in a namespace called Magetips for convenience.

<?php
/**
 * Magetips Layout Modifications
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is available online at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 *
 * @category   Magetips
 * @package    Magetips_Layout
 * @author     Simon Young
 * @copyright  Copyright (c) 2009 Simon Young (http://magetips.com)
 * @license    http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 *
 * LEGAL DISCLAIMER
 *
 * Please note particularly the disclaimer in section 8 of Open Software License ("OSL") v. 3.0
 *
 * Limitation of Liability. Under no circumstances and under no legal theory, whether in tort
 * (including negligence), contract, or otherwise, shall the Licensor be liable to anyone for
 * any indirect, special, incidental, or consequential damages of any character arising as a
 * result of this License or the use of the Original Work including, without limitation, damages
 * for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other
 * commercial damages or losses. This limitation of liability shall not apply to the extent
 * applicable law prohibits such limitation.
 *
 * EXTENSION INFORMATION
 *
 * This extension creates an additional function to enable the generation of a 'clean'
 * main navigation structure - i.e. removing class names and javascript calls from default
 * Magento drawItem function
 *
 **/

class Magetips_Catalog_Block_Navigation extends Mage_Catalog_Block_Navigation
{

    public function drawItemClean($category, $level=0, $last=false)
    {
        $html = '';
        if (!$category->getIsActive()) {
            return $html;
        }
        if (Mage::helper('catalog/category_flat')->isEnabled()) {
            $children = $category->getChildrenNodes();
            $childrenCount = count($children);
        } else {
            $children = $category->getChildren();
            $childrenCount = $children->count();
        }
        $hasChildren = $children && $childrenCount;
        $html.= '<li';
		$html.= ' id="nav-'.str_replace('/', '-', Mage::helper('catalog/category')->getCategoryUrlPath($category->getRequestPath())).'"';
        $html.= ' class="level'.$level;
        if ($this->isCategoryActive($category)) {
            $html.= ' active';
        }
        if ($last) {
            $html .= ' last';
        }
        if ($hasChildren) {
            $cnt = 0;
            foreach ($children as $child) {
                if ($child->getIsActive()) {
                    $cnt++;
                }
            }
            $html .= ' parent';
        }
        $html.= '">'."\n";
        $html.= '<a href="'.$this->getCategoryUrl($category).'" title="'.$this->htmlEscape($category->getName()).'">'.$this->htmlEscape($category->getName()).'</a>'."\n";

        if ($hasChildren){

            $j = 0;
            $htmlChildren = '';
            foreach ($children as $child) {
                if ($child->getIsActive()) {
                    $htmlChildren.= $this->drawItemClean($child, $level+1, ++$j >= $cnt);
                }
            }

            if (!empty($htmlChildren)) {
                $html.= '<ul class="sub-nav" id="sub-nav-'.str_replace('/', '-', Mage::helper('catalog/category')->getCategoryUrlPath($category->getRequestPath())).'">'."\n"
                        .$htmlChildren
                        .'</ul>';
            }

        }
        $html.= '</li>'."\n";
        return $html;
    }

}

2. Create an XML file to let Magento know about this extended class

Once you have extended the base class you need to let Magento know about this when it is loading the framework. To do this you create an XML configuration file which should be saved to /app/etc/modules/Magetips_Layout.xml – remember the name will depend on the namespace you have chosen for your code modifications.

<?xml version="1.0"?>
  <config>
    <global>
      <blocks>
        <catalog>
          <rewrite>
            <navigation>Magetips_Catalog_Block_Navigation</navigation>
          </rewrite>
        </catalog>
      </blocks>
    </global>
</config>

This file basically tells Magento you have a local modification for Catalog Navigation and it will find and execute your Navigation.php file from step 1.

3. Create a PHP template to utilise the output of the extended class

Once the new function is available we can either modify the existing Magento template to output the results of the new function or add a new custom template for maximum flexibility. The location of the file will depend on the interface and theme in use – in our case the location is /design/frontend/blank/default/template/catalog/navigation/custom-home.phtml

<?php
/**
 * NOTICE OF LICENSE (MIT License)
 *
 * Copyright (c) 2009, One Eighty Studios Limited
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * This license is also available online at:
 * http://opensource.org/licenses/mit-license.php
 *
 * DISCLAIMER
 *
 * This code has been tested against Magento v1.3.1
 * This code may not function as intended in future versions of Magento.
 * If you wish to customize Magento for your needs please refer
 * to http://www.magentocommerce.com for more information.
 *
 **/
?>

<div id="nav-home">
    <ul id="cat-nav">
    <?php foreach ($this->getStoreCategories() as $_category): ?>
        <?php echo $this->drawItemClean($_category) ?>
    <?php endforeach ?>
    </ul>
</div>

This code will output our categories into a pre-prepared unordered list and nest subcategories within further child ul tags. You will still need to apply some CSS to match your site design however this code will provide the perfect clean base – I then customised this further with Son of Suckerfish CSS-only dropdown menus which is outside the scope of this initial article.

4. Modify the XML layout files to bring in this new template

Finally with all of the code in place we need to add a reference to the appropriate layout XML file to ensure it is shown in the front end of the website. In our case we want the new clean menu to be shown on all pages where a left hand menu exists and so we add the code below to /design/frontend/blank/default/layout/page.xml. Again, your file location will vary depending on where you wish to display your new menu but you should add it inside your existing block for the area of the page you wish to edit.

  <reference name="left">
    <block type="catalog/navigation" before="-" name="catalog.custom-left" template="catalog/navigation/custom-left.phtml" />
  </reference>

These four steps enable you to generate a modified menu function by extending an existing Magento class whilst avoiding modifying your core installation – therefore keeping your base installation easily upgradeable. The same concepts can be applied to extending any other area of Magento once you have found the correct base class to extend.

If you have any suggestions for changes/improvements to this method please feel free to add these in the comments.

I’m currently building a new ecommerce stored based on the latest version of Magento. Whilst the navigation options available surpass most other products on the market there are still the occasional problems to deal with. I found that in some scenarios I wanted to display subcategories in the main body of a category page rather than them being restricted solely to the navigation bar.

This is particularly useful if you have a main level category with many subcategories and don’t wish to have a random selection of products or a more standard static block to be displayed if a customer lands on the main category.

The code is simple to implement though it’s not guaranteed to work with future versions of Magento – hence the MIT license designation. The website I’m working on is still under development so there is no example of this modification however the Gist below includes all of the code required to get up and running.

Click here for the full details at the Magento site.