DAVID EAST: It's hosting--
OK, nope.
No.
Cut.
Back.
I was almost about to just literally go
into the guts of it.
And then I'm like, oh, wait, no.
I have to great you.
Hello.
Welcome.
Hey, everyone.
Welcome back to the Server-Side Rendering with JavaScript
Frameworks series.
Today we're going to take the app we
made in the last video, which was with Nuxt and Vue.js
on Firebase hostin and we're going
to profile it with the Chrome DevTools and Webpagetest.
We're going to take a look at how fast it loads
and when the app becomes interactive.
So let's dive down into the laptop and get started.
So here I'm in the app in Chrome,
and I'm going to open up the DevTools
to inspect the performance.
So in the network panel I want to throttle
to a fast 3G connection and then make
sure the cache is disabled.
So now going to click on Performance and then
hit this little Refresh button, which will start the profiling.
Now, when that finishes, we have this nice little filmstrip
of screen shots and the network waterfall below.
And I'm going to highlight everything up
until about 1,500 milliseconds.
So we can actually now go and inspect what happened on load.
So we can see that our HTML took about nine milliseconds
to return, which is really, really fast.
However, we have all these assets after that.
So we have JavaScript, CSS, and everything.
And if we take a look, we can see that the longest asset
was almost a second in loading.
And if we go down to the main thread,
we can see that we have this Evaluates Script Block.
And that's saying that at this point,
the main thread of the browser was just crushing
through all this script.
It's only after this script that we consider this application
to be interactive.
So this is just a throttled connection on my laptop.
So rather than just do, sort of, this little test,
I'd rather do a real test on a real device.
So to do that, I'm going to go to Webpagetest.
So I'm going to enter in my URL.
And then I'm going to go down to Advanced Settings, where I'm
going to change it to slow 3G.
And I'm going to then make sure that the browser is
set to moto G4 Chrome, so it's on a mobile device.
Now I'm going to start the test.
And when it's done, you can see that the load time came back
at 1.7 seconds, which is pretty good.
And if you look at the first bytes,
the first byte came in just under a seconds.
We didn't start rendering till 1.3 seconds.
And it was an interactive in around two seconds.
So to see more details, I'm going to go and click
on the Filmstrip View.
I'm going to scroll back to the beginning of the filmstrip.
And you can see that right about 670 milliseconds
is when the HTML finished.
But we couldn't render until the CSS finished, which
took 215 milliseconds after the HTML was finished.
So actually we could have done this a little faster
maybe if we inlined the CSS.
But you can see right here that after the 215 milliseconds are
up there's this big purple block at the bottom.
And that right there is the browser laying out the site.
And then once that's done, we have our site rendered
in at about 1.4 seconds.
Now we saw that the interactive happened in around two seconds,
but our filmstrip stops at about 1.4 seconds.
So we can't really see what's going on
with the JavaScript execution.
So when this happens, I actually go back to the main page.
And in the main page, I now go to this Timeline button.
And this timeline is effectively the Chrome DevTools
for this run.
So what I can do here is I can take a look at the network
request.
You can see that it took about 660 milliseconds
to get the HTML back.
And then we have all of our JavaScript assets and our CSS.
And that took about 716 milliseconds
for the heaviest one to come back.
And then you can see down here that we have the Evaluate
Script Block, and it finishes right before two seconds.
And we know that after this it's all quiet.
There's nothing else from the main thread.
So right around two seconds is when
this app becomes interactive.
So you can see that evaluating when the JavaScript actually
executes is really important in determining when
the app becomes interactive.
So while we do get our HTML first
and we get that really fast first meaningful paint,
we have to look to see when that JavaScript finishes,
because that's when the user can actually
interact with the application.
But that's all for today.
If you like this video, make sure to like and subscribe.
And I will see you all next time.
See you zooming in so deep.
Last video, which was--
which was-- which was with.
Hey, everyone, welcome to the proform--
oh.