【スポンサーリンク】

【未解決】ページのスクロール パフォーマンスを高めるには?[jquery.min.js, PSI]

この項目は、随時追記します。なにかのヒントになれば嬉しいです。

  • PageSpeed Insightsに「イベントリスナーをpassiveにしなさい」という注意書きがありました。
  • どうも jQuery 関係に問題があるようですが、わかりません。
  • jQueryそのものを除くことも考えましたが、Cocoonテーマ内のいろんなプラグイン(カルーセル(slick)とか画像拡大表示(baguetteBox)など)が利用しているので、ちょっと難しそう。
\記事が役に立ったらシェアしてね/
【スポンサーリンク】

スクロール パフォーマンスを高める受動的なリスナーが使用されていません

エラーが気になる。
たぶん、放っておいても大勢には影響しなさそうですが。

スクロール パフォーマンスを高める受動的なリスナーが使用されていません

ページのスクロール パフォーマンスを高めるには、touch および wheel イベント リスナーを passive として指定することをご検討ください。
パッシブ イベント リスナーの採用についての詳細

javascript.jsにコードを追加したけれど……

WordPressのテーマファイルエディターで、「javascript.js」に追加しました。

jQuery.event.special.touchstart = {
    setup: function(e, t, s) {
        t.includes("noPreventDefault") ? this.addEventListener("touchstart", s, {
            passive: !1
        }) : this.addEventListener("touchstart", s, {
            passive: !0
        })
    }
}, jQuery.event.special.touchmove = {
    setup: function(e, t, s) {
        t.includes("noPreventDefault") ? this.addEventListener("touchmove", s, {
            passive: !1
        }) : this.addEventListener("touchmove", s, {
            passive: !0
        })
    }
}, jQuery.event.special.wheel = {
    setup: function(e, t, s) {
        this.addEventListener("wheel", s, {
            passive: !0
        })
    }
}, jQuery.event.special.mousewheel = {
    setup: function(e, t, s) {
        this.addEventListener("mousewheel", s, {
            passive: !0
        })
    }
};

ところが、これでは減点は改善されませんでした。

なんでだろう?

jqueryのバージョンによるのかな?

ホイールをブロックすることはできた

ちなみに、反対に、明示的に「passive: false」にすると、ホイールでのスクロールができなくなります1

javascript.jsに入れたら、確かにホイールを無効化できました。

document.addEventListener('wheel', (e) => {
  e.preventDefault()
  console.log('handler called')
}, { passive: false });

ホイールイベントのpassiveの設定自体は反応しているはずなのですが……。

解決したら追記します。

画像拡大表示のbaguetteBoxプラグインが影響?

これは関係なかった。

PageSpeed Insightsにて
スクロールパフォーマンスを高める受動的なリスナーが使用されていません
とでたので何かな?と思い調べたところ、baguetteBox.min.js が怪しいとわかりました。

(…)

baguetteBoxは他の方が開発されているjQueryプラグインなんで変更してよいものかわからないんですね…。

スクロール パフォーマンスを高める受動的なリスナーが使用されていません | 不具合報告 | Cocoon フォーラム

mobile-menu-buttonsでの事例

コンソールでエラーになっているパターン。

Uncaught ReferenceError: onTouchStart is not defined

at javascript.js?ver=S..r=20181219012622:89

こちらもどうぞ。

Electronでrequireができない?【プロセスとコンテクストとプリロードスクリプト】
Electronでスクリプトを書いていたところ、Node.jsのAPIとDOM要素を結びつけるのに迷いました。 main.jsではDOM要素にアクセスできず、HTMLから読み込んだスクリプト(renderer.js)ではNode.jsのAPIにアクセスできないからです。 「プロセスモデル | Electron」をもとに、それぞれの役割の違いを見てみましょう。 ポイント main.jsは、メインプロ...
【検討中】 jquery-migrateを減らしてみたけど、戻した [WordPress]
PageSpeed Insightsで「レンダリングを妨げるリソースの除外」を見てみると、jqueryに関する2つのスクリプトが目につきました。 (Google CDN)jquery.min.js?ver=3.6.1 (Cloudflare CDN)jquery-migrate.min.js?ver=3.0.1 これを除外できないか試みてみました。 jQueryスクリプトを入れ替え jQueryの...
【未解決】埋め込んだTwitterのフォントサイズを小さくしたい(けど、いったん断念)[WordPress]
ただ、ツイートの埋め込みの文字サイズを本文に揃えたいだけなのに、めちゃくちゃ大変……。 Twitterのツイートは、「ツイートを埋め込む」からコードを表示して、HTMLに埋め込むことができます。ところが、枠の幅や文字サイズなどは、ウェブサイトと異なるスタイルが適用されます。 結論としては、あれこれ調べましたが、諦めました。「埋め込みツイート」が Twitterの仕様変更に依存しているので、サイト側...

(補足)

  1. touchやwheelのイベントリスナーにpassive: trueを明示的に指定する必要があるのか調べてみた – Qiita
QRコードを読み込むと、関連記事を確認できます。
【未解決】ページのスクロール パフォーマンスを高めるには?[jquery.min.js, PSI]
【スポンサーリンク】
タイトルとURLをコピーしました