/inp-workshop

INP Workshop

Primary LanguageHTML

INP workshop

A interactive demo and workshop for learning about Interaction to Next Paint (INP)

Optimize Interaction To Next Paint

Getting started

There is a static version of this workshop you can follow along with at http://inp.jeremy.codes/

Table of contents

  1. Overview of the App
  2. Experiment: Long running Event Handlers
  3. Experiment: Update UI first
  4. Experiment: separate handlers
  5. Experiment: different event types
  6. Takeaway
  7. Experiment: no UI update?
  8. Experiment: input delay
  9. Experiment: what about non-visual updates?
  10. Discuss: presentation delays
  11. Experiment: requestAnimationFrame
  12. Look at tooling
  13. Experiment: async effects
  14. Lesson: if you cannot remove it, at least move it!
  15. What worked, what did not?
  16. Mid-point summary
  17. Multiple interactions (and rage clicks)
  18. Strategy 1: debounce
  19. Strategy 2: interrupt long running work
  20. Strategy 2: now with yield()
  21. Strategy 2: now with AbortContoller()
  22. Conclusion

Next Demo: Taking lessons to ReactJS site