 To our newest hackathon on air today, we're talking about Chrome DevTools We dig a little bit into it how you can use Chrome DevTools to improve user experience on your site The session is targeted at developers, but also non-developers. So like if there are certain parts where you said like, okay I already know that don't worry. Just you know keep watching. We talk about some interesting stuff I'm Dominic. I'm in Mobile UX in London and I'm here with my mate Dennis He's sitting in Dublin and we just switch over right to him Hey everybody, I hope you can hear me. Well, hello from Dublin Hope you're looking forward for the session and I'll think we will jump right into the content into a second Let us just switch back to the slides Well back to you Don I mean if you want to follow us on Twitter I'm you can find me under the username Dom Heyberg or Dennis is the Robotnik We treat about some UX stuff about some speed related Content and also just you know random random tech stuff. So definitely John is there and if you have any questions about today's session, we can also take the conversation over to Twitter So yeah, let's dig right through in as you know, there's a live chat So if you have any questions throughout the presentation, just you know type your questions away We try to pick them up as good as possible And give you an answer during the session Perfect and also guys if there's an issue with sound or anything just let us know the chat We'll try to fix it right away But I'd say let's just jump right into the content as Dom mentioned before today will be about Optimizing for the users. So to give you in a quick overview on what you can expect from today's session We want to start out with well, we can see it already on what kind of factors might influences might influence mobile users experience And how will this then affect your business metrics and then in a Later session a later part. We will try to show you some Ideas on how you could potentially tackle these challenges and optimize for your users and after what's done We'll show us a deep dive into Chrome DevTools On actually how to diagnose for this problems in Chrome DevTools and how to use Chrome DevTools and other Google and non Google products to actually Improve your users user experience your mobile user experience that is So as you can already see we started in a little bit So there's a bunch of different factors which might influence your mobile users experience This is not complete by any means, but I think these are some main Issues you might want to think about or care about for your mobile users And what of course is mobile side speed if you follow our series here, you know We will had a lot of episodes already on mobile side speed And as you can see at the arrow there Usually we think mobile side speed will mainly affect your user acquisition Because it will affect your new users which come to your side, etc. You notice stuff Let's not dive into that second part overall will be a mobile infrastructure Which is very dependent upon the market you're working in or you catering to Which is basically what kind of connectivity do your users have in the mobile market? Or in the market you catering to and this will probably affect your users activity And that one is probably choice of products Meaning is there a lot of competition are you in a highly competitive field? Is there a lot of other choices people or users could make instead of your product of service? This can potentially affect your user retention meaning will users come back to your side use your service again And we have multiple devices. I think you know that one we know that people are using the web on multiple devices and With that comes a challenge of cross-device conversions and how can you track them? And how can you make it easier for people to start at one device and maybe finish their journey in another device on another device and Last but not least of course is the ease of use the convenience How convenient is it to use your product or site or service whatever you're offering? For your user. This will of course highly affect your users conversion at the end So this is a brief overview on potential influencing factors Let's dive into what potentially you can measure To check if these might be an issue for you and then let's check what possible actions you might be able to take to tackle these issues So Again, if you watched our series before mobile speed as said before is bad or can affect your user acquisition and How can you measure that? Well for once we usually recommend using speed index To measure generally the perceived speed for your user Another one would be first meaningful paint, which is one of the metrics you can see in lighthouse. We will well show you a bit later and Of course from a business perspective, but also from a user perspective. You might want to also measure bounce rate Because this is where people leave your site without seeing another site So and this is how you basically well what affects your user acquisition There are of course other metrics we could have a look at this is just then well an idea to what to look out for These are easy to collect metrics. Usually you can either do it with Google analytics or speed index You could do a web page test org Or first meaningful paint you could do with lighthouse, which is part of the chrome develop the developer tools And if you then see well, this is not ideal I'm not giving you any benchmarks today, but you if you decide for yourself. Well, these metrics are not ideal Here's a possible action you could take so first of all and don't will show you this later on you could start diagnosing your site with Chrome developer tools and On how to actually improve for speed Which basically or mainly Talks will factors in the critical rendering path and improving the critical rendering path for your site Another option would be to build an amp. We touched upon this in our last series So if you haven't seen it I'd highly recommend going back have a look at our amp amp Stream from last month Second would be mobile infrastructure. This is a bit more tricky because as I said before it's market dependent Just two ideas to start with that if you don't have an idea about the mobile connectivity and infrastructure of your market GSM a is usually a good point This is the GSM association We could get nice stats and benchmarks from well markets all over the world And also we released a new set of data Which we call chrome user experience report It's basically a big SQL table which is available in big SQL for free We can also dig into the data there and to get an idea What your market looks like And another possible action to do this. Let's say you're in an emerging market or Well, you have services that Should be available all the time. So ideally you don't want to be dependent on connectivity You could for example add offline functionalities using service worker and we also touched on that a bit later Choice of products you might want to have a look on returning visitors versus new visitors You could also check on day since last session Because we think user retention will be affected by that and these metrics should show you your users retention To tackle that for example another world PWA features or feature of PWA You could start implement at your home screen functionality or you could start push notifications Multiple device which of course is cross-device conversion Look at your mobile versus your desktop conversions. You could do that in Google Analytics, for example Google Analytics also offers acquisition device So have a look there if you see There's a thing you would also highly recommend to not go for a last click attribution So you should have a holistic view on how you how your users use different devices To use your service or product And if you ideally want to Well improve that you could for example start implementing the credential management API to make it easier for people To log in again or to sign up for something Or you could also make it very easy from a user's perspective perspective to switch between devices Well, very simple example would be they start the journey. There's somewhere in the checkout funnel Give them to opt the option to mail their choices to someone or to themselves or give them a social Sharing option something like this make it easy for people to switch devices And the last one ease of use very holistic as well Well thinking about conversions look at mobile conversion rate Maybe look at your average order value if you're in an e-commerce sector And think about maybe improving your checkout funnel We had a nice series and that as well a bit away a while back This is basically how can you tune your checkout funnel and cater to your audience or Think about implementing the Google payment API Which makes it way easier to make quick payments and mobile without entering too many and details for your users Yeah, that's about it I think Dom we're going to jump into Chrome deep type now and you'll probably show us how we can diagnose other side Yeah, exactly. So I think Dennis mentioned a few good points here And you know, it's obviously a lot of information and a lot of things you could look into so While this is always a challenge the great thing about Chrome dev tools is that it's a very powerful tool tool that lets you quickly identify Issues with your side bottlenecks. It lets you test Different different ideas you might have for the home page you might have for the checkout funnel and basically Enables you to try things out to identify things beforehand get them into the planning stage And then, you know tweak the actual code of your website So I'll run you through a few tabs within Chrome dev tools and just explain what are they for? How do you set them up properly and what information can you actually gather from them? So? The first thing when you open Chrome dev tools on on a Mac You would do it with command else and I on a Windows computer control shift I The first thing you would want to do is like using cognitive mode because For example, if you use a performance tab and you record a timeline if you're running a bunch of Chrome extensions They can actually add some unrelated noise to to the timeline and and you don't really want that because you know it It might be that they kind of disturb your recording and you actually think there's a problem And you start debugging you start looking into it and you realize well actually that came from the extension So there's nothing really wrong with my site. So general rule using cognitive mode Second thing is really important is to disable the cache usually that's Checked by default when you open Chrome dev tools if it's not please make sure to do so because a common mistake We sometimes see is that people are testing their side obviously it's their side so they've been to it like multiple times and A lot of the resources are already in the browser cache hands You don't really run into any any issues when it comes to for example low time So really important is able to cash and make sure you simulate the first-time user that comes to your website And the third thing we recommend is to throttle the network connection to 3g This is just to really create a test under real-world conditions While obviously when we're locked into the Wi-Fi network or like a 4g network We have much higher speed. So like we don't really create those bottlenecks as easily as you know over a 3g connection what we like to say is Kind of optimized for the you know worst possible case and and this way you can be sure that Every case every case is covered. So Those are the three things that that you should set up when using Chrome dev tools And so now there are different tabs and you probably I mean most of you probably played around with it Some of you are very familiar with death tools. Some of you are not that familiar So as you can see here, there are a lot of tabs and now like the question is well What what is each tab actually for so today what we want to do is we want to concentrate on the elements tap the Network tab the performance tab and very very briefly the audits tab because we just So starting with the network tab basically what the network tab is it It is really powerful in letting you very very quickly identify if there are some resources on your side that cause major issues So basically when you have the network tab open and you load the page What you get is you're getting like a waterfall Which basically shows you which resources are loaded when how long does it take and how does it actually affect the critical rendering path of your Of your website So the one thing you want to do is you want to check the little camera icon to ensure that you capture the screenshots So you know exactly How much of your of the critical content on your page is loaded at what time the second thing as mentioned is the Disabling the cache and the 3g Now when you get the result To some it might look overwhelming and you say well What do I actually look out for now like what am I doing here? So the first thing that that is always interesting is to look at the total megabyte transfer which you can find down here This gives you an indication of how big your website is You know transferring megabytes is expensive The bigger the side the more expensive it gets so you really want to aim for having a relatively small side So, you know, don't you don't want to transfer For example images that might not be seen by the user So you want to have a look at how big is your site at the moment the second Good indicator of performance is the DOM content loaded and the load time So you can really see okay at what point is the document object model Fully loaded and how long does it take to load my to load my side, you know that gives you really quick indication Okay, actually I'm doing quite well. I might you know, I might need to focus on something else like maybe more UI Improvement or you you spot like a real problem with it You're like, you know 10 12 15 seconds the average load time of a three of a website loaded over 3g is 19 seconds so You know when you when you spot something like that you can say like okay, I got a problem You know, let me dig deeper and see where it's actually coming from And then what I always do is to kind of like just have a look at the progression of the rendering path Which is basically here. So you just really want to see How long does it load to actually how does it take to load the critical content and and when will the user be able to actually You know view my Product that I'm offering fill in the lead generation form, you know, whatever your business model is When you drill down further, there are you know a few things that you know I like to call a usual suspects that you should be looking out for because those are the things that you should Optimize that have the biggest impact on on your performance the images on average images account for 33 63% of the average page total weight and what we often see is that it's not because all the images are actually needed But it's rather that The image is too large So like you I got like this desktop image that you shrink down onto mobile with like max with a hundred percent Or you just load a bunch of images somewhere below the fold You know and and most users might not even scroll that that far down. However, you're still loading the images You're you know exhausting the bandwidth and you generally slow down at the rendering of your off your website The second thing you might want to look out for our custom fonts. So custom fonts are really popular and It makes sense. I mean they're beautiful and and to some companies very important to maintain the corporate identity across various channels however, the one thing about custom fonts is that they are they can be quite heavy and so they might create or they do impact the rendering Because every font comes with a CSS file and a font file. So you got like this extra Milliseconds of delay in the rendering path and then they create The flash of invisible content, which basically means that you know, the text is already there that you want to show however the browser still waiting for the font and Until the font arrives the the browser is not showing the content which might be, you know Quite critical to to your business because you want to you know Deliver your message to the to the potential customers quickly as possible And the third thing to look out for is synchronous CSS and JavaScript purely because it's fully render blocking. So as you know, CSS JavaScript it has the potential to You know change the document object model It's it's you know, it's responsible for the layout hence the browser says, okay I got to wait and got to calculate how I should be a position everything So at that point or up until the point that I have all the CSS and JavaScript that I need I won't render the page And so those are like just three things you want to look out for when you know when analyzing the The the network tap so the great thing about the network tab is that you don't have to go through the entire list of Resources the entire waterfall and try to like find the one resource that is critical, but The network tab let you you know filter by resource type. So when you look here Here you see like it's all like basically we're talking about all resources that your your site uses now Basically, you can filter this by JavaScript CSS images media font, etc So just to give you like one example Let's say you you use the Chrome dev tools you do run Reload your page and you know, you say, okay, I want to identify actually where are the issues coming from so you would For example, just filtered by images and now you get a list of all the images that are currently loaded on your website now you can Basically some You can order these images by size So if you click once the smallest image in terms of weight is at the top if you click again It's you know the heaviest image images at the top. So Now once you do this you can like go through the list and say, okay 12 kilobytes for the logo That's probably fine, you know, and you just go through a list further and further and you say like, okay This image. It's actually I can't compress it any further. I can't optimize it any further But then you go down here and suddenly you said oh wow look at that There's like an image is 1.4 megabyte and there's another image. That's 581 kilobytes So this is potentially a big issue because again when we're talking about 3g connections We're talking about a limited amount of bandwidth and those images might take Like a long long time to load considering that you know the band with a split between Multiple server requests. So like you're not getting the full bandwidth for this one resource So this is a really really great way to spot like, you know top speed offenders on your website now once you've done that you want to kind of like, you know take measures to optimize and How you do that will depend a little bit on where this image that you identified as a top speed offender is Actually located if it's above the fold as in like it's very important for for your user Then you might want to look into You know reducing the pixel dimension further compressing it lowering the quality So taking different measures to like really bring this image size down if this image is below the fold hence Users that come to your website might not even see it You could work with something like lazy loading where you say well actually let me you know, let me wait Before I load this image and see if the user actually scrolls down And then if the user does so and you know you get like the you know the image Comes into the viewport you say all right now I actually Start loading the image this way you make less server requests You know your server is less busy you have more time for you know more important resources and you speed up You know the website in its entity And if we just have a look at it, so this was the second image that I identified as You know problematic it was 560 580 kilobytes and if we have a look at the load time we see over a 3G connection it took 12 seconds to load and Now if we go down here, we actually see why this is critical because at one second We're starting rendering and we have like the button, but we don't have much like the page looks pretty much empty for the user and This feeling of emptiness continues up until four seconds five six seconds Because basically this image is so long and it takes up to 13 seconds Until this this image is visible to the user and as we know It's certain in some research studies We've seen that you know 53% of the users bounce after three seconds that might not always you know be true for every vertical But it does show that you know the longer your website takes to load the more likely it is that you know potential customers already bounce So, you know if you spot an image if it's in the above the full content Just go ahead and try to optimize it as much as possible to create the best speed perception for user Once you've kind of like worked yourself through the network tap and you say, okay, you know, I feel like I've optimized the most You know the most visible Problems on my website like I've you know, there might some images. I may be loaded web funds asynchronously I reduced the size of my CSS and my JavaScript file Actually jump over to the performance tap and the performance tap is a really really powerful tap and it Like the the information that you can get there looks quite overwhelming But it really gives you a such a deep insight into what's happening on your side. So First of all, how do you do it? So you navigate to the performance tap now? What you do is you click the the record button here and now you refresh your browser So like you reload the page and what happens then is that basically we're taking a timeline recording So within the timeline recording The browser or Chrome DevTools records Exactly what's happening on your side, you know, when is the CSS loaded when is the JavaScript loaded and you know How long does it take to actually calculate the styles recalculate the styles and you know paint basically your website to the screen You you will be able to stop the recording at any time So like it will just go on and on so like you know when you said, okay I just want to test the critical rendering path So maybe you just want to record the first five seconds or something you can stop the recording and you can start analyzing and What you will get something like that So this is something you will get here So, you know, it's as I said to some it might look a bit overwhelming But basically you can see the network where you have all the resources that are being loaded And then you have the main thread where you can actually see what's happening like, you know What are what is what's a browser doing at this time? and the one thing for today what you should take away is to really look into you know What is your CSS and JavaScript doing? How does it impact? You know your rendering and as an ultimate goal You should try to reduce the scope and complexity of style calculations So, you know, you can see it basically here That we're loading the resources and then you see those those bars here that say recalculate style and basically recalculating the style is basically that you know the browser, you know Parges through your side, but then hit some CSS and the CSS classes give certain styling to the elements Hence the browser needs to recalculate. Okay, how do I actually position this? How do I display that? One good example is this one here. Let's suppose you have a Class which is title, right? This is kind of like the easiest form of styling or applying styles to an element But now as you know projects go grow bigger and you know, you usually have a bit more complex CSS And you might have you know something like that where basically you Give title like the class title is a certain styling But then you say well actually, you know if it's you know within the box element and it's the last child Then actually I want to you know change it all around so For us it's it's pretty easy because we're able to change, you know, like The style of each element and we say okay, that's for me the best the best way of doing it However for the browser this might you know might be quite problematic because you know as I wrote here Let's say you you have a style like that and basically the browser has to has to ask, okay Is this an element with a class of title which has a parent who happens to be the minus nth child plus one element with a Class of box so as you can see that's Quite something to figure out right if I would ask you that you would say okay Well, let me first try and figure that out now think about that. You don't have you know, you have like multiple You know of those statements in your CSS file and the browser is basically just Asking questions trying to figure out that the answer and then you know basically paint your website in the correct way to the screen this really really complex and The bigger your CSS file is The more elements you have on your site the longer it takes so one way of you know preventing that is Use a very specific like a very specific class like final box title. You say, okay, that's the you know, the final element Element within the box element and I want to apply this style to to to this element In the development process that might be a little bit more complicated and at first however From a performance perspective. It's much much better because the browser has to do less work to do other stuff and Ultimately bring the side to the screen now We just talked about CSS and unfortunately it's a pretty much the same process for JavaScript. So again When you load JavaScript The browser has to do similar work because you know, you might change the You know, you might change the layout within your JavaScript file So once the browser has you know downloaded and parsed the JavaScript The same process happens again. So like you know the browser says, okay Well, let me actually recalculate the style make sure that you know I I display everything correctly and then lay out it then paint it You know to actually give the user the website that was requested so as you can see it doesn't just stop with the CS add it transitions over to JavaScript and remember that for each JavaScript file this process will will be repeated. So Basically all of you probably once visited a few saw a couple sites that you know that we're using parallax You know like where you scroll down and you have like those nice animations And sometimes when you visit those sites on the mobile phone or like over a slow connection Maybe some of you felt like that. It's not really smooth and it feels like a bit, you know It's kind of like like lagging behind and and basically the reason for that is that the browser is doing, you know So much work to recalculating styles Implementing a new layout painting it new that is why it sometimes feel like slow and like lagging rather than, you know Producing like a good user experience and if you actually want to identify those bottlenecks, you know For example on a parallax site You can actually do that within DevTools as well, which is great. So the way you do that is Inside DevTools you hit the escape button and then like this little panel here will pop up console search emulation rendering and you basically hit on rendering and then paint flashing Once you select that and you're reloading your page You will see that there is like a bunch of green flashing going on wherever you see green flashing You know that the browser is painting so Sometimes on certain sites that do a lot of like calculate where the browser has to do a lot of work and does a lot of repainting You actually see that it's like flashing everywhere green. So you can really identify. Okay I'm having a paintball neck here and I should really take action to optimize this I Know this is a lot of information and it surely doesn't answer all of your questions So there are more informations if you go to developers.google.com Slash web slash fundamentals you can also just search for Chrome DevTools in Google and you will be You know, you will find the correct site. There are so many pages on this and really really valuable information So I can just highly recommend to go through through all the pages and we you know familiarize yourself with DevTools Because it's a very powerful powerful way of optimizing your site Now let's suppose you've done a network tab. You've done the performance tab and you're saying well next step Is I actually want to work a little bit on my UI Great thing about Chrome DevTools is that you will be able to do so using the elements tab, which is here so in this In this case, I just you know loaded the side think with Google I Emulated a mobile device which you can do by hitting this icon here And now I get the source code. So like the HTML and the CSS classes that belong to each HTML element What I really like about it is that I'll I'm able to Quickly test UI changes before I'm actually editing the code. So, you know, I don't need to Go to my code edit it save it In worst case, you know deploy it and you know then see what I like it or not But I can just you know quickly test it Right there see if I like it if I do I can take the next steps So the way you would do it is first of all, you would you know Want to identify an element that you actually want to change and see, you know, whether you can improve the The the user interface so for me that was I think with Google you have like the little magnifying glass here that's you know Basically shows the search box and I was like, okay, you know, maybe I don't want to hide the search box behind The little icon I might just want to make it very present. So but when I click it you, you know You look at something like this which I thought okay I don't want to have it, you know appear like that all the time. So I want to make some changes to improve the user experience So what you do basically is you You use a little selector to like, you know, select the element that you want to change and then you automatically will be Shown the basically the code snippet that's responsible for for this element So in this case it was the input field and I was like, okay I don't want to you know, have it look like this because people might not actually see it well enough so I want to give it a white background I want to Give the borders, you know a little round edge and I actually want to show The magnify an icon all the time So what you can do is you just select the elements like the input field like the button and Then you can add your own changes to element dot style So it's basically your you know, it's kind of like you're you're applying inline CSS to the code which then obviously overrides the The external CSS file and then like basically I just change it to up until the point that I said, okay Actually now I like it and now it's you know for me, for example I can take a screenshot and I can you know discuss with the developer teams and like hey look I actually made some quick changes. I think that would actually look better. I mocked it up quickly like you know like so What do you think about it anything? You know you want to change about it or anything else you want to change about it Let's just really kind of like work out a few un changes that we might want to deploy in a couple days To improve the overall user experience on our side now Some of you most of you maybe even have already done this and say okay, you know We know how that works and I mean that's great I'm sure some of you use it all the time But one thing that that I get asked quite a lot is well, you know What's what's not so good about it is that once I do the changes now reloads the the page Then like the changes are gone, which is true by default It's true and that's not ideal But there's you know, there's there's there's a way to actually make sure that your changes are saved So if you say okay, I want to edit some CSS But I actually want to save it so that you know once I've discussed with the team. I want to my you know I want to further edit it you can do so by setting up persistence with the workspaces so the way you do it is you Click on the sources tab and then within the left panel you right click and you Select add folder to workspace and then you choose a The location of a local folder on your on your Mac or on your computer And then you need to give Chrome access to the folder so you will be prompted to allow access So, you know, you just need to make sure that Chrome can communicate the local folder Once you've done that oops, sorry Wasn't right there once you've done so You want to right-click on a file in the sources In the left side panel, which you know might be indexed because you're working on the index ball and then you select map to file system resource, right so Once you've done that and you need just need to reload the page And what happens then is that when you load the the site in Chrome Chrome now loads it Now loads the map URL. So basically it displays The workspace contents instead of the network contents So when you make any changes and it will be saved to to workspace Then Chrome will actually remember that and say well, actually I have this version here that you that you were editing And I'll show you this instead of reloading the the resource from the network contents That's a really good way to you know quickly save some CSS changes And then you know continue work, maybe, you know another day or a couple hours later Some limitations are there unfortunately, so you can only change Make changes in the elements panel and make the persistence. So you cannot make any Dom changes unfortunately, that's not possible And also you can only define styles in external CSS files. So if you would Change the inline CSS that a website is using unfortunately. This would Not be saved. So just make sure that you know when you actually want to save your CSS changes that That you know you keep that in mind and yeah, so This is the elements tap and again to me. I use it all the time I think it's really really powerful to make some quick Changes and really validate some ideas that I have because you know probably all of you have ideas all the time But you know it's not until you see it on the screen that you actually say well That looks cool or that doesn't look so cool Cool, so like yeah, that is kind of like a wrap up You know three of the most important tabs, which is the again to summarize at the elements the network and a performance tab and A little bit later will quickly speak about the audit step as well. So now you say well You know, what's what's next, you know, what's you know I know how to optimize my current site but what are the next steps I should take like how can I actually you know wow people in the future and That's a really valid thing to ask What we like to say is you know, don't wow me in the future. You can actually while me now There's so many things out. There's so many API so many technologies you can really really wow me now the future is now and So we you know put together a few slides to show you what's possible And what you can use to really create an amazing flow for your user, you know increase conversions Make sure users come back to your side So really retain a customer as a valuable customer in the future and I'll hand over to Dennis who will run you through a few slides I'll jump in here and there so yeah Dennis take over and Tell us what was the future looks like Well, let's see. I think we try to have a nice little example here, which hopefully is not too constructed But let's all imagine Let's imagine I'm on the way to work and I'm commuting Sitting in a train having to kill like 20 minutes Pull out my smartphone and well, I want to buy a hoodie actually So what I probably going to do first is we'll start with research usually Easy enough put it in and if we go one slide Further we see well, we start we found something. There's a nice fleece hoodie Gladly, it's an AP page, which is nice because I'm in a train I might not the best connectivity anyway, and I know well well at least I know and you guys know for because your developers That this will be a nice fast loading page So what I probably will do I'll hit on the Thing and I'll end up on a page Around and then it happens what always To me either stuff is that I like is ridiculously expensive or it's out of stock because it's nice But everybody wants to have it of course So well, this would be a bummer, but now If you would have a PWA or some features of a PWA and you could Offer your customer to actually get notified when the hoodie is back in stock, which is kind of cool So that's a student that happens to me. I see that I'll tick that box and I get prompted This message will basically have to allow that I get Notifications from the site which I'll probably will do because I want to have that hoodie for me And at least now I know well, it's not ideal, but I hopefully they will just let me know when the hoodie is back in stock I'm still on a train Maybe start surfing again because I don't know there might be another hoodie I like so I don't have to wait for the other one to be restocked all of a sudden because I'm in a train Maybe I'll go through a tunnel. I lose my connection. So not ideal. This is probably why you with a well Normal side I would probably lose my customer here because as a customer. Well, I lost connection now Maybe didn't find the hoodie. I wanted to and now I can't do anything anyway. So I'll probably just Will switch back to I don't know Instagram or what's that? Here I doesn't have to be that way because with service worker. I can still continue browsing so I'll still have The same option I probably won't even notice that my connection is gone Which is great because well, I'm still there. I'm still browsing Well, and at some point I'll probably reach Well reach my work and put my phone away Yeah So what could happen now potentially? Let's say I'm back from work sitting on a couch watching some Netflix whatever And now all of a sudden I get notified by the website might be a few days later That my hoodie is back in stock, which is great This is what we try to show you or like what I tried to mention before in terms of retention This is where you probably get the customer back again on your side Even if he doesn't really think about the hoodie anymore But now here's the prompt you see oh no notification the nice hoodie the nice fleece hoodie I wanted to have is back in stock So I'll just click on it Have a deep link directly go to that side where my hoodie again. I'll probably already thought about color and size So all I have to do now is well order it This is another place where traditional sites that might be a bit Clunky to order it because I now have to start fill in a form if that form is not really mobile optimized Well, some customers might need fear again What you can do with a PWA again here is at the Google payment API, which basically lets you place your order With one click so you have the Google payment API or the credential API For signing up or paying stuff with one click. So we have a one-click checkout Which I'll probably going to do because forty nine dollars. It's not a fortune I already decided to having on having that hoodie Why not and there's probably an option to well return it if I really don't like it But it's way more convenient. So I'll hit pay And I'll pop my hoodie So since that Experience was probably rather nice because like well, at least I got my hoodie. It took me some extra days But they reminded me they made it very easy to buy my hoodie I'm all want to shop again with them Especially let's say I like the hoodie and I like that style and they have similar clothing. Why not? Here's another thing how you can keep up retention and Keep users interacting with your site because you basically use an app feature for your site You allow them to add Your site to your homes to their home screen That's also very easy to do you just prompt that message and then you have access with these So again a nice way of re-engaging your customers keep them interested and keep the retention up high if you notice Before if you might have a retention problem with well newer customers This could be a way to actually tackle that problem Yeah, I think it's I think it's a really good way of showing what's possible today. So I Think it touches a lot of a lot of things So, you know, you might feel a Little overwhelmed now. I mean it all started with the amp, which is actually something we We covered in a previous hackathon on the earth. So if you go to our To our main site where we have all the previous hackathons on there you'll be able to watch rewatch this video and Basically from this amp page you you know You you use so many elements of a progressive web app, which is basically, you know, just a You know, sort of like a native native app feel in the mobile web And then as Dennis explained you can do like a bunch of really cool stuff like getting notifications or you know, just Browsing this site although you're offline and the whole idea is really to create a user experience You know for your user that they really want wants them to come back now Because we're talking about DevTools today and you want to say well, you know, let's say I want to pick up a PWA How do I actually test if it's working and what are the steps I need to do so The great thing is that The audits tab which Includes lighthouse and some of you probably have heard about it lighthouse is an attempt to really Put together like a comprehensive tool that lets you identify The performance of your website including the performance of your progressive web app So when you hit the audits tab in DevTools, you can select what you actually want to test is a performance is accessibility is it best practices Or is it, you know the performance of your progressive web app? So if you say well, I'm actually working with a progressive or I have implemented features of a progressive web app like service worker You know or you know, whatever components you use or like splash screen or the notifications Then you can check this little box here. You can run the audit and then you will receive basically a report on The progressive web app and how you know things That you implemented works. So like in this case, I just you know used the Google keep Side as a dummy site and it's not a pwa. So obviously It doesn't look great right here But for example, if you registered a service worker on your side, you will be able to see whether that's working or not If it's working, it will be part of the past audits If it's not working, it will show as a failed audit and you will be able to actually debug what's going on here You know, let's say sorry just jump that too quickly. Let's say you want to prompt to the user to install the web app and You believe that you you know implemented this you can check it here whether it's working or not So this is a really great way to you know to kind of like see what's working What's not working? Why is it not working and how can I actually make it work? And as I said, so this is the report for the for the pwa But then you will get another report for the accessibility for the best practices and for performance And this is a very comprehensive tool that lets you look at a lot of metrics and Hopefully, I mean obviously we're still working on it but hopefully, you know really let you deep dive on your site's performance on your site's general user experience and ultimately creates Yeah, it created better experience for your users So yeah, I mean that was our session today. I'm Dennis. Is there anything else you wanted to cover? No, maybe we'll just Tip or hint if you want to see more of this content if you want to be visit content We have streams in the past. We have an event site We would love you guys to go there a give us feedback. There's a feedback button You can also sign up We're planning on doing well not more than two emails a month So you won't get spent by any means and you probably get a reminder for The shows that are coming up and we'll probably provide you with some more detailed information if you want to about How to optimize your mobile site for user experience? So that is it. I think with that we can just quickly check if there's any questions as well. So Let me just see I think there was one Good question, which is true. It's a question about service worker and about the compatibility And the question is as far as I know service workers only working for Android, which means all Apple users will not get notifications Oh, am I wrong? So at the moment, it's correct that service workers are only working on Android however What we saw is that Apple changed its work on, you know, allowing service workers from under review to in development So that's quite promising that it will soon be available on iOS as well But other than that, you're correct at the moment service workers are only working on Android. Yeah Okay Let me check if there's more questions Doesn't look like it guys if you have any questions. This is the time Oh Here's another well, it's a recommendation, which is nice quick future possible video JavaScript debugging in the source tab. Yeah Thanks for the feedback. We'll think about it if we want to deep dive a little bit more there. It could be nice. Yeah, definitely Other than that, I Think that's it for from us then if you have more questions, please also feel free to Twitter us Sign up at our homepage. Give us some feedback. We would love that You will also find the event page URL in the comments here And with that well happy Thanksgiving if you're celebrating it from me from Dublin and For me from London We hope we were able to give you some more insight on Chrome DevTools and we also hope you learn something And I would say other than that we will see you next month with our last episode before before the end of the year and We haven't decided on a topic yet, but if you sign up you will get a notification About what topic will cover next we try to build this as a modular approach so that you know Sometimes there are topics that you're interested in sometimes you're not so interested in the topic So we always send out an email beforehand telling you what we cover And then you can make a decision whether you want to join it or not Of course, we would love you to join in every single time and so yeah, enjoy the Thanksgiving evening And we hope you enjoyed it and we'll see you very soon Bye guys