Web Performance Mini Series: Responses

lovely people welcome to 2019 let us begin with performance oh so it's 2019 and I am kicking off this new year with a video series and I thought the video series we could do would be about performance now if I've never spoken to you about performance it is pretty much the thing that I've dealt with for the last bunch of years it's really if it might kind of go to topic so I'm very excited about sharing it once again and what I thought I'd do is just start off by saying I don't think you should optimize everything close yeah I know that you should optimize everything I think you should optimize only the things that people are going to notice so what are they going to notice well I think you can break down a web app in particular into four areas responses which is basically acknowledging the user animations which is things like scrolling or view transitions idling which is where the users kind of doing nothing maybe they're reading some content on screen or they're just not interacting and then load which is what everybody thinks of when they think performance and is in fact the thing we're going to deal with last because in this video we're going to talk about responses so as I said you want to optimize the things that people are going to notice and responses are subject to something in the region of about 100 milliseconds I say in the region of because it really depends on the person you're talking about some people they are gonna feel some form of lag between clicking and seeing a response on screen around 50 milliseconds other people are really not going to notice Butcher prior to 150 so it's gonna be like a Gaussian distribution I reckon somewhere you know centering around 100 milliseconds if you can do something inside of 100 milliseconds you're all good so this comes down to if nobody's gonna see it don't bother optimizing for it that's my point so for example if you say well 100 mils I can get the work that I need to get those inside of that don't worry about it you're all good there's this panic sometimes of people like well how do I get it done faster you might not need to so let's concentrate on that what I've got on screen a little example that I've reappropriation from Ben Galbraith and Dianna Meyer who did this similar kind of thing at a Google i/o many a moon ago and I thought had recreated for you here in some form what I've got is I've got this box and I've got this drop down in the top left-hand corner and what this drop down does is it simulates a delay in response so for example when I click on this box it goes that kind of pink color goes from blue to pink so if I click in the background it resets it and the delay is 1 millisecond here sure now I'm gonna feel any delay much more keenly than you are watching this if you were to recreate something like this you'd feel this for yourself it's actually a really good exercise to do if you have the time okay so one millisecond you don't feel it 100 milliseconds you feel it a little bit I mean I'm feeling it a teeny tiny amount it Liz does to try say 450 milliseconds I mean I I kid you not for me that was Felton no difference to one millisecond so if the work and I had to do was somewhere around the 50 millisecond mark I wouldn't bother optimizing this I wouldn't panic about it losing the getting towards the hundred I might start thinking about it if it starts to really climb let's do four hundred milliseconds here so that's half a second oh yeah I really felt that you know I was a that was frankly was unpleasant if that had been a button I would be starting to be a bit unhappy as a user I would just be sitting like mmm mmm not nice and of course you could go to one second or even the mighty ten seconds there it is whoo that took a while wondered if it was ever gonna finish okay two things firstly one how do you measure this and then two what do you do if you have a long response now I'm not going to get into the the deep optimizations today in fact I'm not going to get to any optimizations because it really depends on your use case specifically what you want to be thinking about though is you want to be thinking about moving work away so you at least appear async and you can continue interacting with the user we'll talk about that more in a moment let's talk first of all about the measurement side of things so we'll do is we'll head over to the code and I've taken the liberty of marking the code up with performance mark here where you can start tracking you see that there perform stop mark and then we put a nother mark at the end here so in the middle we've got some work which is curiously named to do some work with the duration that duration is the is that timeout that drop-down so I'm faking some work really all it does is it a set timer and then when that timeout is finished it fires and this promise resolves if this was something like looking up data in IDB or pulling something from a URL you know you could imagine it being some some work that needed to happen here so when the work is finished we do change the color of the box and as I said we do another mark so there's a mark for the start there's a mark for the end and then what we do is we call this other API which is called measure we give it a name and then we can give it I think you can possibly give it more than just these two but I only see with start and end and magically I am going to go over here to the performance tab in dev tools and I'm going to just drop this back to say something like five two milliseconds I'm gonna hit record click stop recording and ooh we have a row here in our output which is called user timing because technically that's what we've done we've done some user time we've done some instrumentation to start marking out parts of our application where we want to time it and take a look at the data in a little bit more detail now as it happens the main thread which is where all your JavaScript and your styles and Dallaire and your paint and all that work is going on because it was a set timeout it's basically empty so I'm faking it but you could imagine in your main thread you might just see tons of work in here you might see all sorts of bits of pieces going on updating components whatever doing loads of fetching from IDB or whatever so the point here is what we want to do is we want to mark out our stuff in dev tools that we can find the areas of interest more quickly so we've got that here user timing box there you go so as I say it'll be empty in here it wouldn't be empty if I was actually doing some work you can see entries in main there I'm just gonna hit escape just to drop down that consoles we don't need it right now and you'll also see by the way up here and it eventually it does go pink at the end of this block of work okay that's the time you so if you never done performance that mark and performance that measure you might want to start instrumenting your code just so you can start getting a bit of a handle on how your stuff is actually working in terms of like which parts of the main thread of kind of active or what jobs are being done while you're doing your UI work now here's the other thing that you can do let's imagine now that we know that doing some work as we have here it's going to potentially take a while what we can do is we can be a little bit more tactical about our UI in the interim so what I've got here is I've got a little bit of extra coders I'm just gonna bring up I've wrote this earlier because I just thought I won't waste your time watching me type this up today don't want to do that what we do is we start by being pessimistic so as soon as we start marking our performance and stuff we also set a timeout and the timeout says after 100 milliseconds show a spinner okay that's what I want you to do I want to show a spinner then we start the work so basically the the clock is running can we get the work done to do some work can we get that done inside of 100 milliseconds if we don't we'll show a spinner and the show a spinner is just gonna put in in this case it's going to change our block from blue to purple and it puts a little kind of icon in the middle just so we can see it then the next thing we do is let me just bring this up here and then I can talk you through what's actually going on right down here we yeah pop that after they do some work so these changes to our code are gonna make actually quite a lot of difference so if you remember we started the clock running we've assigned the time out to this ID here and we start doing some work if do some work finishes first we're gonna clear the time out which basically means okay we're not gonna show the spinner we're just gonna carry on working if do some work finishes second so ie the spinner has shown we now need to hide it so these two are essentially whatever happens you want to do these two things you definitely want to clear the time out so though you know if it's already fired well that'll do nothing if it hasn't fired it will clear it and then we want to hide the spinner now if the spinner hasn't been shown then we can hide something that hasn't been shown do nothing and then we finish the work as we did before well what does this do to our output well over here let's refresh here at one millisecond makes no difference even at say a hundred milliseconds no difference because it's the work is finishing just as that timeout will be firing however if we go to say one second yep and they say let's watch that again click and after 100 milliseconds basically what we're saying is no matter what happens after hundred milliseconds I will acknowledge the user I will show some spinner I will show something that acknowledges I know you've clicked you don't need to click again bro good I've heard you it's just taking a little bit longer if the work completes quickly enough we don't bother showing it but because that hundred milliseconds is right on the point of where somebody's gonna notice you're all good so that's responses really I'm not gonna get into the the deep dive on half this is how you can optimize responses we can get to that later if you're interested for now I just wanted to point out first of all the fact that you can measure this in dev tools with performance that mark and performance top measure and secondly that you can do some UX work to basically acknowledge a user no matter what work you actually have to do in your responses you can tell the user I hear you I've not forgotten about you I'm not gonna lock up the main thread I'm just doing something else and when I get that work done I'll hide the spinner and then we'll carry on us as we were obviously you do want to bring that work down if you can get it down under 100 milliseconds great good for you you can't at least you've got a patent you can use I hope you've enjoyed this video give it a thumbs up if you can have that's always a wonderful thing to do subscribe if you haven't already also another wonderful thing to do click the notification bell if you want to know want to put one of these out as I say it's a miniseries so there's gonna be more of these again a good thing to do and I will see you lovely people on the next video [Music]

Channel: Paul Lewis

Views: 6,499

Rating: 5 out of 5

Keywords: performance, web, development, javascript, response

Id: -AkHdG7MNCY

Length: 12min 14sec (734 seconds)

Published: Tue Jan 15 2019