How to Build a Web Performance Watchdog Agent with Agent.ai

As a web developer, maintaining a fast and user-friendly website is crucial for SEO rankings and user retention. Core Web Vitals like First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS) are key metrics tracked by Google to assess page experience.

Manually monitoring these metrics across multiple sites can be time-consuming.

That’s where the Web Performance Watchdog Agent steps in, automating the process and delivering daily reports to your inbox. This allows you to focus on fixes rather than tracking.

By the end of this tutorial, you’ll have a fully autonomous agent for daily performance monitoring using the Agent.ai Agent Builder.

What You’ll Build

In this guide, we’ll create an autonomous agent in Agent.ai Builder to:

1. Fetch website performance metrics from Google’s Lighthouse API.
2. Process and extract relevant metrics.
3. Format the data into a professional HTML email.
4. Send the email report to your team.

What You’ll Need

1. An Agent.ai account.
2. A Google API key to access the Lighthouse API.
3. Basic knowledge of web performance metrics like FCP, LCP, and CLS.

Step-by-Step Guide

Step 1: Set Up Your Agent in Agent.ai

1. Log in to your Agent.ai account.
2. Navigate to the Agent Builder Dashboard by selecting Agent Builder from the navigation bar.
3. Click the Create Agent button.
4. Choose Start from Scratch to create a new agent.
5. Enter the following details in the Settings Tab of the Agent Editor:
   • Agent Name: Web Performance Watchdog.
   • Description: “Daily website performance monitor that fetches Lighthouse metrics, detects anomalies, and sends email reports.”

Step 2: Configure the Lighthouse API Call

This step is crucial because it pulls detailed performance metrics directly from the Lighthouse API.

These metrics, like First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS), provide the foundation for understanding your website’s performance and identifying areas for improvement.

1. Add Action: In the Actions Tab of the Agent Editor, click Add Action and select Invoke Web API.
2. Configure the API call:
   • URL: https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url={{yourWebsiteUrl}}&category=performance&key={{yourApiKey}}
   • Method: GET
   • Output Variable Name: lighthouseMetrics
3. Replace:
   • {{yourWebsiteUrl}} with the URL of the website to analyze (e.g., https://tympanus.net/codrops).
   • {{yourApiKey}} with your Google API key.

Note that URLs must start with “www“, for example https://www.hubspot.com/.

Step 3: Sanitize the Data

The raw API response from Lighthouse can be overwhelming, containing a lot of unnecessary or deeply nested information.

In this step, you’ll sanitize the data to focus only on the parts you need for further processing.

For agents, LLMs, and even your pocket (inference costs) 😅, less is more, streamlining the data ensures efficiency and clarity.

1. Add Action: In the Actions Tab of the Agent Editor, click Add Action and select Format Text.
2. Configure the formatting:
   • Type: Truncate (or choose another suitable text-sanitizing method).
   • Input Variable: lighthouseMetrics.
   • Output Variable Name: sanitizedMetrics.

Step 4: Extract Relevant Metrics

This step condenses the detailed Lighthouse data into just the metrics that matter, like First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS).

It’s all about making things simpler and more actionable for developers.

By identifying anomalies upfront, you’ll know exactly where to focus your efforts without wading through unnecessary details.

LLM Engine: GPT-4o-Mini.

Prompt:

You are an assistant that extracts relevant information from Lighthouse API results. 
Given the following JSON input, extract the specified details and format them in JSON:

Input JSON:

{{sanitizedMetrics}}

### Extract the following details:
1. **Website URL**:
   - The URL of the website being analyzed.

2. **Metrics**:
   - `fcp`: First Contentful Paint (in seconds).
   - `lcp`: Largest Contentful Paint (in seconds).
   - `cls`: Cumulative Layout Shift value.
   - `performanceScore`: Performance score (as a percentage).

3. **Anomalies**:
   - For `fcp`: Return `true` if FCP > 2 seconds, otherwise `false`.
   - For `lcp`: Return `true` if LCP > 2.5 seconds, otherwise `false`.
   - For `cls`: Return `true` if CLS > 0.1, otherwise `false`.

4. **Suggested Actions**:
   - Provide actionable recommendations based on detected anomalies.

### Expected JSON Output Example:

{
  "url": "https://example.com",
  "metrics": {
    "fcp": "2.3",
    "lcp": "1.8",
    "cls": "0.12",
    "performanceScore": "89"
  },
  "anomalies": {
    "fcp": true,
    "lcp": false,
    "cls": true
  },
  "suggestedActions": [
    "Optimize images to improve FCP",
    "Reduce layout shifts by reserving space for ads or images"
  ]
}

Set the output variable name as processedMetrics.

Step 5: Generate the Email Body

This step transforms the processed metrics into a professional and visually appealing HTML email.

The email will summarize key metrics in a table, highlight anomalies, and provide actionable recommendations, all formatted for readability and compatibility across email clients.

LLM Engine:
GPT-4o-Mini.

Prompt:

You are an assistant that formats data into a professional and visually appealing HTML email body. Use the following JSON data to create a structured and concise email report in HTML format:

Input JSON:

{{processedMetrics}}

### Instructions:
1. **Greeting and Introduction**:
   - Include a welcoming line and specify the purpose of the email.
   - Mention the website URL as a clickable link.

2. **Metrics Summary**:
   - Use a styled HTML table to display key metrics with two columns: Metric Name and Value.
   - Ensure proper alignment, spacing, and readability.

3. **Highlighted Anomalies**:
   - If anomalies are detected, list them as bullet points.
   - Highlight critical issues using bold text or distinct color.

4. **Suggested Actions**:
   - Present actionable recommendations in a numbered list.

5. **Closing Statement**:
   - Conclude with a polite summary encouraging further action.
   - Sign off with "Best regards" and a placeholder for the team name.

### Requirements:
- Use clean and modern HTML with inline styles for email compatibility.
- Focus on readability with a professional, minimalist design.
- Output **only** the email body in HTML format.

### Example Structure for Output:

<!DOCTYPE html>
<html>
  <body style="font-family: Arial, sans-serif; line-height: 1.6; max-width: 600px; margin: 0 auto; color: #333;">
    <!-- Introduction -->
    <p>Hello,</p>
    <p>Here is the Lighthouse metrics report for your website: 
      <a href="https://tympanus.net/codrops/" target="_blank" style="color: #4CAF50; text-decoration: none;">Codrops</a>.
    </p>

    <!-- Metrics Summary -->
    <h2 style="color: #4CAF50; font-size: 20px;">Metrics Summary</h2>
    <table style="border-collapse: collapse; width: 100%; margin-bottom: 20px; border: 1px solid #ddd;">
      <tr style="background-color: #f9f9f9;">
        <th style="text-align: left; border-bottom: 2px solid #ddd; padding: 8px;">Metric</th>
        <th style="text-align: left; border-bottom: 2px solid #ddd; padding: 8px;">Value</th>
      </tr>
      <tr>
        <td style="padding: 8px;">First Contentful Paint (FCP)</td>
        <td style="padding: 8px;">1.804 seconds</td>
      </tr>
      <tr>
        <td style="padding: 8px;">Largest Contentful Paint (LCP)</td>
        <td style="padding: 8px;">2.045 seconds</td>
      </tr>
      <tr>
        <td style="padding: 8px;">Cumulative Layout Shift (CLS)</td>
        <td style="padding: 8px;">0.0006</td>
      </tr>
      <tr>
        <td style="padding: 8px;">Performance Score</td>
        <td style="padding: 8px;">AVERAGE</td>
      </tr>
    </table>

    <!-- Anomalies -->
    <h2 style="color: #FF5722; font-size: 20px;">Anomalies Detected</h2>
    <ul style="padding-left: 20px; margin-bottom: 20px;">
      <li>No anomalies detected for FCP (below 2 seconds).</li>
      <li>No anomalies detected for LCP (below 2.5 seconds).</li>
      <li>No anomalies detected for CLS (below 0.1).</li>
    </ul>

    <!-- Suggested Actions -->
    <h2 style="color: #2196F3; font-size: 20px;">Suggested Actions</h2>
    <p style="color: #555;">No suggested actions. Your website is performing well based on the current metrics!</p>

    <!-- Closing -->
    <p style="margin-top: 20px;">We recommend continuing to monitor these metrics to maintain a great user experience and optimize performance as needed.</p>
    <p style="margin-top: 20px;">Best regards,<br><strong>Your Performance Watchdog</strong></p>
  </body>
</html>

Set the input variable as processedMetrics and the output variable name as emailBody.

Step 6: Send the Email

This final step ensures the insights gathered and processed by the agent are delivered directly to your inbox or a distribution list, making them immediately accessible to developers or stakeholders.

Add Action: In the Actions Tab of the Agent Editor, click Add Action and select Send Email. Configure the email settings as follows:

• To: Your email or a distribution list (e.g., tools@yourdomain.com).
• Body: Use the variable {{emailBody}}.

This step completes the workflow by turning the processed data into actionable insights and delivering them to the right people at the right time.

How to Test Your Workflow

Testing your workflow ensures that all actions and outputs work as expected before setting it to run automatically.

Every time you save an action in the Agent Editor, the workflow automatically runs in the debugger. This allows you to immediately see the results of each step and identify any issues in real time.

Steps to Verify:

1. Check the Debugger Panel:
   • View the step-by-step execution in the right-hand Debugger panel.
   • Confirm that each action executes as expected and produces the correct outputs.
2. Verify Key Outputs:
   • Ensure that metrics (e.g., FCP, LCP, CLS) are extracted and sanitized properly.
   • Check that anomalies are detected accurately based on the thresholds.
   • Review the email output to confirm it is formatted correctly with all the relevant details.

If you encounter any issues during testing, use the “Report Issues” button in the Debugger panel, and a member of the support team will follow up.

Schedule the Workflow

• Navigate to the Triggers Tab in the Agent Editor.
• Set the workflow to run daily, weekly, or at custom intervals to automate performance monitoring.

Next Steps

Now that your workflow is live, here’s how you can unlock even more potential and connect with the Agent.ai community:

Enhance the Agent

• Track Historical Data: Add support for storing and comparing historical metrics to identify trends over time. This could be your next challenge to level up your agent’s capabilities.
• Integrate with Project Management Tools: Automate task creation in tools like Jira or Trello by linking your agent through webhooks or API actions. Make it even easier to stay on top of anomalies.

Collaborate with Other Builders

• Explore the Agent.ai Builder documentation to unlock advanced features and discover new ways to enhance your agents.
• Connect with fellow builders and innovators in the Agent.ai community. Share your workflows, exchange feedback, and collaborate on exciting projects to push the boundaries of what agents can do.

Final Thoughts

Building workflows doesn’t have to be a chore, and the Web Performance Watchdog agent is proof of that. With just a few steps, you’ve created an autonomous agent that delivers daily insights and helps developers focus on what matters, improving performance.

Have questions or ideas for making this agent even better? I’d love to hear your thoughts or see how you’ve customized it. Let’s keep building smarter!

Believe in love ✌️