Click or hover over timing box above for more information
Redirect Duration
This is the time spent redirecting URLs before the final HTML page is
loaded. Common redirects include:
- Redirect from a non-www to www (eg. example.com to www.example.com)
- Redirect to a secure URL (eg. http:// to https://)
- Redirect to set cookies
- Redirect to a mobile version of the site
Some sites may even perform a chain of multiple redirects (eg. non-www
to www, then to a secure URL). This timing is the total of all this
time that's spent redirecting, or 0 if no redirects occurred.
In the Waterfall Chart, Redirect duration consists of the time from the
beginning of the test until just before we start the request of the
final HTML page (when we receive the first 200 OK response).
During this time, the browser screen is blank! Ensure that this
duration is kept to short by
minimizing your redirects.
Connection Duration
Once any redirects have completed, Connection duration is measured.
This is the time spent connecting to the server to make the request to
the page.
Technically speaking, this duration is a combination of the blocked
time, DNS time, connect time and sending time of the request (rather
than just connect time). We've combined those components into
a single Connection duration to simplify things (as most of these times
are usually small).
In the Waterfall Chart, Connection duration consists of everything up
to and including the "Sending" time in the final HTML page request (the
first 200 OK response).
During this time, the browser screen is still blank! Various causes
could contribute to this, including a slow/problematic connection
between the test server and site or slow response times from the site.
Backend Duration
Once the connection is complete and the request is made, the server
needs to generate a response for the page. The time it takes to
generate the response is known as the Backend duration.
In the Waterfall Chart, Backend duration consists of purple waiting
time in the page request.
There are a number of reasons why Backend duration could be slow. We
cover this is our
"Why is my page slow" article.
Time to First Byte (TTFB)
Time to First Byte (TTFB) is the total amount of time spent to receive
the first byte of the response once it has been requested. It is the
sum of "Redirect duration" + "Connection duration" + "Backend
duration". This metric is one of the key indicators of web
performance.
In the Waterfall Chart, it is calculated at the start of the test until
just before receiving on the page request and represented by the orange
line.
Some ways to improve the TTFB include: optimizing application code,
implementing caching, fine-tuning your web server configuration, or
upgrading server hardware.
DOM Interactive Time
DOM interactive time is the point at which the browser has finished
loading and parsing HTML, and the DOM (Document Object Model) has been
built. The DOM is how the browser internally structures the HTML so
that it can render it.
DOM interactive time isn't marked in the Waterfall Chart as it's
usually very close in timing to DOM content loaded.
DOM Content Loaded Time
DOM content loaded time (DOM loaded or DOM ready for short) is the
point at which the DOM is ready (ie. DOM interactive) and there are no
stylesheets blocking JavaScript execution.
If there are no stylesheets blocking JavaScript execution and there is
no parser blocking JavaScript, then this will be the same as DOM
interactive time.
In the Waterfall Chart, it is represented by the blue line.
The time in brackets is the time spent executing JavaScript triggered
by the DOM content loaded event. Many JavaScript frameworks use this
event as a starting point to begin execution of their code.
Since this event is often used by JavaScript as the starting point and
delays in this event mean delays in rendering, it's important to make sure that
style and script order is optimized
and that
parsing of JavaScript is deferred.
Onload Time
Onload time occurs when the processing of the page is complete and all
the resources on the page (images, CSS, etc.) have finished
downloading. This is also the same time that DOM complete occurs and
the JavaScript window.onload event fires.
Note that there may be JavaScript that initiates subsequent requests
for more resources, hence the reason why Fully loaded timing is
preferred.
In the Waterfall Chart, it is represented by the red line.
The time in brackets is the time spent executing JavaScript triggered
by the Onload event.
Note that Onload time was the previous default for when to stop the
test prior to Feburary 8th, 2017.
First Paint
First paint time is the first point at which the browser does any sort
of rendering on the page. Depending on the structure of the page, this
first paint could just be displaying the background colour (including
white), or it could be a majority of the page being rendered.
In the Waterfall Chart, it is represented by the green line.
This timing is of significance because until this point, the browser
will have only shown a blank page and this change gives the user an
indication that the page is loading. However, we don't know how much
of the page was rendered with this paint, so having a early first paint
doesn't necessarily indicate a fast loading page.
If the browser does not perform a paint (ie. the html results in an
blank page), then the paint timings may be missing.
First Contentful Paint
First Contentful Paint is triggered when any content is
painted - i.e. something defined in the DOM (Document Object Model).
This could be text, an image or canvas render.
This timing aims to be more representative of your user's experience,
as it flags when actual content has been loaded in the page, and not
just any change - but it may often be the same time as First Paint.
Because the focus is on content, the idea is that this metric gives you
an idea of when your user receives consumable information (text,
visuals, etc) - much more useful for performance assessment than when a
background has changed or a style has been applied.
If the browser does not perform a paint (ie. the html results in an
blank page), then the paint timings may be missing.
