Magento Search Engine Optimization (2014)
Chapter 5. Speeding Up Your Magento Website
By default, Magento is certainly not the fastest platform in the world, but there are numerous ways available to help speed up the loading time of its pages. Magento provides us with a selection of methods through its own configuration, and we can save time off our load speed by enabling those features.
Search engines such as Google take load speed into account as a ranking factor. It is therefore extremely important that we optimize our Magento website for speed as much as possible.
In this chapter, we will learn about:
· The SEO and user experience (UX) benefits of serving a fast website to our visitors
· The default options that Magento comes equipped with to help with load speed
· Quick and easy .htaccess file modifications to leverage caching and file compression
· How we can dramatically improve the load speed of our pages through the use of dedicated caching modules
· The tools available to us to test the speed of our pages and our Magento framework
SEO benefits of a fast Magento website
As of early 2010, Google announced that it was taking into account website speed as a ranking factor. Although not necessarily a major factor, a slow website does have knock-on effects for many other algorithmic elements associated with user experience.
With the increase in computer hardware and connection speed, many Internet users now find slow-loading websites intolerable as they are becoming more and more used to receiving the information they require almost instantaneously.
The most recent statistics indicate that a page load speed of anything above 2 seconds can lead to:
· An increase in bounce rate (a visitor immediately leaving the page)
· A reduction in average time on site
· Lower website conversions
This final point is particularly worrying for us as a decrease in conversions translates into a loss in sales through our Magento store!
Google (and other search engines) understands the impact that the speed of a website has on visitors. Their primary goal is to provide value to their own users, and there is little value on offer if our visitors become frustrated and leave our website after waiting 5 to 10 seconds for a single page to load.
A fast Magento website would help to retain customers on our pages, maximizing the probability of our visitors becoming paying customers.
Note
Google especially welcomes fast-loading websites, so much so that there is a whole section within the Google Developers website dedicated to making the Web faster: goo.gl/4Rh2VK.
Magento configuration settings to increase speed
As Magento is such a large framework (currently well over 12,000 files in a fresh Magento CE 1.8 installation), the developers decided early on to introduce some basic features to help speed up the rendering time of its many pages. The simplest feature to implement on any Magento website is cache.
Tip
Magento EE comes equipped with the Full Page Cache (FPC) module, which is a much improved version of the standard cache I'm about to show you. Magento released a whitepaper detailing the performance and scalability of EE 1.11 which contains a large section on FPC: goo.gl/R2WFkX.
To enable the Magento cache, we perform the following steps:
1. Navigate to System | Cache Management.
2. Click on Select All of our Cache Types option and choose Enable from the Actions drop-down menu.
3. Once we click on Submit, our cache should be enabled for all of the default Magento cache types. The resulting page should look similar to the following screenshot:
There is typically an increase of 20 to 40 percent in website speed once the system cache has been enabled.
Tip
Some versions of Magento (especially CE 1.3) may look slightly different to the preceding screenshot, and certain options may not be available. However, we should make sure that we enable all cache options irrespective of which version of Magento we are using.
The following two options (compilation and merging CSS/JS) are recommended, but it is highly advisable to initially enable both of these options on your development environment as sometimes problems do occur (depending on third-party extensions).
It is also recommended to disable compilation before installing extensions.
Magento compilation speeds up the time it takes for the server to process the code base by copying all of the required PHP files into a much simpler directory structure. This allows the server to bypass a lot of directory-based navigation to find and load the required classes.
To enable Magento compilation, we will navigate to System | Tools | Compilation and click on Run Compilation Process.
The primary goal of the compiler tool is to reduce the time it takes to build our page excluding elements like images, JavaScript, and CSS. Usually, we would see a decrease in the time it takes to render the resulting HTML by approximately 200 to 400 milliseconds depending on the speed of the server.
The last simple configuration option we will discuss in this section is the merging of our JavaScript and CSS files. The primary purpose of this option is to reduce the number of requests on our web page. Typically, Magento will contain around three to four stylesheets and (depending on the page in question) around 13 JavaScript files.
Tip
Although not an inherent feature within Magento, minification (the act of compressing the content of a file into a simplified version of the same text without losing functionality) is a recommended practice for every type of website, and is especially useful for JavaScript files.
For more information on minifying JavaScript and a tool on how to perform minification, please go to www.jscompress.com.
When we merge JS and CSS, we will reduce this number to one stylesheet and one JavaScript file. This remains true for any additional custom CSS or JS file that we add through our layout XML.
To enable CSS/JS merging, we perform the following steps:
1. Navigate to System | Configuration | Developer.
2. Under JavaScript Settings, set Merge JavaScript Files to Yes, under CSS Settings, set Merge CSS Files to Yes, and then click on Save Config.
Note
For a test case of these default configuration options affecting load time, please see the following blog post (creare.co.uk): goo.gl/c8arxs.
.htaccess modifications
The .htaccess files allow developers to make server configuration changes on a per-directory basis. Magento comes packaged with many .htaccess files, but the one which we will be dealing with in this section is the .htaccess file found on the root of our installation. As mentioned previously, in order to edit our .htaccess file, we must make sure that the web editor we are using can see the hidden files.
The most basic of performance-based .htaccess tweaks that we can make are implementing Content-Encoding (mod_deflate/mod_gzip) and Expiration Headers (mod_expires).
The gzip compression essentially presents the browser with a zipped version of the file. Compressing the file before transferring it reduces the download time required. We should add the following lines of code to our root .htaccess file in order to use these methods (if available on the server):
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
</IfModule>
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
The <ifModule> tags will activate our configuration if the server has the correct module installed. We've added both the mod_deflate and mod_gzip configurations; however, you can choose to use one or the other in your own .htaccess file.
The next step is to set up our expiration headers, which will tell the browser to use its own cached version of our file if the expiration date of the current file is in the future. This will also reduce the download time for our users. Refer to the following code snippet:
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
</ifModule>
The time in seconds sets the future expiration date for that certain type of file. On a correctly-configured server, just by adding these few lines of code, we can reduce the loading time of a standard Magento CE 1.8 installation on average anywhere between 0.5 to 1 whole second.
Tip
It is recommended to add the mod_expires code to our .htaccess file only after we have finished our development; otherwise, changes to CSS/JS files may not be seen by repeated users until they clear their browser cache.
Server-side performance and scalability
There is really only so much we can do with .htaccess tweaks and Magento's default configuration to speed up the loading of our web pages. Typically speaking, the faster and more powerful the server, the quicker our pages are rendered. There are many differenttypes of servers available, but for Magento websites, the best performance can be gained through either dedicated hosting or super-fast cloud-based servers.
Tip
A hosting provider with experience hosting Magento websites should be aware of the resource implications and the variety of additional server extensions that are required as mentioned in Magento's own system requirements (magento.com): goo.gl/Ayd1gE.
However, the most drastic improvements can be seen through the installation and configuration of specific web application accelerators.
One increasingly popular HTTP accelerator is Varnish Cache. This caching method has been talked about a lot in web conferences around the world, and has been used to great effect when installed alongside Magento.
In short, Varnish stores a version of the fully rendered page the first time any user visits that particular page. The cached version is then returned to subsequent users rather than Magento having to compile all of that data again. The result is consistent; less than 1 second load time for the remainder of the cache lifetime.
Here are several bold claims made by the Varnish team, all of which I have yet to see any reason to disbelieve:
· Up to 250 times faster than a default Magento installation
· Allows for incredible scalability while reducing hardware costs
Note
For more information on Varnish Cache and Magento, please see the following link (varnish-software.com): goo.gl/PyhmVD.
There are also other alternative caching methods available that are worth considering. The most commonly used are:
· Redis: This is an in-memory, key-value data store. For more information on how to configure it with Magento, please see the following link (magentocommerce.com): goo.gl/mqEgpI.
· Memcached: This caches data and objects in RAM to reduce the load on the database (or other external calls). For a detailed guide on how to install memcached and alternative PHP cache (APC), and how to configure them with Magento, please see the following link: goo.gl/Ulqb4k.
Note
It is possible to combine different cache types, such as memcached and Varnish, in order to speed up front end loading speed and database-driven content. However, it's important to look into each third-party application closely and determine that they will work correctly alongside each other.
Additionally, content delivery networks (CDNs) can be used to offset the traffic from our server for various files on our website. Apart from this, the user's geographical location is used to determine the closest server to them in order to provide the content.
The typical usage of a content delivery network on a Magento website would be to serve the many JavaScript files, CSS files, and product images directly from the CDN rather than our own server, improving speed and sharing the loading of these large files across several servers.
Online tools to test performance
Of course, when we are optimizing the performance of our Magento website, we must make sure that we are analyzing the speed variations so that we know that our efforts have a positive effect.
There are many page-speed testing tools out there, but a few of the best (particularly for Magento-powered websites) are:
· Mage Speed Test
· Pingdom Website Speed Test
· Google Page Speed Insights
Mage Speed Test
This tool, written by Ashley Schroder, is specifically targeted towards Magento-powered websites. It takes sitemap.xml from our Magento store and through a few simple settings, will measure how many times the server is successfully hit by fake users within a certain time frame.
The returned results are in the format of transactions per second (this is measured in web transactions, not Magento sales transactions) and ideally, the higher the number of users per second, the better.
You can try out the tool yourself by visiting www.magespeedtest.com.
Pingdom Website Speed Test
Located at tools.pingdom.com, this tool is one of my favorites, and it analyzes the speed of any web page as well as gives insights into how the code on the page could be further improved. As you can see from the following screenshot, they also provide a score of our website based on their own on-page speed optimization factors:
Google Page Speed Insights
It's always smart to first listen to the people who are judging our website speed and then deciding on how to rank our website in its SERPs. The Google Page Speed Insights tool can be added as an extension to our browsers (Chrome/Firefox) or performed online through their website (goo.gl/P4wUIl).
Once ran, it will give us a score out of 100 for both mobile (when ran online) and desktop versions of our website. It also provides a fantastic list of technical changes that could be made in order to speed up the web page, prioritized as urgent, for consideration, and factors that we have already implemented. The following screenshot shows the results shown inside the Google Chrome extension:
Summary
In this chapter, we have looked at how search engines such as Google interpret page speed within their ranking algorithms. We've also looked at the importance of the user experience factor and how websites that take longer than 2 seconds to load could affect our website's conversions (sales).
We've seen that Magento comes equipped with several options directed at improving the performance of our website and also looked at several tweaks that we can make to our .htaccess file in order to further improve our load speeds.
There are many page-speed-specific modules available that we can implement onto our servers to dramatically affect loading times, Varnish Cache being one of the most popular implementations in recent times.
Making changes such as these means nothing without the ability to test our page speeds, so we have also taken a look at some of the most popular page-speed tools available. Many of which provide additional information that further help us to adapt the way we structure the content of our pages and configure our servers.