Are you looking for a website optimization workflow for SEO and accessibility that makes maintenance painless?

I’ll be honest with you: I’m a serial builder. I love the “new project” smell—the fresh repository, the first npm init, and the excitement of seeing a digital structure rise from the ground up for the first time.

But recently, I had to take a hard look at the THT blog 👁️

While I was busy dreaming up new features, I identified some lingering accessibility issues.

Since accessibility directly affects the amazing humans who consume and support our content, and SEO is the primary method users use to find us, I decided to pause my never-ending building.

It was time to tackle the less “novel” but arguably most important part of web development: maintenance and performance optimization.

Related: How To Make Auditing Your Website In Real-Time Easy

Optimization isn’t just “cleaning up.” It’s one of the few things in this field that requires considerable thought, planning, and deep research.

In this post, I’m going to show you the exact workflow I used to quickly and efficiently crush these SEO and accessibility issues using free tools, AI agents, and a little MCP (Model Context Protocol) action.

The Audit: Gathering “Ground Truth” Data

Before you can fix anything, you have to know exactly what’s broken. We don’t guess at THT; we audit.

I used our free Chrome extensions, SEO & Accessibility Helper and DIRA, to get the granular details of the pressing issues.

To give you an idea of the level of detail we’re working with, here’s the raw “snapshot” DIRA pulled from the THT home page:

Site Metadata & Theme Specs

From the source:

{
  "url": "<https://thehelpfultipper.com/>",
  "title": "The Helpful Tipper - Home",
  "timestamp": "2026-01-06T01:57:38.090Z",
  "pageBackground": "rgb(43, 48, 53)",
  "colors": [
    "rgb(58, 46, 79)",
    "rgb(226, 216, 247)",
    "rgb(163, 155, 147)",
    "rgb(50, 50, 50)",
    "rgb(245, 235, 224)",
    "rgb(213, 198, 183)",
    "rgb(233, 223, 252)",
    "rgb(108, 79, 153)",
    "rgb(30, 30, 30)",
    "rgb(189, 147, 249)",
    "rgba(255, 255, 255, 0.65)",
    "rgb(52, 58, 64)"
  ],
  "fonts": [
    "Inter",
    "Fira Code"
  ],
  "fontSizes": [
    "14px",
    "12px",
    "16px",
    "20px",
    "14.4px",
    "28px",
    "32px"
  ],
  "typographySamples": {
    "h1": null,
    "h2": {
    
// Ongoing DIRA design analysis sample...

Breaking it down:

• URL: https://thehelpfultipper.com/
• Title: The Helpful Tipper – Home
• Page Background: rgb(43, 48, 53)
• Color Palette (The Design System):
  • rgb(58, 46, 79) (Deep Purple)
  • rgb(226, 216, 247) (Soft Lavender)
  • rgb(163, 155, 147) (Neutral Gray)
  • rgb(50, 50, 50) (Dark Gray)
  • rgb(245, 235, 224) (Warm Cream)
  • rgb(189, 147, 249) (Bright Violet)
  • rgba(255, 255, 255, 0.65) (Translucent White)
• Fonts: Inter, Fira Code
• Font Sizes currently in use: 12px, 14px, 14.4px, 16px, 20px, 28px, 32px

The audit confirmed my fears. Our H1 and H2 tags were effectively the same size, which is a major accessibility “no-no” 😬

It destroys the visual hierarchy for sighted users and makes navigation confusing for screen readers.

Other findings included color contrast issues, along with spacing and readability ones across themes.

Creating the “Blog Optimizer” (Custom Google Gem)

To handle the heavy lifting of the analysis, I created a temporary custom Google Gem that I plainly called “Blog Optimizer.”

Tip: You can access Google Gems for free with your Google account much like you would Gemini and a lot of the Google Lab experimental apps.

I didn’t want a generic AI. I wanted an expert who was well-versed in UI/UX best practices for design accessibility.

To ensure there were no repeats or messed-up context, I fed “Blog Optimizer” a knowledge base comprised of DIRA’s design analysis for the blog’s light and dark themes.

It knew exactly what colors and fonts we were dealing with before I even sent my first prompt!

The System Instructions (The “Expert” Brain)

I configured the Gem with a very specific set of behaviors and rules. If you’re building your own, here is the blueprint I used:

1. Purpose and Goals:

• Assist in identifying and resolving accessibility, design, and SEO issues (spacing, font size, layout).
• Provide actionable alternatives for cross-device compatibility.
• Maintain consistency with the existing theme and design system.

2. Analysis and Diagnosis:

• Review issues like ‘low color contrast’ or ‘improper heading structure’.
• Explain the why based on WCAG or search engine guidelines.

3. Suggesting Alternatives (The Strict Rules):

• Offer 2-3 specific alternatives for each issue.
• The Constraint: When suggesting color changes, the AI must stick to similar shades of the original color to ensure they remain uniform and conform to the overall design system.
• Optimize spacing (padding/margin) to improve touch targets and visual flow.

4. Technical Specs:

• Provide CSS snippets or HTML structure improvements using clear, technical language.

Putting the Gem to Work: Real-Time Auditing

With the “Blog Optimizer” Gem ready, I fed it a specific URL: https://thehelpfultipper.com/coding-isnt-for-everybody-heres-why/.

My Prompt:

“Analyze the font sizes on the following URL for headings and p tags. Identify how these can be made accessible. Right now h1 and h2 are the same size. Then proceed to identify design accessible spacing from paragraph to h1, h2, and h3 so it doesn’t look clustered.”

Because the Gem had the DIRA context, it provided a response that required very little to no re-prompting.

My visual brain was more than happy with this breakdown:

Tip 🤓
Don’t be afraid to poke the AI with “fringe” questions! You can ask things like, “Are there any rules around accessibility or theme awareness for emojis on a page?” It’s totally okay if you don’t know something—you’re here to learn, and the AI is your partner.

Related: A Smart Free Chrome Extension That Upgrades AI Prompts

The Execution: Agentic Workflow & Antigravity

Now for the heavy lifting. I pulled our THT theme code into Google’s Antigravity.

In case you missed it, THT was recently redesigned and rebuilt from scratch as a custom WordPress theme.

This means I have a ready Local setup on my machine. We used this to pull up THT on our local environment to make changes safely before pushing them live.

Using Antigravity’s Agent Manager, I set up an agentic workflow 🤖

I’ve found that a planned, smart approach to tackling specific tasks (like these optimizations) works best when you provide structured, succinct details rather than copy-pasting everything under the sun.

Setting up the Agents

I launched two agents simultaneously:

• Agent A: Working specifically on optimizing theme color contrasts.
• Agent B: Addressing font sizes and content spacing based on the Gem’s recommendations.

Note ⚠️ 
I don’t usually rely on multiple agents executing multiple processes at the same time. It can get messy very quickly, and the “efficiency” gained often results in hours (or even days) spent debugging. But because I gave these agents targeted context, they were able to address about 80% of the optimization work in one go.

More: I Tell People I Do “Fusion Engineering” Because Being a Developer in 2025 Feels Like Gluing the Future Together

Solving the Contrast Crisis with MCP

Everything was going smoothly until I hit a tricky situation: color contrast across themes.

I wanted to meet the high standards of the SEO & Accessibility Helper’s analysis while keeping my design criteria intact (and let’s be honest, my standards are pretty high) 💁‍♀️

I tried one thread; it failed. The AI just couldn’t find the right balance between “accessible” and “aesthetic.”

This is when I configured Google’s Chrome DevTools MCP (Model Context Protocol).

When AI Goes “Goody Two-Shoes”

Don’t take this to mean it worked perfectly from the get-go. It didn’t. What makes the MCP tool great is that the agent can make and test changes in the browser, allowing it to make its own corrections.

However, on the first run, the AI decided to be a “goody two-shoes.” It started a thorough analysis of every single element on the page for color contrast.

It was taking forever and doing way more work than I needed 🙄

I didn’t have the time for AI inefficiency, so I ended the run.

The Fix: The “NOT” Instruction

I had to tweak the prompt. I became very specific about what the AI should not do (e.g., “Do not audit the footer or sidebar, only the main content area”).

Tip ✨
Be explicit in what the AI should do and what it should not do. The latter is often forgotten, but it will save you time and many, many precious hairs.

After that slight tweak, it only took a couple of runs to get to a perfect balance of work done.

Reflections & Lessons Learned

This entire workflow—from the DIRA audit to the MCP color fixes—uses all free services and lies well within the free tiers.

The secret isn’t paying for expensive tools; it’s combining the necessary context and detail to provide the AI with adequate directions.

What we learned from this build:

1. Hierarchy is SEO & Accessibility = Reach: By fixing our font sizes, we didn’t just help users with visual impairments; we told Google exactly how our content is structured. And by improving readability (through spacing and color contrast), we make the lives of our readers (across abilities) easier 😇
2. Context is King: The “Blog Optimizer” Gem worked because it knew our theme’s RGB values before we started. Antigravity’s AI agents could execute asynchronous operations properly thanks to the level of detail and succinct instructions supplied.
3. Local is Safer: Using a Local WordPress setup allowed us to verify every change with the SEO & Accessibility Helper extension before the world saw it.

If you’ve been putting off your own site maintenance, start with a simple audit.

You might be surprised at what a few rem changes can do for your site’s “vibe” and its search rankings!

Now off you go to do your own audit, and don’t forget to use THT’s free tools.

I’ll see ya next time 😀