<h3 class="resources-page-subtitle">Magento at Speed</h3>
<p>Though increasing the performance of e-commerce websites is not specific to Magento, our community does know that there are specific challenges that Magento sites encounter. In this blog, we want to focus on <i>ten key techniques where we can increase the performance</i> of our Magento site, both with techniques common to any e-commerce site and those specific to Magento.</p>
<p>Let’s start by understanding just how important e-commerce website performance—or, <i>site speed, as we will call it is</i>. The obvious impact of speed that we encounter is our frustration or satisfaction quotient for a website. This is the visceral stuff, the things that we can relate to, but your site’s speed can impact a variety of things that impact your success.</p>
<p><strong>Page Speed vs. Site Speed</strong></p>
<p>Let’s take a moment to clarify <i>site speed</i> from <i>page speed</i>—it may be obvious, but let’s make sure we are clear about the meanings of each phrase. This article is talking about site speed which occurs as a person journeys through your site (e.g. buying a blouse).</p>
<p>This may include using site search, loading a category page, opening a product details page, adding to the cart, and checking out. Each part of the journey involves loading, and perhaps waiting, for individual pages—<i>page speed</i>¬—whereas the overall experience across the combined pages is <i>site speed</i>.</p>
<p><strong>Site Speed’s Impact</strong></p>
<ol style="font-size: 18px;">
<li><strong>SEO Rankings.</strong> Google has declared that site speed is a factor in page rankings (<a target="_blank" href="http://bit.ly/2V9aQJx">http://bit.ly/2V9aQJx</a>). They state that “Site speed reflects how quickly a website responds to web requests”. How important is this to page rankings? It does not carry as much weight as page relevance, but it clearly is important to Google, as it affects how many pages they can crawl and how much time they need to budget to your site, versus another company’s faster site.</li><br>
<li><strong>Mobile SEO Rankings.</strong> Do you want Google not to ignore your mobile website? Doing that became more challenging starting July 2018 when Google promised only to de-rank the “pages delivering the slowest experience.” Slowest compared to who?<br><br><strong>By 2021, mobile e-commerce sales are expected to account for 54% of the total e-commerce sales. (eMarketer)</strong><br><br>Not having your mobile web page appear while someone, who is on their way home in the subway is using Google to search for their next big (or small) spend, can really impact sales.</li><br>
<li><strong>Conversion Events.</strong> Probably the most significant conversion event is getting a person to come to your site and keeping them there long enough to take them to the next conversion event in the journey.<br><br><strong>9.6% of people bounce when page speed is 2 seconds or slower. (section.io)</strong><br><br><strong>32.3% of people bounce when page speed is 7 seconds or slower. (section.io)</strong><br><br>Just remember their first experience with your site maybe their last if the initial page load takes too long to maintain their attention and patience.</li><br>
<li><strong>Customer Experience.</strong> Perhaps the most important impact that site speed can have is the customer’s perception of their experience, which affects their experience of your brand. How bad can it be? Google states that more than half of people coming to your site will bounce after 6 seconds—that’s quite bad.<br><br><strong>70% of consumers admit that page speed impacts their willingness to buy from an online retailer (Unbounce)</strong><br><br>Poor site performance affects both the immediate decisions people make—<i>like bouncing from the site</i>—and affects their long-term impressions of your brand, possibly keeping people from returning.</li>
</ol>
<h3 class="resources-page-subtitle">10 Ways to Satisfy the Need for Speed</h3>
<ol style="font-size: 18px;">
<li><strong>Latest Magento Version.</strong> New release will have performance enhancements that can be put to work. Magento provides step-by-step instructions on upgrading your implementation (<a target="_blank" href="http://bit.ly/2Wknu4T">http://bit.ly/2Wknu4T</a>).</li><br>
<li><strong>Content Delivery Network (CDN).</strong> Using a CDN with Magento can provide one of the easiest ways to increase performance. This is particularly important if you are planning to support customers buying from within international markets.<br><br>CDNs cache your pages on ‘edge servers’ that are located across the world—basically making a copy of your pages that are served regionally, closer to the person requesting them. This eliminates the need for your page to travel around the world, or even across the country.</li><br>
<li>
<strong>Magento Caching.</strong> Caching is what the CDN does globally, but caching in this case, is within your Magento instance and the systems it depends upon. System-level caching can occur using multiple techniques, some of which are easier to implement than others, most will improve the performance of your Magento instance, all will address shortfalls of Magento.<br><br>The following are the categories of stores and caching that can be employed, along with the typical solutions that provide them.<br><br>
<ol type="a">
<li>
<strong>Cache Backend.</strong> This is the core, in-built cache that Magento uses, in which many people replace the default file-based cache with the one that is memory based.<br><br>
<ol type="i">
<li>Files (Core) Default</li>
<li>Memcache (Core)</li>
<li>APC (Core)</li>
<li>Redis (<1.9 module courtesy Colin Mollenhour)</li>
<li>MongoDB (module courtesy Colin Mollenhour)</li>
<li>Rubic (module courtesy Daniel Sloof)</li>
</ol>
</li><br>
<li>
<strong>Session Store.</strong> This is the in-built session store that Magento uses, in which many people replace the default file-based cache with the one that is memory based.<br><br>
<ol type="i">
<li>Files (Core) Default</li>
<li>Memcache (Core)</li>
<li>APC (Core)</li>
<li>Redis</li>
<li>MongoDB</li>
<li>Rubic</li>
</ol>
</li><br>
<li>
<strong>Opcode Cache.</strong> This cache stores precompiled script bytecode in shared memory, thereby removing the need for PHP to load and parse scripts on each request.<br><br>
<ol type="i">
<li>APC</li>
<li>XCache</li>
<li>Eaccelerator (PHP <5.4)</li>
<li>Zend OPCache (PHP >5.4)</li>
</ol>
</li><br>
<li>
<strong>Full Page Cache.</strong> This cache stores fully generated web pages, which reduces the need to run blocks of code and retrieve information from the database. This reduces the demands on both Magento and the database.<br><br>
<ol type="i">
<li>EE FPC</li>
</ol>
</li><br>
<li>
<strong>Reverse Proxy Cache.</strong> This cache intercepts HTTP requests to the web server. If the request is not found in the cache, it will get it from the web server, otherwise the cache will serve the content.<br><br>
<ol type="i">
<li>Varnish</li>
<li>NGIX</li>
</ol>
</li><br>
</ol>
</li>
<li><strong>Flat Catalog Module.</strong> Enable the Flat Catalog module for products and categories in the Magento Admin Panel. People have seen significant performance improvements by turning on this feature, especially on large catalogs.<br><br><img width="100%" alt="Configuration" src="https://gspann.cdn.prismic.io/gspann/21b4fd6dab34ea70015f6539f4f3200dea9a0f38_configuration.png" /><br><em>Picture1: Flat Catalog Module</em></li>
<br>
<li>
<strong>Image Optimization.</strong> The image weight is the product of the image resolution and its color density (i.e. 256 colors, 16 million colors), or image resolution (i.e. total number of pixels) multiplied by the color density (i.e. total number of colors).<br><br>
The goal is to reduce the weight of an image. Reducing the weight reduces the image loading time and therefore improves the page loading and website performance perception. In addition to the human experience, Google and other search engines look for images’ sizes and total page weights that are appropriate for the type of device being targeted.<br><br>
Here are three areas of image optimization to consider.<br><br>
<ol type="a">
<li><strong>Optimize Image Size.</strong> Reduce the image size for your target use (i.e. Length x Height in pixels)—why use the same large 1080 x 768 image for your hero and your thumbnail? Reduce the image size for small target uses.</li>
<li><strong>Optimize Color Density.</strong> Reduce the color density—can you get away with 32-bit (16M colors), 7-bit (128 colors), 5-bit (32 colors) and maintain the same perceived image quality?</li>
<li><strong>Optimize the File Format.</strong> Select the best file format—GIF, PNG, JPEG—for your needs.</li>
</ol><br>
Google has some great detailed guidance on an image optimization strategy worth reviewing (<a target="_blank" href="http://bit.ly/2Wj5MyA">http://bit.ly/2Wj5MyA)</a>.
</li><br>
<li><strong>Merge and Minify JavaScript and CSS.</strong> Both Magento 1 and 2 have facilities to merge JS and CSS files, while Magento 2 has the additional capability to minify those files.<br><br>
<strong>Merging Files in Magento 1</strong><br><br><img width="100%" alt="Merging Files in Magento 1" src="https://gspann.cdn.prismic.io/gspann/c8c3ccfa2a44b9f74c0d8d0e61647352f3b05efa_merging-file-in-magento-1.png" /><br><em>Picture2: Merge and Minify JavaScript and CSS</em><br><br>For Magento 1, we suggest taking the additional step of minifying your JS, CSS, and potentially your HTML, to gain the benefit of both a reduced number of files and file size. Here are some tools that you can find on the Magento Marketplace to assist in minification:<br><br>
<ol type="a">
<li>Apptrian Minify</li>
<li>Amasty Minify JS-CSS-HTML</li>
</ol><br>For Magento 2, the ability to merge and minify your code is built into the solution.<br><br>
<img width="100%" alt="Merging CSS in Magento 2" src="https://gspann.cdn.prismic.io/gspann/b2b614fcd271fe81ee755d2f087e06f09d15a419_merging-css-in-magento-2.png" /><br><em>Picture3: Merging CSS in Magento 2</em><br><br><img width="100%" alt="Merging JavaScript in Magento 2" src="https://gspann.cdn.prismic.io/gspann/58ad42da4340321bb0d4dc2089daa6e9d62119ce_merging-javascript-in-magento-2.png" /><br><em>Picture4: Merging JavaScript in Magento 2</em>
</li><br>
<li>
<strong>Magento Compiler.</strong> The compilation process can improve the performance of a Magento 1.x installation by combining separate files from various modules into a single file. Note—the compiler is disabled by default, therefore you must explicitly turn it on and perform the compilation to take advantage of it. Doing this can speed up the store by 10%-20%.<br><br><img width="100%" alt="Magento Compiler" src="https://gspann.cdn.prismic.io/gspann/4fc925abba17fc01c44db4bf18ed741312584f77_magento-compiler.png" /><br><em>Picture5: Magento Compiler</em>
</li><br>
<li>
<strong>MySQL Optimization.</strong> Your MySQL database is your primary persistent datastore for information used by Magento. With that, it also can become a bottleneck when your Magento store is retrieving data that it needs to present a particular page—particularly if that page has not been recently requested and is therefore not recently cached, forcing Magento to make a request to the database.<br><br>To reduce the time to request information from MySQL, there are several optimizations available.<br><br>
<ol type="a">
<li><strong>Update the MySQL Version.</strong> Just as with Magento, make sure your MySQL instance is on the latest version. Take advantage of any of the current performance improvements to the platform.</li><br>
<li><strong>Download and Run MySQLTuner.</strong> This utility (MySQLTuner) will review a MySQL instance and adjust variables that affect performance and stability. Two configuration variables to pay special attention are MySQL Table Cache Hit Rate (table_cache) and Table Open Cache (table_open_cache).<br><br>The <i>Table Cache Hit Rate</i> should get as close to 100% as possible, meaning that as with other caches, Magento can pull from the cache before MySQL needs to pull from disk.<br><br>The <i>Table Open Cache</i> indicates the maximum number of tables the server can keep open in any one table cache instance. Ideally, you would set to re-open a table as infrequently as possible, but that will be dependent on the volume of data and requests.
</li>
</ol><br>
MySQL has its own optimizations that will require a person that is familiar with them. We recommend hiring a person or working with a consultant who specializes in managing and optimizing MySQL to get it properly tuned for your needs.
</li><br>
<li>
<strong>Apache Alternatives.</strong> Apache is not your only choice for a webserver. Others, like the LiteSpeed, offer a 50% performance increase for PHP application and is up to 6x faster than Apache serving static content. There are several very good alternatives, some of which are very fast.<br><br>
<ol type="a">
<li><strong>LightTpd.</strong> Lighttpd is a small, lightweight web server which has a low memory footprint and light CPU load. Lighttpd is a good alternative to serve static content but it has also gained recognition in the Ruby on Rails and PHP communities. (<a href="http://www.lighttpd.net/">www.lighttpd.net</a>)</li><br>
<li><strong>NGINX.</strong> Nginx is a lightweight web server and reverse proxy. Nginx is known for its stability and simple configuration in addition to its low resource consumption. (<a href="http://www.nginx.net/">www.nginx.net</a>)</li><br>
<li><strong>LiteSpeed.</strong> LiteSpeed is a commercial web server designed specifically for large websites. One of LiteSpeed’s advantages is that it can read Apache configurations directly which makes it easy to integrate with existing products to replace Apache. The server is lightweight and fast. (<a href="http://www.litespeedtech.com/">www.litespeedtech.com</a>)</li><br>
<li><strong>Zeus.</strong> Zeus web server is a high-performance web server. Zeus is a highly flexible enterprise product. (<a href="http://www.zeus.com/products/zws">www.zeus.com/products/zws</a>)</li>
</ol>
</li><br>
<li><strong>Fast Host.</strong> An obvious, but often overlooked speed solution is finding a faster web hosting firm. Do your research—find out what people are saying about these hosts. Stay away from the low-cost providers, there is a reason they are. Find the organizations with good reputations—see what the larger Magento users rely on.</li>
</ol>
<p>There are more than ten optimization techniques, but these here will provide a lift in speed, and therefore, increased sales, customer satisfaction, and growth for your brand.</p>
GSPANN for Adobe
10 Ways to Speed Up Magento Sites
Are you facing any challenge in your Magento website? Learn about key optimization techniques that you can implement in your Magento site to increase sales and customer satisfaction.
Though increasing the performance of e-commerce websites is not specific to Magento, our community does know that there are specific challenges that Magento sites encounter. In this blog, we want to focus on ten key techniques where we can increase the performance of our Magento site, both with techniques common to any e-commerce site and those specific to Magento.
Let’s start by understanding just how important e-commerce website performance—or, site speed, as we will call it is. The obvious impact of speed that we encounter is our frustration or satisfaction quotient for a website. This is the visceral stuff, the things that we can relate to, but your site’s speed can impact a variety of things that impact your success.
Page Speed vs. Site Speed
Let’s take a moment to clarify site speed from page speed—it may be obvious, but let’s make sure we are clear about the meanings of each phrase. This article is talking about site speed which occurs as a person journeys through your site (e.g. buying a blouse).
This may include using site search, loading a category page, opening a product details page, adding to the cart, and checking out. Each part of the journey involves loading, and perhaps waiting, for individual pages—page speed¬—whereas the overall experience across the combined pages is site speed.
Site Speed’s Impact
SEO Rankings. Google has declared that site speed is a factor in page rankings (http://bit.ly/2V9aQJx). They state that “Site speed reflects how quickly a website responds to web requests”. How important is this to page rankings? It does not carry as much weight as page relevance, but it clearly is important to Google, as it affects how many pages they can crawl and how much time they need to budget to your site, versus another company’s faster site.
Mobile SEO Rankings. Do you want Google not to ignore your mobile website? Doing that became more challenging starting July 2018 when Google promised only to de-rank the “pages delivering the slowest experience.” Slowest compared to who?
By 2021, mobile e-commerce sales are expected to account for 54% of the total e-commerce sales. (eMarketer)
Not having your mobile web page appear while someone, who is on their way home in the subway is using Google to search for their next big (or small) spend, can really impact sales.
Conversion Events. Probably the most significant conversion event is getting a person to come to your site and keeping them there long enough to take them to the next conversion event in the journey.
9.6% of people bounce when page speed is 2 seconds or slower. (section.io)
32.3% of people bounce when page speed is 7 seconds or slower. (section.io)
Just remember their first experience with your site maybe their last if the initial page load takes too long to maintain their attention and patience.
Customer Experience. Perhaps the most important impact that site speed can have is the customer’s perception of their experience, which affects their experience of your brand. How bad can it be? Google states that more than half of people coming to your site will bounce after 6 seconds—that’s quite bad.
70% of consumers admit that page speed impacts their willingness to buy from an online retailer (Unbounce)
Poor site performance affects both the immediate decisions people make—like bouncing from the site—and affects their long-term impressions of your brand, possibly keeping people from returning.
10 Ways to Satisfy the Need for Speed
Latest Magento Version. New release will have performance enhancements that can be put to work. Magento provides step-by-step instructions on upgrading your implementation (http://bit.ly/2Wknu4T).
Content Delivery Network (CDN). Using a CDN with Magento can provide one of the easiest ways to increase performance. This is particularly important if you are planning to support customers buying from within international markets.
CDNs cache your pages on ‘edge servers’ that are located across the world—basically making a copy of your pages that are served regionally, closer to the person requesting them. This eliminates the need for your page to travel around the world, or even across the country.
Magento Caching. Caching is what the CDN does globally, but caching in this case, is within your Magento instance and the systems it depends upon. System-level caching can occur using multiple techniques, some of which are easier to implement than others, most will improve the performance of your Magento instance, all will address shortfalls of Magento.
The following are the categories of stores and caching that can be employed, along with the typical solutions that provide them.
Cache Backend. This is the core, in-built cache that Magento uses, in which many people replace the default file-based cache with the one that is memory based.
Files (Core) Default
Memcache (Core)
APC (Core)
Redis (<1.9 module courtesy Colin Mollenhour)
MongoDB (module courtesy Colin Mollenhour)
Rubic (module courtesy Daniel Sloof)
Session Store. This is the in-built session store that Magento uses, in which many people replace the default file-based cache with the one that is memory based.
Files (Core) Default
Memcache (Core)
APC (Core)
Redis
MongoDB
Rubic
Opcode Cache. This cache stores precompiled script bytecode in shared memory, thereby removing the need for PHP to load and parse scripts on each request.
APC
XCache
Eaccelerator (PHP <5.4)
Zend OPCache (PHP >5.4)
Full Page Cache. This cache stores fully generated web pages, which reduces the need to run blocks of code and retrieve information from the database. This reduces the demands on both Magento and the database.
EE FPC
Reverse Proxy Cache. This cache intercepts HTTP requests to the web server. If the request is not found in the cache, it will get it from the web server, otherwise the cache will serve the content.
Varnish
NGIX
Flat Catalog Module. Enable the Flat Catalog module for products and categories in the Magento Admin Panel. People have seen significant performance improvements by turning on this feature, especially on large catalogs.
Picture1: Flat Catalog Module
Image Optimization. The image weight is the product of the image resolution and its color density (i.e. 256 colors, 16 million colors), or image resolution (i.e. total number of pixels) multiplied by the color density (i.e. total number of colors).
The goal is to reduce the weight of an image. Reducing the weight reduces the image loading time and therefore improves the page loading and website performance perception. In addition to the human experience, Google and other search engines look for images’ sizes and total page weights that are appropriate for the type of device being targeted.
Here are three areas of image optimization to consider.
Optimize Image Size. Reduce the image size for your target use (i.e. Length x Height in pixels)—why use the same large 1080 x 768 image for your hero and your thumbnail? Reduce the image size for small target uses.
Optimize Color Density. Reduce the color density—can you get away with 32-bit (16M colors), 7-bit (128 colors), 5-bit (32 colors) and maintain the same perceived image quality?
Optimize the File Format. Select the best file format—GIF, PNG, JPEG—for your needs.
Google has some great detailed guidance on an image optimization strategy worth reviewing (http://bit.ly/2Wj5MyA).
Merge and Minify JavaScript and CSS. Both Magento 1 and 2 have facilities to merge JS and CSS files, while Magento 2 has the additional capability to minify those files.
Merging Files in Magento 1
Picture2: Merge and Minify JavaScript and CSS
For Magento 1, we suggest taking the additional step of minifying your JS, CSS, and potentially your HTML, to gain the benefit of both a reduced number of files and file size. Here are some tools that you can find on the Magento Marketplace to assist in minification:
Apptrian Minify
Amasty Minify JS-CSS-HTML
For Magento 2, the ability to merge and minify your code is built into the solution.
Picture3: Merging CSS in Magento 2
Picture4: Merging JavaScript in Magento 2
Magento Compiler. The compilation process can improve the performance of a Magento 1.x installation by combining separate files from various modules into a single file. Note—the compiler is disabled by default, therefore you must explicitly turn it on and perform the compilation to take advantage of it. Doing this can speed up the store by 10%-20%.
Picture5: Magento Compiler
MySQL Optimization. Your MySQL database is your primary persistent datastore for information used by Magento. With that, it also can become a bottleneck when your Magento store is retrieving data that it needs to present a particular page—particularly if that page has not been recently requested and is therefore not recently cached, forcing Magento to make a request to the database.
To reduce the time to request information from MySQL, there are several optimizations available.
Update the MySQL Version. Just as with Magento, make sure your MySQL instance is on the latest version. Take advantage of any of the current performance improvements to the platform.
Download and Run MySQLTuner. This utility (MySQLTuner) will review a MySQL instance and adjust variables that affect performance and stability. Two configuration variables to pay special attention are MySQL Table Cache Hit Rate (table_cache) and Table Open Cache (table_open_cache).
The Table Cache Hit Rate should get as close to 100% as possible, meaning that as with other caches, Magento can pull from the cache before MySQL needs to pull from disk.
The Table Open Cache indicates the maximum number of tables the server can keep open in any one table cache instance. Ideally, you would set to re-open a table as infrequently as possible, but that will be dependent on the volume of data and requests.
MySQL has its own optimizations that will require a person that is familiar with them. We recommend hiring a person or working with a consultant who specializes in managing and optimizing MySQL to get it properly tuned for your needs.
Apache Alternatives. Apache is not your only choice for a webserver. Others, like the LiteSpeed, offer a 50% performance increase for PHP application and is up to 6x faster than Apache serving static content. There are several very good alternatives, some of which are very fast.
LightTpd. Lighttpd is a small, lightweight web server which has a low memory footprint and light CPU load. Lighttpd is a good alternative to serve static content but it has also gained recognition in the Ruby on Rails and PHP communities. (www.lighttpd.net)
NGINX. Nginx is a lightweight web server and reverse proxy. Nginx is known for its stability and simple configuration in addition to its low resource consumption. (www.nginx.net)
LiteSpeed. LiteSpeed is a commercial web server designed specifically for large websites. One of LiteSpeed’s advantages is that it can read Apache configurations directly which makes it easy to integrate with existing products to replace Apache. The server is lightweight and fast. (www.litespeedtech.com)
Zeus. Zeus web server is a high-performance web server. Zeus is a highly flexible enterprise product. (www.zeus.com/products/zws)
Fast Host. An obvious, but often overlooked speed solution is finding a faster web hosting firm. Do your research—find out what people are saying about these hosts. Stay away from the low-cost providers, there is a reason they are. Find the organizations with good reputations—see what the larger Magento users rely on.
There are more than ten optimization techniques, but these here will provide a lift in speed, and therefore, increased sales, customer satisfaction, and growth for your brand.
Rolf Kraus
Practice Leader, Content Management and Digital Marketing