RR Roof Waterproofing: Technical Whitepaper
Building a High-Performance 24-Page Static Website with Pure HTML & Firebase Hosting.
Click to view full preview
1. Overview
The RR Roof Waterproofing website is a professional multi-page marketing and lead-generation platform for a specialist roofing, waterproofing, and building maintenance company serving residential, commercial, and industrial properties across Centurion, Pretoria, and Johannesburg, South Africa.
The primary objective was to create a lightning-fast, SEO-optimised, zero-framework static website that achieves excellent Core Web Vitals scores, ranks competitively in local search, and converts visitors into qualified quote requests — all with minimal operational overhead and zero ongoing infrastructure costs. The site was purpose-built to achieve PageSpeed scores of 90+ with optimised AVIF image delivery and clean URL structure.
2. The Tech Stack
Frontend
- >> Semantic HTML5 — no JS framework
- >> Custom CSS with CSS variables
- >> Lucide Icons (inline SVG)
- >> Google Fonts: Inter
- >> Dual Light/Dark Theme System
- >> AVIF image format (50-80% smaller)
Infrastructure & Services
- >> Firebase Hosting (Global CDN, Auto SSL)
- >> Web3Forms (Serverless form submission)
- >> Google Analytics 4 via GTM
- >> Firebase CLI (Single-command deploy)
- >> No Build Step — Pure HTML/CSS
3. Site Architecture
A. 24-Page Multi-Service Structure
Every page is a standalone SEO-friendly HTML file served via Firebase's cleanUrls rewriting, with dedicated meta titles, descriptions, and canonical URLs. Service pages target high-intent local search queries.
/ — Home/about-us//contact-us//waterproofing//torch-on-waterproofing//damp-proofing//roof-painting//roof-repairs//gutter-installation//ceiling-installation//isothem-insulation//house-painting//residential//industrial//blog/ + 5 articles/privacy-policy/ + legal pagesB. Shared Partials System
Three shared HTML partials (header.html, footer.html, inner-trust.html) are loaded via a lightweight global.js fetcher using the Fetch API.
C. Dual Theme System
Custom light/dark mode implementation using CSS variables with localStorage persistence. Light theme (white background) and dark theme (charcoal background) with brand lime green accent #BEDE15.
4. Architecture Diagram
5. Performance Optimisations
🖼️ Image Delivery
- ✓ All images in AVIF format (50–80% smaller than JPEG)
- ✓ Hero images with
loading="eager" - ✓ Explicit width/height to prevent layout shift
- ✓ Below-fold images use lazy loading
⚡ Font Loading
- ✓ Inter font with
font-display: swap - ✓ Preconnect to Google Fonts API
- ✓ Reduces DNS lookup time
🌓 Dark Mode
- ✓ CSS variables for dual theme system
- ✓ JavaScript toggle with localStorage persistence
- ✓ Smooth transitions between themes
📜 Script Loading
- ✓ GTM async snippet — non-blocking
- ✓ Partials load after DOMContentLoaded
- ✓ Main content paints before shared components
6. SEO Implementation
A. Per-Page Meta Tags
Every page includes comprehensive meta tags:
- →
<title>— keyword-optimised, location-targeted - →
<meta name="description">— 120–160 characters - → Full Open Graph suite (og:title, og:description, og:image)
- → Twitter card support
- →
<link rel="canonical">— prevents duplicate content
B. Structured Data (JSON-LD)
Homepage includes LocalBusiness schema markup with:
{
"@type": "LocalBusiness",
"name": "RR Roof Waterproofing",
"telephone": "+27817323052",
"address": {
"streetAddress": "241 Maroela Rd",
"addressLocality": "Hennopspark",
"addressRegion": "Centurion",
"postalCode": "0157"
},
"aggregateRating": {
"ratingValue": "5.0"
}
}
C. Technical SEO
- ✓ Clean URLs without .html extension
- ✓ Trailing slash consistency
- ✓ sitemap.xml with 22 indexable URLs
- ✓ robots.txt configured for full crawl access
- ✓ Semantic HTML5 structure
- ✓ Descriptive alt and title attributes
- ✓ Proper heading hierarchy (H1-H6)
- ✓ POPIA compliance pages
7. Key Features Delivered
📈 Marketing & Lead Generation
- ✓ 24-page multi-service architecture
- ✓ Web3Forms contact form integration
- ✓ Quick quote forms on service pages
- ✓ Exit-intent popup with callback request
- ✓ Thank-you page for conversion tracking
⚡ Performance
- ✓ 90+ PageSpeed scores
- ✓ AVIF image format throughout
- ✓ Global CDN delivery via Firebase
- ✓ Clean URLs and trailing slash consistency
- ✓ Lazy loading for below-fold images
🎨 UX & Accessibility
- ✓ Mobile-first responsive design
- ✓ Sticky navigation with mobile slide panel
- ✓ Dark mode toggle with localStorage
- ✓ Semantic HTML5 — screen reader friendly
- ✓ High contrast ratios for accessibility
👨💻 Developer Experience
- ✓ Shared partials system for easy maintenance
- ✓ CSS variable system — theme changes in one place
- ✓ Single-command deployment
- ✓ No build step required
- ✓ Python HTTP server for local testing
8. Technical Innovations
A. Dual Theme System
Custom light/dark mode implementation using CSS variables:
- → Light theme: White background (#ffffff) with dark text (#0d0d0d)
- → Dark theme: Charcoal background (#1a1a1a) with light text (#f5f5f5)
- → Brand lime green accent (#BEDE15) consistent across both themes
- → Preference saved to localStorage
B. Exit Intent Popup
Sophisticated exit-intent system:
- → Triggers on mouse leave (desktop) or after 50 seconds (mobile)
- → 7-day cooldown via localStorage
- → Quick callback form with POPIA consent
- → Dismissible overlay with smooth animations
C. Service-Specific Quote Forms
Quote forms automatically pre-fill the service field based on the current page URL, improving user experience and form completion rates.
D. Before/After Image Slider
Interactive before/after comparison slider on service pages with drag handle, touch-friendly for mobile devices, and smooth animations to demonstrate service quality visually.
9. Cost Analysis
Monthly Operational Costs
| Service | Cost |
|---|---|
| Firebase Hosting | R0 |
| Web3Forms (form submissions) | R0 |
| Google Analytics 4 | R0 |
| Google Tag Manager | R0 |
| Google Fonts | R0 |
| Domain (rrwaterproofing.co.za) | ~R150/year |
| Total Monthly Infrastructure Cost | R0 |
(excluding domain renewal)
10. Performance Benchmark
| Metric | Target | Status |
|---|---|---|
| PageSpeed Performance | ≥ 90 | ✅ Optimised |
| AVIF Image Format | 100% | ✅ All images |
| Clean URLs | Yes | ✅ Implemented |
| Mobile Responsive | Yes | ✅ iPhone SE → 4K |
| Dark Mode | Yes | ✅ With localStorage |
| Form Conversion Tracking | Yes | ✅ Thank-you redirect |
11. Conclusion
The RR Roof Waterproofing website demonstrates that by leveraging Pure HTML5, Custom CSS, and Firebase Hosting, a development team can deliver a high-performance, SEO-optimised, and visually polished multi-page website with 24 pages, dual theme support, and zero monthly infrastructure cost.
The deliberate choice of no JavaScript framework removes all runtime overhead, resulting in near-instant page loads from Firebase's global CDN. Every performance decision — from AVIF images to clean URLs to proper OG image formats — was made with Core Web Vitals and SEO best practices as the primary constraints.
Key Achievements:
Developed by Casson Media
Engineering performance-first digital solutions for South African businesses.
Project Details
Need a High-Performance Website?
Let Casson Media build your next project with the same performance-first approach.