Making Your Web Pages Smooth: Performance Optimization Techniques

The talk, originally presented at FDConf2019, introduces the concept of a "smooth" web page as one that feels fluid to the user during interaction, regardless of absolute speed.

Two interaction types are defined: passive (e.g., animations, auto‑play carousels) and active (user‑triggered events). For both, the goal is to keep the perceived response time under 100 ms, the critical threshold identified by the speaker.

Achieving 60 FPS (one frame every 16.7 ms) is essential; the speaker connects this to the RAIL performance model (Response, Animation, Idle, Load) and emphasizes that total task time should stay below 50 ms to avoid long‑tasks.

Optimization topics include:

Passive interaction: ensure each frame is rendered within 16.7 ms, keep JavaScript execution under 10 ms, and manage the pixel pipeline (style calculation → layout → paint → composite).

Active interaction: avoid long‑tasks using Web Workers or Time‑Slicing. Example worker code: const testWorker = new Worker('./worker.js'); setTimeout(() => { testWorker.postMessage({}); testWorker.onmessage = function(ev) { console.log(ev.data); }; }, 5000);

Time‑Slicing example: function block() { ts(function* () { const start = performance.now(); while (performance.now() - start < 1000) { console.log(11); yield; } console.log('done!'); }); } setTimeout(block, 5000); function ts(gen) { if (typeof gen === 'function') gen = gen(); if (!gen || typeof gen.next !== 'function') return; (function next() { const res = gen.next(); if (res.done) return setTimeout(next); })(); }

Selector performance is highlighted: simpler selectors are faster, especially when matching many elements. Layout thrashing occurs when reading layout properties (e.g., offsetWidth ) after mutating styles inside a loop, forcing synchronous layout recalculations. The solution is to batch reads before writes.

Layer management can reduce work: using CSS will-change or transform: translateZ(0) creates compositor layers, allowing the browser to skip the paint step when only layer positions change.

To avoid dropped frames, the only reliable API is requestAnimationFrame , which schedules callbacks at the start of each frame, ensuring smooth 60 FPS animation.

In summary, the presentation covers defining smoothness, the RAIL model, pixel pipeline, avoiding long‑tasks with workers or time‑slicing, selector and layout optimizations, effective layer usage, and frame‑perfect animation with requestAnimationFrame .