4. Tips & Techniques to Improve Site Speed
Below given tips & techniques are useful to improve the site speed.
Use of Magento Cache
Page Caching is a great method to improve loading speed. It stores the data and delivers it from the cache when the user requests the same resources repeatedly. Page caching is useful to decrease the number of database operations required for each page request and so improve the website loading speed.
Varnish is a common caching tool for Magento. Varnish is a proxy server. It is useful to deliver content fast. When a visitor requests your site, then this request will not send to Magento, it’s delivered from cache. Varnish checks if visitors request for Home page, Checkout, without firing a mysql query, or without hitting any php code it delivers content from cache.
To configure Magento to use Varnish log in to the Magento Admin:
- Go to 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 specific information about your Varnish configuration
Redis, Memcached: Both are the distributed memory caches that speed up Magento 2 large-scale web applications with dynamic databases. They reduce the load of database requests on servers and deliver cached data if an external data request allows it.
Use of higher resolution images will negatively impact website speed, especially when users access your website on mobile devices. Solution for this to optimize images. There are online tools available to optimize images or you can use Photoshop to optimize images.
For example, if your product image is 69.7 Kb in size, and you are using a number of product images on catalog. Then obviously image size is more and impact on speed. Instead you can optimize images so that images size can be reduced by maintaining image quality.
Check if your images are properly optimized and if they have a good ratio between quality and size. Also, make sure your images are not resized by CSS but have the source file resized to the specific size you need.
Enable flat catalog for categories and products
Magento usually stores catalog data in multiple tables, based on the Entity-Attribute-Value (EAV) model. Because attributes are stored in multiple tables, SQL queries are sometimes long and negatively affect Magento performance.
By enabling the flat catalog for categories and products, you can unite all product data into one instance for Magento to extract. It accelerates the time it takes for the system to respond to the database queries, therefore improving website performance. This is especially relevant for large product catalogs with thousands of items.
Enable flat catalog from Magento backend.
- Go to Store ->Configuration -> CATALOG -> Catalog
- Choose Storefront section
- Set Use Flat Catalog Category and Use Flat Catalog Product to Yes
Monitor website Speed
We recommended that Website’s speed should be checked on a regular basis. This is an important aspect since it allows you to find out what affects your page loading times, how new extensions or plug-ins perform, what can be improved, etc.
There are a variety of free performance monitoring solutions available on the market. The page speed can be measured with the help of such tools as GTMetrix, Pingdom, and many others. With the help of reports generated on this tool you can optimize the site.
Get rid of unnecessary extensions
Magento is a highly flexible and scalable ecommerce platform. There are a number of third party extensions available to enhance functionality and unique features. But installing too many extensions might affect your website speed. As these extensions contain js/css resources. During execution these js/css creates more requests and slows down the website speed. We recommend removing the extensions which are not most useful.
Use of Http2
Compared to HTTP/1 using HTTP2 is significantly faster. It reduces the load of your website. HTTP/2 is a relatively new protocol. Before HTTP/2 the requests went one after the other from the browser, so there are more requests being generated. As every time connection is going and breaks. But using HTTP/2 continuous streams is going to help to reduce load time.
How is this useful in Magneto 2?
- Reduce the load of JS
For Example, when you merge Home page JS, which load is 1.5 MB and when it unmerged the load of JS on the Home page is 700 KB because when you unmerged the js of checkout, Product Page and Contact us page is not used on the home page. So HTTP/2 is beneficial to reduce the JS load. Again there is a possibility to reduce 3 js and reduce load upto 600 KB if your code allows.
When we merge JS, all JS will go in Header. When we unmerged, we can add 2 critical js under the head, and the remaining JS will add in the bottom of Head. When we add 2 js in head then it will impact TTFB and first painful content. Until and unless head is not download browser will not download the page html.compress headers
All of this was not possible with HTTP1.
Therefore, we recommend asking your hosting provider if HTTP/2 is enabled in their server settings.
Use of CDN
CDN (Content Delivery Network) is helpful for fast delivery content across the globe. It delivered static content like js, css, html, images from a geographically distributed group of servers working together to provide fast delivery of internet content.
Whenever a user requests your site, the server closest to the user’s physical location will deliver the static content, ensuring the shortest distance for the data to travel. This ensures reduced latency and fastest site experience.
How CDN Works?
After setting up CDN for your website, caching takes place:
When a Visitor in a particular location (e.g US) makes the first request for a static content on your website. Then the asset is retrieved from your actual server when it is being delivered, and the assets get cached on the CDN’s US server, the nearest CDN based on visitors location. When next time visitors request the same content on your website, the request goes to the nearest CDN edge server to check if the asset is already in cache. If the request is already cached by the same edge server then the visitor will receive a response from the server. This helps in improving the load time.
To configure CDN in Magento 2:
From Admin panel, go to the Store–>Configuration->>General–>Web
- In the Base URL for Static View Files, enter the URL of the location on the CDN where static view files are stored.
- Open the Base URLs (Secure) section and continue with following:
- In the Secure Base URL for Static View Files field, enter the URL of the location on the CDN where static view files are stored.
- When complete, click Save Config.
Minify JS/CSS files
From Magento admin, go to the Store->>Configuration->>Advanced->>Developer from CSS settings set ‘yes’ to Minify CSS Files.