How to Supercharge Front-End Performance: From DNS to Rendering

1. Request Speed Optimization

Resources from the moment a URL is entered until the page appears involve DNS resolution, TCP connection, HTTP request and server response. Reducing the time spent at each node improves overall performance.

DNS Resolution

Pre‑resolve DNS and rely on caching; configure only domains not already present in the page to avoid unnecessary DNS lookups.

TCP Connection

Review the three‑way handshake and four‑way termination; HTTPS adds an SSL handshake. Reduce TCP connections by using keep‑alive, handshake reuse, fewer HTTP requests, or HTTP/2.

Ways to reduce HTTP requests: combine static resources, enable caching, use local storage.

Caches include Memory cache, Disk cache, and Service Worker cache.

Inspect request headers in the browser console to fine‑tune caching directives.

Server Response

After TCP, focus on reducing static resource size and transmission distance. Use Gzip compression, minify JavaScript/CSS, and serve assets via a CDN that omits cookies.

Choose appropriate image formats and consider multiple domains (3‑4) to increase parallel downloads without overloading the network.

2. Browser Rendering Optimization

Place CSS in the head and JavaScript at the bottom to avoid blocking the render tree.

Reduce Repaints and Reflows

Repaint occurs when visual styles change (e.g., background‑color) without affecting layout. Reflow happens when layout changes (adding/removing DOM, size changes, etc.) and always triggers a repaint.

Reflow triggers include adding/removing visible DOM elements, changing element positions, modifying margins/paddings/borders/width/height, content changes, initial page render, window resize events, and reading layout properties such as offsetTop.

Best practices: use CSS classes for style changes, remove elements from the document flow using display:none or position:absolute/fixed, batch DOM updates into a single insertion, avoid frequent layout‑thrashing, and leverage caching when reads are necessary.

Lazy Loading

Load essential content first and defer other resources, reducing white‑screen time and first‑paint latency.

Summary

Extreme summary: send fewer requests, make resources smaller, shorten request distance, minimize DOM changes, and perform operations in a single batch.

Performance optimization is a long‑term process; keep iterating.