How to get a 90+ Google PageSpeed Insights in Magento 2?

Speed is a crucial factor to consider when it comes to enhancing the performance of your eCommerce store with the Magento speed optimization process. It’s because if your website takes too long to answer, your clients and users will most likely abandon it.

A faster page speed can help you give your visitors and customers a better store experience. Your business’s conversion ratio will be boosted by the ideal store with improved performance.

Google provides the PageSpeed Insights tool to assist you in determining what needs to be fixed in your Magento 2 store to improve speed. If you are one, who is willing to get 90+ Google Page Speed in Magento 2 Store then here we are to help you at Viha Digital Commerce.

1. How to check your website score at Google PageSpeed Insights?
2. How to optimize for Page Speed Insight in Magento 2?

• Optimizing the page speed of your website

The loading speed of a website’s page content is referred to as page speed. If a page on your website takes longer than 3 seconds to load, about half of your visitors will abandon it. According to Google “It is a big problem”. Hence optimizing your page speed is the only solution for fixing this issue.

• Search Engine Optimisation:

Improved speed and performance can aid in the delivery of a better user experience. The increased traffic can be generated by increasing the speed of your website. Even search engine rankings are influenced by the website’s response speed.

• Revenue generation:

Customers frequently avoid purchasing from slow-loading websites. As a result, you must keep an eye on dead links and websites with high bounce rates. Consumers may benefit from increased speed and a positive shopping experience, which could lead to more revenue.

Enter your webpage URL and click Analyze to take a quick test of your website.

The final test analysis will be shown in the following picture.

The score for the webpage and mobile web will be analyzed differently. Basically, the Google insights tool analyzes your website based on six metrics.

After a user navigates to your page, FCP measures how long it takes the browser to render the first piece of DOM content. Images, non-white canvas> elements and SVGs on your page are considered DOM content; anything contained within an iframe is not included. You can interpret your FCP score as follows.

The SpeedIndex measures how quickly content is visually displayed on a page after it has been loaded. Lighthouse begins by recording a video of the page loading in the browser and then computes the visual progression between frames. The Speed Index score is then calculated by Lighthouse using the Speedline Node.js module. You can check your speed Index as follows

Largest contentful paint is a metric that helps to identify the time taken by the website to load its page’s main content. Google, only examines information above the fold or everything that appears without scrolling.LCP loading time should be 2.5 seconds or less to provide a better user experience to the visitors of the website.

TTI is a metric that measures how long it takes for a page to become fully interactive. A page is considered fully interactive if and only if the following conditions are met:

• The page displays meaningful material, as measured by the First Contentful Paint
• It has event handlers for the majority of visible page elements
• It responds to user inputs in less than 50 milliseconds.

The TTI metrics of your website can be calculated as follows

The total period of time a page is prevented from reacting to user input, such as mouse clicks, screen taps, or keyboard inputs, is measured by TBT. Between First Contentful Paint and Time to Interactive, the amount is calculated by adding the blocking fraction of all long tasks. The standard metrics for calculating TBT are as follows

Lighthouse launched the Cumulative Layout Shift (CLS) performance metric in 2020 to quantify the perceived visual stability of a page load.CLS is a metric that tracks the unexpected moving of web items while the page is produced. This evaluation is then converted into a total score for all of your page’s unique layout alterations.

Numerous factors influence the store’s page speed. Such factors should be taken into account. The following are some critical factors that influence the website’s response time.

Using a bad hosting server can result in an increase in website response time and a low SEO ranking. While good hosting servers provide you with a powerful platform that can assist you in increasing page speed. Three critical considerations should be made when selecting a hosting server for the Magento 2 store.

1. Make use of VPS or a dedicated hosting server
2. Don’t choose the shared hosting server
3. Make sure that you choose a hosting server that is compatible with the Magento 2 system.

One of the standout features of Shopify is the ability to customize themes to create a unique and engaging shopping experience. Here’s how to get started with Shopify Theme Customizing:

Though images aid you in enhancing the appearance of your web page. But large images take more time to load on the pages. One solution for it is to optimize your images so that they can be loaded at ease. Diverse plugins are available that can help you to optimize the size of your images.

A CDN (content delivery network) assists in data threshold, allowing multiple users to access data at the same time. To avoid latency, you should ensure that your Magento store is CDN enabled.

Magento stores should also ensure that their content is customized when opened on mobile devices. This will improve the user experience of the stores by shortening the loading time.

A flat catalog should be enabled to improve database read speed. This will result in fewer joins between tables, which will ultimately help to improve page loading speed. Enabling a flat catalog will also reduce MYSQL queries.

Go to the backend, STORES ->
Configuration -> CATALOG ->
Catalog -> Use Flat Catalog Category and put in “Yes

Huge JSS and CSS files can help you improve the look of your website. However, such a
large file slows down page loading. There is a solution for it in the MAGENTO2 platform. Just look at how to
merge CSS and JSS files.

1. Go to backend, STORES -> Configuration ->
   ADVANCED -> Developer -> JavaScript Settings
2. Merge JavaScript Files ->
   Yes
3. Minify JavaScript Files -> Yes

1. Go to backend, STORES-> Configuration -> ADVANCED -> Developer -> CSS Settings

Upgrading to the most recent Magento version will assist you in increasing the page speed of your website. Magento2.4.3, which was released on August 10th, is the most recent upgraded version. So use it to upgrade your store and improve the performance and speed of your website.

html {
scroll-behavior: smooth;
}
img.lazyloaded {
margin: 0 auto;
}
table, th, td
{
border:3px solid black;
padding: 5px;
}