browser benchmarking dump

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"

https://github.com/GoogleChrome/lighthouse/blob/main/core/audits/byte-efficiency/offscreen-images.js#L84

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

• HTTP Archive — measures 8 million webpages, runs benchmarking, aggregates, and creates an actionable report Performance | 2022 | The Web Almanac by HTTP Archive
• Web Dev — a Google site that compiles the web vitals, resources, how to improve scores, and hundreds of case studies: https://www.web.dev

images

• account for more than half of all data transmitted
• tons of techniques to reduce their resource consumption
• use a CDN instead of serving images directly from S3
• lazy-loading (don't load until it's in view port)
• prefetching images likely to be loaded
• integrate logic + services that automatically resize depending on resolution and bandwidth
• use <picture> elements, multiple src-sets, AVIF or WebP instead of jpeg/png—this is the first recommendation from Lighthouse report on mvperks.com:

above the fold prioritization

• load what's visible to the user on page navigation before everything else

less requests

• render blocking requests pause execution of a page until they're fully downloaded
• code can be organized in such a way that static content is rendered first to have something render immediately and then fill in subsequently with async resource fetching

la page abandonée

• ~75% of users will abandon a page after the 5 second mark
• top 20 most trafficked websites have an average page load time of 1.08 seconds Top 100: The Most Visited Websites in the US | semrush.com

Why it's Important:

1. User Experience:
   • Abandonment Rates: Research shows a correlation between load times and user abandonment rates. A one-second delay in load time can result in a 7% loss in conversions.
2. Client Retention and Acquisition:
   • Enterprise Clients: Load times are often a deciding factor for enterprise-level clients. Improved performance may prevent potential enterprise clients from walking away.
   • Market Segmentation: While this epic specifically addresses enterprise-level concerns, the performance enhancements will also positively impact individual users.
3. Revenue and Growth:
   • Enhanced user experience leads to increased usage, directly affecting our revenue streams and opening doors for upselling and cross-selling opportunities.
4. Cost Efficiency:
   • Decreasing the load time can save on AWS costs by reducing the number of needed resources during high-traffic times.
   • Dev hours can be re-allocated to feature development rather than firefighting performance issues.

Who Will Benefit:

• Clients, both enterprise and individual, will experience a smoother, faster application.
• The company will benefit from higher client retention, lower churn rates, and potential for increased revenue.

Company Impact:

• Revenue: Increase revenue by retaining high-value enterprise clients and attracting new ones.
• New Sales and Growth: Open avenues for upselling and cross-selling.
• Decrease Churn: Improve client stickiness by providing a robust, fast application.
• Cost-Efficiency: Save on development hours and AWS costs.

References and Data:

• This aligns with our Engineering Goals to improve the scalability and performance of our applications.
• Industry data shows that a one-second delay in page load time can result in a 7% reduction in conversions, leading to a substantial revenue loss.

Benchmarking Tools Outside Of Lighthouse

sitespeed.io = lighthouse + webpage test aka the top 2 tools combined, and more

Sitespeed.io 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

• Browsertime: At the heart of Sitespeed.io is Browsertime, which drives real browsers to collect performance metrics.
• Graphite: For long-term storage of metrics, Sitespeed.io often integrates with Graphite.
• Grafana: For visualizing the collected metrics in dashboards, Sitespeed.io can work seamlessly with Grafana.

Key Metrics

Sitespeed.io captures an array of web performance metrics, including but not limited to:

• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• Speed Index
• Cumulative Layout Shift (CLS)
• Time to First Byte (TTFB)

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, Sitespeed.io 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 Sitespeed.io with Chrome and collect SpeedIndex would be:

docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io --browser chrome --speedIndex <https://www.yourwebsite.com>

This command will run Sitespeed.io 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:

jobs:
  performance_test:
    executor: your-docker-executor
    steps:
      - checkout
      - run:
          name: Run Sitespeed.io
          command: docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io <https://www.yourwebsite.com>

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

https://cloudinary.com/documentation/media_optimization

misc performance benchmarking lighthouse images

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

Chromium code search rocks.

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.

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.

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

Edge (best browser idc) warns in css panels:

good img optimization advice from NextImage docs