Web Performance Optimization: Speed Up Your Application

An e-commerce client came to us with a Lighthouse score of 38. Their mobile conversion rate was 0.8% — half the industry average. Page load: 8.2 seconds on 4G. They blamed the product catalog size ("we have 50,000 products").

In two weeks, we: compressed images (saving 3.2MB per page), code-split the JavaScript bundle (from 1.8MB to 280KB initial load), added proper caching headers, lazy-loaded below-fold content, and moved to a CDN. Lighthouse score: 92. Load time: 1.4 seconds. Conversion rate jumped to 2.1% — a 162% improvement. Revenue impact: $340K/year.

At Pillai Infotech, performance optimization is not an afterthought — it's part of every build. Here's what actually moves the needle.

Core Web Vitals: What Google Measures

Core Web Vitals are Google's page experience signals. They affect search rankings and represent real user experience.

The 80/20 Rule of Performance

These five changes fix 80% of performance issues:

1. Compress and resize images — the #1 cause of slow pages
2. Code-split JavaScript — don't send 2MB of JS for a landing page
3. Use a CDN — serve static assets from the nearest edge location
4. Set proper cache headers — don't re-download unchanged resources
5. Server-side render critical content — don't show a blank page while JS loads

Image Optimization: The Biggest Win

Images account for 50-70% of page weight on most websites. Optimizing them delivers the largest performance improvement with the least effort.

Modern Image Formats

• WebP: 25-35% smaller than JPEG at equivalent quality. Supported everywhere in 2026. Use as default.
• AVIF: 30-50% smaller than WebP. Supported in Chrome, Firefox, Safari 16+. Use with WebP fallback.
• SVG: For logos, icons, and simple illustrations. Scales infinitely, typically under 5KB.

<!-- Responsive images with modern formats -->
<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img
    src="/img/hero.jpg"
    alt="Description"
    width="1200"
    height="600"
    loading="lazy"
    decoding="async"
  >
</picture>

Critical Image Rules

• Always set width and height: Prevents layout shift (CLS). The browser reserves space before the image loads.
• Lazy load below-fold images: loading="lazy" — native browser attribute. No JavaScript needed.
• Eager load the LCP image: The hero image should NOT be lazy loaded — use loading="eager" and fetchpriority="high".
• Use responsive srcset: Serve 400px images to phones, 800px to tablets, 1200px to desktops. Don't send a 2400px image to a 400px screen.

JavaScript: Less Is More

Code Splitting

Ship only the JavaScript needed for the current page. Modern bundlers (Vite, Turbopack, webpack) support code splitting natively.

// Route-based splitting (automatic in Next.js, Nuxt, SvelteKit)
// Each page only loads its own JavaScript

// Component-level splitting for heavy features
const ChartComponent = lazy(() => import('./Chart'));

// Only loads chart library when the component is rendered
<Suspense fallback={<Skeleton />}>
  <ChartComponent data={data} />
</Suspense>

Bundle Analysis

Before optimizing, understand what's in your bundle. Use npx vite-bundle-visualizer or @next/bundle-analyzer to see exactly which packages consume space. Common finds:

• moment.js: 300KB+ with all locales. Replace with date-fns (5KB per function) or dayjs (2KB).
• lodash: 70KB full bundle. Use import { debounce } from 'lodash-es' for tree-shaking, or replace with native methods.
• Icon libraries: Importing all of FontAwesome = 1.5MB. Import individual icons instead.

Third-Party Scripts

Analytics, chat widgets, tracking pixels — third-party scripts are the invisible performance killer. Audit every script:

• Load analytics asynchronously with defer or async
• Delay non-essential scripts until after page load (3-second delay)
• Use Partytown to move third-party scripts to a web worker
• Question every script: "Does this need to load on every page?"

Caching: The Free Performance Boost

Cache-Control Headers

# Static assets (JS, CSS, images) — cache for 1 year
# File names include content hash, so new versions get new URLs
Cache-Control: public, max-age=31536000, immutable

# HTML pages — always revalidate
Cache-Control: no-cache
# (no-cache doesn't mean "don't cache" — it means "revalidate before using")

# API responses — cache for 60 seconds, stale-while-revalidate for 300
Cache-Control: public, max-age=60, stale-while-revalidate=300

CDN Configuration

Put a CDN (Cloudflare, CloudFront, Fastly) in front of everything. Static assets get cached at 300+ edge locations worldwide. TTFB drops from 200-500ms to 10-50ms for cached content.

Service Worker Cache

For PWAs, the service worker provides an additional cache layer that enables offline access and instant repeat visits. See our PWA guide for caching strategies.

Font Loading: Don't Let Fonts Block Rendering

<!-- Preload critical fonts -->
<link rel="preload" href="/fonts/inter-var.woff2"
      as="font" type="font/woff2" crossorigin>

<!-- Use font-display: swap to show text immediately -->
<style>
  @font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-var.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap; /* Show fallback font, swap when loaded */
  }
</style>

Font Optimization Tips

• Use variable fonts: One file covers all weights. Inter Variable is 200KB instead of 6 files at 300KB+ total.
• Subset fonts: If you only need Latin characters, subset the font — cuts size by 50-80%.
• Self-host fonts: Don't use Google Fonts CDN — self-hosting with preload is faster and more privacy-friendly.
• Limit font families: 1-2 font families maximum. Each additional family adds 100-300KB of downloads.

Measuring Performance: Lab vs Field

Lab Tools (Synthetic)

• Lighthouse: Built into Chrome DevTools. Good for development. Scores vary — use for trends, not absolute numbers.
• WebPageTest: Test from real locations and devices. Waterfall charts show exactly what's slow. The gold standard for analysis.
• PageSpeed Insights: Combines Lighthouse with real-user data (CrUX). Use for the final check before launch.

Field Tools (Real User Monitoring)

• Chrome User Experience Report (CrUX): Google's real-user metrics dataset. This is what affects search rankings.
• web-vitals library: Measure Core Web Vitals from real users in production. Send to your analytics.
• Vercel Analytics / Cloudflare Web Analytics: Real-user performance monitoring without affecting performance.

// Measure real-user Core Web Vitals
import { onCLS, onINP, onLCP } from 'web-vitals';

onCLS(metric => analytics.send('CLS', metric.value));
onINP(metric => analytics.send('INP', metric.value));
onLCP(metric => analytics.send('LCP', metric.value));