Latency vs Duration: Interpreting Firefox's Web Developer Tools's Metrics

Question

What's the difference among these three fields (please check the attached snapshot)?

1. Latency
2. Duration

Sample durations (20-30s) and latencies (between 1-5s)

End user experience on the browser is matching with duration meaning more than 20 seconds delay is being felt. Then what is latency representing?

Answer 1

From the notes in the sources of Firefox devtools :

Start Time is the time from start of 1st request until the start of this request.

End Time is the time from start of 1st request until the end of this response.

Latency is the time from end of this request until the beginning of download of this response.

Response Time is the time from start of 1st request until the beginning of download of this response.

Duration is the time from start of this request until the end of this response.

A detailed breakdown of values used to calculate these numbers is available in the Network Timings tab in the request details pane.