web:browser:page

About

Goal: being interactive in under 5 seconds

Mobile web speeds matter.

On average, faster experiences lead to 70% longer sessions and 2 x more mobile ad revenue.
Investments in web perf saw the React-based, Flipkart Lite triple time-on-site
GQ get an 80% increase in traffic,
Trainline make an additional 11M in yearly revenue
Instagram increase impressions by 33%.

One of the most important and basic metric that defines the performance of a website is Page Load time (perceived vs actual).

Pick a measurement tool (like Rigor, Lighthouse or PageSpeed Insights) and stick with it. Trends are more important than exact numbers.

There are two numbers representing two different approaches how to measure the page load time:

298ms. the load event (the red line) was fired in 298ms.
343ms. The total elapsed time (from beginning of the first request till the end of the second/last request) is 343ms

The DOMContentLoaded event is the blue line.

DNS Lookup: DNS resolution time
Connecting: Elapsed time required to create a TCP connection.
Blocking: Elapsed time spent in a browser queue waiting for a network connection. Displayed only in the case where this situation happens (see also this post). Each browser has a limit for number of simultaneous connections to the same server when downloading a page. If the limit is reached, other resources have to wait in an internal browser queue till a connection is released.
Sending: Time needed to send request data to the server.
Waiting: Waiting for the response (till the first byte is received from the server).
Receiving: Time necessary to download response body.

Load performance audits look at:

First meaningful paint (when is the main content of the page visible)
Speed Index (visual completeness)
Estimated Input Latency (when is the main thread available to immediately handle user input)
Time To Interactive (TTI) (how soon is the app usable & engagable). A time measure of when layout has stabilized, web fonts are visible and the main thread is available enough to handle user input.

Under representative network (3G) & hardware conditions
Be interactive in < 5s on first visit & < 2s on repeat visits once a Service Worker is active.
First load (network-bound), Speed Index of 3,000 or less
Second load (disk-bound because SW): Speed Index of 1,000 or less.

In Chrome:

DOMContentLoaded: blue line. The resources at the left or touching the blue line are blocking the DOM. They are known as render blocking resources.
total load time: red line

Lighthouse
WebPageTest (video)
http://yslow.org/ - Yahoo Best practice test tool. They have a list of Web Performance Best Practices and Rules
realistic network connections (e.g Regular 3G in DevTools).
chrome://inspect

Average speed of mobile internet. (Mbps) - (SpeedTest)