Serving Magento Media Images From A Sub-Domain

back to tech articles
| 15th May 2014
Magento 1.8.1.0 CE, CentOS 6.5 64-bit

One of the most important things when developing with Magento is reducing the page load times. Today I’m going to show you a quick and relatively simple tweak to drastically improve catalog performance, especially on category-type pages.

Most speed-test services will promote the use of parallelization on your site. It’s a big word, but a simple concept. Browsers limit the number of downloads that happen at the same time from the same domain (in parallel). A common solution would be to use a professional CDN. Instead, we’re going to setup a free alternative to the traditional CDN, and use it to serve our product images from a sub-domain.

What you will need:

  • A subdomain for your TLD. cdn.domain.com for example.
  • Access to your server, and the ability to create symlinks.
  • Access to the Magento Admin Panel.

Magento

First off, let’s set Magento to handle this new location. In the admin panel, navigate to System > Configuration > [General] > Web. You need to change the setting for the Base Media URL in both sections titled Unsecure and Secure. Update the value to point to your subdomain, using a fully qualified path:

1
2
Change {{unsecure_base_url}}media/ to http://cdn.domain.com/media/
Change {{secure_base_url}}media/ to http://cdn.domain.com/media/

If you are using https, your secure media path will need to use https as well.

Web Server

I’m going to assume you know how to setup the sub-domain, or that you already have one. Now we need to point that puppy to our ahem CDN. I’m a huge fan of the nginx web server, so here’s my conf file, which is running on nginx 1.4.3:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
server {
    listen 80;
    server_name cdn.domain.com;
    root /var/www/html/domain.com/cdn;

    location = /favicon.ico {
        try_files $uri =204;
    }

    location ~* \.(jpe?g|gif|css|png|js|ico|pdf|zip|tar|t?gz|mp3|wav|swf)$ {
        expires 7d;
        open_file_cache max=1000 inactive=5m;
        open_file_cache_valid 60m;
        open_file_cache_errors on;
    }

    location ~ /\.ht {
        deny all;
    }

    location /media {
        deny all;
    }
}

Chop and change as you see fit. I’m also making use of nginx’s ability to act as a caching engine; extremely cool for this type of setup. Save that in your server’s config directory (/etc/nginx/sites-enabled/cdn.domain.com.conf, for example), and restart the server.

1
$ /etc/init.d/nginx restart

The Server

If we left things as they stand now, Magento would serve our images from the /var/www/html/domain.com/cdn directory, although nothing exists there right now. However, uploads would still be sent to our Magento directory. We need to fix that.

We’ll be using a symbolic link to achieve this. I’m assuming a Magento installation path of /var/www/html/domain.com/magento.

1
2
3
4
5
$ cd /var/www/html/domain.com/cdn
$ ln -s /var/www/html/domain.com/magento/media /var/www/html/domain.com/cdn/media
$ ls -l
drwxr-xr-x jason jason 39 May 15 12:00 media -> /var/www/html/domain.com/magento/media
$

Our symbolic link is done, and so are we. You just setup your own poor man’s CDN! If you want to see the benefits of your hard work, the caches need to be flushed and you’ll need to re-index the server. Here’s my own method:

1
2
3
4
$ rm -r /var/www/html/domain.com/magento/var/*
$ rm -r /var/www/html/domain.com/magento/media/catalog/product/cache
$ cd /var/www/html/domain.com/magento
$ php shell/indexer.php --reindexall

Your images will be now served from http://cdn.domain.com/media, in parallel, drastically improving the catalog performance. Coffee break!