
MAS Construction Website Rebuild
Full rebuild of my family's general contracting site: handcrafted HTML, SEO-first architecture, and measurable performance gains on the platform it already runs on.
Site speed
41% faster
Mobile load time
SEO score
85 → 92
PageSpeed Insights
Layout shift
0
Perfect stability
Service pages
7
Each ranks own keyphrase
Overview
MAS Quality Construction is a family-owned general contractor in Northeast Indiana serving homeowners and commercial clients in Adams County. The previous site was a default WordPress theme with placeholder content, stock AI-generated images, and no SEO strategy. I rebuilt it into a custom, SEO-optimized site with dedicated service pages designed to generate local leads.
My role
I was the sole designer, developer, and digital strategist on this project.
- Designed and directed the build of 6+ custom HTML service pages (roofing, kitchen & bath, siding, windows & doors, residential landing, contact), each with distinct visual layouts
- Built an interactive multi-step contact form with spam protection (Web3Forms + hCaptcha + honeypot)
- Sourced, compressed, and optimized 40+ images for web performance using Apple's sips tool with Claude scripting the batch commands (WebP conversion, resizing, quality tuning)
- Wrote all SEO copy: page titles, meta descriptions, H1/H2 hierarchy, alt text with location keywords, and FAQ content
- Set up Google Analytics (GA4), Google Search Console, and submitted sitemaps
- Created brand guidelines documentation (colors, typography, voice, image specs)
- Built a proposal generation system (Excel template + reference guide) for business operations
On AI-assisted development: I used Claude AI to generate HTML/CSS from my design briefs, reference screenshots, and iterative feedback. I reviewed, tested, and revised every output before publishing. The AI wrote the code. I directed the design, made the decisions, and quality-controlled the results.
Approach
Research phase
I studied competitor contractor websites regionally and nationally. Identified two reference sites (a Denver construction firm and a Chicago remodeling company) whose layouts I liked, then adapted their patterns for a small-town Indiana market.
Page-by-page builds
Rather than building all pages at once, I built one at a time, published it, tested performance, and iterated before starting the next. Each page got its own visual identity: different hero treatments, different section layouts, so the site doesn't feel like the same template repeated 6 times.
Image optimization workflow
- Source images from Unsplash (free, commercial-use)
- Download at medium resolution
- Compress with Apple's sips tool, batch commands scripted with Claude: resize to 800px (cards) or 1200px (heroes), convert to WebP, tune quality to stay under 80KB per card image / 200–300KB per hero
- Upload to WordPress Media Library
- Swap the Unsplash CDN URL in the HTML for the self-hosted WordPress URL
- Add descriptive alt text with service + location keywords in both the HTML and the Media Library
This workflow eliminated all external image dependencies. Every image loads from the site's own server.
SEO-first copywriting
Every page was built around a target keyphrase (e.g., "kitchen remodeling Decatur IN"). H1 includes the keyphrase, H2s are structured around related long-tail queries, FAQ sections target "People Also Ask" queries, and location keywords (city + county) appear naturally throughout body copy. Each page has its own Yoast SEO settings: custom title tag, meta description, focus keyphrase, slug.
Platform decision
The site runs on WordPress.com's Business plan. For a while the plan was to migrate to a static Vercel deployment: every page is hand-written HTML already versioned in a GitHub repo, and static hosting would remove WordPress's server overhead entirely.
After weighing it, I made the opposite call: stay on WordPress. The custom HTML pages already load fast inside WordPress blocks, the built-in CDN handles image delivery, and the business keeps a stable platform without a migration project attached. The hand-written HTML stays version-controlled in GitHub either way, so the workflow I actually care about is preserved.
The trade-off is accepting a few platform limits I cannot change from inside WordPress.com, like server response overhead and header configuration. I took that deal: for a local contractor's site, shipping improvements beats chasing a re-platform. Deciding not to migrate was as deliberate a call as any build decision on this project.
Stack & tools
Outcomes
Performance improvements
- Site speed: 41% faster mobile load time, achieved entirely through image compression
- SEO score (PageSpeed Insights): 85 → 92, alt-text additions and descriptive link text
- Best Practices score: 96
- Cumulative Layout Shift: 0 (perfect stability)
- Total image payload reduced from several MB per page to under 500KB per page
Search visibility (measured via Search Console)
- Site indexed for 10 search queries within weeks of launch
- Appearing on page 1 (positions 4–7) for "decatur general contractor," "decatur remodeling services," and "decatur residential remodeling"
- Position 1 for branded search terms
What I can't claim
The site has minimal organic traffic so far. It's a new site in a small market. Rankings are appearing but clicks are low because the site is still climbing from positions 4–7 toward 1–3. Google Business Profile is not yet verified, which limits visibility in map pack results. These are honest constraints, not failures. The foundation is built, and rankings will improve with time.
What this project taught me
- Image optimization is the highest-ROI performance fix for most sites. Compressing images took 20 minutes and cut load time by 41%. No code change I made came close to that impact.
- Custom HTML gives you control page builders don't. Every section is exactly what I designed. No theme conflicts, no plugin bloat, no "why is there extra padding here" debugging.
- SEO is structural, not decorative. The real SEO work is site architecture: giving every service its own page, its own H1, its own keyphrase. Most competitors here have one generic "Services" page; I have 7.
- Working with AI is a workflow skill. Using Claude effectively meant giving clear context, providing reference screenshots alongside source code, iterating through feedback loops, and knowing when to override AI suggestions with my own judgment.
- WebP conversion is non-negotiable. The file size savings are dramatic with virtually no visible quality loss.