Speeding Up Magento – Merging Asset Files

by: Andrew Clark

Recently here at Oozle Media we moved one of our Magento websites to its own server. We took the opportunity to do some optimizations that would increase the performance and scalability of the website. While Magento is a great platform, it is not known for its speed. There are, however, many things you can do to speed it up without throwing more hardware at the problem. While I won’t go into great depth here about what we did, I thought I would highlight one small tweak that can greatly increase the speed of your website without having to modify the configuration of your web server.

Merging CSS & Javascript Files

A default installation of Magento contains many CSS and Javascript files that will all be included in the head section of your pages. Magento has a built-in feature that allows you to merge these files together and therefore reduce the number of HTTP requests that need to be made every time a page is requested. Here’s how you do it:

1. Login to the admin
2. Go to System -> Configuration -> Developer
3. On the right side you’ll see two sections: JavaScript Settings and CSS Settings
4. Under each of these sections, you’ll see the option to merge these files by changing No to Yes
5. Click Save Config at the top right
6. Refresh your cache if you have it enabled under System -> Cache Management (don’t forget the "Flush JavaScript/CSS Cache" button)

HTTPS Issue

One strange side effect of this change is that some of your background images may now be requested by Magento with https rather than http. When https is used, the server and the visitor’s browser will spend additional time on encryption. As it turns out, this only happens to background images that are listed in your CSS files with a relative path. Relative paths are those that look something like this:

background-image: url(../images/body-bg.gif);

or simply:

background-image: url(body-bg.gif);

This odd effect will only happen if you have an https URL specified as your Secure Base URL in Magento’s configuration and if you have the "Use Secure URLs in Frontend" setting turned on. In order to prevent Magento from converting these URLs into https versions, replace them with absolute paths like so:

background-image: url(/skin/frontend/mytheme/default/images/body-bg.gif);

Magento will then generate the correct version of the URL for the http or https environment that the visitor is currently in.