Q: How do I optimize website images?

Image optimization: compress images (TinyPNG, Squoosh), use modern formats (WebP, AVIF), responsive images (srcset, sizes), lazy loading (loading='lazy'), set width/height to prevent layout shift, use CDN for delivery, preload critical images. Images often 50%+ of page weight. Optimization = faster load, better UX, higher SEO.

Q: How do I reduce JavaScript bundle size?

Reduce bundle: code splitting (dynamic imports, route-based), tree shaking (remove unused code), lazy loading (load on demand), minification (terser, uglify), compression (gzip, brottli), avoid large dependencies, use smaller alternatives (date-fns vs moment). Analyze with webpack-bundle-analyzer, source-map-explorer. Smaller bundle = faster download + parse.

Q: What causes layout shifts (CLS)?

CLS causes: images without dimensions, ads/embeds injecting content, fonts causing swap, dynamic content insertion, animations moving elements. Fix: set width/height on images, reserve space for ads/embeds, use font-display:swap, insert content before existing elements, avoid layout animations. CLS hurts UX and SEO. Prevent with proper HTML structure.

Q: How do I improve server response time?

TTFB improvement: use CDN (edge caching), enable HTTP/2, optimize database queries, implement server caching (Redis, memcached), reduce middleware, use faster hosting, optimize backend code, enable compression. Target: TTFB < 800ms. Slow server = delays everything else. CDN helps most - caches at edge closer to users.

Question 1

What are Core Web Vitals?

Accepted Answer

Core Web Vitals: LCP (Largest Contentful Paint) < 2.5s - load speed. FID (First Input Delay) < 100ms - interactivity. CLS (Cumulative Layout Shift) < 0.1 - visual stability. INP (Interaction to Next Paint) < 200ms - responsiveness. TTFB (Time to First Byte) < 800ms. Google uses these for SEO ranking. Measure with Lighthouse, PageSpeed Insights, WebPageTest.

Question 2

How do I optimize website images?

Accepted Answer

Image optimization: compress images (TinyPNG, Squoosh), use modern formats (WebP, AVIF), responsive images (srcset, sizes), lazy loading (loading='lazy'), set width/height to prevent layout shift, use CDN for delivery, preload critical images. Images often 50%+ of page weight. Optimization = faster load, better UX, higher SEO.

Question 3

How do I reduce JavaScript bundle size?

Accepted Answer

Reduce bundle: code splitting (dynamic imports, route-based), tree shaking (remove unused code), lazy loading (load on demand), minification (terser, uglify), compression (gzip, brottli), avoid large dependencies, use smaller alternatives (date-fns vs moment). Analyze with webpack-bundle-analyzer, source-map-explorer. Smaller bundle = faster download + parse.

Question 4

What causes layout shifts (CLS)?

Accepted Answer

CLS causes: images without dimensions, ads/embeds injecting content, fonts causing swap, dynamic content insertion, animations moving elements. Fix: set width/height on images, reserve space for ads/embeds, use font-display:swap, insert content before existing elements, avoid layout animations. CLS hurts UX and SEO. Prevent with proper HTML structure.

Question 5

How do I improve server response time?

Accepted Answer

TTFB improvement: use CDN (edge caching), enable HTTP/2, optimize database queries, implement server caching (Redis, memcached), reduce middleware, use faster hosting, optimize backend code, enable compression. Target: TTFB < 800ms. Slow server = delays everything else. CDN helps most - caches at edge closer to users.

Performance Optimization Guide

Core Web Vitals Targets

Optimization Techniques

Performance Tools

Common Issues & Fixes

Quick Checklist