Clean Edge Construction — High-Performance Business Site

Overview

Clean Edge Construction is a commercial construction company that came to me with a common but painful problem: their existing website was slow, hard to update, and generating almost no leads. Built on a WordPress theme from 2016, it scored 34/100 on Lighthouse, took 8 seconds to load on mobile, and required a developer to update any content.

I rebuilt it from scratch using Next.js, Payload CMS, and Tailwind CSS — delivering a site that the team can update themselves and that converts at 45% higher rates than the original.

The Challenge

Construction companies live and die by their project portfolio. Photos and project descriptions are the primary sales tool — potential clients want to see that you've built things like what they want built. The old site had a static portfolio that hadn't been updated in two years because updating it required a developer and a full day of work.

The business goal wasn't just a faster website — it was a lead generation machine that the marketing team could operate without technical help.

Architecture & Technical Decisions

Payload CMS for Non-Technical Content Management

I chose Payload CMS because it generates a beautiful, intuitive admin UI from schema definitions — perfect for a non-technical team. The construction team could upload project photos, write descriptions, set project categories, and publish new case studies entirely independently. I spent a day training two team members; within a week they had added eight projects themselves.

• Payload CMS collections: Projects, Team Members, Testimonials, Services
• Custom admin UI labels and field descriptions written for non-technical users
• Media library with automatic WebP conversion and responsive size generation
• Draft/publish workflow so the team can stage content before going live

Performance Engineering for 98/100 Lighthouse

Hitting 98/100 on Lighthouse requires obsessing over every millisecond. The biggest wins came from: eliminating render-blocking resources, using Next.js Image for automatic WebP serving and lazy loading, preloading the hero image (the LCP element), and minimizing JavaScript with aggressive code splitting.

• next/image for all photos: automatic WebP, AVIF, responsive srcset, lazy loading
• Hero image preloaded via <link rel='preload'> — reduced LCP from 2.1s to 0.78s
• Zero render-blocking CSS — all styles inlined or loaded asynchronously
• Font subset: only Latin characters loaded for the selected typefaces
• Lighthouse scores: Performance 98, Accessibility 100, Best Practices 100, SEO 100

Lead Capture & CRM Integration

The contact and quote request forms integrated with the client's existing HubSpot CRM via API. Form submissions created deals in HubSpot automatically, tagged with the project type and budget range the prospect indicated. The sales team got an instant Slack notification with the lead's details. This replaced a process where leads arrived via email and were manually copied into spreadsheets.

Results

• Lighthouse Performance: 98/100 (up from 34/100)
• LCP: 0.78s on mobile (previously 8.1s)
• Lead form submission rate: +45% vs. the old site (same traffic, same budget)
• Content updates: team independently published 12 projects in first month
• Zero developer involvement in content updates since launch
• Organic search impressions increased 180% in 90 days post-launch (Core Web Vitals impact on ranking)

What I Learned

Performance optimization for a business website is pure leverage. A 0.1s improvement in LCP correlates to measurable improvements in conversion rate — Google has the data to prove it. But the bigger lesson was that the best content management system is the one the client actually uses. Payload CMS's clean admin UI meant the client took ownership of their site immediately instead of treating it as a static brochure they'd update once a year.