Website Case Study: 002

Proflow Gutters SA: Technical Whitepaper

Building a High-Performance Static Website with Pure HTML & Firebase Hosting.

Pure HTML5 Tailwind CSS Firebase Hosting Web3Forms
Proflow Gutters SA Website Portfolio

Click to view full preview

1. Overview

The Proflow Gutters SA website is a professional multi-page marketing and lead-generation platform for a specialist seamless Chromadek gutter installation company serving residential, commercial, and industrial properties across Gauteng, South Africa.

The primary objective was to create a lightning-fast, SEO-optimised, zero-dependency static website that achieves perfect 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 achieved a Lighthouse Performance Score of 96/100 on desktop and was purpose-built to reach a Cumulative Layout Shift (CLS) score of 0.

2. The Tech Stack

Frontend

  • >> Pure HTML5 — no JS framework
  • >> Tailwind CSS 3.4.17 (Tailwind CLI build)
  • >> Google Material Symbols (variable icon font)
  • >> Google Fonts: Manrope + Inter
  • >> MD3 Color Token System (48 tokens)

Infrastructure & Services

  • >> Firebase Hosting (Global CDN, Auto SSL)
  • >> Web3Forms (Serverless form submission)
  • >> Google Analytics 4 via GTM
  • >> Firebase CLI (Single-command deploy)
  • >> npm + Tailwind CLI (CSS build pipeline)

3. Site Architecture

A. 13-Page Multi-Service Structure

Every page is a standalone SEO-friendly HTML file served via Firebase's cleanUrls rewriting, with a dedicated meta title, description, and canonical URL. Service pages target high-intent local search queries.

→ / — Home
→ /seamless-gutters/
→ /gutter-repairs/
→ /downpipe-installation/
→ /fascia-soffit-integration/
→ /gutter-guards/
→ /full-system-installation/
→ /waterproofing/
→ /about/
→ /privacy/ + /terms/

B. Shared Partials System

A lightweight includes.js fetcher loads shared cta.html and footer.html partials asynchronously below the fold. The navigation is inlined directly into each page's <body> to guarantee CLS = 0.

C. MD3 Color Token System

48 semantic color tokens are defined in tailwind.config.js, mirroring the Material Design 3 specification, anchored to the brand primary green #9EC63E. The entire site's colour scheme can be updated from a single config file.

4. Architecture Diagram

flowchart TD A[Visitor Browser] -->|HTTPS / Clean URLs| B[Firebase Hosting CDN] B -->|Static HTML| C[Edge Cache - Global] B -->|Minified CSS| C B -->|AVIF Images| C A -->|Form Submit| D[Web3Forms API] D -->|Email Notification| E[Client Email] D -->|Redirect| F[/thank-you/] A -->|GTM Trigger| G[Google Tag Manager] G -->|Events + Pageviews| H[Google Analytics 4] I[Developer - Firebase CLI] -->|firebase deploy| B J[Tailwind CLI] -->|Build CSS| K[assets/css/tailwind.css] style A fill:#059669,stroke:#fff,color:#fff style B fill:#dbeafe,stroke:#3b82f6,color:#1e3a8a style C fill:#f3f4f6,stroke:#cbd5e1,color:#1f2937 style D fill:#fff7ed,stroke:#fdba74,color:#c2410c style E fill:#ecfdf5,stroke:#059669,color:#064e3b style F fill:#ecfdf5,stroke:#059669,color:#064e3b style G fill:#e0e7ff,stroke:#818cf8,color:#3730a3 style H fill:#e0e7ff,stroke:#818cf8,color:#3730a3 style I fill:#f3f4f6,stroke:#cbd5e1,color:#1f2937 style J fill:#f3f4f6,stroke:#cbd5e1,color:#1f2937 style K fill:#ecfdf5,stroke:#059669,color:#064e3b

5. Performance Optimisations

A. Layout Shift Elimination (CLS = 0)

Three root causes of layout shift were identified and systematically resolved to reach a perfect CLS score:

  1. 1
    Unsized Hero Image: Fixed with explicit width/height attributes so the browser reserves space before the image downloads.
  2. 2
    Async Nav Injection: The shared partials pattern caused a 0.183 CLS score. Solved by inlining the navigation HTML directly into each page's <body> rather than fetching it via includes.js.
  3. 3
    Font Display Strategy: Text fonts use font-display: optional via non-blocking preload. Icon fonts use font-display: swap with a CSS overflow clip to prevent fallback text from ever being visible.

B. AVIF Image Delivery

All images are served in AVIF format — typically 50–80% smaller than JPEG at equivalent quality. The hero image is preloaded via <link rel="preload" fetchpriority="high"> to eliminate LCP delay. Non-critical images use loading="lazy".

C. Asset Caching Strategy

AVIF images are cached 1 year (immutable) at the Firebase CDN edge. CSS and JS assets cache for 1 week. HTML pages use must-revalidate to always serve fresh content.

D. SVG-First Critical Icons

The mobile hamburger menu uses a hard-coded inline SVG instead of a Material Symbols glyph, guaranteeing correct rendering on every first load regardless of font cache state — eliminating the "menu" text fallback.

E. Zero-Framework Overhead

No JavaScript runtime, no virtual DOM, no hydration. Pure HTML5 served from Firebase's global CDN edge delivers a compressed HTML file in under 50ms. GTM loads asynchronously and includes.js is deferred to end of <body>.

6. Performance Benchmarks

96
Lighthouse Score
Target: ≥ 90
0
CLS Score
Target: < 0.1
<1s
FCP
Target: < 1.8s
<2.5s
LCP
Target: < 2.5s
~40KB
Hero AVIF Size
vs. ~300KB JPEG
R0
Monthly Cost
Firebase Spark Plan

7. Conclusion

The Proflow Gutters SA website demonstrates that by leveraging Pure HTML5, Tailwind CSS, and Firebase Hosting, a development team can deliver a high-performance, SEO-optimised, and visually polished multi-page website with a 96/100 Lighthouse score and CLS of 0 — at zero monthly infrastructure cost. Every performance decision — from AVIF images to inlined navigation to font-display strategies — was made with Core Web Vitals as the primary constraint.

Developed by Casson Media
Engineering performance-first digital solutions for South African businesses.