metafizzy / metafizzy/flickity

PageSpeed Insights recommends using passive flag for touch event listeners

Open
#1,289 1 comment 3 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.6k
Forks
593
PR merge metrics
No merged PRs in 30d

Description

In diagnostic section in PageSpeed for [page](http://kod.djpw.cz/lfld-) with Flickity 2.3.0
https://pagespeed.web.dev/analysis/http-kod-djpw-cz-lfld-/640hzu4fjs?form_factor=mobile
is
_Does not use passive listeners to improve scrolling performance_
_Consider marking your touch and wheel event listeners as passive to improve your page's scroll performance. [Learn more about adopting passive event listeners](https://developer.chrome.com/docs/lighthouse/best-practices/uses-passive-event-listeners/?utm_source=lighthouse&utm_medium=lr)._

I don't know if it is enough to replace in the library this row
`elem[ bindMethod ]( startEvent, this );`
by
`elem[ bindMethod ]( startEvent, this, /^(touch|wheel)/.test(startEvent) ? { passive : true } : false );`

Passive support should also be [detected](https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection) for old browsers.

Contributor guide

Open the contributing guide

Research direction

Start by locating the event-binding row containing `elem[ bindMethod ]( startEvent, this );` and read how `startEvent` is chosen. Review the linked passive-listener feature-detection guidance and check the browser support assumptions. Done means touch and wheel listeners use passive options where supported without breaking older browsers or Flickity interaction.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, performance
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.