Resources
Examples and links
Example repositories, the Lighthouse viewer and further reading on user flows.
Examples in the repository#
| Example | What it shows |
|---|---|
packages/user-flow-example | Fixtures, UFOs and flows for the coffee cart demo, plus DevTools recordings and the flows that replay them. |
examples/github-report | A minimal flow executed in a GitHub workflow with the Markdown report posted as a sticky PR comment. |
packages/cli/docs/raw | Raw reports in every format for the "order coffee" flow, useful to see what the output looks like. |
Real-world usage#
- angular-movies keeps its user flows in a dedicated project and uses the UFO architecture for a production Angular application.
Related projects#
- user-flow-gh-action, the GitHub action that runs the CLI and comments on pull requests.
- @push-based/user-flow-nx-plugin, the Nx plugin.
Lighthouse and Chrome DevTools#
- Lighthouse user flows introduces the navigation, timespan and snapshot modes.
- Understanding the Lighthouse result explains the JSON structure.
- Lighthouse configuration documents every config property.
- Lighthouse viewer renders a JSON report in the browser.
- Chrome DevTools Recorder records and exports user flows.
- Recorder features in a short video.
Getting help#
- Open an issue in the GitHub repository.
- Consulting and workshops on web performance are available from push-based.io.