Delaware Valley Hardwoods

Case Study

A high-performance, SEO-optimized website for a family-owned hardwood flooring company in Wilmington, Delaware. Built from scratch with hand-written HTML, CSS, and JavaScript. No WordPress, no CMS, no bloat.

Visit DelawareValleyHardwoods.com
Delaware Valley Hardwoods website homepage showing hardwood flooring services

Results at a Glance

Google PageSpeed Insights

98+
Performance
Mobile 98 / Desktop 99
97
Accessibility
Mobile 97 / Desktop 97
100
Best Practices
Mobile 100 / Desktop 100
100
SEO
Mobile 100 / Desktop 100

Google Search Rankings

Within weeks of launch, the site achieved #1 Google rankings for 13 competitive local search terms across refinishing, installation, repair, and “near me” searches. All through technical SEO and content strategy, with no paid advertising.

Project Overview

Delaware Valley Hardwoods is a family-owned hardwood flooring company based in Wilmington, Delaware, specializing in refinishing, installation, and dustless sanding services since 1998. They needed a website that would establish their online presence, educate potential customers, and compete for local search traffic in a crowded market.

The project involved designing and developing a high-performance, multi-page website from scratch, optimized for search engines, AI discovery, mobile devices, and conversion. The site is built as a static website hosted on Cloudflare Pages, delivering near-perfect performance scores across all Google PageSpeed categories.

Site Architecture

10 pages organized around the customer journey, from discovery to contact:

Homepage
Service overview with photo carousel showcasing completed projects
Refinishing
Detailed 6-step process guide for floor refinishing
Installation
Custom hardwood installation types and pattern options
Dustless Sanding
Differentiating technology with equipment details
Cost & Value
Transparent pricing factors and customer education
Care & FAQs
18 comprehensive FAQs with structured data markup
About
Founder story, credentials, and Bona certification
Contact
Lead generation form with Google Maps integration
Blog Post 1
Project case study with detailed documentation
Blog Post 2
Project case study with detailed documentation

Every page is purpose-built: service pages educate and differentiate, the cost page builds trust through transparency, the care page supports existing customers while capturing long-tail search traffic, and the contact page converts.

Performance Optimization

Every optimization decision was deliberate. Not just checking boxes, but understanding the tradeoffs behind each technique.

Custom Image Pipeline

All images are processed through a custom Sharp.js optimization pipeline that generates responsive WebP variants at multiple breakpoints. The carousel uses srcset and sizes attributes so browsers download only the appropriate size for each device. Desktop views use composite images (two project photos side-by-side), while mobile views display single photos in portrait orientation. A meaningful UX improvement, not just a resize.

The hero image uses a responsive link rel="preload" with imagesrcset so the browser begins downloading the correct variant immediately. This reduced Largest Contentful Paint on mobile by over a full second.

Critical CSS Inlining

Above-the-fold styles (navigation, hero section, carousel) are inlined directly in the HTML head as minified CSS. The full stylesheet loads afterward. The page renders instantly with styled content. No flash of unstyled content, no render-blocking delay.

JavaScript Performance

All scripts are deferred. Scroll event handlers use requestAnimationFrame throttling with passive event listeners to maintain 60fps. DOM selectors are cached to prevent redundant queries. The carousel supports keyboard navigation, touch swipe gestures, autoplay with pause-on-hover, and respects the user's prefers-reduced-motion setting.

Caching Strategy

Cloudflare headers are configured with 1-year immutable cache policies for all images, CSS, and JavaScript. Cache-busting query parameters enable instant updates when assets change. Repeat visitors load almost entirely from cache.

SEO Strategy

Technical SEO

Structured Data

LocalBusiness schema with full NAP, geo-coordinates, service radius, hours, and social profiles. FAQ schema on two pages with 24 questions eligible for rich snippets.

Meta Tags

Every page has unique, descriptive title tags and meta descriptions. Full Open Graph implementation with optimized 1200x630 share images.

Canonical URLs

Every page declares its canonical URL to prevent duplicate content issues.

Clean URL Structure

Semantic, hyphenated paths (/refinishing, /cost, /care) with no query parameters.

XML Sitemap

All 10 pages with priority hierarchy and change frequency signals.

IndexNow Integration

Proactive URL submission to search engines when content changes.

Internal Linking

Service pages cross-link to related services. Blog posts link to relevant service pages. Footer provides site-wide navigation.

Redirect Management

Cloudflare redirects prevent duplicate content from partial blog paths.

Content Strategy

The content strategy targets topic authority around “hardwood flooring services in Delaware” through comprehensive coverage: service process guides, educational pricing content, maintenance tips, project case studies, and detailed FAQs. Each page targets specific keyword clusters while naturally linking to related pages, building the topical depth that search engines reward.

NAP (Name, Address, Phone) consistency is maintained across every page footer, the LocalBusiness schema, the contact page, and the embedded Google Maps. This consistency is a critical local SEO signal.

Mobile-First Design

Responsive Layouts: CSS breakpoints at 1400px, 1100px, 968px, 768px, 640px, and 500px ensure the design adapts smoothly across all device sizes.
Mobile Navigation: Animated hamburger menu with smooth open/close transitions replaces the desktop nav below 1100px.
Touch Carousel: 50px swipe threshold, large 48px touch targets for navigation buttons, and dot indicators for visual feedback.
Sticky Mobile CTA Bar: A fixed bottom bar with "Call" and "Get Estimate" buttons appears on scroll, auto-hides after 2 seconds of inactivity, and reappears on continued scrolling. The call button uses a tel: link for native click-to-call.
Adaptive Hero: The carousel switches from landscape aspect ratio on desktop to 4:5 portrait on mobile, using the vertical space more effectively rather than just shrinking the desktop layout.

Accessibility

WCAG AA Color Contrast: Orange accent color darkened from #FF6600 to #CC4400 specifically to meet contrast requirements. A secondary accessible variant is used for text on light backgrounds.
ARIA Attributes: Carousel implements full ARIA roles, including role="tablist" on dots, role="tab" with aria-selected on each dot, aria-roledescription="carousel" on the container, and aria-label on all icon-only buttons.
Keyboard Navigation: Arrow keys control the carousel. All interactive elements are focusable. Mobile menu closes on link activation.
Semantic Elements: Native <button> elements for all interactive controls (not styled divs). Proper <label> associations on form inputs.
Image Dimensions: Every image includes explicit width and height attributes to prevent layout shift, which is also an accessibility improvement for users on slow connections.

Security

The site includes multiple layers of security to protect both the business and its visitors:

Content Security Policy

Restricts scripts, styles, images, frames, and form actions to explicitly approved domains. Prevents XSS and injection attacks.

HSTS

Strict Transport Security with 1-year max-age, includeSubDomains, and preload list eligibility enforces HTTPS everywhere.

X-Frame-Options

DENY prevents the site from being embedded in iframes, blocking clickjacking attacks.

X-Content-Type-Options

nosniff prevents MIME type sniffing attacks.

Cross-Origin-Opener-Policy

Isolates the browsing context from cross-origin windows.

Cloudflare Turnstile

Contact form uses Turnstile captcha for spam prevention, offering better UX than traditional CAPTCHAs with equivalent protection.

AI Discoverability

Built to be understood by AI systems as well as search engines:

Semantic HTML: Proper use of <main>, <nav>, <section>, <article>, <header>, and <footer> elements gives AI systems clear document structure.
Structured Data: LocalBusiness and FAQ schemas provide machine-readable context about what the business does, where it operates, and what questions it answers.
Logical Heading Hierarchy: Single H1 per page with properly nested H2/H3 subheadings make content easy for LLMs to parse and summarize.
Comprehensive FAQ Content: 24 question-answer pairs structured as schema markup give AI systems direct access to key information in a format optimized for retrieval.
Open to All Crawlers: The robots.txt allows all crawlers full access, ensuring content is available for AI training data and retrieval-augmented generation systems.
Clear Topic Clustering: Each page covers a distinct topic with depth, making it easy for AI systems to associate the business with specific service categories.

Analytics & Conversion Tracking

The site uses a self-hosted Umami analytics instance for privacy-respecting visitor tracking. Every call-to-action is tagged with event attributes that track event type (quote requests, phone calls, form submissions), placement (hero, section CTA, footer, sticky mobile bar), and which page drove the conversion. This granular tracking reveals which CTAs convert best and where on the page visitors take action, enabling data-driven optimization.

Technology Stack

ComponentTechnology
HostingCloudflare Pages
FrontendHand-written HTML, CSS, JavaScript
ImagesWebP via Sharp.js optimization pipeline
AnalyticsSelf-hosted Umami
CaptchaCloudflare Turnstile
EmailResend API
MapsGoogle Maps embed
Social FeedBehold (Instagram integration)
DNS/CDNCloudflare

Want Results Like This?

Every project I build is custom-designed around the business's goals, optimized for search engines, and built to convert visitors into customers.