browser benchmarking dump

lazyloadimagesrccode My little gif at the bottom was not lazy loaded but was outside the viewport, so I got a ding on lighthouse.

For any lighthouse result / test / pass|fail you can peruse the source code. It's linked at the bottom of all the pages that are linked in lighthouse results à la "see how to lazy load images"

Wish me luck.

core web vitals

These are metrics that Google uses both in its SEO calculations as well as a rubric for a what makes a performant site. They may serve as a good starting place for our own optimizations combined with our own baseline results.

| | Good | Poor | Percentile | | --- | --- | --- | --- | | Largest Contentful Paint | ≤2500ms | >4000ms | 75 | | First Input Delay | ≤100ms | >300ms | 75 | | Cumulative Layout Shift | ≤0.1 | >0.25 | 75 |

popular tool comparisons

| Tool | Pros | Cons | | --- | --- | --- | | Lighthouse | Integrated in Chrome DevTools, detailed reports, open-source | Slower, varying scores | | WebPageTest | Multiple locations, advanced metrics, scripting | Overwhelming UI, longer results time | | GTmetrix | User-friendly, Lighthouse and Legacy reports, free tier | Limited advanced features in free plan, less depth | | Pingdom | Easy-to-use, uptime monitoring, historical data | Limited customization, paid advanced features | | Apache JMeter | Versatile, open-source, highly customizable | Steeper learning curve, resource-intensive GUI |

great resources



above the fold prioritization

less requests

la page abandonée


Why it's Important:

  1. User Experience:
  2. Client Retention and Acquisition:
  3. Revenue and Growth:
  4. Cost Efficiency:

Who Will Benefit:

Company Impact:

References and Data:

Benchmarking Tools Outside Of Lighthouse = lighthouse + webpage test aka the top 2 tools combined, and more is a comprehensive tool that provides not just real-browser testing but also various analytics to help you understand your website's performance. Since you're experienced in frontend development, you'll appreciate how extensible and feature-rich it is. Here's a deeper dive:

Core Components

Key Metrics captures an array of web performance metrics, including but not limited to:

Key Features

  1. Multi-browser Support: You can run tests in Chrome and Firefox to see how your site performs across different browsers.
  2. Filmstrip and Screenshots: It can capture a filmstrip view of your webpage loading, helping you visually identify bottlenecks.
  3. HAR Files: It generates HAR (HTTP Archive) files for each run, which can be imported into tools like Google's HAR Analyzer for a deep-dive into resource timings.
  4. CI/CD Integration: It can be integrated into CI/CD pipelines, ensuring that you catch performance regressions as they happen.
  5. WebPageTest Integration: If you want to gather metrics using WebPageTest, can do that as well.

Customization and Extensibility

You can write custom plugins, capture custom metrics using JavaScript snippets, and even extend the default metrics captured by the tool.

Example Usage

A basic command to run with Chrome and collect SpeedIndex would be:

docker run --rm -v "$(pwd):/" sitespeedio/ --browser chrome --speedIndex <>

This command will run within a Docker container, collect SpeedIndex metrics for your website using Chrome, and save the results in the current directory.

Monitoring in CI/CD

In a CI/CD environment like CircleCI, you might add a job like:

    executor: your-docker-executor
      - checkout
      - run:
          name: Run
          command: docker run --rm -v "$(pwd):/" sitespeedio/ <>

By incorporating into your CI/CD pipeline, you can ensure that every commit or pull request is vetted for performance before it reaches production.


misc performance benchmarking lighthouse images

render blocking

performance insights tab reveals when the core web vitals are met or foiled, and you know I love that purplepink border heh.

performance insights, purple

Chromium code search rocks.

chromium code search

spin the event loop

rendering breakdown

performance tab - see each fn call

performance insights

Clicking any event-link will reveal an info pane and links to docs on how to fix it. It's fun to just create a base index.html file and experiment with these web vital metrics to see why they're… CORE web vitals.

detail perf insight

Animation frame budget; how the refresh rate of a monitor intersects with other perf metrics. Akin to buying a HD 1080p pay-per-view on a motel 8 TV from 1998.

frame budget

You can toggle in the render panel when these dings in your score occur on the page visually.

render panel

Edge (best browser idc) warns in css panels:

css warning

good img optimization advice from NextImage docs