Magento 2 and Google PageSpeed Insights.
Undoubtedly, a major factor in a website visitor’s experience is its response speed. Especially for an e-commerce store, this can be a determining factor in retaining or reducing a customer base. If the page is slow to respond, then the potential buyer, customer or visitor will leave soon and not come back. On the contrary, a fast response will offer several advantages over the competition. Magento 2 is considered one of the fastest e-commerce platforms and with Google PageSpeed Insights, the individual elements and practices for its speed can be checked.
What is Google PageSpeed Insights?;
Το PageSpeed Insights (PSI) αναφέρει την εμπειρία χρήστη μιας σελίδας τόσο σε κινητές όσο και σε επιτραπέζιους υπολογιστές και παρέχει προτάσεις για το πώς μπορεί να βελτιωθεί αυτή η σελίδα. Το PSI παρέχει δεδομένα εργαστηρίου και πεδίου. Τα δεδομένα εργαστηρίου είναι χρήσιμα για θέματα εντοπισμού σφαλμάτων, καθώς συλλέγονται σε ελεγχόμενο περιβάλλον. Ωστόσο, ενδέχεται να μην καταγράψει εμπόδια στον πραγματικό κόσμο. Τα δεδομένα πεδίου είναι χρήσιμα για την αποτύπωση της πραγματικής εμπειρίας χρήστη – αλλά έχουν ένα πιο περιορισμένο σύνολο μετρήσεων.
How is the user experience of a page measured with PageSpeed Insights?;
The measurements performed by Google PageSpeed Insights are at a laboratory level. Sometimes, this measurement may be excellent (90+) but the actual user experience may not be. Of course, this is a measurement that any page owner wants the most.
Real user experience data in PSI is powered by the Chrome User Experience Reporting (CrUX) dataset. PSI reports the First Content Paint (FCP), First Input Latency (FID), Longest Content Paint (LCP), and Cumulative Layout Shift (CLS) experiences of real users over the previous 28-day collection period.
PSI also reports experiences for experimental metrics Interaction on Next Page (INP) and Time to First Byte (TTFB). In order to display user experience data for a given page, there must be enough data to be included in the CrUX dataset. A page may not have enough data if it has been recently published or has very few real user samples. When this happens, PSI will revert to the original level of granularity, which includes all user experiences across all pages on the site. Sometimes the source may also have insufficient data, so PSI will not be able to display real user experience data.
ok
Response to the larger content painting. (LCP)
What is Magento 2?;
This is a new platform that offers increased sales on e-Commerce & shopping websites. At the moment, it has managed to absorb more than 10% of e-shops worldwide and with a much higher percentage in large e-shops. In addition, it exceeds 25% of online businesses mainly due to its dynamics, adaptability and functionality. Magento is claiming more and more ground, especially since it was purchased by Adobe.
Υπάρχει ένα σχετικό άρθρο που αναφέρει τα οφέλη επιλογής της Magento για κατασκευή καταστήματος ηλεκτρονικού εμπορίου, “9 reasons to create an e-shop with Magento“.
Can Magento 2 achieve a score of 90+ on Google PageSpeed Insights?;
This is one of the strongest features of Magento 2. The intervention that a Magento developer can make is so substantial that he can really keep only the pieces required for the rendering of a page. Thus, unnecessary code is removed, making the e-commerce store faster. However, code alone is not enough as PSI measures other parameters as well. Optimizing graphics so that they load instantly and other elements that appear on the website are of primary importance for page speed.
On the server side, better response times can also be achieved. Finally, there are suitable extensions in Magento, which offer website speed optimization.
Thus, a Magento 2 e-commerce store has the potential to achieve a score of 90+ on Google PageSpeed Insights.
What can affect the speed of a Magento store in PageSpeed Insights.
These are some practices that affect the speed of a Magento store and should be identified and eliminated as much as possible. A Magento developer has the ability and experience to identify elements that are damaging the site and remove or optimize them.
Multimedia elements, pop-ups, unnecessary code, are some of the data that can burden the speed of a Magento store. Especially if the server brings more delays and possibly some unnecessary extensions or even the theme itself that has been chosen, then the potential customer experience will not be satisfactory. Thus, the store administrator or the appropriate developer should, with the appropriate means, remove the unnecessary elements and optimize the necessary ones.
Advertisements and other third-party elements will also slow down a website, as they take time to load and appear on a visitor's screen.
Optimization opportunities from Google PageSpeed Insights for Magento 2.
Off-screen images are deferred. This can be fixed using lazy-loading. Lazy-loading slows down the loading of off-screen images. Users cannot see off-screen images when they enter the store, they just see some banners at the top and possibly some content on the visible screen. When a user opens a web page, all the contents of the page are downloaded, including all the images on it. Obviously, if the web page contains a lot of images, then it will take longer to load.
Use lazy-loading to load only visible images.
Remove unused JavaScript. Sometimes a website contains unused JavaScript files. Unused JavaScript can slow down a website because browsers don't know what is useful or not, so the browser will download, parse, compile, and evaluate all the JS before it can proceed with all the other tasks required to render it.
Removing unused CSS. By default, a browser has to download, parse, and process all external style sheets it encounters before it can display any content on a user’s screen. Every external style sheet has to be fetched from the network. These extra network paths can significantly increase the time users have to wait before seeing any content on their screens. If there is unused CSS, then the load time will increase. It’s a bit tricky to do, but once achieved it will improve the speed of the site.
Reduce JavaScript execution time. The best way to reduce JavaScript execution time is to remove unwanted js files, minify and compress files.
Reducing JS execution time.
All of the above are some of the opportunities to optimize a website's speed. A Magento store, however, may have more opportunities to optimize and increase its performance.
Conclusions.
Website speed is the most important factor in online sales. Google prioritizes when the website has a good ranking and minimal loading time. Therefore, it is recommended to check the website in Google's page speed information testing tools and find the optimization opportunities. An experienced Magento developer can provide the appropriate information or intervene for the maximum performance of an e-commerce business.