New: Live WPM Graph During Every Test on CodeSpeedTest

Most typing tests tell you your final WPM — one number at the end. That number hides everything interesting. Did you start fast and crash halfway through? Did you recover from a string of errors in the last 30 seconds? Did you type the first function perfectly and struggle through the second one? The live WPM graph makes all of this visible in real time. As you type, a line chart updates every second, plotting your instantaneous WPM over the course of the test. After the test ends, the graph stays visible in the results panel so you can analyze your performance in detail.

• Rolling window WPM: The graph does not plot cumulative average WPM, which would flatten all variation. It plots a 5-second rolling window WPM — the number of correct characters typed in the last 5 seconds, expressed as words per minute (characters ÷ 5 ÷ 5 × 60).
• Update frequency: The graph updates once per second during the test, giving you a smooth curve that responds quickly to speed changes without flickering on every single keystroke.
• Correct characters only: The graph counts only correctly typed characters in its WPM calculation, not gross keystrokes. If you are making errors and correcting them, the graph shows your effective speed, not your raw keystroke rate.
• Error markers: Red dots appear on the graph at the timestamps where you made errors. This lets you correlate speed dips with error clusters — which usually reveals whether a slowdown was caused by hesitation or by correcting mistakes.
• Pause detection: If you stop typing for more than 3 seconds, the graph displays a grey break indicator rather than a WPM of zero, which would distort the scale.

• Smooth plateau: A relatively flat line at a consistent WPM level indicates good typing rhythm and consistent focus. This is the target shape.
• Early peak, late collapse: You started fast but slowed down significantly in the second half. This typically means fatigue or increased code complexity later in the snippet — check if the trailing sections have more symbol-dense syntax.
• Gradual ramp-up: Your WPM increased through the test. Common in longer tests where you need time to "warm in" to the snippet. Try a 15-second warmup in your primary language before starting timed tests.
• Spike and crash pattern: High WPM punctuated by sudden drops to near-zero followed by recovery. Each crash is almost certainly an error correction cascade — you mistyped, panicked slightly, and over-corrected.
• Flat low line: Consistent low WPM throughout the test. This is not fatigue — it is a ceiling. Your current technique or familiarity with the language syntax is the bottleneck, not stamina.
• Cliff near the end: Sudden sharp drop in the last 10–15% of the test. Often caused by anxiety as you see the test approaching completion, or by a particularly symbol-dense closing line (common in JavaScript with multiple closing braces).

• Identify your slow sections: Hover over the graph in the results panel to see the timestamp and the corresponding snippet position. This tells you exactly which lines of code slowed you down.
• Correlate errors with speed dips: If every speed dip aligns with a red error marker, your issue is accuracy-driven — work on slowing down slightly and prioritizing clean keypresses over raw speed.
• Correlate speed dips with syntax: If speed dips occur at consistent points (every time you hit an array literal, every time you type a function signature), you have a syntax-specific weakness to drill.
• Track your warmup time: The graph reveals how many seconds into the test you reach your peak speed. If you take 20+ seconds to reach full speed, add a brief warmup before timed tests.
• Compare across sessions: Your profile stores historical graph data for every test. Compare graphs from the same snippet taken weeks apart to see whether your speed curve has become smoother and higher.

• Timed mode (30s, 60s, 120s): The x-axis of the graph is the full test duration. The graph is most useful here for seeing whether your speed holds steady or decays as the clock runs down.
• Unlimited mode: The x-axis extends as long as the test runs. For longer snippets, the graph clearly shows where complex sections created bottlenecks.
• Certification tests: During certification tests (Bronze, Silver, Gold), the graph is visible but the live WPM counter at the top of the page is intentionally hidden to prevent fixation during the test. The graph is available in the results panel afterwards.
• Race mode: In race mode, the graph shows your speed alongside a dotted line representing the target speed needed to beat your opponent. This gives you real-time tactical information.

• Rendering: The graph is rendered on an HTML5 canvas element using a lightweight custom renderer. No Chart.js or D3 dependency — the implementation is under 150 lines of TypeScript.
• Data storage: Graph data is stored per-test in your account alongside the standard WPM and accuracy metrics. Historical graphs are available indefinitely on Pro accounts and for the last 30 tests on free accounts.
• Performance: The graph renderer is throttled to 60fps and uses requestAnimationFrame for updates. It has no measurable impact on typing test performance on any modern device.
• Export: Pro users can export the graph data as JSON from the results panel, enabling custom analysis in Python, JavaScript, or any data analysis tool.

The live WPM graph is available on all test modes — standard, timed, certification, and race — for all users including the free tier. You do not need to enable anything; it appears automatically in the test interface and in the results panel after every test. If you have been ignoring the graph until now, take 30 seconds after your next test to look at the shape of your speed curve. The patterns are usually immediately obvious, and the targeted improvements they reveal are specific enough to act on today.