optional · CSS study notes
25. Web Application Issues — Performance
CSS Optional — Paper-II, Section-B · P-II.VI.25 · Speed and scalability are critical non-functional requirements: slow sites lose users, conversions and search ranking.
1. Key Metrics
| Metric | Meaning |
|---|---|
| Response time | Time from request to complete response |
| Latency | Delay for data to travel (network round trip) |
| Throughput | Requests (or transactions) handled per second |
| TTFB (Time to First Byte) | Time until the first byte of the response arrives — server + network speed |
| Page load time | Time until the page is fully usable |
| Error rate | Percentage of failed requests under load |
| Resource utilization | CPU, memory, disk, bandwidth usage |
Google Core Web Vitals (user-experience metrics, also a ranking signal):
- LCP (Largest Contentful Paint) — loading: good ≤ 2.5 s
- INP (Interaction to Next Paint) — responsiveness: good ≤ 200 ms (replaced FID in March 2024)
- CLS (Cumulative Layout Shift) — visual stability: good ≤ 0.1
2. Causes of Poor Performance
Large unoptimized images; too many HTTP requests; render-blocking CSS/JS; no caching; slow database queries (missing indexes, N+1 queries); insufficient server resources; distance from users (no CDN); heavy third-party scripts (ads, trackers); inefficient code.
3. Optimization Techniques
| Layer | Techniques |
|---|---|
| Front end | Minify and bundle CSS/JS; compress (gzip/Brotli); optimize images (WebP/AVIF, correct sizes, lazy loading); defer/async scripts; reduce requests; critical CSS inline; code splitting |
| Network | CDN; HTTP/2 or HTTP/3 multiplexing; keep-alive connections; preloading/prefetching; fewer redirects |
| Caching | Browser cache (Cache-Control, ETag); CDN edge cache; server page/object cache (Redis, Memcached); opcode cache (PHP OPcache); query cache |
| Back end | Efficient algorithms; asynchronous jobs via queues; connection pooling; profiling |
| Database | Indexes; query optimization; read replicas; denormalization where justified; pagination |
| Infrastructure | Load balancing; horizontal scaling (more servers) vs vertical scaling (bigger server); auto-scaling in the cloud |
Vertical vs horizontal scaling: vertical = add CPU/RAM to one machine (simple, but has a ceiling and single point of failure); horizontal = add more machines behind a load balancer (near-unlimited, fault-tolerant, but needs stateless design and shared sessions).
Load-balancing algorithms: round robin, weighted round robin, least connections, IP hash (sticky sessions).
📐 Worked Numericals
N1 — Transfer time: a 3 MB page over a 10 Mbps connection: 3 × 8 = 24 Mb ÷ 10 Mbps = 2.4 s (plus latency). Compressing and optimizing to 1 MB → 0.8 s.
N2 — Little's Law: users in system N = throughput X × response time R. A server handling 200 requests/s with average response 0.5 s has 100 requests in progress at any moment.
N3 — Server capacity: each server handles 250 requests/s; peak demand is 2,000 requests/s with 20% headroom → 2,000 × 1.2 / 250 = 9.6 → 10 servers.
N4 — Cache hit ratio: 90% of requests served from cache at 5 ms, 10% from database at 100 ms → average = 0.9 × 5 + 0.1 × 100 = 14.5 ms (vs 100 ms without cache).
N5 — Request reduction: 40 image files each with 50 ms overhead on HTTP/1.1 with 6 parallel connections ≈ 40/6 ≈ 7 rounds × 50 ms = ~350 ms of overhead; combining into sprites or using HTTP/2 multiplexing removes most of it.
🎯 CSS Exam Angle
Give metrics (including Core Web Vitals), causes, then a layered optimization table. One numerical (transfer time or Little's Law) makes the answer stand out. Link performance to business impact (bounce rate, conversions, SEO).
⚠️ MCQ Traps
- Latency ≠ bandwidth: latency is delay; bandwidth is capacity.
- INP replaced FID as a Core Web Vital in 2024.
- Horizontal scaling needs stateless servers or shared session storage.
- Minification removes whitespace/comments; compression (gzip) encodes the transfer.
- 1 byte = 8 bits — convert MB to Mb in transfer-time calculations.
✅ Self-Check (with Answers)
Q1. Name the three Core Web Vitals with their "good" thresholds.
Ans: LCP ≤ 2.5 s (loading), INP ≤ 200 ms (responsiveness), CLS ≤ 0.1 (visual stability).
Q2. How long does a 5 MB page take to download over 20 Mbps, ignoring latency?
Ans: 5 × 8 = 40 Mb ÷ 20 Mbps = 2 s.
Q3. Differentiate vertical and horizontal scaling.
Ans: Vertical adds resources to one server (simple but limited and a single point of failure); horizontal adds more servers behind a load balancer (scales further and tolerates failures but needs stateless design).
Q4. List five front-end performance optimizations.
Ans: Minify/bundle CSS and JS; compress with gzip/Brotli; optimize and lazy-load images; defer non-critical scripts; use browser caching and a CDN.
Q5. How does a CDN reduce latency?
Ans: It serves cached copies from edge servers geographically close to users, shortening the network distance and round-trip time, while offloading the origin server.