Pemantauan dan Peringatan untuk Anggaran

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.

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.

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 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:

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 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:

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.

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.

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.

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.