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

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?