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"
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.
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
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.
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.
Revenue and Growth:
Enhanced user experience leads to increased usage, directly affecting our revenue streams and opening doors for upselling and cross-selling opportunities.
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
Multi-browser Support: You can run tests in Chrome and Firefox to see how your site performs across different browsers.
Filmstrip and Screenshots: It can capture a filmstrip view of your webpage loading, helping you visually identify bottlenecks.
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.
CI/CD Integration: It can be integrated into CI/CD pipelines, ensuring that you catch performance regressions as they happen.
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:
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.
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.