If your website takes more than 3 seconds to load, you lose 25% of your visitor. Depressing? Yes. Hopeless? No. With some effort towards optimization, you can not only get that 25 % back on to your site but make them stay, explore and even purchase.
Now that things started becoming interesting, let’s see how.
First of all, a quick primer on why you need to optimize your site at all.
An optimized website works with you to save your dollars. Occupying less space and consuming less bandwidth, your optimized site goes light on the server and saves you from the cost of unnecessary upgrades. Even on the home turf, it needs a lesser maintenance cost.
On the other hand, it helps you in increasing the conversion rate. Your optimized website downloads faster to pull down the bounce rate and push up the page stickiness. As your site performs faster, visitors will stay longer, and spend more.
How to OptimizeEarly Preparation
We have broken down the entire site optimization process into two phases. In the first phase, we will tell you what are the information pieces you need to gather before you get on to brushing up the performance of your site.
Start off with the external indicators like traffic and server. Analyze your traffic well, particularly find out where they are falling off the grid. You may create a list of questions here - is the content up to the mark, are you using Accelerated Mobile Pages, can your server handle the traffic, is peak time traffic a concern? The answers to these questions will tie back to the requirement to optimize and help you formulate an effective plan of action.
Next look into your internal factors. You need to get the complete picture of your application. Your dev team has been working tirelessly to build a world-class product. Various features have been coded and different functionalities have been added. Now, it’s time to see all of them together. Have a look and make a list of them alongside the benefits they deliver.
The action will help you identify the areas you need to optimize. It becomes apparent which feature is being used the most, or which service is being used the least, or which plugin is not adding the value expected of it.
Once you identify the areas, start defining the steps involved in optimization. This is elaborated in the following phase.
Finally, get a clear idea of the resources you need. Starting from developers to servers to RAM, get all of them listed down.
There are quite a few need analysis tool that’ll help you save time and effort in profiling the performance of your server.
Magento 2 Profiler
Magento 2 comes with its own profiler. It helps in analyzing performance, checking dependencies, and finding out unused dependencies. The last one, in particular, helps disabling certain features and save time and memory. The Magento 2 profiler offers greater flexibility with support for HTML, CSV, and Firebug profile formats.
In Magento 2, the profiler comes disabled. You need to enable it for one of the format by editing the .htaccess, if your site is on an Apache server.
For CSV File
SetEnv MAGE_PROFILER "csvfile" outputs into var/log/profiler.csv
For Firebug File
SetEnv MAGE_PROFILER "firebug" outputs into var/log/profiler.csv
For HTML File
SetEnv MAGE_PROFILER "html" outputs in the footer of a web store page opened in a browser. You need to edit the index.php with the expression $_SERVER["MAGE_PROFILER"]="html"!
Once you have this, you’re ready to take the plunge.Steps Involved in Optimization
We suggest, you take into consideration the 14 steps to optimize the performance of your site.
1. Server Setup
As indicated in the last phase, run a check on your server. We are assuming you’ve set up your store on a dedicated server. Just in case you were thinking of shifting to a dedicated one, let us tell you the time is now. You cannot write-off the performance of your site against the infrastructure support of a shared server. With a dedicated server, you know that you’ll have complete control over your resources and you won’t have to fight for it with hundreds of other users.
2. Flat Table Structure
Magento stores customer and product data using the EAV (Entity, Attribute, Value) model.Using a flat table structure for categories and products brings the entire data set into one table. It substantially reduces the table lookup time and improves the performance of SQL queries. The improvement in the performance is directly related with the volume of product.
Follow the steps to enable flat catalog:
- Click on “Stores” - Click on “Configuration” - Click on “Catalog”
- Scroll to “Storefront” - Change “Use Flat Catalog Category” and “Use Flat Catalog Product” to “Yes”
- Click on “Save Config”
- Go to “System” - Click on “Cache Management” - Click on “Flush Cache Storage”
The last step will refresh the cache to bring in the change.
3. Enable Magento Caching
It’s not magic that caching fuels page download speed. Magento developers have a whole lot of caching types in their arsenal that help them in setting the type of caching that suits the best. Many developers choose the NGINX + APC + Memcache + Varnish caching combination to get the desired result.
Although Magento itself comes with a built-in caching module, the third-party solutions seem to work better. Irrespective of which caching type you use, make sure that cache types are enabled for your site.
(Image Source: keycdn.com)
- Go to “System” > Go to “Cache Management”
- Click on “Enable” for all Caching type
4. Gzip Compression on Server
It pays to zip and compress a file to save bandwidth and gain speed. Before sending a page to a browser, Gzipping them on the server saves 50% of the bandwidth.
To apply Gzip compression you may need to add certain code snippets to the site settings that’ll differ from Apache to NGINX. In case your site is on an Apache server, you need to modify .htaccess file. For Magento 2 users the task is simpler, as it comes with an .htaccess file named .htaccess.sample where you need add the following snippet:
Alternatively, if you’re on NGINX then you need to open the main NGINX configuration file, go to Gzip setting and work on the following snippet.
5. HTTP Caching
Although static content do not take a lot of time to render, the number of requests, every now and then, create a bottleneck at the server. A web application accelerator or a caching HTTP reverse proxy like Varnish can be of help in such condition. The accelerator sits between the client and the server to create copies of new requests, so that a similar call can fetch a response from the accelerator, instead of the server. Depending on your architecture, an accelerator like Varnish can speed up the delivery of the content by upto 300-1000x.
Bundled with Magento 2, the Varnish extension needs a wee configuration change to get in the game. You of course need to install Varnish first. Presuming you have already installed Varnish, we suggest making the below configuration change over your Magento console:
- Click on “Stores” > “Configuration” > “ADVANCED” > “System” > Scroll to “Full Page Cache”
- Click on “Caching Application” drop down > Select “Varnish Caching”
- Depending on the time you want for the Public content cache, set a value for “TTL for public content”
- Expand “Varnish Configuration”
- For “Access List”, enter the fully qualified hostname, IP address, or Classless Inter-Domain Routing (CIDR) notation IP address range for which to invalidate content
- For “Backend Host”, enter the fully qualified hostname or IP address and listen port of the Varnish backend or origin server
- For “Backend Port”, enter the listening port of the origin server
- Click on “Save Config”
6. PHP Level Caching
It’s easy to cache static content, but the story becomes a bit different when it comes to caching dynamic content. Dynamic content, created with the PHP, needs to be compiled every time they are called. This consumes bandwidth and time. To minimize the consumption, you may choose to select a PHP accelerator. As the PHP accelerators cache the scripts in their compiled state, they levy a lesser tax on the bandwidth and serve a page in a fraction of a second.
Of the various types of accelerators available in the market, Alternative PHP Cache (APC) opcode optimizer allows you to set a robust framework without spending a cent.
In case you decide to go for one that works with the latest release of PHP branch, you may settle with XCache. Built for Linux, with support for Windows, XCache works with all the branches of PHP, starting from PHP_5_1 to PHP_5_5.
Another free and open source PHP accelerator is eAccelerator. This opcode optimizer can reduce the server load and increase the speed by 1 - 10 times. eAccelerator stores the compiled script in a shared memory and executes directly from there; therefore, it can execute one script when called by several engines. It allows for faster rendition, with a minimal lock time, only to search the code.
7. Reduce Page Request
More number of requests or relays need more time to serve a page. While checking for page delays, this is one aspect you may need to look into closely. The requests may be either internal or external, we have charted a suggestive action plan on how to deal with them.
a) Internal Page Request
One of the advantages of Magento is, it lets administrator merge JS and CSS files into one compressed file. Due to the merging, only one HTTP request can retrieve the information, which saves the bandwidth substantially. Keep one point in mind, remove any unwanted JS and CSS from each page, individually before merging.
To merge the JS and CSS in Magento 2 and above:
- Click on “System” > “Advanced” > “Developer”
- Click on “CSS Settings” > Choose “Yes” for “Merge CSS Files”
- Save the configuration
- Clear the cache
(Image Source: keycdn.com)
Magento 2 users can up the game by minifying the script after merging them without using any extension. The minification helps in reducing request count, a load on the server, and bandwidth to offer improved user experience. For Magento 1 users, you may use a third party extension to perform the same task.
b) External Page Request
The third-party extensions may add some functionalities to your site, but it also takes a toll on the requests. Unless the third party codes, like that of Google Analytics and Facebook Pixels, are readily optimized, you may want to decide against onboarding them to your site. Some of these codes may only increase the number of requests, some may create conflict with your internal system. We suggest you take a hard call here and simply uninstall them. In case you want to disable these third-party codes, you may:
- Click on “Stores” > Click on “Configuration” > Click on “Advanced” > Click on “Advanced”
- Disable the modules you don’t want
- Click on “Save Config” to impact change
8. Use Singleton Pattern
For conditions where only one instance of a class is required, we suggest restricting the instantiation to a single class by using the Singleton pattern design. It helps in the reduction of unnecessary load on the bandwidth by using only one object. Consider setting a connection to your product database. Even if there are 100 requests, a Singleton design pattern lets you manage the requests with only one connection, because that’s all you need. In a similar fashion, you can use only one configuration manager or error manager to tackle multiple configuration requests or rectification tasks. Effectively, such single instances make management tasks easier and simpler without taking a toll the server.
9. Disable Unused Module
An online store is an ever-evolving project. What you think today may look redundant tomorrow. Therefore, a lot of feature or functionality that you once thought were innovative, might have become outdated today. Or modules that your team has created in the past racking their brain, might get to work today by the click of a button, making the module dispensable. Such modules consume valuable resources. Analyze closely to decide if you really need those modules. If you aren’t using them anymore, we suggest disabling them to free resources that you can to put to good use for something else.
10. Minimize and Compress External Resources
Calling external resource needs some additional bandwidth; therefore, time to execute. It could be some tracking code or social media buttons. To keep your site light, particularly the pages that are requested the most, you should minimize the use of external resources. If you need to use external resources, first check that they are not buggy. If you find them creating a conflict write back to the creator asking them to correct the code. If the codes are free of bug but hog resource, then we suggest compressing them. Once again you can use Gzip compressor as that lets you shuttle the compressed code and save a lot of download time at the client.
11. Compress Images
The need for good quality images cannot be undermined. They attract customers, sell, and help in building brand image. But when your site is made of 56% images, then you may want to compress them, without trading off its quality. It may not bring any visible change to the images but will dramatically lift the site performance. You may either choose to optimize the size of the images over an image editing software before uploading on to your site library or use any extension for the same purpose. If you are using Magento 2, then you may use the built-in image optimizer.
12. Optimize DB Query
A page download involves a series of queries. These are processed individually. For each of the queries, data is called from the server, processed and then presented to a user. When the disk space of the server reduces, fetching this data takes time, which finally results in delayed page download. To avoid low disk space delay, the queries are optimized such that the data retrieval happens from the memory of the server, instead of the disk.
In MySQL, the “query_cache_size” command is used to configure the storage space of the data. It not only tells the server to store the result of the query in the memory but also suggests how much of memory space should be allocated for that purpose. The command allows for quick retrieval of data in chunks which shows up in quick part-rendition of a page. Depending on how much memory a MySQL server can handle, you are allowed to set the cache size. In addition, consider including only the required columns in the query. Avoid joining unnecessary tables, as that will defeat the purpose of quickly fetching data from an optimized database.
The recommended setting of query_cache_size or my.cnf can be:
13. Adding a CDN
14. Third Party Scripts in the Footer
Performance of your site has a direct connection with the number of scripts a page processes. More number of scripts in the header and body indicate longer page download time. Therefore, to optimize a page, we suggest putting the third party scripts such as Google Analytics and Pixels in the footer. It allows the page content to download first, and then process the script in the background, without asking a user to wait.
15. Magento Index
Indexing Magento is a sure-shot way to make your store work faster. Without an index the database will process and compute each and every request, considering all the dependent factors and resulting into a delay in serving information. Although Magento allows automatic indexing of data, at times you’re required to manually reindex to save time. To reindex manually:
- Click on “System” > Click on “Index Management” > Click on “Reindex Data”
- Tick all the data you want to update
- Click on “Submit”
If your store is on Magento 2, you may go to the CLI first, then to your Magento installation root folder and run the command “php bin/magento indexer:reindex”.
16. MySQL Index
Indexing your MySQL database saves a lot of time and thereby, increases the performance of your site. With an indexing system in place, you know that MySQL will first check the index of a table to retrieve data. If an index of a table is found, MySQL will skip scanning the entire database and directly select the physical corresponding row to fetch the data. The time saved in skipping the scan directly impacts the performance of your site by speeding up the page download time.
Although, while creating a table, you can index that with the statement:
CREATE [UNIQUE|FULLTEXT|SPATIAL] INDEX index_name
USING [BTREE | HASH | RTREE]
ON table_name (column_name [(length)] [ASC | DESC],…)
We insist on creating an index for a table with data. For such table you may add “INDEX index_name” and include that table in the MySQL index.
Optimization of your site has a direct impact on the bottom line of your business. On the one hand, the praxis helps in increasing page stickiness and conversion, on the other, it helps in reducing the server cost. It’s a combination that keeps your books in the black and spirals your brand image up. As the drill keeps your site trim, it even absorbs the peak hour traffic, ensuring a steady flow of revenue to the coffers. Now, isn’t that something worth putting effort?
Let us know your thoughts in the comments below.