Why Master the Chrome DevTools

[00:00:00]
>> Jon Kuperman: Why master Chrome DevTools? I was thinking about this as my pitch for why to take this course, or why I've been so obsessed with these tools throughout my career. And I think I've kind of broken it down into three categories. One of them is the idea of becoming a web performance expert.

[00:00:16]
So I think forever, in the past and in the future, squeezing out more performance from your application is always incredibly valuable. So I think it can be something that differentiates you on a team, being somebody who is really invested in performance and can help make the app faster.

[00:00:33]
I also think it can help differentiate your company, if you have, say, a startup, being a faster, better working version of an app can be really powerful. And we'll go into a little bit of Google's studies on performance and how much kind of it can affect the bottom line of different types of businesses.

[00:00:49]
Maybe my favorite reason that I love the tools is to quickly become the one on your team that fixes or digs into really complicated bugs. So I think we've all been there where we've had some bug report comes in. And it's hard to reproduce or it can only be reproduced in a very certain state and you put some logging in and it's not really triggering the way you want.

[00:01:07]
At a certain point, you'll need tooling to be able to better understand your application itself. And I think that Chrome DevTools offers a lot of that. We'll get into today with CPU and memory profiling or step through debugging, being able to walk up and down call stacks. And really understand your application, even being able to understand why the UI changes without even knowing where in the source code that comes from.

[00:01:31]
So there's all sorts of cool things that the DevTools can give you that can kind of make you the person on the team to reach out and say, hey, I'll take that one, I can go ahead and look at that and fix that bug. And the third thing is just being able to prototype quickly, whether that's in HTML and CSS with the kind of element view, and being able to quickly build a new UI.

[00:01:50]
Or whether it's with the console, and being able to kind of hop quickly grab an HTML element from the DOM and do some operations on it and see in real time how it goes. Alternatively, just in the sources tab, being able to make quick edits to your JavaScript right there, can I think really help you get a prototype of something really, really quick, and I think that's very valuable.

[00:02:09]
So the first point, the performance thing. Google over the years has sort of led the way with a lot of these doing out in the open performance audits. Trying to really get to the bottom of, does performance matter? And if so, how much does it matter? How can we quantify it and kind of leveraging that in order to help them get budget to build out their own amazing tools.

[00:02:30]
So for those that have seen Google PageSpeed Insights, or Google Lighthouse, or the DevTools themselves, Google has invested in all of these tools. And the reason why is because when they work with their partner companies, they really do find that squeezing out performance from your application can make a huge difference to the bottom line.

[00:02:47]
So for those that are not familiar, there's this really great website, web.dev, that's maintained by Google, but it has contributions from all over the Internet. And they've got all these really amazing studies and they keep publishing them, they keep them up-to-date. So, here was one that they did with Renault, this is one of their partner applications.

[00:03:04]
And they essentially worked on one of their metrics, which we'll get into in a little bit, Largest Contentful Paint. And they basically released all of these different versions of the website where they were working on optimizing the render to be faster and faster and faster. And at the same time, they used an analytics engine to look at conversion rate from this particular page, that was like signing people up.

[00:03:24]
And they found this really, really dramatic relationship, where, essentially, the faster they could get the rendering, which is on the x-axis to the left. If the Largest Contentful Paint was 0.2 seconds to 0.4 seconds, then they had extremely high conversion rates. It's like 35% plus, which is incredible for a marketing site.

[00:03:43]
And as they would tweak it and release these AB tests with slower and slower, Largest Contentful Paint, the conversion rate dropped all the way down to maybe 16% something like that. So this is a simple example of a form, because it's simple to measure and things like that.

[00:03:55]
But you can really think about it for your application that, if the difference between a kind of fast and a really fast page could be something like 15% conversions on whatever it is that you're working on. Similarly, they did a bunch of aggregate analysis of retail sites and travel sites and found things like, well, what if we could improve the full load by 0.1 seconds, basically.

[00:04:19]
Something that would seem kinda small. And then took a look at conversion rates again, and on these retail sites, such a small improvement led to 8.4% increase, with retail sales, and for travel sites, a 10.1% increase. And there's a link here, they speculate on a lot of different reasons that people often give up on certain shopping journeys when things are taking too long.

[00:04:41]
Meanwhile, if they're really, really fast, you're more encouraged to kind of ride that high to the checkout. There's all sorts of reasons for it, but it is really interesting making the case that I think we have this tendency to be like, well, the site's fast enough, or something like that.

[00:04:53]
But the reality is that speeding it up can have dramatic effects on your company as a whole. Another thing to kind of always keep in mind, I think, one of the traps of web performance is falling into, if you're in a country where you have access to fiber speed Internet.

[00:05:10]
And you're on a brand new MacBook Pro or really, really powerful Windows laptop. And so you've got this incredibly fast connection, a great CPU, great memory, and the website loads really fast for you. And it's like, okay, that's great. But if you're trying to reach into emerging markets, I think it's really important to get benchmarks on how your site performs on average network speeds, average devices.

[00:05:32]
This is especially true for phones, but it's true for laptops as well. So I think a lot of big companies will do kind of, I remember when I worked at Twitter, we used to throttle the network the first Tuesday of the month or something like that. As a forcing function to gain empathy, for what it's when you're not on this hyper-fast fiber network.

[00:05:49]
And it led to a bunch of really cool initiatives basically trying to make the site faster. So, a lot to kind of think about there, but the ultimate takeaway is that, I think, performances, obviously it's important, but I think it's maybe even more important than we give it credit for.

[00:06:05]
It can really affect the success of your company. Another thing to consider with with speed in general, is that many years ago, Google and now almost all search engines have made the public decision to take speed into account for search ranking. So truly, you can kind of tick off all of your SEO checklist, but if your site's slower than your competitors, there's a really good chance that they'll be ranked above yours.

[00:06:28]
So if you're in any kind of company that relies on this kind of organic search traffic, speed can also be not only important for conversions, but really important for actually getting seen in the first place.