Performance budget (
performance-budget
)A web performance budget is a group of limits to certain values that affect site performance that should not be exceeded in the design and development of any web project. This could be the total size of a page, size of images you are uploading, or even the number of HTTP requests that your webpage generates.
keycdn - web performance budgetkeycdn-wpb
Why is this important?
As of January 2018, the average size of a website is 3,545kB:!imageaverage site size
Although the global average connection is 7.2Mb/s (check Akamai's state of the Internet 2017state of the internet), "no bit is faster than one that is not sent" (quote by Ilya Grigorikfaster bit). Web developers need to be mindful not only about the size of their sites, but also the number of requests, different domains, third party scripts, etc. The time required by a browser to download a 200kB file is not the same as 20 files of 10kB.
What does the hint check?
This hint calculates how long it will take to download all the resources loaded initially by the website under a3G Fast
network
(but that can be changed, see "Can the hint be configured?"can be
configured section). If the load time is greater than 5 seconds,
the hint will fail.To calculate the final load time, some assumptions and simplifications are done. While the real numbers might be different, the results should provide enough guidance to know if something needs more attention.
The reason for using predefined conditions and assumptions are:
- Guarantee consistent results across runs. If a website serves the
- Show the impact in load time of each transmitted byte with the goal
The simplified formula to calculate the time is:
Time = (total number of requests * RTT) +
(number of different domains * RTT) +
(number of different secured domains * RTT) +
(number of redirects * RTT) +
(total number of requests * TCP slow-start phase) +
(total size of resources / bandwidth)
This is the list of things considered:
- Everything is a first load, no values are cached, and no connections
RTT
(Round-Trip Time)rtt is fixed and changes depending on
cwnd
: 10 network segments
rwnd
: 65,535 bytes (no TCP window scaling
)
segment size
: 1460 bytes
After this phase, the full bandwidth of the connection is used to
download the remaining.TLS False Start
tls false start and
TLS Session Resumption
tls session resumption. This hint assumes
the optimistic scenario.- Redirects: We simplify the redirects and assume the connection is
Can the hint be configured?
You can change the type of connection and/or the target load time in the.hintrc
hintrc file, using something such as
the following:{
"connector": {...},
"formatters": [...],
"hints": {
"performance-budget": ["error", {
"connectionType": "Dial",
"loadTime": 10
}],
...
},
...
}
The possible values and the associated speeds for
connectionType
are:| Value | In | Out | RTT | | -------|----------|----------|-------| | FIOS | 20 Mbps | 5 Mbps | 4ms | | LTE | 12 Mbps | 12 Mbps | 70ms | | 4G | 9 Mbps | 9 Mbps | 170ms | | Cable | 5 Mbps | 1 Mbps | 28ms | | 3G | 1.6 Mbps | 768 Kbps | 300ms | | 3GFast | 1.6 Mbps | 768 Kbps | 150ms | | DSL | 1.5 Mbps | 384 Kbps | 50ms | | 3GSlow | 400 Kbps | 400 Kbps | 400ms | | 3GEM | 400 Kbps | 400 Kbps | 400ms | | 2G | 280 Kbps | 256 Kbps | 800ms | | Edge | 240 Kbps | 200 Kbps | 840ms | | Dial | 49 Kbps | 30 Kbps | 120ms |
loadTime
needs to be a number greater than 1
and indicates the time
in seconds to load all the resources.The default values are:
connectionType
:3GFast
loadTime
:5
This means that if the user changes the
connectionType
but not the
loadTime
, the hint will use 5
as the target.Examples that trigger the hint
- Any combination of sizes, redirects, requests to different domains,
3GFast
network using the
established formula.Examples that pass the hint
- Any combination of sizes, redirects, requests to different domains,
3GFast
network
using the established formula.How to use this hint?
To use it you will have to install it vianpm
:npm install @hint/hint-performance-budget
Note: You can make
npm
install it as a devDependency
using the
--save-dev
parameter, or to install it globally, you can use the
-g
parameter. For other options see npm
's
documentation.And then activate it via the
.hintrc
hintrc configuration file:{
"connector": {...},
"formatters": [...],
"hints": {
"performance-budget": "error",
...
},
"parsers": [...],
...
}
Further Reading
- High Performance Browser Networkinghbpn
- Can You Afford It?: Real-world Web Performance Budgetscan you afford it
- Setting and Calculating a Web Performance Budgetkeycdn-wpb
- The Cost Of JavaScriptcost of javascript