🔎 Landing Page / Service Page Optimization Playbook

⚠️ Core Insight: Bright Side does NOT have separate landing pages.
The existing service pages on callbrightside.com ARE the landing pages.
Every optimization in this playbook applies directly to those service pages.

• Star rating widget (4.9 stars) visible above the fold
• Review count (394+ reviews) displayed with star rating
• At least one named/attributed testimonial per service page
• Before/after photo gallery for applicable services (sewer, water heater)
• "Fifth-generation master plumber" reference (NOT "fourth generation")
• BBB A+ badge visible on every page

Current site has known LCP issues due to hero image loaded via CSS background with JavaScript injection. See Section 9 for full speed fixes.

1. Hero Section (above the fold)
   • H1: "Sewer Repair in Overland Park, KS" or "Expert Sewer Line Repair in Overland Park"
   • Subhead: "Fifth-generation master plumber. 4.9 stars from 394+ reviews. Same-day sewer diagnostics."
   • Primary CTA: "Call Now for a Free Sewer Inspection" / phone number
   • Trust bar: stars + review count + BBB A+ + "Licensed & Insured"
2. Problem Agitation (immediately after hero)
   • Headline: "Signs Your Sewer Line Needs Repair"
   • Bullet list with symptoms homeowners recognize: slow drains, sewage odors, wet spots in yard, gurgling sounds
   • Urgency message: "Sewer problems get worse fast. A small crack today becomes a full collapse tomorrow."
   • Inline CTA after this section
3. Services Breakdown
   • Trenchless sewer repair (pipe lining/CIPP)
   • Traditional sewer repair
   • Sewer camera inspection
   • Emergency sewer repair
   • Each with icon, 2-3 sentence description, and individual CTA
4. Process Section
   • "How Bright Side Handles Sewer Repair" in 4 steps
   • Step 1: Free camera inspection / Step 2: Honest diagnosis / Step 3: Upfront pricing / Step 4: Expert repair
5. Social Proof Block
   • 2-3 sewer-specific testimonials with customer names
   • Before/after photo gallery of actual sewer repair jobs
   • Video testimonial if available
6. Pricing Transparency
   • "Sewer Repair Cost in Overland Park" section (captures cost keywords)
   • Price ranges (not exact prices): "Most sewer repairs range from $X to $Y depending on..."
   • Financing options callout
7. FAQ Accordion
   • 8-12 questions targeting long-tail keywords
   • Must have FAQPage schema markup
8. Service Area Map
   • Overland Park, Olathe, Lenexa, Shawnee, Leawood, Prairie Village
9. Final CTA Banner
   • "Ready to Fix Your Sewer? Call Bright Side Now." + phone + form link

1. Hero Section
   • H1: "Sewer Replacement in Overland Park, KS"
   • Subhead: "Full sewer line replacement by a fifth-generation master plumber. Transparent pricing. Minimal disruption."
   • CTA: "Get a Free Sewer Assessment" + phone
   • Trust bar identical to sewer repair page
2. "When Repair Isn't Enough" Section
   • Comparison table: Repair vs. Replacement (when each is appropriate)
   • Signs you need full replacement: repeated backups, orangeburg pipe, bellied pipe, tree root infiltration
   • This positions Bright Side as honest advisors who won't replace when repair would suffice
3. Methods Section
   • Trenchless sewer replacement (pipe bursting) with benefits
   • Traditional excavation replacement when trenchless is not possible
   • Clear explanation of what each method involves, timeline, yard impact
4. Process / Timeline
   • "What to Expect During Sewer Replacement"
   • Day-by-day or step-by-step visual timeline
   • Reduces anxiety about the project scope
5. Cost Transparency Section
   • "Sewer Replacement Cost in Overland Park"
   • Factors that affect price: pipe length, depth, method, access, permits
   • Financing options prominently displayed
   • This section captures high-value cost keywords
6. Before/After Gallery
   • Photo slider showing actual Bright Side sewer replacement jobs
   • Include yard restoration photos (show the yard looks good after)
7. Testimonials (sewer replacement-specific)
8. FAQ Accordion (10+ questions with FAQPage schema)
9. Service Area + Final CTA

• Fear reduction: "We walk you through every step before we start. No surprises."
• Yard concern: "We offer trenchless options that keep your landscaping intact."
• Cost concern: "Flexible financing available. We work with your budget."
• Trust: "Kalen personally oversees every sewer replacement. You get the master plumber, not a subcontractor."
• Warranty: Prominently display any warranty on replacement work

1. Hero Section
   • H1: "Water Heater Repair & Replacement in Overland Park, KS"
   • Subhead: "No hot water? We can fix or replace your water heater today. Fifth-generation master plumber. 4.9 stars."
   • Emergency callout: "Same-Day Water Heater Service Available"
2. Problem Identification
   • "Signs Your Water Heater Needs Attention": no hot water, lukewarm water, strange noises, rusty water, leaking, age 10+ years
3. Services Grid
   • Water heater repair | Water heater replacement | Tankless water heater installation | Emergency water heater service
   • Each as a card with icon, short description, and CTA
4. Tank vs. Tankless Comparison
   • Comparison table: cost, lifespan, energy efficiency, space, hot water capacity
   • This captures valuable comparison keywords and builds trust via education
5. Cost Section
   • "Water Heater Replacement Cost in Overland Park"
   • Price ranges by type (standard tank, tankless, hybrid)
   • Financing options
6. Brand Expertise
   • List brands serviced: Rheem, AO Smith, Bradford White, Navien, Rinnai, etc.
7. Social Proof + FAQ + Final CTA

• Must add information the headline does not contain
• Include the strongest differentiator: "fifth-generation master plumber" or "4.9 stars from 394+ reviews"
• Keep under 120 characters
• Include one benefit the customer cares about (speed, price transparency, expertise)
• Avoid generic phrases like "quality service" or "professional team"

Strong Subheadline Examples

• "Upfront pricing. Same-day diagnostics. A master plumber on every job."
• "Kalen Barker brings five generations of plumbing expertise to your home."
• "4.9 stars from 384+ Overland Park homeowners. See why they trust Bright Side."

The trust bar sits directly below the hero CTA buttons. It must be visible without scrolling on both desktop and mobile.

Additional trust bar elements: "5th-Gen Master Plumber" | "Licensed & Insured" | "Financing Available" | "Locally Owned"

Tracking Implementation

// GA4 phone click tracking (add via GTM or inline)
document.querySelectorAll('a[href^="tel:"]').forEach(link => {
  link.addEventListener('click', () => {
    gtag('event', 'phone_click', {
      event_category: 'engagement',
      event_label: link.href,
      page_location: window.location.pathname
    });
  });
});

Based on industry heatmap data for home services pages, these are the optimal form placements:

Key insight: Do NOT bury the form below the fold. On desktop, use a sticky sidebar form that scrolls with the user. On mobile, place the primary CTA (phone call) above form, but have a "Schedule Online" option that scrolls to the form.

Two recommended approaches:

Option A: WPForms Multi-Step (Recommended)

1. Install WPForms (if not already installed) or use existing form plugin
2. Create a new multi-step form with Page Break fields between steps
3. Style the form to match Bright Side branding using WPForms custom CSS
4. Add the form to Oxygen templates via shortcode or WPForms block
5. Set up conditional notifications: Emergency submissions trigger immediate alert

Option B: Custom HTML/JS Form

<!-- Multi-step form structure -->
<div class="bsp-multistep-form" id="bspForm">
  <div class="form-progress">
    <div class="progress-bar" id="progressBar" style="width:33%"></div>
  </div>

  <!-- Step 1 -->
  <div class="form-step active" data-step="1">
    <h3>What do you need help with?</h3>
    <div class="service-buttons">
      <button class="service-btn" data-value="sewer-repair">
        🚧 Sewer Repair
      </button>
      <button class="service-btn" data-value="sewer-replacement">
        🚦 Sewer Replacement
      </button>
      <button class="service-btn" data-value="water-heater">
        🔥 Water Heater
      </button>
      <button class="service-btn" data-value="drain-cleaning">
        🚿 Drain Cleaning
      </button>
      <button class="service-btn" data-value="other">
        🔧 Other Plumbing
      </button>
    </div>
  </div>

  <!-- Step 2 -->
  <div class="form-step" data-step="2">
    <h3>How soon do you need service?</h3>
    <div class="urgency-buttons">
      <button class="urgency-btn" data-value="emergency">
        🚨 Emergency (Today)
      </button>
      <button class="urgency-btn" data-value="this-week">
        📅 This Week
      </button>
      <button class="urgency-btn" data-value="quotes">
        📈 Getting Quotes
      </button>
      <button class="urgency-btn" data-value="not-sure">
        🤔 Not Sure
      </button>
    </div>
  </div>

  <!-- Step 3 -->
  <div class="form-step" data-step="3">
    <h3>Almost done! Where should we reach you?</h3>
    <input type="text" name="name" placeholder="Your Name" required>
    <input type="tel" name="phone" placeholder="Phone Number" required>
    <input type="email" name="email" placeholder="Email (optional)">
    <div class="contact-pref">
      <label><input type="radio" name="contact" value="call"> Call Me</label>
      <label><input type="radio" name="contact" value="text"> Text Me</label>
    </div>
    <button type="submit" class="submit-btn">Get My Free Quote</button>
  </div>
</div>

Key Implementation Notes

• Progress bar must be visible and update on each step
• Back button on steps 2 and 3 (don't trap users)
• Auto-advance on button click for steps 1 and 2 (no "Next" button needed)
• Form submissions must feed into ServiceTitan or CRM
• Track each step completion as a GA4 event for funnel analysis
• Emergency submissions should trigger immediate notification (email + SMS to dispatch)

Placement Rules

• Above the fold: Compact version in trust bar (stars + count, one line)
• Social proof section: Full widget with star visualization, review count, and source logos
• Near every CTA: Micro social proof ("Join 384+ happy homeowners")
• Footer: Review badges from Google, BBB

Widget Options

Recommendation: Use a static HTML widget for speed, update the review count monthly. The 4.9 rating and 384+ count are the key numbers. Exact reviews can be displayed as manually curated testimonials.

Pages That Need Before/After Galleries

• Sewer Repair: Camera footage before/after, excavation and restoration photos
• Sewer Replacement: Old pipe vs. new pipe, yard before/after restoration
• Water Heater: Old rusted unit vs. new installation
• Drain Cleaning: Clogged drain camera footage vs. clear drain

Implementation

• Use a CSS-based before/after slider (no JavaScript dependency for core functionality)
• Compress all images to WebP format, max 200KB per image
• Add descriptive alt text with keywords: "Before and after sewer line repair in Overland Park by Bright Side Plumbing"
• Include captions with service type and location
• Source photos from Kalen and field techs (ask ServiceTitan for job photos)

Optimal Video Placement

• One video testimonial per high-priority service page (sewer repair, sewer replacement, water heater)
• Place AFTER the service description but BEFORE the FAQ section
• Use lazy loading for video embeds (do not load YouTube iframes above the fold)
• Thumbnail with play button overlay (load iframe only on click) to protect page speed

Lazy-Load YouTube Embed (Speed-Safe)

<!-- Lite YouTube embed - loads iframe only on click -->
<div class="lite-youtube" data-id="VIDEO_ID_HERE"
     style="background:url(https://i.ytimg.com/vi/VIDEO_ID_HERE/hqdefault.jpg) center/cover;
            aspect-ratio:16/9;max-width:640px;cursor:pointer;border-radius:10px;position:relative">
  <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center">
    <svg width="68" height="48" viewBox="0 0 68 48">
      <path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55C3.97 2.33 2.27 4.81 1.48 7.74.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/>
      <path d="M45 24L27 14v20" fill="white"/>
    </svg>
  </div>
</div>
<script>
document.querySelectorAll('.lite-youtube').forEach(el => {
  el.addEventListener('click', () => {
    const iframe = document.createElement('iframe');
    iframe.src = 'https://www.youtube.com/embed/' + el.dataset.id + '?autoplay=1';
    iframe.allow = 'autoplay;encrypted-media';
    iframe.allowFullscreen = true;
    iframe.style.cssText = 'width:100%;aspect-ratio:16/9;border:0;border-radius:10px';
    el.replaceWith(iframe);
  });
});
</script>

Since the server runs LiteSpeed, there is potential overlap with WP Rocket. Decide on one primary caching solution to avoid conflicts.

Option A: WP Rocket Only (Recommended)

• Disable LiteSpeed Cache plugin page caching
• Keep LiteSpeed server-level caching for static assets only
• Let WP Rocket handle page caching, CSS/JS optimization, and lazy loading

Option B: LiteSpeed Cache Only

• Deactivate WP Rocket
• Use LiteSpeed Cache for everything (page cache, CSS/JS optimization, image optimization)
• LiteSpeed's QUIC.cloud CDN is free and fast

Do not run both WP Rocket and LiteSpeed Cache simultaneously for page caching. This causes double-caching issues, stale content, and debugging nightmares.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Plumber",
  "name": "Bright Side Plumbing",
  "image": "https://callbrightside.com/wp-content/uploads/bright-side-logo.png",
  "url": "https://callbrightside.com",
  "telephone": "+1-913-XXX-XXXX",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "12022 Blue Valley Pkwy",
    "addressLocality": "Overland Park",
    "addressRegion": "KS",
    "postalCode": "66204",
    "addressCountry": "US"
  },
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": 38.8814,
    "longitude": -94.6689
  },
  "openingHoursSpecification": [
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
      "opens": "07:00",
      "closes": "18:00"
    }
  ],
  "priceRange": "$$",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9",
    "reviewCount": "384",
    "bestRating": "5",
    "worstRating": "1"
  },
  "sameAs": [
    "https://www.facebook.com/callbrightside",
    "https://www.google.com/maps?cid=GOOGLE_CID_HERE",
    "https://www.bbb.org/us/ks/overland-park/profile/plumber/bright-side-plumbing-0644-XXXXXXX"
  ],
  "areaServed": [
    {"@type": "City", "name": "Overland Park"},
    {"@type": "City", "name": "Olathe"},
    {"@type": "City", "name": "Lenexa"},
    {"@type": "City", "name": "Shawnee"},
    {"@type": "City", "name": "Leawood"},
    {"@type": "City", "name": "Prairie Village"},
    {"@type": "City", "name": "Kansas City"}
  ]
}
</script>

Placement: Add to Oxygen Builder > Settings > Global Settings > Custom Code > Header, or via a code block in the site-wide template. This schema goes on every page.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Service",
  "name": "Sewer Repair",
  "description": "Professional sewer repair services in Overland Park, KS. Camera inspection, trenchless repair, and emergency sewer service by a fifth-generation master plumber.",
  "provider": {
    "@type": "Plumber",
    "name": "Bright Side Plumbing",
    "url": "https://callbrightside.com"
  },
  "areaServed": {
    "@type": "City",
    "name": "Overland Park",
    "addressRegion": "KS"
  },
  "serviceType": "Sewer Repair",
  "offers": {
    "@type": "Offer",
    "availability": "https://schema.org/InStock",
    "priceSpecification": {
      "@type": "PriceSpecification",
      "priceCurrency": "USD"
    }
  }
}
</script>

Create a version of this for each service page, changing name, description, and serviceType accordingly.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Plumber",
  "name": "Bright Side Plumbing",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9",
    "reviewCount": "384",
    "bestRating": "5",
    "worstRating": "1"
  },
  "review": [
    {
      "@type": "Review",
      "author": {
        "@type": "Person",
        "name": "Customer Name"
      },
      "datePublished": "2026-01-15",
      "reviewRating": {
        "@type": "Rating",
        "ratingValue": "5",
        "bestRating": "5"
      },
      "reviewBody": "Bright Side was amazing. Kalen came out the same day and fixed our sewer line. Honest, fair pricing, and outstanding work."
    }
  ]
}
</script>

Note: The AggregateRating is already included in the LocalBusiness schema above. Only add individual Review schemas on pages that display those specific reviews visibly on the page. Google requires the review content to be visible, not hidden.

Create These Custom Filters

Key Metrics to Monitor Weekly

• Scroll depth: What % of users scroll past the fold? Past the CTA? To the form?
• Click heatmaps: Where are users clicking? Are they clicking non-clickable elements (dead clicks)?
• Rage clicks: Where are users clicking repeatedly in frustration?
• Session recordings: Watch 10 sessions per week on high-value pages to spot UX issues
• Dead clicks: Elements users expect to be interactive but are not
• Excessive scrolling: Users scrolling up and down looking for information

Quick Sample Size Calculator

All calculations assume 95% confidence level and 80% power. Use Evan Miller's calculator for exact numbers based on current traffic.

Rules for Statistical Significance

1. Never call a test early. Run for at least 2 full weeks regardless of early results.
2. 95% confidence minimum. Do not act on results below 95% statistical significance.
3. Full business cycles. Tests must run across weekdays AND weekends (plumbing searches differ by day).
4. One test at a time per page. Overlapping tests contaminate results.
5. Document everything. Log: test name, start date, end date, variants, sample sizes, conversion rates, confidence level, winner, action taken.

Method 1: Google Optimize Replacement (free)

Since Google Optimize has been sunset, use one of these free/low-cost alternatives:

• Microsoft Clarity + manual variants: Create two versions of a section in Oxygen (show/hide based on a cookie), then compare behavior in Clarity
• VWO (free tier): Supports up to 50k visitors/month for free
• Cloudflare Workers: Server-side split testing at the CDN level (no flicker)

Method 2: Oxygen Conditions (Simple)

1. In Oxygen, create two versions of the element you want to test (e.g., two hero sections)
2. Use Oxygen's Conditions feature to show variant A to 50% and variant B to 50%
3. Set the condition based on a cookie value assigned randomly via a small JS snippet
4. Track conversions per variant in GA4 using custom events

Cookie-Based Split Test Script

// Place in Oxygen > Settings > Global > Scripts > Header
(function() {
  var variant = document.cookie.match(/bsp_test=([AB])/);
  if (!variant) {
    variant = Math.random() < 0.5 ? 'A' : 'B';
    document.cookie = 'bsp_test=' + variant + ';path=/;max-age=2592000';
  } else {
    variant = variant[1];
  }
  document.documentElement.setAttribute('data-variant', variant);
  // Fire GA4 event
  if (typeof gtag === 'function') {
    gtag('event', 'ab_test_variant', { variant: variant });
  }
})();

/* In Oxygen CSS, show/hide based on variant */
[data-variant="A"] .hero-variant-b { display: none !important; }
[data-variant="B"] .hero-variant-a { display: none !important; }

<!-- Must be in <head> - verify this exists and is correct -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Common Viewport Issues on Oxygen Sites

• Fixed-width elements that cause horizontal scroll on mobile
• Tables that overflow the viewport (wrap in a overflow-x: auto container)
• Images without max-width: 100%
• Oxygen sections with hardcoded pixel widths instead of percentages

Fix: Global Mobile Overrides in Oxygen

/* Add to Oxygen > Stylesheets > Global */
@media (max-width: 767px) {
  /* Prevent horizontal overflow */
  body { overflow-x: hidden; }

  /* Make all images responsive */
  img { max-width: 100%; height: auto; }

  /* Ensure tables scroll */
  table { display: block; overflow-x: auto;}

  /* Minimum font size to prevent zoom on input focus */
  input, select, textarea { font-size: 16px !important; }

  /* Full-width CTAs on mobile */
  .cta-button { width: 100%; text-align: center; padding: 16px; }
}

Critical: iOS Safari will auto-zoom the page when a user taps an input field with font-size below 16px. This is jarring and confusing. Set all form inputs to 16px minimum on mobile.

Users hold their phone with one hand. The "thumb zone" is the area easily reachable by the thumb. On a standard phone:

• Easy zone (bottom center): Primary CTA, click-to-call button, sticky mobile bar
• Okay zone (middle): Content, images, secondary CTAs
• Hard zone (top corners): Navigation hamburger, search, secondary actions

Mobile Layout Stack Order (top to bottom)

1. Header: Logo (left) + Hamburger menu (right) + Phone icon (right)
2. Hero: H1 + Subhead + Primary CTA button (full-width, large tap target)
3. Trust bar: Horizontal scroll or compact grid of trust badges
4. Content sections: Stacked vertically, one column
5. Form: Full-width, multi-step, large fields
6. Sticky bottom bar: Click-to-call, always visible (thumb zone sweet spot)

Elements That Must Change on Mobile

• Side-by-side layouts become stacked (single column)
• Desktop sidebar form moves to after hero section on mobile
• Image galleries become horizontal swipe carousels
• FAQ sections use full-width accordion with large tap targets
• Pricing comparison tables scroll horizontally or become stacked cards

High-ticket services (sewer replacement, water heater installation) create price shock. Financing options reduce sticker shock and increase conversion on expensive services.

How to Display Financing

• Trust bar: "Financing Available" with a small icon
• Pricing sections: "As low as $X/month with approved credit" next to price ranges
• Dedicated financing callout: A card on high-ticket service pages explaining financing options
• Form option: Add "Interested in financing?" checkbox to the contact form

Copy Examples (No Em Dashes)

• "Flexible financing available for sewer replacement. Payments as low as $99/month."
• "Don't let cost stop you from fixing your sewer. We offer financing options to fit your budget."
• "Ask about our financing plans. Get the repair you need now, pay over time."

Every high-value service page should have a brief Kalen Barker bio. Homeowners want to know WHO is coming to their home. A named, credentialed person is far more trustworthy than a faceless company.

Recommended Bio Block

Placement: After the process/how-it-works section on each service page. Always include a real photo of Kalen (professional headshot or on-the-job photo).

Sources: WordStream, Unbounce Conversion Benchmark Report, HubSpot, Ruler Analytics (home services vertical)

Define These as GA4 Conversions

Monthly Reporting Cadence

1. Weekly: Check Clarity heatmaps and watch 5-10 session recordings on revenue pages
2. Bi-weekly: Review GA4 conversion rates by page, device, and source
3. Monthly: Full conversion report comparing against benchmarks. Identify pages underperforming targets. Prioritize next optimization.
4. Quarterly: Review A/B test results, update benchmarks, set new targets