Skip to main content
Blog Magento

Best practices for Magento Speed Optimization

Gopal Masilamani
June 9, 2014 |
Magento Speed Optimization

My previous article, E-Commerce and Web-performance, details about how the performance of your eCommerce application is a key factor in becoming a leader in the eCommerce space. It is very important that you have a website which loads faster.

Magento is a heavy eCommerce CMS system, it is resource intensive. There are a number of options available to make your e-Commerce application incredibly faster.

Minimize size of the file transfer between the browser and web server

A useful approach to reducing the latency and showing significant performance improvement is by decreasing the size of the file transfer between the browser and the web server.

Minify JavaScript and CSS:

Compacting the JavaScript and CSS can save many bytes of data and reduce downloading, parsing and execution time. Several tools are freely available to minify JavaScript and CSS like, YUI Compressor, JSMin and cssmin.js

Image Optimization:

Choose an appropriate image file format and compressing the images using image compressor is essential to reduce the bandwidth between the browser and web server. There are various image compression tools available online such as; Smush.It, jpegtran, OptiPNG and PNGOUT.

Vitalibis

Enable GZIP compression

You can significantly reduce the number of bytes sent over the network by using GZIP to compress the resources.  This enables the compression of HTML, CSS, and JavaScript files sent over the network in a more compact form, by cutting down the size by up to 70%, and enables to reduce the download time tremendously.

Minimize the number of HTTP Requests

Statistics have shown that the average attention span for adults is eight seconds long.  Therefore, it can be argued that load time, is one of the instrumental pieces to the success of your website. Reducing the of HTTP requests as much as possible is critical to improving the page load time of the web page. There are several methods available that will help reduce HTTP requests and still maintain a high-quality web page.

Merge CSS & JavaScript:

By merging the CSS and JavaScript, the HTTP round trip time can be reduced. This is now default feature that was built-in to 1.4 version of Magento, as well as the ones that followed.

Activo.com explains how these steps can be followed in this step by step instruction; “to turn this on, go in the Magento Admin Panel to “System” > “Configuration”, from the left navigation panel, click on “Developer” link from the “Advance” panel (all the way at the bottom). Look for the two tabs “Javascript Settings” and “CSS Settings” and select “Yes” for the Merge files options in both.”

Combine images using CSS sprites:

By using CSS sprites, a larger number of images can be combined into as few files as possible. It can reduce the request overhead and decrease the total number of bytes downloaded by a webpage.

Use of Image maps:

Images maps can be used to combine multiple images into a single image. Even though the overall size may be the same, it can help reduce the number of HTTP requests. However, Image maps are only appropriate to use if the images are adjacent to each other in the page.

Expires Headers or Cache control headers                     

By using the expire headers or cache control headers, the number of HTTP requests and its size can be condensed to make the web page load faster. The Expires header specifies a date after which a resource is invalid. At that point, the browser will once again ask for the resource. Max-age works much the same way but it specifies how long a resource is after it is downloaded instead of giving a specific date. These features are great because you can configure your web server with a constant value.

Enable Apache Keep Alives

Even though HTTP connections are default persistent (keep-alive enabled), this is not true while using shared hosting environments or web servers that may close connections. Hence, it is important to enable the Apache KeepAlives to improve the communication between web server and the web browser.

Reduce the number of DOM elements

A high number of DOM elements make the page more complex and increases the size. Consequently, the increase in download time and slower access to JavaScript makes the webpage load slower. Investigate the options to reduce the number of DOM elements. There are free tools available like DOM Monster to analyze your page and provide suggestions for improvement.

The screen shots below were taken using the DOM Monster tool. The first is an example of a  healthy web page with a low number of DOM elements.

Below is an example of unhealthy web page with a high number of DOM elements and large in size.

Yahoo YSlow recommends that, “a great help with layouts are the YUI CSS utilities: grids.css can help you with the overall layout, fonts.css and reset.css can help you strip away the browser’s defaults formatting”.

Place CSS calls at the top and Java Scripts at the bottom

Always place CSS calls at the tip and Java Scripts at the bottom. It helps to increase the progressive rendering in many browsers, thus increasing load speed of the web page.

Implement all necessary Caching mechanisms

Enable all magento caching mechanism

Enable all of the available cache from the admin panel (System –> Cache Management). Refer to Magento – Wiki for more information on cache management.

Implement opcode cache mechanism

PHP is an interpreted language. This means that each time a PHP generated page is requested, the server must read the various files needed and “compile” them into something the machine can understand (opcode). Magento often has hundreds of included files in a single request, meaning some real savings can be made.

If you are using PHP version 5.5 and above, these versions come with a built-in “Zend OPcache”, which provides the user with a faster PHP execution through the use of opcode caching and site optimization. However, if you are using earlier versions, it is essential to implement the opcode cache mechanism to improve the performance of your web page.

There are many opcode caches available (APC, accelerator, xcache, etc) which can be used with Magento. The article from the Engine Yard Developer Center is an informative piece that helps you understand the OpCode Caches.

Enable Memcache mechanism

“Memcached is a high-performance, distributed memory object caching system, generic in nature, but originally intended for use in speeding up dynamic web applications by alleviating database load.” – http://memcached.org/about.

This caching mechanism helps improve Magento’s heavy hits on your database by caching data away from it. Magento supports Memcached out of the box but by default it is not enabled. You’ll need to enable Memcached via its configuration file, start the service, and restart Apache.

Implement Redis cache

There are problems while implementing TwoLevels Cache Backend(i.e. to use Memcache together with the database). Redis is an appropriate alternative to resolve this problem. “Redis is an Open Source, BSD licensed, advanced key-value store. It is often referred to as a data structure server since keys can contain strings, hashes, lists, sets and sorted sets.”

There are many benefits provided by Redis for Magento implementation. For this reason, it is considered as one of the superior and most efficient caching mechanisms.

The following Magento editions support Redis session and back end caching:

  • Enterprise Edition (EE) 1.13 and later
  • Community Edition (CE) 1.8

Implement Varnish caching

Varnish is a HTTP accelerator; it can act as a load balancer and a fail-over system. It will cache the generated HTML from a page, and serve it to a user rather than making a call to the Magento Framework. Hence, it can decrease the first byte load time and increase the response time tremendously.

Enable MySQL query caching

MySQL has its own “query cache”, which is quite helpful to optimize the MySQL performance. Basically, the MySQL stores the query text and its results in its cache. When the identical query is fired, irrespective of the session, the results are made available rather quickly from this cache.  It helps build the dynamic pages and content while significantly improving the performance.

Use a Content Delivery Network(CDN)

CDN helps reduce the load on the web servers, by serving the static content like images, CSS files or JavaScript files through a network of servers, which may be closely located to your customers. A CDN can really improve the user experience on the web site.

Manage the performance from the administration panel

Keep logging turn off

Magento logging mechanism is turned on by default. As any other logging mechanism, it is resource intensive.  It can simply be turned off from the admin panel.

Activo.com provides the following instructions to this mechanism; “In the Magento Admin Panel go to “System” > “Configuration”, from the left panel choose “Advanced” from the “Advanced” Panel at the bottom left. Look for the module “Mage_Log” and set it to ‘disable’ and save.”

Turn Compilation On

Magento version 1.4 and above have the Turn Compilation On option available and turned on by default. According to Magento ” this option allows you to compile all files of a Magento installation in order to create a single include path to increase performance”.

To enable, in the Magento Admin Panel,  go to “System” > “Tools” > “Compilation” and click on the “Run Compilation Process” button.

In order to use this tool, the directory includes and the file includes/config.php must both be writeable.

Enable Flat Categories and Products

Magento internally uses the EAV database model. For example, each product or category information is stored in multiple tables. Hence, each time a product or category page is requested, a big join query is made to gather all of the pieces of information and build the web page. By enabling the Flat Catalog, it allows these pages to be built by using a single DB query from a single DB table. This significantly reduces the performance bottleneck of loading a product/category page.

In the Magento Admin Panel go to “System” > “Configuration”, choose “Catalog” from the “Catalog” panel. Expand the top panel which should say “Frontend” and at the bottom you should see two options “Use Flat Catalog Product” and “Use Flat Catalog Category”. Set both to Yes.

Conclusion:

Performance optimization is a never ending task. It is not necessary for you to use all of the above techniques to improve the performance of your eCommerce application. By using the necessary tools and techniques, we can help improve the performance of your eCommerce application.

DCKAP has extensive experience in e-Commerce and Magento performance improvement. We have experienced developers whose primary focus is performance and consumer satisfaction. We have performed Magento e-commerce website development, maintenance and performance tuning to key Magento ecommerce websites (featured on Magento.com) and kept them on top of their sales performance capabilities.

Please read our case studies to know more about our work.

References

Gopal Masilamani

More posts by Gopal Masilamani