8 Easy Ways to Improve Magento Site Speed

Ensuring that your Magento eCommerce website is performing optimally is important, not only to yourself as an owner, developer, and/or other stakeholder, but also to your users and customers.  Better performing and faster Websites lead to happier users.  When a site responds slowly, visitors spend less time on that site – that is less of their time at your Webstore looking at products and making purchases! In 2009, Google and Bing, together, examined how site speed and performance related changes impacts end-users. 

Among their findings, they determined that:

  • Delays of under even just half-a-second can negatively impact business metrics
  • The costs of persistent delay and slow performance increases over time
  • “Heavy”-weighted pages impact click metrics negatively
  • Server-side delays have significant negative impacts

magento

Related: Understanding Page Speed and Server Response Times with Magento

In short, it is desirable to decrease the time it takes a visitor to your site to click on what they want.  Increased latency leads to an increase in site usage abandonment – or when an end-user decides to stop interacting with your site before they find what they are looking for.  This, ultimately, leads to dissatisfaction among your customers.

With this in mind, there are a handful of simple solutions you can realize right now to help increase your Website’s speed, improve its performance, and enhance the end-user experience for your customers.

1. .htaccess Optimizations | Enable Apache Served Files Compression (GZip)

This technique will enable the Apache HTTP Server mod_deflate module, which through its DEFLATE output filter will compress common text-based content types (including HTML, plain text, XML, CSS, and JavaScript elements) from your server before being served to the client’s browser over the network.  This results in a smaller and more efficient download size, often achieving compression rates as high as 70-90% for larger files.  To enable this file compression, simply uncomment the following lines within your .htaccess file (or, add them if not already present):

<IfModule mod_deflate.c>
############################################
## enable apache served files compression
## http://developer.yahoo.com/performance/rules.html#gzip
# Insert filter on all content
SetOutputFilter DEFLATE
# Insert filter on selected content types only
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript
# 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>

2. .htaccess Optimizations | Add Default Expires Header

Web browsers make use of a cache to reduce the number of HTTP requests required to download a page and render it; thereby enabling those cached Web page elements to load faster on subsequent visits.  Browsers make use of Expires headers to determine for how long a component can be cached.  We recommend the following settings:

<IfModule mod_expires.c>
############################################
## Add default Expires header
## http://developer.yahoo.com/performance/rules.html#expires
ExpiresActive On
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/plain "access plus 15 day"
ExpiresByType text/html "access plus 1 second"
ExpiresByType text/css "access plus 1 day"
ExpiresByType text/javascript "access plus 1 day"
ExpiresByType application/x-shockwave-flash "access plus 1 day"
ExpiresByType application/x-httpd-php "access plus 1 second"
</IfModule>

3. Magento Configuration Settings | Merge JavaScript and CSS Files

merge js and css

Here, we are going to combine and minify our JavaScript CSS files.  Ultimately, what this means is that your customers’ Web browsers would need to make fewer connections to your Web server and thereby download less data when visiting your Magento store.  This leads to a more responsive, faster, and user-friendly experience for your customers.  To enable this feature, in your Magento Admin Panel, navigate to “System > Configuration > Advanced > Developer” and ensure that the “Merge Files” option under both “JavaScript Settings” and “CSS Settings” is set to “Yes”.  Now, click on the “Save Config” button to save your changes.

cssjs_merge

4. Magento Configuration Settings | Use Flat Catalogs

Magento makes extensive use of an “Entity Attribute Value” (or EAV) data model.  For the purposes of flexibility and efficiency, Magento stores all category and product data across multiple database tables.  By enabling the use of flat catalogs, all of that catalog data across multiple tables is aggregated into a single ‘flat’ table to conserve on SQL queries when Web pages are being served.

Flat Categories are recommended for any Magento installation to help improve performance.  Flat Products, however, are beneficial only in instances where there is a very large catalog of products in use (i.e., thousands of SKUs).

To enable the use of flat catalogs, in your Magento Admin Panel, navigate to “System > Configuration > Catalog > Catalog” and ensure that either or both “Use Flat Catalog Category” and “Use Flat Catalog Product” options are set to “Yes” under the “Frontend” section as desired.

flat_catalog

5. Optimize Images

Images are often the leading culprit for consuming the largest proportion of Webpage content.  While larger Webpages, “heavy” with bloated image files to download, take longer to load and hurts performance for all users.  Mobile customers in particular are especially impacted by the prevalence of large images.  The Etsy marketplace, for example, found that eliminating just 160 kilobytes of an image’s weight reduced mobile bounce rates by 12%!

Images that are too large, not compressed enough, or have too high of a quality setting can have a direct impact on the loading of your site and your customers’ experience.  Avoid this costly mistake by making use of the following tips:

  • Eliminate unnecessary image resources
  • Leverage CSS3 effects wherever possible
  • Use Web fonts instead of encoding text in images
  • Remove unnecessary image metadata
  • Serve scaled/resized images at “display size”; larger assets are an unnecessary overhead
  • Compress images with the right format at the lowest acceptable quality level (~75%)
  • Save your images with progressive encoding to improve user perception of load times
  • Crop/trim unnecessary additional pixels from your images (e.g., padding or white-space)
  • Save images “for the web” in your graphics editor of choice

Related: 10 Simple Steps to a Magento Enterprise Edition Install

6. Use a Content Delivery Network (CDN)

A content delivery network is a large distributed system of servers that stores files and Web content closer to the user requesting them.  The closer, geographically, the CDN server is to a user, the faster that content will be delivered to the end-user.  A CDN helps to reduce server load, by distributing static content like images, CSS files, or JavaScript files.  This is especially appropriate for Magento, given the multitude of category and product images available for display.

This is an effective method of increasing the speed of delivery for Web content on high-traffic or globally serving eCommerce stores.  Using a CDN also offloads some of the stress and workload from your own server – which leads to less processes being required per customer, reducing your bandwidth costs and improving your response times.

While selecting and implementing a CDN for use with Magento is beyond the scope of this article, for ease of use, be sure that your CDN service allows for caching control.  The purpose of using a CDN on your Magento store is to serve content to your customers with high availability and high performance.

7. Magento Cache Storage

Using Magento’s built-in cache management system is an easy and effective way to improve the performance of your Website.  The system consists of several different cache types:

  • System and module configuration files
  • Page layout building instructions
  • HTML output
  • Language translation files
  • Files that contain data that is the result of a query
  • Attribute entities, types, and values
  • Web Services definition files

It is recommended to enable caching of all available cache types on a Production environment.  The benefit of enabling caching is that it eases the load on the Webserver by serving cached elements from the file system, when available, instead – thereby, speeding up your site.

In addition, if you are on the Magento Enterprise platform you have an additional cache type at your disposal – Full Page Cache.  Through full page caching, Magento can load content for a user, from cache, without having to fully initialize the Magento application.  An entire previously rendered Webpage can be cached to a temporary container for later use.  This helps to alleviate bandwidth usage, CPU load, memory consumption, database stress, and perceived lag by the end-user.

Related: Understanding Full Page Cache in Magento Enterprise

8. Reduce Web Server Logging

Ensure that any of your active in-house or third-party Magento modules and extensions are not set to use a “Debug Mode” or similar while on your Production environment.  If you are not currently testing the module, please consider disabling such modes.  These “debug” modes often include additional logging functionality that frequently write to files on your server.  Disabling these methods can reduce the disk write load on your server.


The impact of Site Speed

Speed, as observed by visitors to your Website, is how quickly results are returned and how long it takes their Web browser to display the content for them.  It is especially important to maintain a consistent degree of speed across your entire site as when a user’s experience is negatively impacted, even if briefly, it takes them longer to return to their previous usage level upon returning to a faster state.

Improving your Website’s speed does not only improve the customer experience of your eCommerce store, but also helps to reduce its operating costs.  Having speed on your side is definitely a competitive advantage.  Facilitating increased site usage indicates more satisfied users and, ultimately, customers.

Related: Magento Layout XML Action Method Reference List