Measuring Angular Universal Page Load Performance (Server-side Rendering with JavaScript Frameworks) Video Lecture | Server-side Rendering with JavaScript Frameworks - Scripting

you can only roll once I crack every
bone in my body see if we can get this
first try boom first try everybody
welcome back to the server-side
rendering with JavaScript framework
series in the last episode we built a
server-side rendered app with angular
universal and in this video we're going
to take a look at that app and we're
going to profile it with the chrome dev
tools and then also profile it with web
page tests to get a real-world situation
on a low power device on a really poor
Network so let's dive right down into
the laptop so here I have a server-side
rendered up in a non server-side render
tap I'm going to open up the dev tools
for the non server-side rendered a p--
and i'm gonna make sure that i have the
cache disabled and then i'm gonna do a
refresh and we can see we have all these
assets being downloaded and it says our
load time is 272 milliseconds which is
pretty fast but i'm on a really fast
computer on a really fast network so
let's actually go up here and do some
throttling so i'm gonna throttle to
regular 2g which will actually have us
incur 300 milliseconds of latency per
round-trip so you can see right here the
profile says 300 milliseconds of latency
over a 250 kilobyte bandwidth so now i'm
going to go into performance and this is
where we can get a profile of how our
app performs on page load so i'm going
to click this little refresh button it's
going to do a little bit of profiling
and then now it's done and we can see
that we have all these colored bars
right here and we also appear have some
screenshots and it's just the blue
rectangle because we've only downloaded
the HTML and CSS and if we scroll all
the way to the right we can see it takes
to about 4 seconds that we actually see
something painted on the screen so these
colored bars right here tell us why this
is so we can see we start with the HTML
and that took 315 milliseconds to
download then we download our Styles
which took 370 milliseconds but down
here we have all of this JavaScript we
have the inline bundle the polyfills the
vendor bundle which includes angular and
other libraries and then we also have
our main bundle and you can see that the
vendor bundle actually took 2.99 seconds
to download and it isn't until after all
of this javascript is downloaded that we
can go up here and make our network
request for our data and you see that
our FAQs that JSON call took 307
milliseconds and then once that was done
we could finally render so this right
here is a big delay in the critical path
because our most important asset in this
case is our JavaScript since it does all
the rendering but because we haven't set
up in a way where HTML and CSS doesn't
paint anything meaningful we have to
wait for our JavaScript to finish
downloading parsing and executing then
make an API call and then finally render
something so this is not the best use of
the critical path so now I'm going to go
into the server-side rendered app and
I'm going to do the 2g throttling and do
a performance profile so our app
rendered in about one second and that's
because we had our HTML server-side
rendered but as you can see right down
here that our HTML rendered in about 300
milliseconds our CSS in about 300
milliseconds and then we were able to
paint the page and that's because all we
need is HTML and CSS but that doesn't
mean we're out of the woods because we
still have to download parse and execute
our JavaScript and that happens all the
way down here and you can see just like
with the non server-side rendering app
it still takes 2.99 seconds to download
that bundle so our app is not actually
going to be interactive until this
bundle downloads so to get a good idea
of when your app is interactive I'm
going to use a website called
webpagetest so webpagetest.org is an
amazing tool where you can profile your
websites or other people
websites on real devices on a throttle
network down here in Advanced Options
I'm going to make sure that I'm testing
on a mobile 3G slow profile which incurs
200 milliseconds of latency per
round-trip and it gives us a bandwidth
of 780 kilobytes a second so I'm gonna
select that's put in my URL and start
the test I'm going to go and open up a
new tab and I'm also going to profile
the non server-side rendered version
under the same profile settings so I'm
gonna wait for these tests to run and
now that I magically fast forward we're
going to look at the results so the
first one is the non server-side
rendered app and you can see that right
here we have a couple of top level
metrics and so this is the median run so
the middle-of-the-road
of three test runs so it says that the
load time is two seconds and the first
bytes came in in point nine seconds and
then we rendered shortly after in one
point two seconds but if we look over
here there is a another number that's
important and that's first interactive
and it's said that it took 3.2 seconds
for this website to be first interactive
which is much higher than the actual
load time so if we go to the runs below
we can see we have about the same load
times so what we want to do is we'll go
to the filmstrip view so the filmstrip
view allows us to get a play-by-play of
what happened as your page loaded with
this top part which is the visual
loading and the bottom part is a
timeline of the network requests and the
rendering so we can scroll through here
and we can see that we actually don't
see any rendering until 3.2 seconds so I
can actually can scroll back all the way
to the beginning and we can play by play
what happened so it took about seven
hundred and sixty-five milliseconds for
the HTML to download and we know that we
need CSS as well before we can render so
it took about two hundred sixty-four
milliseconds and then we painted
something on the screen and then now
we're not out of the woods because we
need to download our JavaScript so all
the JavaScript gets downloaded and then
once
it's finished it's now going to go and
kick off a network request for our fax
which took about a second and then now
that the facts have finished downloading
it'll render and then now at three point
two seconds we have our page rendered so
ideally we wouldn't want to wait all the
way to the end here to render our page
so even though our load time was listed
at two seconds it's really important to
monitor the filmstrip and look at the
first interactive so now with
server-side rendering we're gonna get a
bit different of results so this is a
profile of the server-side rendered app
and you can see that it's load time is
actually about the same if not a little
slower here at 2.1 seconds and the first
byte is about the same the first render
is about the same but this first
interactive is much much lower at 2.1
seconds and if we go down to all the
runs below we can see the first view two
seconds 2.1 2.1 it's all about the same
so now i'm going to click into the
filmstrip view and i'm gonna make sure
I'm at 0.1 seconds and let's start from
the beginning so we're going to download
the document which took seven hundred
forty milliseconds which is similar to
before and then we're going to download
the CSS which takes 216 milliseconds
similar to before but now at 1.5 seconds
we have our content on the page so the
user has something to look at so now
we're gonna go and download the
JavaScript and execute it you can see
her at 2.1 seconds the screen actually
blanks out and that's because at this
point the JavaScript has executed and
it's going to make a network request for
the fax data so it blanks it out and
it's going to create a new version of
the app which is a client-side version
so once it finishes downloading this fax
thought JSON down here at the bottom it
will then at three point four seconds
render a new page now out of the box
this is how angular Universal behaves
and it's not what you want because while
you do have content for the user
immediately there's this big chunk of
I'm where it's just blank again and we
can actually tell angular Universal to
not make this request and we can tell it
to use a cache version of the data but
that's a little time consuming so if
you're interested in learning how that
works
just leave a comment and I'll make a
follow-up video but if we have this
problem fixed you can see that we would
have a page render much faster and we
wouldn't need to make that extra Network
request so our time to interactive would
be much lower at two point one seconds
so with angular Universal we can get a
much faster first render because we send
down HTML and CSS first and if we didn't
have to make that extra network request
our time to interactive would be much
faster because we wouldn't have to
rerender the page but if you want to see
how that's done like I said just leave
it in the comments and we'll make a
follow-up video so that's all for today
if you appreciated this video make sure
to hit the thumbs-up button and
subscribe for more updates in the
server-side rendering with JavaScript
framework series because next time we're
gonna be taking on react so that's all
and I will see you all next week
you hear people talking okay I hear
people talking but if you can't hear
them it's good okay