You should have a performance goal before you measure your page performance, i would suggest you had better have a performance budget for each component, then fight against the one who has overdrawn.
Using navigation timing API , User Timing API and Resource Timing API to do the measurement, in both synthetic and RUM way!!
Besides measure Duration of each Component as a Main KPI, The Content Downloaded Size, # of Requests for each Component need to be considered meanwhile.

Another point of view to explain the key page performance metrics, please remember every page design differently, you can not set up a rule to fit all, considering from end user perspective is always a great start:
Using navigation timing API , User Timing API and Resource Timing API to do the measurement, in both synthetic and RUM way!!
Besides measure Duration of each Component as a Main KPI, The Content Downloaded Size, # of Requests for each Component need to be considered meanwhile.
