Web Performance Optimization & Lighthouse · 课时

预算监控与告警

实现自动化监控和告警系统，确保不超出您设定的性能预算。

预算监控与告警 是 CoddyKit 上的免费 Web Performance Optimization & Lighthouse 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Web Performance Optimization & Lighthouse 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Performance Optimization & Lighthouse 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Why Monitor Performance Budgets?

You've learned to set performance budgets. But how do you ensure your website stays within those limits as it evolves? That's where continuous monitoring and alerting come in!

Monitoring helps you:

Catch regressions early: Identify performance drops before they impact users.
Maintain quality: Ensure new features don't unintentionally slow things down.
Stay competitive: Keep your site fast and responsive, meeting user expectations.

What Can We Monitor?

Performance budgets aren't just about page load time. They can apply to various aspects of your website:

Resource Size: Total JavaScript, CSS, or image bundle size.
Performance Scores: Lighthouse scores for performance, accessibility, etc.
Metric Thresholds: Specific Core Web Vitals like Largest Contentful Paint (LCP) or Cumulative Layout Shift (CLS).
Request Count: The number of network requests your page makes.

Continuous monitoring helps track these against your predefined limits.

Build-Time Budget Checks

One of the earliest points to check performance budgets is during your project's build process. Tools like Webpack, a popular JavaScript module bundler, can be configured to warn or error if certain asset size budgets are exceeded.

This prevents large files from even making it to deployment, catching issues before they reach users.

Webpack Performance Hints

Webpack allows you to define performance hints in your configuration. These hints will issue warnings or throw errors if your bundles exceed specified sizes.

Here's a simple example in a webpack.config.js file:

module.exports = {
  // ... other webpack config
  performance: {
    hints: 'warning', // Can be 'error' or false
    maxAssetSize: 200 * 1024, // 200 KiB
    maxEntrypointSize: 250 * 1024, // 250 KiB
    assetFilter: function(assetFilename) {
      return !/(\.map$|^favicon\.ico$)/.test(assetFilename);
    }
  }
};

Continuous Integration (CI) for Budgets

For more comprehensive checks, especially against metrics like Lighthouse scores or Core Web Vitals, you can integrate performance budget monitoring into your Continuous Integration (CI) pipeline.

A CI pipeline automatically runs tests and builds your code whenever changes are pushed. By adding performance checks, you can:

Automate audits: Run Lighthouse or other tools on every code change.
Fail builds: Prevent deployments if performance budgets are violated.
Get instant feedback: Developers see performance issues directly in their pull requests.

Lighthouse CI Budget Assertions

Lighthouse CI is an excellent tool for integrating performance checks into your CI pipeline. It allows you to define specific assertions (rules) that your Lighthouse audit results must meet.

If any assertion fails, Lighthouse CI can mark your build as a failure. This ensures your performance never drops below a baseline.

Here's how you might define budgets in a .lighthouserc.json file:

{
  "ci": {
    "collect": {
      "url": "http://localhost:8080"
    },
    "assert": {
      "assertions": {
        "performance-score": ["error", {"minScore": 0.90}],
        "interactive": ["error", {"maxNumericValue": 3000}],
        "total-blocking-time": ["warn", {"maxNumericValue": 200}]
      },
      "budgets": [{
        "resourceSizes": [
          {"resourceType": "script", "budget": 170},
          {"resourceType": "image", "budget": 250}
        ],
        "resourceCounts": [
          {"resourceType": "script", "budget": 10}
        ]
      }]
    }
  }
}

Types of Alerts

When a performance budget is exceeded, you need to know about it! Alerts can take various forms:

Build Failure: The most direct alert, stopping deployment until fixed.
Notifications: Messages sent to team communication channels (Slack, Microsoft Teams).
Email Reports: Detailed summaries sent to specific individuals or mailing lists.
Dashboard Warnings: Visual indicators on monitoring dashboards.

The goal is to make performance issues visible and actionable for your team.

Setting Up Notification Channels

Many CI/CD platforms and monitoring tools offer integrations with popular communication services. For example, if your Lighthouse CI audit fails, you can configure your pipeline to:

Post a message to a Slack channel.
Send an email to the development team.
Create an issue in a project management tool like Jira.

These integrations ensure that the right people are informed immediately when budgets are breached.

Real User Monitoring (RUM) Alerts

While build-time and CI checks are proactive, Real User Monitoring (RUM) provides insights into actual user experiences. RUM tools collect performance data directly from your users' browsers.

You can set up RUM alerts for:

Core Web Vitals: Alert if a certain percentage of users experience LCP or CLS above your thresholds.
Error Rates: Notify if JavaScript errors spike, potentially impacting performance.
Geographic Performance: Get alerts if users in a specific region experience slow loading times.

RUM alerts help you react to real-world performance degradations.

Quick Check: Budget Monitoring

Which of the following are effective ways to monitor and receive alerts about performance budget violations?

Recap: Staying Within Budget

Great job! You've learned how critical continuous monitoring and alerting are for maintaining web performance.

We explored how build tools like Webpack can enforce size budgets.
We saw how CI/CD pipelines, especially with tools like Lighthouse CI, automate checks and fail builds on budget breaches.
We discussed various alerting mechanisms, from build failures to notifications.
And finally, we touched upon Real User Monitoring (RUM) for real-world performance alerts.

By implementing these strategies, you can ensure your website consistently meets its performance goals.

常见问题解答

「预算监控与告警」课时是免费的吗？

是的 — 「预算监控与告警」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Performance Optimization & Lighthouse 课程的其余内容，请升级到 CoddyKit PRO。 Web Performance Optimization & Lighthouse 课程共包含 4 节课。

「预算监控与告警」这节课中我会学到什么？

实现自动化监控和告警系统，确保不超出您设定的性能预算。你通过在浏览器中直接运行的动手代码来练习 Web Performance Optimization & Lighthouse，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Web Performance Optimization & Lighthouse 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Web Performance Optimization & Lighthouse 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「预算监控与告警」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Web Performance Optimization & Lighthouse 课中编写并运行代码吗？

能。每节 Web Performance Optimization & Lighthouse 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Web Performance Optimization & Lighthouse