Measuring Performance

Once the application is said to be SEO friendly and performance optimized by schemtaics - let's check that in battlefield. In this lesson you will deploy your project to Heroku and measure its performance.

Deploying to Heroku#

It's the right moment to check how applying Angular Universal changes the application's performance.

Change the start and build scripts in package.json:

You may also remove the build:backend script as it is no longer needed.

Deploy the application by pushing changes to the Heroku repository:

Performance#

First things first, let's check if the backend launches Angular and renders HTML. Use Postman to perform a GET request to your application's home page:

Once you've ensured that the application works as expected, perform Time To First Byte (TTFB) tests using Byte Check:

It's around 113 ms. Compared to the 70ms achieved without Universal, this doesn't look optimistic.

However, as we agreed in the past, TTFB is not everything. What you should be more interested in is First Contentful Paint (FCP). Perform the test using Chrome Developer tools:

Now the results look drastically better, even though the total index is worse. FCP has been shipped in 2.1 seconds, while in the previous test without SSR it took 2.6 seconds.

Let's also check how the application performs in a more restrictive PageSpeed Insights test:

This tool reports a decrease in performance as well. No worries though: you will address this in future course modules.

Here is what the summary results look like:

The following diagram compares performance with and without SSR:

As you can see, the TTFB value doesn't have a significant impact on the Time To Interactive value. So what does? What does the mysterious "other" label in the diagram stand for? Let's recall the browser flow described in the previous module. Here is how your application is shipped to the end user without SSR:

  • Establish a connection with the server and query for data.

  • Retrieve the data (Time to First Byte).

  • Render HTML and apply CSS.

  • Bootstrap JavaScript and Angular, then render views in the browser (First Contentful Print).

  • Bind functions to HTML elements, execute other scripts (other).

What does it look like when SSR is applied?

  • Establish a connection with the server and query for data.

  • Retrieve the data (Time to First Byte).

  • Render HTML and apply CSS (First Contentful Print).

  • Bootstrap JavaScript and Angular, then render views in the browser (again), then execute other scripts (other).

When you apply server-side rendering to your application, you bootstrap Angular twice: first on the server and then in the browser. That's the reason why the other rectangle is so prominent with SSR.

In the following modules, you will learn techniques to significantly decrease that scripting time!

No discussions yet