- [Instructor] Performance is a big deal
in front-end applications.
Written statistics have shown that a delay
as low as 10 milliseconds can cost sites to lose traffic.
So, how do you measure performance
of a vue.js application?
How do you track down performance bottlenecks
in order to fix them?
Fortunately, Chrome Developer Tools
compounded with tools for measuring
the performance of an application.
These tools can help you track down performance bottlenecks
and detect areas to improve on.
Go ahead and open the Developer Tools in Chrome
and switch to the performance tab.
We'll be running a performance audit on the login process
to analyze its run-time performance.
Run-time performance is how your page performs
when it is running as opposed to loading.
To achieve this, click on the record button
which is the gray circle on the performance tab.
Ensure that the screenshots option is checked
and enter your login credentials to login
and click the login button.
Once you're logged in,
click the stop button on the recorder to stop the process.
Woof, that's a whole bunch of information.
Don't worry, we'll make sense of the important parts soon.
Undock the dev tools to get a better view.
One of the main sections is the very first section
labeled FPS.
FPS stands for frames per second.
Here, you want to make sure that your page animations
are running at 60 frames per second,
and you have very little of these red bars.
The red bars indicate that the FPS dropped to a point
that might harm user experience.
A full red bar running across white lens
shows that you need to do some major optimization
to avoid page junk.
The next section is the CPU section.
The easier way to make sense of the colors
in the CPU section is to look down at the summary section
on the performance panel.
The summary section summarizes the activities taking place
and the colors also correspond to the CPU section.
If the CPU section is full of colors,
it means it is maxed out during recording.
This is not the case here, so we're good.
We have more of CPU idle time.
To see the state of your page at any point in time
of the recording, hover over the FPS, CPU or net section.
Moving left and right helps you replay the recording.
This can help you track down the point in the process
where there is a performance bottleneck.
This process is known as curbing.
In the frames section,
you can also hover across the bars.
With this, you can catch some red squares
that indicate points where the frame drops.
If your page has a lot of animations,
the frames per second reading is something
you want to pay close attention to.
To further help up with this,
Chrome dev tools provides the frames per second meter.
This meter helps you visualize the frames metrics
in real-time.
To pull up the meter, type Command + Shift + P on Mac,
or Ctrl + Shift + B on Windows, to open the command menu,
then type rendering in the search field
and select show frames per second meter.
This will pull up the show frames per second meter
which shows you the frames per second in real-time
as you use the application.
Close performance tools also gives you the ability
to tweak some settings under which the app runs.
Click on the cog icon on the right-hand side
of the performance toolbar to open the settings page.
Here, you can make the CPU slower
by throttling its performance under the CPU options.
You can also throttle the network speed
in the network options.
This can help you visualize
how your application will perform on less powerful devices
and slower networks.