Magento Speed and Performance

Magento is one of the most flexible open-source e-commerce applications that comes with lots of desirable features for shopping-cart sites. However, due to these various functionalities, its performance can be a major issue.

Magento provides helpful resources in its blog and forum to improve performance including database tuning and server configuration modification. But in many cases, these performance enhancements should be done through system administrators of your hosting company or would work only when you have a dedicated server. Read more about Magento Performance Improvement.

An easier way to improve Magento website speed is to turn on GZip compression via .htaccess. GZip compression is a kind of technique to compress textual content when it’s transferred from the web server to a user’s browser.

A single web page from a Magento site can be a few hundreds KB -one of my site shows its homepage size is 500KB when Yahoo homepage is 200KB! (you can check this by clicking Information View Document Size from FireFox developer’s tool bar.)

GZip compression can reduce page size significantly and transfer the data faster to your site visitors.
The files that can be compressed are text files such as XHTML, JavaScript or CSS. Image, video or other multi media files are already compressed.

Find the section for “mod_deflate.c” from your .htaccess file and uncomment the settings as follows:

<IfModule mod_deflate.c>
############################################
## enable apache served files compression
## http://developer.yahoo.com/performance/rules.html#gzip

# Insert filter
SetOutputFilter DEFLATE

# Netscape 4.x has some problems…
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Don’t compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

# Make sure proxies don’t deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>

############################################
## enable resulting html compression

php_flag zlib.output_compression on

Notes:

  • Some older browsers might not have issues with compressed content. Use specific rules for those browsers.
  • It will add some CPU loads to compress texts when transferred. But compression is still regarded worthwhile because of its trade-off - speed boost.

Change Order of Blocks - ‘before’ and ‘after’ attributes

Use ‘before’ and ‘after’ block attributes to change the order of blocks. You can set the position of a block within a structural block by assigning the name of another block to either ‘before’ or ‘after’ attribute.

For example, if you’d like to put ‘Product Viewed’ box below ‘Cart’ box on the right menu, you can define the layout XML files as follows:

in catalog.xml
<reference name=”right”>
<block type=”reports/product_viewed” before=“cart_sidebar” name=”reports.product.viewed” template=”reports/product_viewed.phtml”/>

</reference>

You can define block position at the very top or bottom by using before=”-” or after=”-”.

Magento CSS Ordered / Unordered List Style in Product Description

Depending on your theme, lists of product short description may appear without any type as in “list-style: none”. This happens when the default list style is defined ‘none’. Make sure you define list styles separately for product short description, category description or other areas for such styles as a disc or an image.

The fix will look like this:

.short-description ul li { list-style-type: disc; list-style-position: inside; }
.short-description ul li { list-style-type: disc; list-style-position: inside; }

Magento & Wordpress Integration

Magento is a well architectured, open-source e-commerce platform that are widely used these days. It has many professional and flexible functionalities, but one of the lacking features is a blogging tool. Its CMS is suitable to write static pages for websites, not for blogging. But there is another great open-source blogging software that is loved by numerous bloggers, WordPress. Integrating these two tools is not generally a big issue.

There are a couple of ways to integrate Magento e-commerce store with WordPress blog.

- You can install Magento plug-in to integrate WordPress. This extension allows you to manage both the store and the blog on the same interface. However, it seems some users have experienced difficulties to make it work especially when they use a customized / non-default theme. Download WordPress integration plug-in: Magento Extension - Wordpress Integration

- Another way is to install both of them separately and modify .htaccess file(s) so that they won’t have conflicts.

One of the most common fixes of .htaccess related issues is to define RewriteBase in one of the .htaccess files.

Let’s say I’ve already installed my Magento store on ‘http://www.mystore.com’ and now I want to install WordPress blog to ‘http://www.mystore.com/blog/’.

Most likely, I don’t need to modify Magento .htaccess file. But I need to define RewriteBase and change RewriteRule appropriately in WordPress .htaccess file as follows.

# BEGIN WordPress
RewriteEngine On
RewriteBase /blog/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /blog/index.php [L]
# END WordPress

Magento - Homepage Not Using Three Column Layout

Do you see the two column layout being used for your homepage even when the three column layout is defined as the default layout in *page.xml? It’s probably because the homepage is set to use the two column layout in CMS.

  • Go to CMS -> Manage Pages.
  • Find a page whose identifier is ‘home’ and click on it.
  • Make sure the homepage that you enable uses 3 columns. You can update this by clicking Custom Design from the left menu.
    Magento Log Cleaning

It’s a nice feature that you can easily edit the homepage through CMS and you can assign a particular layout for each CMS page.