Steps to use WPT to analyze the site performance¶

Nitrogen recommends using https://www.webpagetest.org/ (WPT for short) for measuring and comparing the performance of any website.
Because it's easy to use, and has variety of options available like :
e.g. test location, connection speed, browser to be used, test device, DNS overriding ability, filmstrip of page load, CWV data, test comparisons, and many more things.

Prerequisite¶

If you are analyzing performance through Nitrogen :

You must have an account on Nitrogen
You must have some domain registered on Nitrogen.

Steps¶

Go to https://www.webpagetest.org/
Enter the page URL whose performance needs to be tested e.g. https://www.n7.io/ (For now we will use https://www.nviztest.com as example domain)
Expand the Advanced configuration tab below it.
Select the desired test location from the Test Location dropdown.
Select the device+browser combination from the Browser dropdown.
Provide a label to the test to be run e.g. Origin or Nitrogen etc.
Keep label meaningful, as it will help you while comparing the test results.
Open on Advanced tab.
If you do not want WPT to override the user-agent, check this checkbox : Preserve original User Agent string. If kept unchecked, WPT will append PTST to the currently selected device's user-agent string.
1. If you wish WPT to use a specific user-agent while connecting to N7 and origin server (e.g. GoogleBot) - you can enter it in the User Agent String textbox below it.
If you want to test the website through non-live system (e.g. your website is not live on Nitrogen, but you want to test it through Nitrogen infra) :
1. check Ignore SSL Certificate Errors checkbox as well.
2. Open Script tab
3. Copy below script to text-area :
```
setDns www.nviztest.com 151.101.1.91
navigate https://www.nviztest.com/
```
  Update the IP, domain name, URL respectively.
  If you are not live on Nitrogen, and you want to test through Nitrogen infra - put the IP that N7 team shared for testing the domain.
  If you are live on Nitrogen, and you want to test your origin website - put your endpoint’s IP that you have configured on Nitrogen.
Click on Start Test button. You will see it live when the test starts running, and when it completes.
Once the test run completes, you will be shown a Performance Summary page.
WPT by default uses the median of performance metrices of all the tests run. You can see the run that WPT chose as median above the CWV values.
You can note down the required values e.g. TTFB, FCP, SI, LCP, CLS, TBT etc.
To see all the requests made by the page as waterfall (along with all the respective request and response details), click on the test shown as median run (highlighted in above screenshot).
You will be taken to median run.
Then, click on the Filmstrip View.
You will now be taken to the Filmstrip tab. You can see here all the requests that were made by the page as waterfall.
You can also see the respective CWV events timeline (FCP, LCP etc), and time taken by HTML/JS rendering/executions.
To see Filmstrip data in more minute way :
1. Click on Adjust Filmstrip Settings button.
2. Set Thumbnail interval to 0.1 seconds.
3. Also set Comparison Endpoint to Fully Loaded.
4. You will now be able to see complete page load data, with page load screenshots with 0.1s interval.
Click on any request in waterfall to see the respective request/response details.
Below the waterfall, you can find many other details about your page like visual progress chart, timings chart for load stages and CWV values, Layout shifts chart, resource type counts chart, resource sizes chart etc.
To see the CWV of that run, click on Test Run Details button inside the filmstrip.

Then click on the respective CVW metric to know the requests causing it.

You will get all the details about that score
To compare different tests :
1. Go to their respective Filmstrip tabs. First, copy test-id of one test i.e. highlighted text between tests= and & in URL
  e.g. https://www.webpagetest.org/video/compare.php?tests=231228_AiDc4A_5BF-r%3A3-c%3A0&thumbSize=200&ival=100&end=full
2. Paste it at the end of the filmstrip URL of another test with comma like :
  https://www.webpagetest.org/video/compare.php?tests=231228_AiDcRD_5BG-r%3A3-c%3A0,231228_AiDc4A_5BF-r%3A3-c%3A0&thumbSize=200&ival=100&end=full
3. You will now see comparisons for filmstrips, load timings, CWT metric values, number of requests by type, size of requests by type etc.

Notes¶

For the tests from Nitrogen infra, we recommend running the test twice – so that the required resources can get cached at the Nitrogen end.
This is not required for the live sites, as their live traffic automatically accomplishes it.
The tests that you run are removed by WPT after some days. You can create an account on the WPT, to keep them saved.