Web Performance Optimization & Lighthouse · レッスン

バジェットの監視とアラート

自動監視とアラートの仕組みを実装し、定義したパフォーマンスバジェットの範囲内に収めます。

レッスン 2/411 ステップ

「バジェットの監視とアラート」はCoddyKit上の無料Web Performance Optimization & Lighthouseレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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 — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 12
レッスン: 48

無料で学習を始めるコース全体を表示

よくある質問

「バジェットの監視とアラート」レッスンは無料ですか？

はい。「バジェットの監視とアラート」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Performance Optimization & Lighthouseコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Performance Optimization & Lighthouseコースには全4レッスンが含まれています。

「バジェットの監視とアラート」で何を学びますか？

自動監視とアラートの仕組みを実装し、定義したパフォーマンスバジェットの範囲内に収めます。ブラウザで直接実行するハンズオンコードでWeb Performance Optimization & Lighthouseを演習し、24時間対応の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に戻る