 Fabulous late Thank you Wendy for the introduction today We're gonna discuss seven secret tips in working with browser DevTools and first of all Thank you for falling for that clickbait title my colleagues from marketing recommended that do something clickbait And you will get the whole all full and it all worked out I'm Mike. I'm 30 years old. I'm from the Netherlands nine Megan to be exactly and I work for savvy WordPress hosting. It's a managed WordPress host And we have clients all over Europe In my day job, I'm an account manager and I visit clients and We discuss all things related WordPress. It can be business can be opportunities for customers can also be some technical difficulties or Other things, but you have a time constraint just like this talk Ten minutes a meeting has also a time constraint But sometimes at the end of the meeting, there's a little bit of time left where you can squeeze in some Analyzing of a website. How is it gonna perform? But with time constraints, we don't have time to use all the external tools to see how things are performing So I use what's right at my end. It's the browser It's the right click or the command I to see the deaf tools and Mostly I Notice that a lot of people don't know what's all possible with those kind of tools Don't rely on all those external tools. Just keep it with the browser. So Why we gonna the deaf tools tools are already there you don't have to switch steps You're faster and when you have a time constraint of only ten minutes like a talk or only five minutes before next meeting You can still do some analyzing without waiting for Web page test or Google page speed to fully complete and all the biggest vantage is that you have The knowledge of what's going on is not a big black box with you which you are testing if Google Probably they got good service, but you don't know exactly what kind of hardware they're running Is their server busy or are you testing from North Carolina a website located in London? Then you have the latency. So why don't we test right at the browser? Mind you, I'm not a developer nor I'm a designer But since I work already three years for a web hosting company, I know a thing up to about speed So that's what I wanted to focus on How to accent first of all the slides will be shared directly with Twitter after my talk so you can Put all the links and you can see it quickly. So let's dive into it. My first most favorite Tool is the network tools You're gonna open the deaf tools Gonna switch to network and then we've got a whole bunch of information Everybody can do it, but how to interpret it. That's the big issue so When I see this and probably a couple of people see already like what's going on by the way, we're testing WordCamp and verb site now What does immediately fall to attention see a couple of things? Let's zoom in first of all External domain It stands out for me immediately like why does it load an external domain? We can see here That a Google API forms libraries will download it and it adds up another 500 milliseconds And we see a little rainbow almost like what's going on there? tip number one Hover over the little rainbow See what's going on There's always an explanation if you don't immediately recognize something what's going on But you can see a new domain means another DNS lookup another connection an SSL handshake has to be performed and it adds up Half a second something just two clicks away. You already recognize there is some delay going on Next we saw a big red bar 404 not found Okay, okay, we can see that it's probably also throws some errors in the console But what can we offer what the DevTools offer us is immediately? We can see where it is hovering is easy Clicking not so hover over it We see exactly rule of line number 89 or you can see you can click it and you will get right to the source code no need to wait or to Control f of command f all the things not a thing we saw an asset of 2.2 kb And it takes almost one and a half seconds. We don't need Google pay speed to see that. This is an issue What do we see we see that it's dynamic resizing in the name? It's all two clicks away all these information The server has to render a new image because we put some parameters in the URL Network tools we still already more than three seconds delay We don't need web page test or Google pay speed to see those things Not a tip sort those columns you saw earlier Which one which s took the longest which are the biggest How many 404s do you have? Hopefully not Now some trivia tools that I just like to point out where people go like That's just can do that. Yes So you made a nice Tabular information about the schedule of your event and you want to share it You can just select it in the source code In the death tools it will highlight it and then we have got a sub tip Use the command menu When we thought just talking shortcuts and not using your mice you have only five minutes I have only a couple of minutes left for this talk, so we have to be fast Use command or control shift B. It shows up a couple menu where you can just type in your command And remember we wanted to take a screenshot Just type in screenshot. Let's see what Google Chrome has to offer us Capture note screenshot nice We click it it exports as a PNG server timing headers We saw earlier. This is from the Google API's phones We saw all these information But the waiting the time to first buy it is just waiting on the server to respond. What's going on? Well, we can do that We can see how long the cash took how long how long total ship you time was It's not easy, but for WordPress. It's easy. There's a plug-in. Of course What query monitor they're already forking their current plug-in to include these kind of functionalities that you can just look or read out the Information that query monitor has got gathered from WordPress itself and last Network throttling Let's say you have an event and all the people are on the same Wi-Fi But you can test the connection speed in Before-end because at home you have your fiber connection. Nobody's watching Netflix. Nobody's downloading anything So you go like yeah my side is really far and Then you go to the event and Everybody's using the Wi-Fi and it's slow. How you can you test in advance how your site will perform with a slow connection? So we throw a network first we have 11 and the second We make a network profile We call it WordCamp Antwerp upload and download 100 kv a Little bit of latency and suddenly we see okay. It works What does it mean for our site or for our event? Takes three minutes if you want to Test it yourself if you want to share other tips that I might not mention Please feel free to share them with the hashtag WC Antwerp Or ping me on the Twitter itself. Are you any questions?