"A fast page feels effortless; a slow one feels broken. A little know-how keeps your apps quick and your users happy."
Learning Objectives
By the end of this module, you will be able to:
- Understand why performance matters
- Keep slow work from freezing the page
- Know what a background task is
- Follow a few beginner performance habits
1. Why Performance Matters
Users leave slow sites. Fast pages feel professional, rank better in search, and use less battery and data. Performance isn't a luxury — it's part of good UX.
Studies repeatedly show that even a one-second delay in loading sends a noticeable share of visitors clicking away; patience online is measured in milliseconds. A fast site also respects people on older phones, slower connections, or limited data plans — which is a huge part of the real world. Speed, in other words, is a feature your users feel even if they never name it.
Key idea: JavaScript runs on a single "main thread" — the same one that keeps the page responsive. If your code does something slow right there, the whole page freezes until it finishes. The goal is to never block that thread.
Explain like I'm new: Picture a single cashier serving one line of customers. That cashier is JavaScript's main thread. If one order takes five minutes, everyone behind waits — the whole line freezes. Keeping orders quick, or handling slow ones off to the side, keeps the line moving.
2. Don't Freeze the Page: Async Work
Slow things (like fetching data) are done asynchronously — started now, handled when ready — so the page stays responsive. That's what await (Module 15) is doing behind the scenes.
Timers also schedule work for later without blocking:
[object Object],(,[object Object], ,[object Object],.,[object Object],(,[object Object],), ,[object Object],);The key insight is that setTimeout doesn't pause your program for a second — it hands the browser a note that says "run this later" and immediately moves on. The browser fires the note when the time is up and the main thread is free. This is how a page can wait for something without going numb to clicks and scrolls.
Try this: In your console, run console.log("A"); setTimeout(() => console.log("B"), 0); console.log("C");. You'll see A, C, then B — even with a 0ms timer. That surprising order is async scheduling in action: the timer's code waits its turn.
3. Background Tasks
Some work should happen in the background, even between page loads. A service worker is a special script that runs separately from your page — it can cache files for offline use and handle background jobs. You don't need one to start, but it's how apps load instantly and work offline.
Think of a service worker as a helpful assistant stationed between your page and the network. Once installed, it can answer requests from a local cache — so the second time you visit, images and files appear instantly instead of being re-downloaded. It's the technology that lets web apps feel like installed apps, showing content even when the connection drops.
Real-world use case: Progressive Web Apps (PWAs) — like offline-capable note-takers or email clients — rely on service workers to store recent data locally. That's why they can open and show yesterday's content on a plane with no Wi-Fi.
4. Beginner Performance Habits
- Optimize images — compress them; they're usually the heaviest part of a page.
- Load only what you need — extra scripts slow things down.
- Measure, don't guess — use the browser's Performance/Lighthouse tools.
These three habits give you most of the benefit for the least effort. An unoptimized photo can be several megabytes — larger than all your code combined — so resizing and compressing images is often the single biggest win available to a beginner.
Beginner mistake: Doing heavy work in a loop directly on the main thread (like processing a huge list synchronously). The page locks up and clicks stop responding. Break big work into async chunks or move it to a background worker.
Practice task: Run Lighthouse (in your browser's DevTools) on any page you've built. It scores performance and accessibility and suggests fixes — a free, friendly report card.
Key Takeaway: Performance is part of good UX. JavaScript's single main thread must stay free, so do slow work asynchronously (await, timers) and never block it. Service workers run background tasks and enable offline/instant loading. Optimize images, load only what you need, and measure with Lighthouse.
Further Learning
Adapted from Microsoft's Web Dev for Beginners (MIT License).