Skip to content
This repository has been archived by the owner on Mar 28, 2024. It is now read-only.

Latest commit

 

History

History
executable file
·
30 lines (22 loc) · 1.72 KB

lab-1.md

File metadata and controls

executable file
·
30 lines (22 loc) · 1.72 KB
Raw

Lab: Lighthouse Analysis

Scenario

Time: 5 minutes

We're going to start our application in Angular CLI's "production" mode to make our application as lightweight and fast as possible for performance analysis.

With the application running, we'll use Lighthouse to analyze the performance of the application. The Lighthouse tool is built into Google Chrome's developer tools.

Instructions

  1. Start the server by running npm run server.
  2. Let's create a new npm script to serve the application in prod mode. Open package.json and add the following to the scripts object: "customer-portal:prod": "ng serve --prod --proxy-config=proxy.config.json -a=customer-portal -p=4203"
  3. In a new terminal window, start the customer portal in production mode by running npm run customer-portal:prod.
  4. Open Google Chrome and navigate to localhost:4203.
  5. Open Chrome Devtools:
    1. Mac: Cmd + Opt + I
    2. Windows: F12
  6. Click the "Audits" tab then click the "Perform an Audit" button.
  7. In the audit modal, uncheck all audits except "Performance".
  8. Click "Run Audit" and watch Lighthouse work its magic. You should see Lighthouse reload the page in an emulated mobile device, with emulated 3G network and emulated mobile CPU performance.
  9. After the audit is finished, you should see a report with several scores. Record the scores for First Meaningful Paint and First Interactive so we can compare them after we've made some optimizations. Also notice the screenshots of progression as the app is loaded.

Bonus

What interesting information can be found from other audits?

What opportunities or recommendations does Lighthouse provide?

Next Lab

Go to Optimizing Performance Lab #2: Source Map Explorer