 I think at first, as always, actually, who are you and why? Yeah, that's good. Oh, okay. I'm Vinum Rada, affectionately known as Vee. Like the movie... It's easier to say. Yeah, also Vee for Vendetta. Oh, that's a good name for Vee, yeah. Powerplay, no. But yeah, I'm a product manager on the Chrome Web platform team. Work on Lighthouse, Speedmetrics, trying to, you know, make the web fast. All right, that's good. Nice, and I'm Eric Pytelman. I actually work with you guys. Look, everyone we've interviewed, we work with, you don't need to say that. Try to be perfect to Claire. Look, there's a certain amount of, you know, theatre here. Yeah. Like pretending we don't know all of the content already. Also, have you ever done video before? No. This is how it works. So you have this really lame thing that you develop and that you PM, what is it? Yeah, what's Lighthouse? What does it do? Yeah, talk about it. Go. Sure. I can. It's your product, Vee. Sure, so Lighthouse is a developer tool. Anyone can run it and it basically gives you a personalized report over your website across five different categories, progressive web app, performance, accessibility, developer press practices and SEO. You got that memo right. That's pretty bad. I'm a PM, I pitch this every day. I could have been able to say progressive and accessibility and then I was like, well, that's all I know. So who would run this and when? What's the... Yeah, so we really think it's for any developer that's building a website and we think it's really helpful because, you know, there's so much advice at Google and like, you know, other blogs kind of give out in terms of like, what are you supposed to do to build a good website? And our mission is really to try to like consolidate all that together in one place. So you can just run one tool, it tells you exactly what you need to do and then you're just like done. And we have the DevTools now, right? Yes, we do. You can run it on the Audits panel. Audits panel. One could say it's a guiding light for web developers. Oh, wow. Look how the metaphor works out. Let me drop those all down. So give you an example of one of the things that Lighthouse is going to tell me I'm doing right or wrong. What's the... Sure. So for example, in the performance section, it can tell you if you've optimized your images properly. Which lots of people don't. Yes. It's a very easy win that you can get and you can do in order to, you know, improve the side of your performance with PWA. It can tell you like if you have a service worker installed, errors in your manifest files. What I actually want is, can we, you know how when anyone mentions Intel, it has to cut to the like the little logo and... What do we have to do to get one for service worker? When your face shows up goes... It assumes towards the camera. Yeah, we make that happen. Can we do that in post? We'll do that in post. But yeah, I mean, there's a whole bunch of things Lighthouse can tell you. Performance, images, amongst many other things, PWA, service workers. So, we are out of jobs, basically. So we're telling us. Yeah, that's just true. Yes, that was a goal all along actually. That hurt? Yeah. That's like our key success metric is like, do Serma and Jake have a job? No. Yes, success reach. Dot com. Do Serma and Jake have a job? Dot com. So what would we do instead? What's our backup? Well, I have a DM, mate. Yeah, and now the service worker thing is done. What's next after service worker? Everybody's shipping now. We do background fetch. I've got stuff on the background. I might be okay. Solving people's performance problems. Is it load time performance? Is it run time performance or both? I think our goal is both. Ultimately, we want to be the most comprehensive tool possible. And we actually added a whole bunch of new loading focused audits this year. There's a talk that Addie and Eva gave at IO this year. So if you're interested in... Talk to you later. Yes. So you can learn more from her. Yeah, don't steal our content. Yeah. I already know that. Sorry. So it's like how something that developers are going to have to run manually when they want? Or is there a way they can put it in their tool chain? Yes, yes. So you can run it manually through DevTools as we talked about. There's also a standalone Chrome extension and PM module. Those of us who like running things on the command line. But actually at IO this year, we're announcing an API in which people can use to kind of automate... Like the White House as a service. Like the White House as a service. Like Lassie, like the White House dog. Yeah, like the like mango Lassie. That too, that's delicious. That too, yes. If you want to drink it or... I'm going to straw her in the Lighthouse. Lassie as a service. Lassie as a service. Drink up. But yeah, so you can use the API and integrate it into your CI workflow. There's actually one of the partners we work with on the API. Duda, actually named after the dude in Big Lebowski. Funny enough. You have a fire. Yeah, so Duda actually integrated it into their Jenkins continuous integration pipeline. We're going to show off that demo at IO as well. So at this date of the union, they said they're looking into how they can... Instead of just, you know, you use AMP, therefore you get batched. Like you do good in performance. Therefore you get a good rating on search. Does it mean that if I get a good score in Lighthouse I can be pretty confident that I will do well in whatever they come up with as well. Yeah, so the details of like the exact criteria we're still working on figuring out exactly. But what we're trying to do and make sure with the criteria is whatever metrics that we tell developers to optimize for that there's a way to measure it in the lab and there's a way to measure it in the wild. That sounds good. Yeah, and then in the lab obviously we're going to make sure that tools like Lighthouse are exposing those metrics as well. Yes. Short, long answer to your question. I mean that's good because that just means you said you have an MPN module, we have it in DevTools. I mean I can run it locally and then I can put it on my CI as well. Yes. And I can like... You want to test the public version. Reject the PR of somebody that's stupid things. And you can use the Lighthouse API if you want to run a scale and you don't have to install anything and just get... Don't have to keep your own machines or anything like that. Keep your own machines or anything like that. You basically could. So how quickly are the rules in Lighthouse developed? Like if I, you know, work really hard, get my like score of 100 on Lighthouse, how am I going to check back next week and it's going to be 50? So we try to make sure, you know, things like this don't happen, but we also want to make sure that it's comprehensive and kind of we keep up to date with the currency to the union. So I don't have like a exact like, we add one new audit every month, but we try to make sure that we kind of tackle different parts of like the performance experience. So we've spent a ton of time on performance and we launched search engine optimization audits this year and our kind of next focus is going to be on user experience audits, and getting like the forms, like how do you make like a really good, you know, form experience, which is really important to a lot of folks who have like, you know, e-commerce stores and they want to convert a lot of users to make a lot of money. So we have the Perf Sandbox over at the Sandbox area and people can like come up and try Lighthouse, right? They can enter their URL and run the tool. On the actual Lighthouse. On the real Lighthouse we have here, it's incredible. This video is going out after I.O. So you're not, pitching that is useless. This is not live. I've been very pleased to see all of the score. The accessibility scores are actually pretty high and SEO scores are really high too. So people care about accessibility and SEO. That's good to hear. 90 plus, so they're doing really well. Oh, just testing the same site over and over. That's true. Example.com. Doing well. So what have you been doing then? Yes, I've been working on Puppeteer and working with Headless Chrome. I got really excited about just controlling Chrome. Right, yeah, that's two things. Okay, let's parse that out. Yes. All right, Headless Chrome. So Headless Chrome, I think we shipped it, maybe Chrome 59 last year. Basically run Chrome without a window, right? Headless mode. So, yeah. Headfill mode, Headless mode. So, like what Fandom used to be, Fandom.js. Yeah, exactly. So, cool thing about this is it's blank. It's Chrome, right? It stays up to date with the web, so you no longer have to... I got the new APIs. Yeah, exactly. You can test service worker. Does it stay up to date with each version of Chrome? Yeah, exactly. Oh, excellent. So it's just Chrome, but you throw on a command line flag, dash dash headless, and you don't see Chrome, but you can still do everything it does. So it's kind of cool because we can, yeah, finally test service worker. We can write an app that uses modules, and we can test that. So how do I control it? Like there's Chrome, Headless, there's no window. Yeah, exactly. So this is where Puppeteer comes in. Oh. So Puppeteer is a library that we created. It's a Node library. You can get off NPN. It bundles Chrome, so you don't have to worry about getting that or anything. And you can basically just use these high-level APIs, control Chrome, do everything the DevTools can do. Oh, seriously, the DevTools protocol? Yeah, yeah. So the protocol is crazy big, as you guys probably know, and it's very complex. There's a lot of stuff you can do. It's not immediately obvious how to put things together sometimes. Can you do multi-touch for protocol? You can do touch. I think we're personally working on multi-touch. OK. We have keyboard input. We have touch, bare-bone stuff right now. But as the days go on, the engineers will add more stuff for sure. All right. All right. But yeah, anything DevTools can do, you can do in Puppeteer. That's really important as well. It's great to see, having that API to send out input events exactly the way that it would occur if the user... Because in JavaScript, you can't. If you like dispatch event yourself, it's different. It's different. It's slightly different. Exactly. It can screw you over really bad. Right, exactly. So that's why it's so important to be doing this stuff. Yeah. For real. It's cool, too, because DevTools has features like emulation and code coverage and all these really powerful things are adding. Now we can tap into that and you can write scripts and analyze your site in a different way or something that DevTools might not be able to do now. Haven't you thought of that? Is coverage already exposed in Puppeteer? Coverage is exposed in Puppeteer. Tracing is exposed. I mean, that's also good for CI. We're going to like y'all. Yeah, exactly. You have unused CSS or something. Exactly. So I'm showing some cool demos because I was like, man, DevTools is cool, but we can be even cooler than the DevTools. We're totally going to enter both of your talks in the description. Nice. So what is the biggest upcoming thing in Puppeteer that you look forward to? Biggest upcoming thing. So we just... We're working on more touch stuff just to making sure the input APIs are really good. Yeah. We're working on being able to test your end-to-end kind of PWA story. So, you know, does my app fully work offline? Am I like missing something from the cache? Yeah. Being able to do things like turn on and off notifications, kind of go through the end-to-end story. So many things I never thought about that they would be testing. Yeah. Well, you can test for UI. You can test whatever you want. Yeah. A notifications part is that some of these they need to add at different layers. And this would be at the DevTools protocol layer. Screen casting is another big feature request. People want to be able to take videos of what's going on on the screen. So it's headless, but it still gets rendered to a video? Yeah. It's just like Command H, highlight the window. Yeah, exactly. Is that how you implemented it? It's a trick. Excellent. It's outsourced. Some person somewhere goes like... I think on Mac, sometimes you actually see the Chrome logo come up so what we're hearing is massive hack. Massive hack. Right. All that engineering work. All Chrome with its, you know, beautiful tricks. From my experience, I can say the upset is I used to set up like testing on Travis or whatever. And then you have this whole dance of installing the X frame buffer server and starting Chrome with that frame buffer device. And that's not necessary anymore. It can just started without an actual UI. We were actually doing that lighthouse for a while, maybe, you know, as soon as Headless Chrome comes around, you can add that flag and everything gets a lot easier. Which order? Which order? Which order? Which order? Which order? Sorry, did you want to do this in English? Yeah, because we were going to explain it in our own words. We'll catch you on our fast load. Okay.