4. Tips & Techniques to Improve Site Speed
Below given tips & techniques are useful to improve the site speed.
Use of varnish Cache ( its inbuilt with Magento )
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.This will reduce average server response time( check google analytics to get idea of your average server response time and if its above 1.25 seconds then you need to optimize further. An avcrage server response time of below 1 second will be a good to have )
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
- Catalog page
- CMS pages
and if these pages are cached and cache is not invalidated or has not expired.
Also for a same page varnish allows multiple versions to be fetched based on post data and cxookies which makes varnish a highly recommended candidate.
Varnish use VCL ( Varnish Configuration Language) . VCL is written in C or C++ and we can use URLs, Cookies to create a hash value and based on that hash value pages are delivered.
Also we can write some rules so that pages are not delivered from cache and are by pass.
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. Config data or session data and some blocks can be stored to effectively use these cache.
in Magento using env.php we can configure these values.
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 and offline tools available to optimize images.
Google check and allows upto 25% extra over optimized image size dimensions, if this is exceeded its treated as an image that should be corrected for.
We recommend to check images having size greater then 70 KB and delivered on mobile pages( excluding banners ).
On product page product gallery generally does not have this option so when you select a theme look into this aspect. As modifying gallery code can be a costly process.
Enable flat catalog for categories and products( If Elastic search is not available )
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 heavy and negatively affect Magento performance.
By enabling the flat catalog for categories and products, you can reduce the number of queries and also the complexity of queries is less as unions and joins are avoided. 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 and collections displaying more then 20 products at a given time.
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
It’s more so for flat catalog products ( in case elastic search is not used )
Monitor website Speed
We recommended that Magento site health related to Website’s speed should be checked on a regular basis.
As it has been observed that developers or admin when doing there usual work just ignore due to time pressure.
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
, and many others. With the help of reports generated on this tool you can optimize the site.
Advance recommendation is to check google analytics for following and keep a record of this:
i) Average server response time < 1.25 seconds
ii) Average page time < 3.5 seconds.
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.
With Magento 2.4.x there are lots of new modules that have been added by Magento.
Some modules are related to Multi warehouse inventory and some related to graphQL etc.
These should be disabled if not in use else these will consume resource and whenever deployment happens these modules consume that extra time.
Get rid of extra themes and languages : It has been observed that when we purchase and install themes we leave other themes as is. Also we might leave the languages as is without deleting. This impacts your generated file size. This will result in higher deployment time and PHP will have to handle more files to check from while executing.
Check if your site deployment time is more then 4 seconds.
Use of Http2
HTTP2 is like a continuous stream while HTTP 1 needed a handshake for each file download.
HTTP2 need SSL which nowadays is on all website so no challenge on this.
HTTP2 has a better compression aspect.
How is this useful in Magneto 2?
- Reduce the load of JS ( as you can now avoid merge 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
(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. These servers are called edge servers.
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 of JS, CSS and images takes place:
When a Visitor in a particular location (e.g California in 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 Californis US edge 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.