Chrome DevTools Just Got Better: Use Live Metrics & AI to Tame Web Performance

Written on



For those who have ever wondered about the performance of a webpage, I attended Google I/O and have shared the details in this post. Firstly, I have often been put off using chrome developer tools for performance because of the intimidating set up whereby chrome developer tool records the loading of a webpage and then provides what is called a performance trace, as shown in screenshot.

A screenshot of a computer AI-generated content may be incorrect.

Nerds may love this, but this induces many including myself into having a thousand-yard stare. Analysis required a degree in computer science that is absent here and for most.

Alternative to chrome developer tools: webpagetest.org

Instead, I personally used https://www.webpagetest.org/ for situations where analysis was needed on these types of projects and avoided using lighthouse and indeed interacting with chrome developer tools to a large degree.

The webpagetest tool provided screenshots and video captured as the page loads, page performance and core web vitals information for the page. All this using a configuration of preferred browser, location, & device options. Brilliant.

Changes to chrome developer tools performance tab

Google, the developers of chrome, have listened to feedback and have, in their Google I/O Extended, provided details of updates new in chrome developer tools. Now, the default screen of the performance tab is substituted for a Live Metrics panel. This panel shows the core web vitals information, as before, and when switching from page to page, it updates. A traffic light system denotes whether you are in the safety of green or the danger of red for the core web vitals metrics LCP, CLS and INP.  

But wait, there is more.

The core web vitals metrics can be broken down into Local Metrics and Field Metrics. The latter form the chrome UX report shows how your page viewers experience your page – thanks to the anonymous data opt-in via Google chrome. The former can be tweaked by emulating different types of machines used to view the webpage. So, you can emulate how most users experience the page and are a function of your machine and the devices it emulates.

AI assistance in chrome developer tools performance tab and elements tab

As with all technology updates these days there is an artificial intelligence context and this is no exception: Gemini provides AI assistance in chrome developer tools as part of chrome 137 and up. This is wherein the key advantage lies in using chrome developer tools. A developer can converse with an agent (Gemini 2.5 Pro) and test changes to a page derived from AI chats where elements are modified manually or by AI. Indeed, Barry Pollard at Google I/O Extended was able to curve the styling of elements of a webpage via Gemini. There is currently no need for a Gemini subscription for AI assistance in chrome developer tools.

All in all, a fascinating development from Google at the recent Google I/O event and another tool in all the best web entusiast's stack. 

Topic:

Popular posts from this blog

What Mary Shelley’s Frankenstein tells us about AI

Written on
Image
Likening the influx of AI to shocking life into being using electrical current may sound tenuous but hear me out. AI may seem like it has feelings, it doesn’t Unlike the creation of Victor Frankenstein, AI does not have feelings. It tries to be polite, but it cannot put the concentrative effort described in Frankenstein into learning language and new words. However, AI must be trained on data, granted, but the feelings of compassion, envy and wonder described in the novel Frankenstein are not the same as the furnishes put on many AI-powered LLMs to resemble emotions, like the need to pause for concentration etc.   What science fiction says about science In Frankenstein , there is a character made by Dr. Victor Frankenstein using dead body parts and electricity. A bit of a leap into the evolutionary dark, to say the least. The Creation at one point moves into exile from his creator (and the whole town of Ingolstadt, setting for the novel) and readers are taken on an advent...
Read more

From Masterplan To Masterclass: How Oasis Monetised Their Fans' Loyalty

Written on
Image
  In the wake of the recent iconic Oasis gigs I wanted to help end the fruitless and hackneyed speculation about how famous music bands generate profit via the revenue streams they have. I’ve sat through enough conversations about ticket prices to serve a lifetime’s need. How Do Bands Like Oasis Really Make Their Money? For a band like Oasis, they have more revenue streams than most famous bands. Whether it is collabs with clothing brands for the merchandise, tickets to live performances, dynamic pricing on tickets, promotional tie-ins or music streaming royalties; Oasis Corp has a finger in many pies. Decades Later, Oasis Still Chart Well Take for instance the hardest aspect of working in music – songwriting. Oasis has written a lot of top tunes. “Wonderwall” has been covered over 100 times, most notably by Ryan Adams, Cat Power, LeAnne Rimes and Brad Mehldau Trio. Indeed, Oasis wouldn’t have the audience Oasis commands without the back catalogue of anthems like Wonderwall...
Read more

404 and ‘Thank you’ pages provide a unique opportunity for retention and conversion

Written on
Image
  I have a mantra I stick by; ‘Always be optimising’. This comes in quite handy (and by quite, I mean massively) when improving a website. When it comes to boosting conversion and conversion rate optimisation, even the smallest of changes can have a big effect. However, I am not going to discuss here a small change, rather a radical one, not often considered but with returns to rival the best tactics. That is, the optimisation of failure and success pages. How can I boost goal completion? A great way to boost goal completion is to add relevant links to often forgotten pages. The 404 error (failure) page and the thank you (success) page each present unique opportunities for retention and conversion. Taking 404 pages first, let’s recap on what it really is. 404: a standard HTTP response code that says to the user that the server could not find the requested file. In most cases, the page is alarmist or worse, unreadable. Failure pages can lead to success — follow 3 easy steps Some qui...
Read more