Skip to main content
Skip to main content

Performance Monitoring

This guide explains how to monitor the Help Center's Core Web Vitals and set up alerts for performance regressions.

Overview​

We monitor performance through three complementary systems:

  1. Automated CI Checks - GitHub Actions with Lighthouse CI
  2. Real User Monitoring - Google Analytics 4 with Web Vitals
  3. Manual Audits - Lighthouse and PageSpeed Insights

Performance Targets​

MetricTargetError Threshold
Performance Score>85<85
LCP (Largest Contentful Paint)<2.5s>2.5s
CLS (Cumulative Layout Shift)<0.1>0.1
TBT (Total Blocking Time)<200ms>200ms
FCP (First Contentful Paint)<1.8s>1.8s
SI (Speed Index)<3.4s>3.4s
TTI (Time to Interactive)<3.8s>3.8s

Automated CI Monitoring​

Lighthouse CI​

Configuration file: 

.lighthouserc.json

What it checks:

  • Performance score minimum 85/100
  • LCP under 2.5 seconds
  • CLS under 0.1
  • TBT under 200ms
  • FCP under 1.8 seconds
  • Speed Index under 3.4 seconds
  • Time to Interactive under 3.8 seconds

When it runs:

  • Daily at 6:00 AM UTC (scheduled)
  • On every pull request to main branch
  • Manual trigger via GitHub Actions

How to view results:

  1. Go to GitHub Actions
  2. Click on the latest run
  3. View the "Lighthouse check" job
  4. Check step summaries for metrics
  5. Download artifacts for detailed reports

GitHub Actions Workflow​

File: 

.github/workflows/performance-monitoring.yml

Features:

  • Runs 3 Lighthouse audits and averages results
  • Posts results as PR comments
  • Fails CI if thresholds are violated
  • Uploads reports as artifacts (30-day retention)
  • Checks production site (https://help.ironwifi.ai)

Manual trigger:

Google Analytics 4 Real User Monitoring​

Web Vitals Tracking​

Implementation: 

src/theme/Root.tsx

Metrics tracked:

  • CLS (Cumulative Layout Shift)
  • INP (Interaction to Next Paint)
  • LCP (Largest Contentful Paint)
  • FCP (First Contentful Paint)
  • TTFB (Time to First Byte)

All metrics are sent to GA4 under the "Web Vitals" event category.

Setting Up GA4 Custom Alerts​

1. Access GA4 Admin​

  1. Go to Google Analytics
  2. Select the IronWifi Help Center property (ID: G-DHC7CD2HD1)
  3. Click Admin (gear icon, bottom left)
  4. Under Property, click Custom Definitions

2. Create Custom Metrics (if not exist)​

Create custom metrics for each Core Web Vital:

LCP Metric:

  • Event parameter: 
    value
    (filtered by event_name = LCP)
  • Display name: LCP Value
  • Unit: Milliseconds

CLS Metric:

  • Event parameter: 
    value
    (filtered by event_name = CLS)
  • Display name: CLS Value
  • Unit: Standard (multiply by 1000 for storage)

INP Metric:

  • Event parameter: 
    value
    (filtered by event_name = INP)
  • Display name: INP Value
  • Unit: Milliseconds

3. Create Insight Alerts​

GA4 doesn't have traditional "Custom Alerts" like Universal Analytics. Instead, use Custom Insights:

  1. Go to Admin → Custom Insights
  2. Click Create custom insight

LCP Alert:

  • Name: "LCP Degradation Alert"
  • Condition: When LCP Value (custom metric) > 2500
  • Evaluation: Daily
  • Notification: Email to team@ironwifi.com

CLS Alert:

  • Name: "CLS Degradation Alert"
  • Condition: When CLS Value (custom metric) > 100 (0.1 * 1000)
  • Evaluation: Daily
  • Notification: Email to team@ironwifi.com

INP Alert:

  • Name: "INP Degradation Alert"
  • Condition: When INP Value (custom metric) > 200
  • Evaluation: Daily
  • Notification: Email to team@ironwifi.com

4. Create Exploration for Monitoring​

  1. Go to Explore in GA4
  2. Click Blank exploration
  3. Add dimensions: 
    Event name
    , 
    Page path
  4. Add metrics: 
    Event count
    , 
    Average value
  5. Filter: 
    Event name
    contains "LCP" OR "CLS" OR "INP" OR "FCP" OR "TTFB"
  6. Save as: "Core Web Vitals Dashboard"

5. Alternative: BigQuery Export (Advanced)​

For more sophisticated monitoring:

  1. Enable BigQuery Export in Admin
  2. Create scheduled query:
  1. Set up Cloud Monitoring alerts on query results

Manual Performance Audits​

Lighthouse (Local)​

PageSpeed Insights​

Test with cache bypass to verify optimizations:

Or visit: https://pagespeed.web.dev/analysis?url=https://help.ironwifi.ai/

Chrome DevTools​

  1. Open DevTools (F12)
  2. Go to Lighthouse tab
  3. Select Performance category
  4. Choose Mobile device
  5. Enable Simulated throttling
  6. Click Analyze page load

Monitoring Dashboard​

Key Metrics to Track​

  1. GitHub Actions Status

    • Monitor: Daily CI runs
    • Alert on: Failed workflows
    • Review: Weekly summary

  2. GA4 Web Vitals

    • Monitor: P75 (75th percentile) values
    • Alert on: Metrics exceeding thresholds
    • Review: Weekly trends

  3. Bundle Size

    • Monitor: Build artifacts size
    • Alert on: >10% increase
    • Review: Monthly trends

Weekly Review Checklist​

  • Review last 7 days of CI runs
  • Check GA4 Core Web Vitals dashboard
  • Verify no failed performance checks
  • Review any alerts or anomalies
  • Check for new browser/device performance issues
  • Update documentation if thresholds change

Monthly Review Checklist​

  • Analyze month-over-month trends
  • Review bundle size changes
  • Audit new dependencies impact
  • Update performance budget if needed
  • Test on slow networks/devices
  • Document any optimization opportunities

Troubleshooting​

CI Checks Failing​

Symptom: Lighthouse CI fails with low scores

Solutions:

  1. Check recent code changes in the PR
  2. Review build artifacts size
  3. Test locally with 
    npm run build && npm run serve
  4. Run Lighthouse manually to reproduce
  5. Check for new dependencies or large assets

High LCP in Production​

Symptom: LCP >2.5s on production site

Solutions:

  1. Verify CDN is serving cached content
  2. Check for large above-the-fold images
  3. Review critical CSS delivery
  4. Analyze main thread blocking time
  5. Test with cache-bypass to verify code changes

High CLS Values​

Symptom: CLS >0.1 on real users

Solutions:

  1. Review recent layout changes
  2. Check for missing image dimensions
  3. Verify font loading strategy
  4. Review dynamic content insertion
  5. Test on different viewport sizes

GA4 Not Receiving Metrics​

Symptom: No Web Vitals events in GA4

Solutions:

  1. Verify GA tracking ID (G-DHC7CD2HD1)
  2. Check browser console for errors
  3. Verify 
    web-vitals
    package installed
  4. Test in non-development environment
  5. Check browser extensions blocking analytics

Performance Budget​

Current bundle sizes (post-optimization):

  • Main JS bundle: ~205 KB (gzipped)
  • CSS bundle: ~25 KB (gzipped)
  • Vendor chunks: ~120 KB (gzipped)
  • Search plugin: ~60 KB (gzipped)

Budget alerts trigger when:

  • Total JS >400 KB (gzipped)
  • Total CSS >50 KB (gzipped)
  • Any single chunk >150 KB (gzipped)

Slack Notifications​

The workflow sends Slack notifications when performance regressions are detected.

Setting Up Slack Webhook​

  1. Create Slack Incoming Webhook:

    • Go to your Slack workspace
    • Navigate to Slack API: Incoming Webhooks
    • Click Create New App → From scratch
    • Name: "Performance Alerts" (or your choice)
    • Select your workspace
    • Click Incoming Webhooks → Toggle Activate Incoming Webhooks to ON
    • Click Add New Webhook to Workspace
    • Select the channel for alerts (e.g., 
      #alerts
      , 
      #performance
      , 
      #help-center
      )
    • Click Allow
    • Copy the Webhook URL (format:
      )

  2. Add Webhook to GitHub Secrets:

  3. Test the Integration:

Notification Behavior​

Failure Alerts (⚠️):

  • Sent immediately when any threshold is violated
  • Triggered on: Scheduled runs, manual triggers, and PRs
  • Includes: Failed metrics with actual vs. target values
  • Contains: Direct link to workflow run and production site

Success Notifications (✅):

  • Sent only for scheduled daily runs (not PRs or manual triggers)
  • Includes: Current performance metrics
  • Helps confirm monitoring is working

Example Alert Messages​

Performance Regression Alert:

Daily Success Summary:

Troubleshooting Slack Notifications​

Notifications not appearing:

  1. Verify webhook URL is correctly set in GitHub Secrets:
  2. Check Slack webhook is active in Slack API dashboard
  3. Verify the channel still exists and app has permissions
  4. Check workflow run logs for Slack step errors

Testing without waiting for failures:

  1. Temporarily lower thresholds in 
    .lighthouserc.json
    to trigger alerts
  2. Run workflow manually: 
    gh workflow run performance-monitoring.yml
  3. Restore original thresholds after testing

Testing the Workflow​

You can test the performance monitoring workflow by:

  1. Via Pull Request: Make changes to files in 
    src/
    , 
    docs/
    , 
    docusaurus.config.ts
    , or 
    package.json
  2. Via Schedule: Runs automatically daily at 6 AM UTC
  3. Manual Trigger: Use GitHub Actions UI or 
    gh workflow run performance-monitoring.yml

Resources​

  • .lighthouserc.json
    - Lighthouse CI configuration
  • .github/workflows/performance-monitoring.yml
    - CI workflow
  • src/theme/Root.tsx
    - Web Vitals tracking implementation
  • docusaurus.config.ts
    - Build optimizations
  • src/css/custom.css
    - CLS prevention styles