Coverage describes what ran or matched during the recorded session. An unvisited state is not evidence that its styles are unnecessary.
Choose a complete interaction route
Start Coverage on staging and reload a representative page. Then open navigation, expand accordions, submit an invalid form and activate dialogs before ending the recording. Include the components the template actually offers. A passive load mostly reveals the initial view. Save the route and viewport beside the report so another maintainer can reproduce its scope.
Compare more than one viewport
Repeat at mobile and desktop widths, including the breakpoint where navigation changes. Check dark mode if styles differ. A rule unused on one layout can be essential on another. Product variations, account states and search results may also reveal additional rules. Use multiple recordings to form a candidate list rather than treating one percentage as a deletion instruction.
Identify stylesheet ownership
Map each large stylesheet to its theme or plugin. Determine whether it is global by design or only needed for a component absent from the current template. Conditional loading can be more maintainable than removing individual selectors from vendor code. Ask the owner about supported asset-loading controls and ensure that a shared component is not quietly used in another template.
Test a narrow change with fallback
Remove or conditionally load one stylesheet through supported code or settings on staging. Keep the previous revision available. If a CSS-removal tool generates critical styles, test its handling of dynamic selectors and safelist rules for the specific integration. Avoid a broad wildcard safelist that restores everything without explanation, and avoid removing arbitrary selectors merely because their names look unfamiliar.
Verify hidden states before release
Repeat the recorded interaction route, then test a new page using the same component. Inspect focus indicators, disabled controls, validation messages and loading states. Confirm the visual result at each tested width, not just the successful network response. Restore the stylesheet if behavior becomes unclear. Document the template scope and the states checked so future changes can extend the coverage.
Symptom-to-cause worksheet
| What you observe | What to investigate | Next check |
|---|---|---|
| High unused percentage on initial load | Hidden states not exercised | Record menus, errors and dialogs |
| Desktop looks correct, mobile breaks | Responsive rules removed | Repeat across navigation breakpoint |
| Vendor update restores deleted CSS | Unsupported direct edit | Use supported conditional loading |
Worked investigation scenario
This is an illustrative case, not a measured Velonic result. Imagine Coverage marks a dialog stylesheet unused because the recording ended before the dialog opened. Repeat the session with keyboard activation, focus movement and dismissal. If those rules become used, remove them from the deletion candidates. Consider conditional loading only if the component is absent from that template. The resulting recommendation should explain the recorded states instead of presenting an unused percentage as proof of unnecessary code.
Put it into practice
- Treat Coverage as scoped evidence.
- Include interaction, theme and responsive states.
- Preserve focus, error and loading styles.
AI-assisted educational content prepared for the Velonic resource library. How these guides are prepared.