npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@hint/hint-performance-budget

v2.4.26

Published

hint that that checks if a page passes a set performance budget

Downloads

195

Readme

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 budget

Why is this important?

As of January 2018, the average size of a website is 3,545kB:

image

Although the global average connection is 7.2Mb/s (check Akamai's state of the Internet 2017), "no bit is faster than one that is not sent" (quote by Ilya Grigorik). 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 a 3G Fast network (but that can be changed, see "Can the hint 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 same assets, the results should be the same.
  • Show the impact in load time of each transmitted byte with the goal of reducing the number and size of resources downloaded (first and third party).

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 are opened.
  • RTT (Round-Trip Time) is fixed and changes depending on the configured network. It assumes all servers respond instantly and in the same amount of time.
  • DNS lookup: Every hostname resolution requires 1 RTT, imposing latency on the request and blocking the request while the lookup is in progress.
  • TCP handshake: Each request requires a new TCP connection. TCP connections require 1 RTT before starting to send information to the server. There's no connection reuse and the maximum number of connections to a domain (usually 6) is ignored.
  • TCP slow-start phase: The values used to calculate the duration are:
    • 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 handshake: New TLS connections usually require two roundtrips for a "full handshake". However, there are ways of requiring only 1 RTT like TLS False Start and TLS Session Resumption. This hint assumes the optimistic scenario.
  • Redirects: We simplify the redirects and assume the connection is reused and to the same server. If the redirect is to another domain, the penalty will be even greater.
  • The server doesn't use HTTP/2.

Can the hint be configured?

You can change the type of connection and/or the target load time in the .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 | | 3G_EM | 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, etc. that make the site load after 5s on a 3GFast network using the established formula.

Examples that pass the hint

  • Any combination of sizes, redirects, requests to different domains, etc. that make the site load in or under 5s on a 3GFast network using the established formula.

How to use this hint?

To use it you will have to install it via npm:

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 configuration file:

{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "performance-budget": "error",
        ...
    },
    "parsers": [...],
    ...
}

Further Reading