Chromium: badge of shame for slow loading websites?

Published by the engineer manager of Google Chrome, Addy Osmani received over one hundred first degree replies on twitter, with a total over 180 within 48 hours. Beside replies on twitter,some LinkedIn posts also popped up while I received some questions about this update as well.

Google Chrome's pagespeed update

What's all the fuzz about? Chrome is going to identify sites that typically load fast or slow for users with clear badging. This could be done by adding an icon in the center of the screen, or when sites typically load fast, show a green progress bar while loading. See the example below, or Chromium's official announcement:

How Chromium identifies slow loading websites

One complaint I saw on Twitter, was "Who decides what slow is":

Who decides what slow is, 1s 2s 3s? How does Google decide when a page has finished loading?

Obviously, PageSpeed Insights, ThinkWithGoogle are already using CrUX for a while. At this moment, CrUX and HTTP Archive has data of 5.8 million websites, including (pagespeed) metrics. CrUX is standing for Chrome User Experience Report. You will find real user experience data within their datasets. You can retrieve data on subscription basis.

Want to know if your site is within the CrUX datasets? Submit your domain on:

• PageSpeed Insights
  When you see field data, than your site most likely will become subject as well;
• TestMySite @ ThinkWithGoogle
  Do you see any "MONTHLY TREND"? Your site is part of CrUX and might get a badge as well;
• Google Search Console
  When, after being logged in, you see data within the "Speed (experimental)" page, than watchout for red results.

Below is a Google Search Console example of one of many sites I helped building, where most visitors are experiencing fast FCP's. No single slow FCP was experienced. Here, you can see Google Search Console is using Chrome UX report data as well.

Audits done using PageSpeed Insights, Lighthouse or ThinkWithGoogle, are already using green, orange and red as colors to indicate the speed. Obviously, when scores are red, you might want to start addressing the overall pagespeed and performance of your website.

Which sites or pages are being targetted

Obviously, while your site is not yet part of CrUX datasets, it may became part in the future. When your loading times are slow or red (or even orange), there is a change your site may be badged.

This is going to hurt a lot to smaller businesses.

Proably not, as they might never be part of CrUX datasets.

Slow pages on fast website

When you have slow pages on your site/origin by exception, this most likely won't influence badging. Obviously, when you have multiple slow pages on a more popular website, this may become an issue and may influence the chances of 'earning' a badge for a slow loading experience. Addy Osmani is saying the following:

we will look at historical load latencies for all of the pages on an origin (e.g do most users have a fast experience?)

Pagespeed metrics to be used

Pagespeed is more than just one metric or one figure. For example, how fast did the server come back with HTML, how fast could your user see something meaningful and did the website (JavaScript) block the main thread for long periods, causing user frustration. In other words, which metrics are important to prevent earning the badge of shame for slow loading webpages? Addy responsed as following:

Great question. We are early on in deciding on the metrics, thresholds and methodology for the bar. We'll be determining this carefully.

As the First Contentful Paint is being shown with a PageSpeed Insights report as well as Google Search Console, my expectation is they will start experimenting with the First Contentful Paint.

However, the Largest Contentful Paint metric, replacing the First Meaningful Paint metric is being pushed as well. Don't be surprised if this metric becomes important for pagespeed badging, as it is more declarative towards real user experience. Do users see anything meaningful yet, without to too much following layout repaints?

Bounce-rate due to pagespeed icon or badge

There's too much here that's subjective and will more often negatively affect sites rather than benefit. If a loading message appears trying to view a site I'd leave.

Come to think of it, this is going to increase bounces for the entire internet. Congratulations, you're artificially lowering everyone's already minuscule attention spans.

A side effect of showing a badge might be that user's know what to expect. On the other hand, as you now know beforehand if a site is likely to load slowly, you are inclined to click away earlier, visiting a competitor's website. Obviously not what we wan't, but losing visitors and conversion could also be a future consequence when not looking after on pagespeed and user experience at all.

Prevent a performance badge of shame for slow loading websites

Some are even pointing at Google for slow loading times, for example using Google Analytics or Google Fonts:

Will you ban those using google fonts and google analytics js? Because they are slow also you know.

Custom, or Google Fonts

However, Google Analytics and Google fonts are only slowing down your user's experience, when you let them (although, Google Analytics is asynchronous). For example, when not doing font-swapping using CSS or native browser API (using JavaScript), then it might prevent readers from starting to read the headline and text. What you should do towards improved UX, is showing a fallback font in the meantime instead of block displaying of the text while still downloading: Visible text is more readable than invisible text.

Meaningful Content above the fold

You should also focus on all elements 'above the fold'. It is only recently (October 8th) that Magento rolled our their CSS critical path feature. From consultancy perspective, I am already advocating critical CSS for more than 3 years, with great results towards First Meaningful Paint and user engagement. From that point, you can lazyload JavaScript or load JavaScript on demand (only what is needed). Start focussing on the First Meaningful Paint, to also fix your First Contentful Paint or be prepared on the Largest Contentful Paint metric to be introduced or even used for slow website shaming, displaying a badge.

Personal take on pagespeed and badging slow sites

This move of Chromium is a change for Web Performance Optimization specialists such as myself, as GDPR is towards Data Protection Officers. The conclusion? Somewhere along the road, we just stopped caring about performance/UX (and privacy). Just like advertising and marketing agencies knew some third party-trackers were against prior regulations, we could've known we were bloating the web. So:

This [badge] would give advantage to those with more money and to those with knowledge enough to game the system.

I would say, it will give advantage to those who didn't stop focussing on pagespeed, performance and UX from a technical perspective. For the rest, read the "Back to school" section.

The Internet has always been, and should continue to be a place where anybody and everybody has an equal voice.

I would like to give this a spin: the Internet has always been, and should be accessible to all, including those with less powerful devices and lower network connectivity. We just forgot how to browsers work and build websites for good performance and experience.

The performance camp is small

Most twitter replies were disapproving towards showing a badge for webpages on origins which typically has slow loading experience. However, I could find some replies who approved identifying slow and fast websites, and also explained why:

RIP the replies, I don’t understand why devs are so hostile in raising the bar for performance and UX on the web 😂

This accomplishes two things:
1. Sets users expectations
2. Creates a positive incentive for folks to make their sites faster

Even after years of Google highlighting the benefits of fast websites and creating lots of content about it, the result is still that most websites are slow. This became even more apparent for me after moving to Asia with higher latency.

Google's secret agenda

Some even claim Google might push their own products or create a new form of income. Some quotes:

This seems like a tool to sell site owners on AMP instead of something that actually helps site visitors.

[] while you’re waiting, Google could show you some ads from faster competitors?

[] which may include paying for higher ranking.

Don't give Google or Chromium any ideas! But all jokes aside, the fundaments of the web is still HTML, CSS, JavaScript, Media, no matter the frameworks or libraries you use. Although introducing and showing a badge for typically slow pages may be (another?) bold move, I don't think AMP will become the go-to framework. We just have to reset our mindset of the web, and start learning how browsers work.

Back to school

As a lot of frontend developers are jumping on JavaScript frameworks right away, we should learn them that HTML renders as it streams into the browser, while JS is render blocking at all times. A user won't see anything meaningful untill JavaScript has been downloaded as well as parsed and executed. This is taking to more steps, before rendering something on the visitor's screen.

Nothing wrong here, except the diversity of used browsers and effect internet connections is becoming bigger and bigger. Although with 5G and the newest smartphone, internet speed and CPU is improving, the average experience isn't shifting that fast while website become more bloated than ever, relying on the user device's CPU more than ever as well.

Enough reason to take a step back, learn how code we write is interpreted by browsers, become a pagespeed and performance developer as well and make my work or job redundant, as soon all agencies will finally have in-house specialists! Don't forget, an overal good experience is also good for conversion and business!

Want me to prepare your agency or business and train your soon to be Web Performance Optimization specialists? Just get in touch, using the button below!

Let's get in touch!