Utilizzare listener passivi per migliorare le prestazioni dello scorrimento

I listener di eventi touch e rotella sono utili per monitorare le interazioni degli utenti e creare esperienze di scorrimento personalizzate, ma possono anche ritardare lo scorrimento della pagina. Al momento, i browser non possono sapere se un gestore di eventi impedirà lo scorrimento, quindi aspettano sempre il completamento dell'esecuzione del gestore prima di scorrere la pagina. I listener di eventi passivi risolvono questo problema consentendoti di indicare che un listener di eventi non impedirà mai lo scorrimento.

Compatibilità del browser

La maggior parte dei browser supporta i listener di eventi passivi. Consulta Compatibilità del browser

Come viene eseguito il controllo del listener di eventi passivi di Lighthouse

Lighthouse segnala i listener di eventi che potrebbero ritardare lo scorrimento della pagina:

Il controllo Lighthouse mostra che la pagina non utilizza listener di eventi passivi per migliorare le prestazioni di scorrimento

Lighthouse utilizza la seguente procedura per identificare gli ascoltatori di eventi che potrebbero influire sulle prestazioni dello scorrimento:

  1. Raccogliere tutti gli ascoltatori di eventi nella pagina.
  2. Filtra gli ascoltatori che non usano il tocco o la rotella.
  3. Filtra gli ascoltatori che chiamano preventDefault().
  4. Filtra gli ascoltatori provenienti da un host diverso rispetto alla pagina.

Lighthouse esclude gli ascoltatori di host diversi perché probabilmente non hai il controllo su questi script. Potrebbero esserci script di terze parti che stanno danneggiando le prestazioni di scorrimento della tua pagina, ma non sono elencati nel report Lighthouse.

Come rendere passivi i listener di eventi per migliorare le prestazioni di scorrimento

Aggiungi un flag passive a ogni ascoltatore di eventi identificato da Lighthouse.

Se supporti solo i browser che supportano i listener di eventi passivi, basta aggiungere il flag. Ad esempio:

document.addEventListener('touchstart', onTouchStart, {passive: true});

Se supporti browser meno recenti che non supportano gli ascoltatori di eventi passivi, dovrai utilizzare il rilevamento delle funzionalità o un polyfill. Per ulteriori informazioni, consulta la sezione Rilevamento di funzionalità del documento esplicativo WICG sugli listener di eventi passivi.

Risorse