Have you been to Magento Live in Amsterdam and did you speak the Google PageSpeed crew about your pagespeed score? I already heard some e-commerce owners, the Google PageSpeed crew might have given you some wrong insights, which I am going to answer instead.
E-commerce owners received feedback on the following topics. Sometimes, they questioned Google's answer themselves, and sometimes I shared their doubts (*).
First Meaningful Paint is too hard and is going to be dropped
Let's start with two separate questions:
- Is optimizing for the First Meaningful Paint metric too hard?
- Is First Meaningful Paint going to be dropped?
Optimizing the First Meaningful Paint metric
As a matter of fact, both are correct. No metric will be easy, otherwise we would all have fast loading webshops with optimal user experience. Instead, we have different metrics to measure user experience, which might and most likely will have impact on conversion and revenue.
Some metrics explained:
- Time to First Byte (TTFB), which is influenced by the interaction between server and chosen platform (in this case, Magento);
- First Contentful Paint (FCP) and First Meaningful Paint (FMP), giving you insights on how fast visitors could determine change in their browser and could start grasping the first meaningful information;
- First Input Delay (FID) and Time to Interactive (TTI) will tell you a bit about the impact of the used JavaScript, on the user experience;
- And what about Cumulative Layout Shift (CLS)? Even if you succeeded in loading your productpages very fast, you might also want to reduce layout shifts during progressive loading of resources. Reducing layout shift will reduce user frustration.
Say goodbye to the First Meaningful Paint metric
So yes, this metric in particular might be gone some day when doing a Lighthouse audit. But it is going to be replaced by another metric, which is also mapping the user experience, but in a slighly different way. This new metric is called Largest Contentful Paint and might come with a bit more challenges to optimize for.
In other words, you should still be optimizing for the rights reasons and while metrics might change, even Google Lighthouse auditing tool keeps doing this for the rights reasons: overall user exprience!
Fix images for improved loading time
As time came by, the amount of images has reduced, while the total amount of kilobytes increased. Apparently, we do have an image-issue. Obviously, I am not going to do another write-up on how to optimize images, as others did this already.
However, optimizing images resulting in a mobile PageSpeed Insights score of at least 80, might be doubtful. PageSpeed Insights and thus Lighthouse is measuring a lot more than just images, and obviously there is more to it when it comes to user experience. User experience is the main thing where Lighthouse is distinguishes itself as an auditing tool.
So yes, optimizing images will improve your score. At the same time, being an e-commerce agency, this is nothing new for you and most likely, most optimizations has been done already along the way, by you or Magento / webshop plugins. The main focus is overall resources, where nowadays JavaScript might reduce the user experience and thus your Lighthouse / PageSpeed Insights score even more.
Byte-for-byte, JavaScript is still the most expensive resource we send to mobile phones, because it can delay interactivity in large ways.
Addy Osmani, "The Cost of JavaScript"
Why your webshop's pagespeed score suddenly changed
I get this a lot, obviously. From Wordpress as well as e-commerce agencies. Why did my pagespeed score drop, without changing a single line of code within my website or webshop?
Where some websites might have gained green figures before within a PageSpeed Insights report, something like below might look more familiar nowadays. The reason you might be scoring a 40% or even below? PageSpeed Insights changed as of November 2018.
Below is the mobile pagespeed score of a Dutch award winning Magento 2 webshop:
What do I see within PSI?
You'll be seeing field data (if available) and lab data. When there isn't any field data available for a particular page, overall origin data will be used instead (once again, if available). Otherwise, you might want to do real user experience testing yourself.
What you can tell from the screenshot, is that within testing environment, the First Contentful Paint metric is at 2.4 seconds. However, within real visits, this metric is at 3.3 seconds. This means your average user might be using older devices, less powerful browsers or worse internet connection (or a combination of multiple factors).
You're also seeing at what time the device's CPU became idle for the first time. An idle CPU means that the page's main thread is quiet enough to handle input.
What to learn from those metrics?
These metrics are very informative. Besides additional PSI recommendations, you know where the pagespeed/performance pain is, as well as impact on user experience. For example:
- Bad TTFB will reflect on all metrics;
- bad way of serving resources will most definitely reflect on FMP;
- high amount of JS will reflect on FID / TTI.
You can draw great conclusions out of PSI and improve UX/CX and thus conversion.
What really changed since November 2018
You couldn't draw such conclusions out of PageSpeed Insights before November 2018. The reason is simple; The auditing wasn't done from a user perspective, but from a technical perspective. You could use a lot of JavaScript, blocking the browser's main thread and thus causing bad experience, but still getting great results.
But, in an attempt to include the impact on user experience within the report, Google tested your website in another way before they switched to Lighthouse in November 2018. They basically tested if the website's layout was the same from the first meaningful paint change until total load.
PageSpeed Insights, now powered by Lighthouse (Monday, November 12, 2018)
webmasters.googleblog.com
Except when your website or webshop would show some popups, for subscribing or accepting cookies, it was easy to gain a good score. For example, you could just inline all your CSS, although the JavaScript your webshop is serving visitors, could still have impact on further user experience.
Did our world get better now PageSpeed Insights is using Lighthouse? From an analysis perspective, it did. And although building lean websites didn't change, it appeared we (web developers) started to use way to much JavaScript, having it's impact on user experience. Even after one year, we still have to recover from this in order to improve our loading times, real user experience and thus conversion.
* I spoke to some Googlers as well. Obviously, the received responses/insights might have been different per Google PageSpeed consultant.
