The Impact of Performance on Business

Performance is not just a technical metric — it directly impacts revenue and user engagement. Research consistently shows that slower pages lead to higher bounce rates, lower conversion rates, and reduced user satisfaction.

QA engineers play a critical role in performance by establishing budgets, monitoring regressions, and verifying that optimization techniques work correctly.

Performance Optimization Techniques to Test

Image Optimization

Images typically account for 50-70% of total page weight.

TechniqueWhat to Test
Next-gen formats (WebP, AVIF)Images served in modern format with fallback
Responsive images (srcset)Correct image size for device viewport
Lazy loadingBelow-fold images load on scroll, above-fold loads immediately
CompressionImages compressed without visible quality loss
Proper dimensionsImages have width/height attributes (prevents CLS)

JavaScript Optimization

TechniqueWhat to Test
Code splittingOnly route-specific code loads on each page
Tree shakingUnused code removed from production bundles
MinificationJS files are minified in production
Defer/async loadingNon-critical scripts do not block rendering
Third-party script managementAnalytics, ads load after main content

CSS Optimization

TechniqueWhat to Test
Critical CSS inlinedAbove-fold styles in HTML head
Non-critical CSS deferredBelow-fold styles loaded asynchronously
MinificationCSS files minified in production
Unused CSS removalNo dead CSS in production bundles

Font Optimization

TechniqueWhat to Test
font-display: swapText visible immediately with fallback font
PreloadingCritical fonts preloaded in HTML head
Subset fontsOnly needed characters included
WOFF2 formatModern compressed format used

Performance Budgets

Setting Budgets

MetricBudget Example
Total page weight<500KB (compressed)
JavaScript<150KB (compressed)
CSS<50KB (compressed)
Images<200KB per page
LCP<2.5s
TBT<200ms
CLS<0.1
Number of requests<50
TTFB<600ms

Enforcing in CI/CD 

// budget.json for Lighthouse CI
[
  {
    "path": "/*",
    "resourceSizes": [
      { "resourceType": "script", "budget": 150 },
      { "resourceType": "stylesheet", "budget": 50 },
      { "resourceType": "image", "budget": 200 },
      { "resourceType": "total", "budget": 500 }
    ],
    "timings": [
      { "metric": "largest-contentful-paint", "budget": 2500 },
      { "metric": "total-blocking-time", "budget": 200 },
      { "metric": "cumulative-layout-shift", "budget": 0.1 }
    ]
  }
]

Waterfall Analysis

The network waterfall chart in DevTools shows the loading sequence of all resources. Key things to look for:

  1. Long TTFB — Server is slow to respond. Check server health.
  2. Render-blocking resources — CSS/JS files delaying first paint. Should be deferred or async.
  3. Large resources — Unoptimized images or unminified scripts. Should be compressed.
  4. Request chains — Resources that depend on other resources loading first. Should be preloaded or parallelized.
  5. Third-party bottlenecks — External scripts delaying page load. Should be loaded async.

Exercise: Performance Optimization Audit

Step 1: Establish Baseline

Load your target page with DevTools open (Network and Performance tabs). Record:

MetricValueBudgetPass/Fail
Total page weightKB<500KB
JS bundle sizeKB<150KB
CSS sizeKB<50KB
Number of requests<50
LCPs<2.5s
TBTms<200ms
CLS<0.1

Step 2: Image Audit

CheckPass/FailDetails
Images use WebP or AVIF format
Responsive srcset implemented
Below-fold images lazy loaded
Hero image loaded eagerly (no lazy)
All images have width/height
No oversized images

Step 3: JavaScript Audit

CheckPass/FailDetails
Code splitting implemented
JS files minified
No render-blocking scripts in head
Third-party scripts loaded async
Bundle analyzer shows no duplicate code

Step 4: Waterfall Analysis

Draw or screenshot the waterfall. Identify the three longest bars (bottlenecks) and propose fixes.

Solution: Sample Performance Audit

Page: example-shop.com/products

Baseline:

  • Total weight: 2.3MB (FAIL: >500KB)
  • JS: 450KB (FAIL: >150KB)
  • Requests: 78 (FAIL: >50)
  • LCP: 4.2s (FAIL: >2.5s)

Top Bottlenecks:

  1. Hero image: 1.4MB unoptimized PNG → Convert to WebP (save ~1.1MB)
  2. JavaScript: Single 450KB bundle → Code-split into route chunks (save ~300KB initial)
  3. Third-party chat widget: 200KB loaded synchronously → Load on user interaction (defer 200KB)

After optimization estimates:

  • Total weight: ~550KB → ~480KB with image optimization
  • JS: ~150KB initial (rest loaded on demand)
  • LCP: ~2.0s (hero image optimized + JS deferred)

Recommended priority:

  1. Convert images to WebP (highest impact, lowest effort)
  2. Add lazy loading to below-fold images
  3. Code-split JavaScript bundle
  4. Defer third-party scripts
  5. Implement performance budgets in CI

Key Takeaways

  • Performance testing should be ongoing, not a one-time activity — use performance budgets in CI/CD
  • Images are the biggest optimization opportunity on most pages (50-70% of weight)
  • Code splitting and lazy loading reduce initial page weight without removing features
  • Waterfall analysis identifies the specific resources causing bottlenecks
  • Third-party scripts are a common hidden performance cost — load them asynchronously
  • Always test performance on mobile with throttled CPU and network to represent real conditions