RoofingSites:Before/AfterGalleriesWithoutKillingSpeed(Cochrane)

01Who This Guide Is For

Your roofing gallery should prove quality—not tank your page speed.

If you run a roofing company in Cochrane, AB—re-roofs, asphalt shingles, metal roofing, skylights, fascia/soffit—this guide shows you exactly how to build before/after galleries that load fast on mobile, rank for local searches, and convert visitors into calls.

What you'll learn:

• Image strategy that keeps pages under 2.5 seconds on mobile
• The difference between hero images and gallery images (and why it matters)
• Core Web Vitals targets every Cochrane roofer should hit
• Mobile UX patterns that turn gallery browsers into quote requests
• A section-by-section layout that sells

Serving Riversong, Fireside, Sunset Ridge, Heartland, GlenEagles, Bow Meadows, and West Terrace.

Want us to build it for you? See our Cochrane trade website services. For the complete trades web design framework, see the Trade Website Design Pillar Guide.

02The Quick Version

"

Keep a lean hero (don't lazy-load it), serve AVIF/WebP with <picture> + srcset/sizes, and lazy-load below the fold only. Pre-size images (width/height) to prevent layout shift. Target LCP ≤ 2.5s, INP ≤ 200 ms, CLS ≤ 0.1. Pair local proof captions with a tap-to-call and short quote form.

03Why Roofing Galleries Kill Page Speed

On most roofing sites, the Largest Contentful Paint (LCP) is an image. When that image is overweight, oversized, or lazy-loaded incorrectly, your page takes forever to display—and visitors leave before seeing your work.

What is LCP? Largest Contentful Paint measures how quickly the biggest visible element (usually your hero image or main headline) appears on screen. Google uses it to judge your site speed.

The fix is structural:

1. Curate, don't dump. Pick 12–18 of your best jobs. For each job, publish 3 photos: before, during, after. Add a short caption with the outcome ("Sunset Ridge re-roof — finished in 2 days; manufacturer warranty registered").

2. Keep above the fold skinny. One hero + one proof tile is enough. Resist sliders—carousels rarely help conversion and almost always harm INP (how responsive your UI feels).

3. Ship the right pixels. Phones in Cochrane shouldn't download desktop-sized images. Use responsive images so the browser chooses the smallest file that fits the screen.

04The Image Strategy That Fixes It

Export AVIF as your primary format with WebP fallback. Ship three widths (768/1280/1920) and pair them with srcset/sizes so browsers grab only what they need.

What is AVIF/WebP? Modern image formats that compress photos better than JPEG while maintaining quality. AVIF is typically 30-40% smaller than equivalent JPEGs.

How to Export Responsive Image Sets

For each image, create these files:

• jobname-before-768.avif, jobname-before-1280.avif, jobname-before-1920.avif
• Equivalent .webp variants for older browsers

The Code You Can Copy

<picture>
  <source type="image/avif" 
          srcset="/img/roof/job-before-768.avif 768w,
                  /img/roof/job-before-1280.avif 1280w,
                  /img/roof/job-before-1920.avif 1920w" 
          sizes="(max-width: 768px) 96vw, (max-width: 1280px) 84vw, 1200px">
  <source type="image/webp" 
          srcset="/img/roof/job-before-768.webp 768w,
                  /img/roof/job-before-1280.webp 1280w,
                  /img/roof/job-before-1920.webp 1920w" 
          sizes="(max-width: 768px) 96vw, (max-width: 1280px) 84vw, 1200px">
  <img src="/img/roof/job-before-1280.webp"
       width="1200" height="800" 
       alt="Re-roof in Riversong — before photo, three-tab shingles nearing end of life."
       loading="lazy" decoding="async">
</picture>

Want this as a copy-paste template file? Get the Roofing Image Code Templates — includes hero patterns, gallery patterns, and placeholder reference.

What is srcset/sizes? HTML attributes that tell browsers which image size to download based on screen width—so mobile users don't download desktop-sized images.

Compression tip: Compare 70–85% quality WebP vs AVIF at equivalent widths. AVIF is often 30–40% smaller for photos; WebP is broadly supported. Favor visual crispness on shingles and flashing—byte savings shouldn't introduce blur.

File naming: Name files like evidence: cochrane-reroof-fireside-after.avif. It helps with organization and descriptive alt text.

05Hero Images vs. Gallery Images

This is where most roofing sites go wrong. Your hero image and your gallery images need different loading strategies.

Your Hero Image (Load It First)

Never lazy-load the hero. It's usually the LCP element—the thing Google measures to judge your speed. Give it explicit width/height and use fetchpriority="high" so it downloads before anything else.

What is fetchpriority? A browser hint that tells the page to download this image before others. Critical for hero images.

The hero code you can copy:

<img src="/img/roof/hero-lcp-1280.avif"
     width="1280" height="720"
     alt="Asphalt shingle re-roof in Heartland — finished project hero image."
     fetchpriority="high">

Additional Hero Optimizations

• No carousels in the hero. One great image + a clear value prop ("Cochrane Roofing — Reliable Re-Roofs & Repairs").
• Predictable layout. Set dimensions on the hero and reserve space for your sticky mobile call bar so CLS stays low.
• Keep first-screen JavaScript minimal. Defer chat widgets and heavy analytics until after the first paint; that protects INP (interaction latency).

Your Gallery Images (Lazy-Load These)

Gallery rows 2 and beyond should use loading="lazy". Over-using lazy-loading (on heroes, for example) worsens LCP. Use it surgically.

What is lazy-loading? A technique where images only load when users scroll near them—saving bandwidth and speeding up initial page load.

The lazy-loading pattern:

• Row 1 (immediately below hero): eager load (no loading="lazy")
• Rows 2 and on: loading="lazy" + decoding="async"
• Very long galleries: Consider chunked rendering or pagination ("See more Cochrane re-roofs") to keep the DOM light and INP responsive

What is the DOM? The page structure the browser builds. More elements means slower interactions.

06Core Web Vitals Targets for Roofers

Treat these as non-negotiables for a roofing site that ranks and converts on mobile:

| Metric | Target | What It Measures | |--------|--------|------------------| | LCP | ≤ 2.5s | How fast the biggest element loads | | INP | ≤ 200 ms | How responsive the UI feels when tapped | | CLS | ≤ 0.1 | How stable the layout is while loading |

These thresholds are measured at the 75th percentile of real users. Track them monthly—put a calendar reminder to review PageSpeed Insights reports and Search Console's Core Web Vitals section.

07Mobile UX That Converts

On phones, visitors decide in seconds. Keep actions clear and repeated near proof.

• Sticky call bar labeled clearly ("Call a Cochrane Roofer"). High contrast; large tap target.

• Short quote form (4–6 fields) just after the first gallery row. Many people won't scroll much further.

• Descriptive CTAs beside images: "Get a quote for a re-roof like this" rather than generic "Learn more."

• Proof near action. Repeat a small review excerpt or warranty note beside CTAs.

• Neighborhood cues in captions: "GlenEagles re-roof — wind-resistant shingles; ridge vent added."

Where to Place Reviews and Trust Signals

Put a thin review strip above the fold (2–3 short Google excerpts with neighborhood tags) and a larger quote wall after the second gallery row. Pair with a range table (not itemized pricing) and a compact warranty blurb.

Example trust copy you can use:

"

Reviews (last 90 days): "Fast cleanup after re-roof in Riversong." — Kara M.

Typical ranges: Re-roof projects vary by slope, layers, skylights, and underlayment. We confirm final pricing after a quick assessment.

Warranty: Manufacturer warranty registered; workmanship warranty on qualifying projects.

Policy note: Ask every customer for reviews. No incentives. Reply to all feedback. Authenticity beats volume.

08A Gallery Layout That Sells

Here's how to structure each section of your roofing gallery page:

1. Header and Hero

• H1: "Cochrane Roofing — Before/After Gallery"
• Value line: "Real re-roofs across Cochrane—clean edges, tidy valleys, fast turnarounds."
• Primary CTA: Start My Roofing Website
• Ghost CTA: See Our Work

2. Row 1: Your Strongest Recent Job

• 3 images (before/during/after), each responsive
• Bullet proof: turnaround time, warranty registered, debris control
• A tap-to-call micro-CTA for mobile users

3. Row 2: A Specific Problem Solved

• Example: Ice-dam remediation in Fireside (venting + underlayment)
• Caption explains why it worked and how it's visible in the photo

4. Row 3: Materials and Details

• Close-ups of flashing, valleys, ridge caps
• Captions mention manufacturer spec adherence

5. Inline Quote Form

• "Get a fast quote in Cochrane" (Name, Phone, Address, Notes)
• Privacy line: "We collect only what's needed to respond; see our Privacy."

6. Row 4+: Neighborhood Variety

• Sunset Ridge, Heartland, GlenEagles, etc.
• Keep captions local and outcome-based, not fluffy

7. Final Section: Next Steps

• What happens after they submit: scheduling, on-site assessment, clean job site commitment, warranty registration

Cochrane-Specific Caption Examples

• Riversong re-roof — before/after: Torn shingles; ridge cap missing. After: architectural shingles, ridge vent, ice & water shield at eaves.
• Fireside skylight replacement: New curb, proper flashing, interior drywall patch. Two-hour cleanup.
• Sunset Ridge valley detail: Woven valley replaced with metal valley for better runoff and longer life.
• Heartland fascia/soffit refresh: Aluminum fascia + vented soffit; improved attic airflow.
• GlenEagles storm repair: Emergency tarp overnight; next-day shingle match; drip edge replaced.
• West Terrace wind damage: Emergency response; matching shingles sourced same-day; cleanup complete before evening.

Need more caption templates? Get the Roofing Caption & Copy Templates — includes trust strip copy, do/don't examples, and neighborhood-specific templates.

09Your Implementation Workflow

Want this workflow as a printable checklist? Get the Roofing Gallery Speed Checklist — includes all 5 steps, Core Web Vitals targets, and monthly review reminders.

Step 1: Pick Jobs and Collect Assets

• Choose 12–18 projects with before/during/after and at least one detail shot
• Ask the crew to shoot landscape photos with consistent framing

Step 2: Export Responsive Sets

• Produce AVIF + WebP at 768/1280/1920
• Keep a naming convention: area-job-phase-width.ext

Step 3: Author Pages with <picture>

• Use sizes to reflect your grid layout
• Set width/height on <img> for layout stability

Step 4: Wire the Conversion Path

• Sticky call on mobile; short quote form below row 1; proof near CTAs
• Add 1–2 Related reading links at the end to keep visitors in the cluster

Step 5: Ship and Monitor

• Track image_gallery_view, call_click, cta_click, form_start, form_submit
• Review Core Web Vitals monthly; fix regressions quickly

SEO and Accessibility Hygiene

• Headings that answer questions ("How do I speed up a roofing gallery page?")
• Descriptive anchors (not "click here") for internal links
• Image alt text that tells a story ("Re-roof in Bow Meadows — after photo; ridge vent installed")
• Accessibility: visible focus, color contrast AA, keyboard-friendly buttons
• Performance: eager hero only; lazy-load below the fold; defer non-critical JS
• No doorway pages: keep one Areas We Serve hub that's actually useful
• Privacy: one-line notice below forms (PIPEDA/GDPR-aware) with a link to your policy

10Related Reading

• Technical: Optimize LCP, INP & CLS for galleries
• Conversion: Quote form with auto-emails + database logging
• Other trades: HVAC website playbook — fast calls & quotes, after-hours landing pages that convert
• Electricians: Permits & safety features for electrician websites
• Plumbers: The complete plumber website checklist