Open command prompt and cd to the sample directory.

Here are the steps to try this example:

1. 
Let's get the necessary packages installed first. On the command run:

npm install

npm install lighthouse -g

2.

npm run build

This will compile angular code and place it in the public directory.

3.
On a separate command window (in sample directory), run 

npm start

to start the express server. Leave it running.

4. 

Back in the command prompt, run

runlighthouse.sh or runlighthouse.cmd (if you are Windows)

6. 

The reports shows we are at 97% of performance. It also reports
"Enable text compression"

The First meaningful paint time is 1050ms and First interactive is 2540ms.

7. 

Look at the size of files in public:

> ls -lh public/*.js
...   5.7K ... public/inline.bundle.js
...    12K ... public/main.bundle.js
...   212K ... public/polyfills.bundle.js
...    11K ... public/styles.bundle.js
...   1.9M ... public/vendor.bundle.js

Those are large.

8. Let's minify those files first.

See package.json, we have build and buildaot. We will use buildaot.

npm run buildaot

Now let's look at the size of the files:

> ls -lh public/*.js
...   5.7K ... public/inline.bundle.js
...    29K ... public/main.bundle.js
...   212K ... public/polyfills.bundle.js
...    11K ... public/styles.bundle.js
...   955K ... public/vendor.bundle.js

9. Next, we will ask Express to compress files during send.
Edit app.js and uncomment this line:

//app.use(compression({filter: shouldCompress}))
to
app.use(compression({filter: shouldCompress}))

10. Stop the running express server and restart by running

npm start

11. 
runlighthouse.sh or runlighthouse.cmd

and view the report.

The message to compress is gone. Furthermore, the 
The First meaningful paint time now is 950ms and First interactive is still 2540ms.

That is good.

12. Let's see what else we can do. 

Look in 
src/app/app.component.ts

We are measuring the time to load the data. The data is being purposefully loaded slowly, to illustate custom measurement. Leave the code as is.

13. 
Study the files:

config.js
dataloadtime-audit.js
dataloadtime-gatherer.js

14. 

Run either

runlighthousewconfig.sh or runlighthousewconfig.cmd

In the report, notice a new "My Custom Metrics" that is on the top right.
Click on that link and notice failure details, too slow.

15. 
edit src/app/app.component.ts, change

setTimeout(makeCall, 2000);
//makeCall();

to

//setTimeout(makeCall, 2000);
makeCall();

Save.

16. Run

npm run buildaot

17.
runlighthousewconfig.sh or runlighthousewconfig.cmd

View the report. Notice the custom measure. Also notice the improvements to
the First interactive now down to 1340ms.
