Every 100ms of latency costs you conversions. Here's the specific technical playbook — image formats, code splitting, CDNs, Core Web Vitals — that gets your site under 1 second.
Amazon's internal testing found that every 100 milliseconds of added latency cost them 1% in sales. Google discovered that a 0.5-second increase in search page load time dropped traffic by 20%. Walmart found that for every 1-second improvement in page load, conversions increased by 2%.
These aren't outliers. The Yottaa 2025 Performance Index — analyzing 500 million visits across 1,300+ retail and e-commerce sites — found nearly a 14% conversion boost from cutting Interaction to Next Paint (INP) to 50ms, and 63% bounce rates on pages loading over 4 seconds. Third-party apps alone account for 60% of total load time on the average retail page. The relationship between speed and money is not theoretical. It's measured, documented, and consistent across industries.
And yet the HTTP Archive's 2025 Web Almanac found that the median page weight is 2.2MB on desktop and 2.0MB on mobile. The median time to interactive on mobile is over 7 seconds on a 4G connection. Most business websites are leaving money on the floor because they've never been properly optimized.
Here's how to fix that.
Images account for roughly 50% of total page weight on the average website. This is where you get the most speed improvement for the least effort.
WebP reduces file size by 25-35% compared to JPEG at equivalent quality (Google's own comparison study). It's supported by 97% of browsers globally as of 2026. There's no reason to serve JPEG anymore.
AVIF goes further — 50% smaller than JPEG at equivalent quality, with better color depth and HDR support. Browser support hit 93% in early 2026. For hero images and large photography, AVIF is the move.
The implementation is straightforward. Use the <picture> element to serve AVIF with WebP fallback:
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="Description" width="1200" height="600" />
</picture>
If you're on Next.js (which is what we build on), the next/image component handles format negotiation automatically — it serves AVIF or WebP based on browser support, and it resizes images on-the-fly.
Don't serve a 2400px-wide hero image to a phone with a 390px screen. Use srcset and sizes attributes to let the browser pick the right size:
<img
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 1200px"
src="hero-1200.webp"
alt="Description"
/>
This alone can cut image payload by 60-80% on mobile devices.
Every image below the fold should have loading="lazy". This tells the browser to defer loading off-screen images until the user scrolls near them. It's a single attribute that can shave seconds off initial page load.
Critical exception: Never lazy-load your LCP element (usually the hero image). That image needs to load immediately. In fact, preload it:
<link rel="preload" as="image" href="hero.avif" type="image/avif" />
The second-biggest performance killer is JavaScript. The median website ships 500KB+ of JavaScript, most of which isn't needed for the initial page render.
Every kilobyte of JavaScript costs more than a kilobyte of an image. Images only need to be decoded. JavaScript needs to be downloaded, parsed, compiled, and executed — and it blocks the main thread during execution, which directly hurts your INP score.
Audit your JavaScript bundles. Remove jQuery if you're not using it (you're probably not — it's 2026). Remove analytics scripts you never check. Remove that chat widget that nobody uses.
Load only the code needed for the current page. Modern frameworks do this automatically — Next.js splits by route, so visiting /about doesn't download the code for /services. But you can go further with dynamic imports for heavy components:
const HeavyChart = dynamic(() => import('./HeavyChart'), {
loading: () => <ChartSkeleton />,
ssr: false,
})
This defers the loading of heavy components until they're actually needed, keeping initial page load fast.
If you import one function from a library, your bundler should only include that function — not the entire library. Modern bundlers (webpack 5, Turbopack, Vite) do this automatically, but only if the library supports ES modules. Watch for libraries that bundle as CommonJS — they can't be tree-shaken and will bloat your bundle.
A Content Delivery Network caches your site on servers around the world, so users load from the nearest server instead of waiting for a round trip to your origin.
Platforms like Vercel and Cloudflare deploy your site to 300+ edge locations globally. For a business in Erie, PA serving primarily regional customers, this means your site loads from the Pittsburgh or Cleveland edge node — not from a server in Virginia.
The impact is measurable. Cloudflare reports median TTFB (Time to First Byte) reductions of 60-80% for sites deployed on their edge network. For a site that previously had 600ms TTFB, that drops to 120-240ms — which cascades into every other performance metric.
For business websites, most pages don't change between user visits. Your "About" page, your services pages, your blog posts — these can be statically generated at build time and served directly from the CDN with zero server computation.
This is why we build on Next.js with static generation. Your pages are pre-built HTML files served from the edge. No database query, no server rendering, no waiting. Just instant HTML delivery.
Google's Core Web Vitals are the specific metrics that matter for both user experience and search ranking:
The time it takes for your main content to appear. For most business sites, LCP is the hero image or the main heading. Optimize by:
What we achieve on custom builds: under 1 second.
How fast your site responds to clicks and taps. The biggest INP killers are heavy JavaScript and long main-thread tasks. Optimize by:
requestIdleCallback or scheduler.yield()What we achieve: under 100ms.
How much your page content jumps around during loading. Fix by:
width and height on all images and videosfont-display: swap with proper fallback fonts matched to your web font metricsWhat we achieve: under 0.05.
Web fonts are a silent performance killer. A typical site loads 4-6 font files totaling 200-400KB, and they block text rendering until they download.
If you only use Latin characters, don't load the Cyrillic, Greek, and Vietnamese character sets. Google Fonts does this automatically with the &display=swap&subset=latin parameter. Self-hosted fonts need manual subsetting with tools like glyphhanger.
<link rel="preload" as="font" href="/fonts/heading.woff2" type="font/woff2" crossorigin />
This tells the browser to start downloading the font immediately, before it discovers the need through CSS parsing.
Instead of loading separate files for Regular, Medium, Bold, and Italic, a single variable font file covers all weights. This can reduce total font payload by 70% while giving you more typographic flexibility.
Google Tag Manager. Facebook Pixel. Hotjar. Intercom. Drift. Each one adds 50-200KB of JavaScript and blocks the main thread during execution.
Trent Walton's analysis of third-party script impact found that the median third-party script adds 1.3 seconds to page load on mobile. Stack three or four of them and you've added 4-5 seconds before any user sees anything meaningful.
For every third-party script on your site, ask: "Do we actually look at this data? Does it generate revenue?" If you installed Hotjar a year ago and never watched a session recording, remove it. If your Facebook Pixel is tracking events you don't run ads against, remove it.
Scripts that don't affect the initial user experience — analytics, chat widgets, social proof popups — can be loaded after the page is interactive. Use the Partytown library to run third-party scripts in a web worker, completely off the main thread.
Before launching any site, verify:
We recently audited a local business site that was loading in 7.2 seconds on mobile. The issues: unoptimized PNG images (3.8MB total), jQuery loaded for a single animation, four tracking scripts nobody checked, and shared hosting with 800ms TTFB.
After optimization — modern image formats, removing jQuery, deferring scripts, deploying to edge — the same site loaded in 1.1 seconds. Their Google ranking improved by 12 positions for their primary keyword within 6 weeks. Monthly leads increased by 34%.
Speed isn't abstract. It's the difference between page one and page three. Between a customer who stays and one who bounces. Between revenue growing and revenue leaking.
If your site takes more than 3 seconds to load, you're losing customers right now. Let's fix that.
Free Lighthouse audit for Erie businesses. We'll show you exactly where you stand vs. the competition.