DEV Community

Performance Dev
Performance Dev

Posted on

I Analyzed 200 Small Business Websites — Here's What's Actually Hurting Their Performance (And How to Fix It)

#performance #tutorial #webdev

The 6 Most Damaging Findings (Recap)

Signal % of Sites Failing Impact
Excessive unused CSS (50%+) 67% +1.4s to First Paint
Image payload >1 MB 72% +1-3s to LCP per 100KB
Render-blocking scripts 82% +1.8s to FCP on average
Missing email auth (SPF/DKIM/DMARC) 83% Proposals & invoices land in spam
Inaccessible color contrast 44% Unreadable text for ~15% of users
"Looks good, runs bad" pattern ~60% Post-redesign performance regression

3 Quick Fixes Any Dev Can Do in 30 Minutes

1. Defer Non-Critical JavaScript (30 min, free)

Gtag, analytics, web fonts loading synchronously — they all block first paint.

<!-- Before blocks render -->
<script src="gtag.js"></script>

<!-- After — defer until parsing completes -->
<script src="gtag.js" defer></script>
Enter fullscreen mode Exit fullscreen mode

Verify: DevTools → Network → reload. Look for scripts without async/ defer that aren't powering above-the-fold content. Add defer.

Impact: First Contentful Paint drops 30-50% on sites with 3+ blocking scripts.

2. Image Pipeline: WebP + Responsive Sizes (30 min)

Average image payload across 200+ sites: 1.8 MB. Should be ~600 KB.

<img
  src="photo-800.webp"
  srcset="photo-400.webp 400w, photo-800.webp 800w"
  sizes="(max-width: 600px) 100vw, 50vw"
  width="800"
  height="600"
  alt="Description"
/>
Enter fullscreen mode Exit fullscreen mode

Impact: Image-dominant sites see LCP drop 1-3 seconds.

3. Fix Email Deliverability (10 min, free)

83% of sites can't reliably receive email. Proposals land in spam.

# SPF record
v=spf1 include:_spf.google.com ~all

# DMARC (start with monitoring)
v=DMARC1; p=none;
Enter fullscreen mode Exit fullscreen mode

Verify: MXToolbox → enter your domain → run DMARC/SPF check.

The 10-Point Audit Checklist

Run this on every client site, redesign, or project handoff.

Speed (2 min)

  • [ ] PageSpeed Diagnostics — ignore the score, scroll to "Diagnostics"
  • [ ] Hero image >2400px? Resize it
  • [ ] Any render-blocking scripts that aren't critical? Add defer
  • [ ] DevTools > Coverage > reload. Unused CSS >40%? Enable tree-shaking

Mobile / Usability (1 min)

  • [ ] Load on phone view. Can you tap nav without zooming?
  • [ ] WebAIM contrast check — WCAG AA = 4.5:1 minimum

Technical Health (2 min)

  • [ ] MXToolbox email check — SPF, DKIM, DMARC all present?
  • [ ] Core Web Vitals — LCP < 2.5s, FID < 100ms, CLS < 0.1
  • [ ] Alt text on all images
  • [ ] DOM nodes < 1500 (document.querySelectorAll('*').length)

Score: 9-10 🟢 | 6-8 🟡 | 3-5 🟠 | 0-2 🔴

The Hardest Truth

Visual design and technical health are inversely correlated for small business sites. New designs load Bootstrap, hero images, custom fonts, and JS libraries. Old HTML sites load in <1s.

If you paid for a redesign in the last two years, check PageSpeed before and after. If it dropped, performance wasn't part of the design brief.

The three fixes above cover the most impactful issues in under an hour. Done is better than perfect.

Built a free audit tool that checks all 10 items + 80+ signals in 30 seconds. If you want to test your own site, you can find the link in my profile.

Top comments (0)