Magento is one of the most widely used eCommerce platforms today that websites owners choose to grow their online business.
Sounds great? That’s true. However, frequently online retailers run into issues with the slow performance of Magento, due to overloading servers with requests during high-traffic events like Black Friday, Cyber Monday or viral ads are some of the most common.
How slow speed kills conversion
If you think that speeding up your website isn’t important… Think again.
A three-second delay in your page load time results:
- 11% fewer page views.
- 16% decrease in customer satisfaction.
- 7% loss in conversion
Conversion drops by 7%, for every one-second delay. That’s $2.5 million loss per year if you sell $100,000 per day. This means that having a fast site is essential for keeping your bottom-line profits high.
Source: tribes.no
In fact, 40% of people abandon a website that takes more than 3 seconds to load. This means if your site takes more than 3 seconds to load you lose almost half of your visitors before they land on your website.
Walmart’s case study is the best example, as they increased the conversions and revenue after increasing their site speed.
During the analysis, they concluded that the visitors who converted were landed on the page that loaded two times as faster as the visitors who didn’t convert
Source: slideshare.net
Here’s the key takeaway; Walmart noticed a “sharp decline in conversions as average site load time increases from 1 to 4 seconds”.
So if users aren’t willing to wait an extra second to load for such a well-known and reputable site in existence, they probably won’t wait for you.
Checklist to speed up your Magento 2 store in 2018
Performance can be improved by taking steps at different levels e.g. user experience and web store speed.
In this post, we’ll list down some of the ‘best practices’ identified by Progos Tech to decrease your load time.
However, your site might be aligned with some of these best practices, if you’ve previously worked on your site speed.
So if you want your Magento store to speed up, you’ll love today’s checklist.
Let’s dive right in…
- Enable Compression
- Merge CSS and Javascript Files
- Flat Product and Categories Table
- Prioritize above-the-fold content
- Optimize Images
- Set up Content Delivery Network
- Bonus: Implementing JS powered PWA frontend
- Manual Audit
- Accelerating Magento 2 with Varnish
- Conclusion
How to Use this Checklist
We used this exact checklist to speed some of many Magento stores and through our Magneto development services we’ve helped our client to get some SUPER fast speed.
You don’t need to implement everything on this checklist.
Just do the best you can.
1. Enable Compression
The smaller your files, the faster your pages will load. Enabling Gzip compression is one of the easiest ways to reduce load time.
Gzip is a file format and software application that temporarily replaces the code in your text files to smaller file sizes.
Around 90% of the Internet traffic comes through the browsers that support Gzip, it’s a great option for speeding up your site.
Not sure if your site has Gzip enabled
The easiest way to check if your site has Gzip enabled is to head over to checkgzipcompression.com to see. Just enter your site’s URL, and if you have Gzip enabled, you’ll see something like this:
Source: http://wp-rocket.me
If you’ve checked your site and Gzip isn’t enabled, there are several different ways you can go about switching it on.
Ask your host
If you’d rather have someone else take care of enabling GZIP for you, get in touch with your hosting provider and ask them to enable Gzip as it is a simple process that should only take 5 minutes to set up. If your site is hosted with a reputable host, Gzip should be part of their standard service.
Enable Gzip through .htaccess file
<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>
2. Merge CSS and Javascript files
All separated CSS and Javascript files can be merged into one single file, this helps in reducing the number of requests from the webpage and reduces loading time.
When merging CSS and Javascript in Magento 2, you need to follow simple steps:
Merging CSS files
- On the Admin panel, click Stores. In the Settings section, select Configuration.
- Select Developer under Advanced in the panel on the left
- Open the CSS Settings section, and continue with following:
- In the Merge CSS Files field, select Yes
- When complete, click Save Config.
Merging JSS files
- On the Admin panel, click Stores. In the Settings section, select Configuration.
- Select Developer under Advanced in the panel on the left
Fortunately, this is an easy fix to make. Either add the file manually by making sure they’re merged into single file and without any whitespace.
- Open the JavaScript Settings section, and continue with following:
- In the Merge JavaScript Files field, select Yes
- When complete, click Save Config.
3. Flat Product and Categories Table
Magento 2 uses Entity Attribute Value (EAV) database model, which isn’t much faster in terms of the performance. However, we can override the settings by enabling Flat Catalog. When your store applied the Flat Catalog, the new tables on the fly are generated and they will store all necessary data related to your products and categories.
Enabling Flat Categories and Products in Magento 2
- On the Admin Panel, Stores > Settings > Configurations.
- On the left panel, under Catalog, select Catalog.
- Open the Storefront section,
- Choose Yes in the Use Flat Catalog Category field.
- Choose Yes in the Use Flat Catalog Product field.
- Save Config to complete.
After updating to Flat category and products you need to Re-index the data from Index Management.
4. Prioritize above-the-fold content (lazy loading)
Images are critical for an eCommerce website and its impossible to imagine a website without images.
Source: neilpatel.com
Lazy Loading Images refers to a set of techniques in web and application development that defer the loading of images on a page to a later point in time – when those images are actually needed instead of loading them up front. These techniques help in improving performance, better utilization of the device’s resources and reducing associated costs.
By default, Magento 2 doesn’t offer any method to lazy load the images. Hence, we’re listing some useful Magento 2 Lazy Load Extension:
- Magento 2 Lazy Load Extension by BSSCommerce – $35
- Lazy Load and Ajax Scroll by X-Mage2 – $29
- Easy Lazy Loader by Evision Ecommerce – $19
- Lazy Load Images For Magento 2 by MageBee – Free
- Lazy Loader by Medma – $25
- Magento 2 Lazy Load by Landofcoder – Free
By using any one of the extensions you can easily implement Lazy Loading on your images.
5. Optimize Images
Images can play a major role in your site speed. They’re often very large files, which can slow down page load times.
It’s obvious that to get your conversion rate to a next level its necessary to include helpful product images. So, if you want to run a successful eCommerce site, images are absolutely necessary.
According to research, the median page size on the desktop is 1511KB. Images make up for almost 650 KB of that size, roughly 45% of the total size of the page.
This means that reducing their size could likely have a big impact on how long the page takes to load.
To optimize images on your magento 2 store, there are many ways. You can choose either to compress your images before uploading to the store using some tools like Tinypng or to optimize images real-time while delivering content with a CDN.
You can also use ‘save for web’ option in Adobe Photoshop which can also help you to compress the size of images.
Magento also provides many extensions to compress and resize images in its Magento Marketplace.
6. Setup Content Delivery Network
A Content Delivery Network or CDN is one of the fastest (and cheapest) ways to significantly crank up your site’s loading speed. CDNs will take the burden of distributing large image files off of your server by distributing them via their global network.
A CDN also makes your site more secure from attacks and hacks.
CloudFlare and BootstrapCDN are just a couple that can get you started on your journey to rid yourself of those excess requests once and for all.
Configuring CDN in Magento 2 settings
Configure the CDN to step up your site load speed.
- Go to Stores > Configuration > General > Web
- Enter the URL provided by your CDN provider in Base URLs (Secure)
- Click Save Config
- Clear Cache to see results.
Access the CDN provider of your choice (StackPack, formerly MaxCDN, is another popular choice), you simply have to create an account and the website will itself walk you through few steps to pass on the request to CDN’s own servers.
7. Bonus: Implementing JS powered PWA frontend
Progressive Web Apps, also known as PWA is a next big thing in Magento; The Progos Team reshaped the way eCommerce industry deals with Magento and build webshops – on the long run. If you want to be counted in front-runner, you need to power up your magento store quickly.
Implementing the approach: Progressive Web App
Before implementing PWAs you need to decide the Javascript framework for handling data and displaying it. You can choose the framework between:
- React
- Vue.js
- AngularJS
On the backend, these frameworks will help communicate with Magento 2 via Rest APIs.
Source: integer-net.com
Decoupling the fronted from the Magento 2 backend, will allow you to bypass the overly complicated Magento 2 frontend. Covering this results in a blazingly fast front-end.
At Progos we developed a platform that integrates with any webshop, delivering enterprise level solutions that scale indefinitely and power both your web- and mobile app.
Does these tips seem too complex? Try our Magento Speed Optimization Services
8. Manual Code Audit
Well, it is the last step but it should have been the first one.
If you’re a developer and want to increase magento website speed, start with manual code audit.
On the one hand, Magento core is written by programming experts. You will find a little room for performance improvement through default installation.
It’s no surprise that custom or 3rd party extensions make Magento slower. A rule of thumb here is to have as extensions installed from a reputable vendor only.
How to review code manually
At Progos Tech, here is what we usually do:
- Get a list of all custom extensions. From backend menu: System > Tools > Web Setup Wizard > Component Manager
- Disable the third party modules one-by-one and benchmark the page speed.
- Once the slow module is identified, add a patch to the module’s code, to get it fixed.
9. Accelerating Magento 2 with Varnish
Varnish is a special server software that can deliver instant performance enhancing results. Also, its a full page cache and 100% of the client response is served from cache!
It is placed between the user and Magento:
Source: devdocs.magento.com
Implementing Varnish in Magento 2
You will have to install Varnish on your server, although Magento 2 uses Varnish natively.
After you’re done with the above follow following:
- Log in to the Magento Admin as an administrator.
- Click STORES > Configuration > ADVANCED > System > Full Page Cache.
- From the Caching Application list, click Varnish Caching.
- Enter a value in the TTL for public content field.
- Expand Varnish Configuration and enter the following information:
- Access list
- Backend host
- Backend port
- Click Save Config.
Varnish has opened the door for huge performance saving to all Magento 2 users.
Tools to Measure your Results
- Webpagetest.org – provides you with page-loading waterfall charts and tons of other useful information. Supports mobile browsers.
- Google Chrome Timeline – helps you analyze frontend performance. Takes a little time to get used to, but once you are familiar with it, it gives you valuable insights into why your Magento is slow.
- Google PageSpeed Insights – an online tool that tells you what to do to boost site performance. Work on suggestions by Google and improve Magento speed.
Conclusion
Getting Magento 2 store load times to where you want them to be is a challenging undertaking, but for the user will increase user engagement and conversion rate.
And though some of them may seem minor, even small steps toward reducing load time can make a difference and when you consider the impact that even one second can have on your conversions and success, they’re entirely worth it.
