Wp-rocket: JSの遅延-iOS / Safariでリンクを2回クリックする必要があります

FlyingScriptsプラグインでこれを報告するクライアントもいました。

検索した後、私は使用に関連のSafariとIOSに問題があるということだtouchstartまたはtouchmove使用せずにtouchendのリンクをダブルクリックして問題を作る（あなたは上をクリックする必要があります最初のクリックとして画面から任意のポイント、次にuは任意のリンクをクリックできます）

次のリンクは、問題を強調しようとします。
https://stackoverflow.com/a/10340968

お客様のサイトで、次の変更を加えて問題を解決しました。
https://github.com/wp-media/wp-rocket/blob/7ec9d996f004707a57c4c8476090d5bd943051f0/assets/js/lazyload-scripts.js#L91 -L99
touchmoveをtouchmove touchend置き換えます
touchstartをtouchstart touchend置き換えます

@hellofromtonyaに確認した後、彼女は言いました：-

この特定の問題は、その理由を見つけるためにさらに調査する必要があります。 この特定のエッジケースのコードにパッチを追加するのではなく、なぜ問題が発生するのでしょうか。また、この特定の組み合わせで修正されるのはなぜですか。
ここでの「理由」は、他のお客様に別の問題を引き起こさないようにするために非常に価値があると思います。

だから私はニーズを追加します：調査される研究開発ラベル。

別のケース： https ：
顧客はそれがモバイルのchomeとsafariで起こっていると報告します

関連チケット： https ： //secure.helpscout.net/conversation/1296809928/198688/

関連チケット： https ： //secure.helpscout.net/conversation/1322836283/206594？folderId = 2135277

関連チケット： https ： //secure.helpscout.net/conversation/1334490646/210819/

関連チケット： https ： //secure.helpscout.net/conversation/1336672544/211528/
メモとメモの画面記録。 この問題は、SafariブラウザとChromeブラウザの両方で発生します。

検索した後、私は使用に関連のSafariとIOSに問題があるということだtouchstartまたはtouchmove使用せずにtouchendのリンクをダブルクリックして問題を作る（あなたは上をクリックする必要があります最初のクリックとして画面から任意のポイント、次にuは任意のリンクをクリックできます）

次のリンクは、問題を強調しようとします。
https://stackoverflow.com/a/10340968

お客様のサイトで、次の変更を加えて問題を解決しました。
https://github.com/wp-media/wp-rocket/blob/7ec9d996f004707a57c4c8476090d5bd943051f0/assets/js/lazyload-scripts.js#L91 -L99

touchmoveをtouchmove touchend置き換えます
touchstartをtouchstart touchend置き換えます
@hellofromtonyaに確認した後、彼女は言いました：-

この特定の問題は、その理由を見つけるためにさらに調査する必要があります。 この特定のエッジケースのコードにパッチを追加するのではなく、なぜ問題が発生するのでしょうか。また、この特定の組み合わせで修正されるのはなぜですか。
ここでの「理由」は、他のお客様に別の問題を引き起こさないようにするために非常に価値があると思います。

だから私はニーズを追加します：調査される研究開発ラベル。

私はこの提案を試しましたが、残念ながらiOSの問題は解決しませんでした（少なくとも私にとっては）。

同じ問題。 数日前に初めてこの機能を試したところ、iOSのリンクが機能しておらず、機能するにはダブルタップが必要であるという報告がすぐに届きました。 2 x iOS 14デバイスで試して、この問題を確認したので、今のところ無効になっています。

これに関する更新はありますか？

関連： https ：

同じ問題。 更新はありますか？

WP-RocketとFlyingScriptsの両方で同じバグが発生しています。 touchstartとtouchmove置き換えても効果はありませんでした。

関連： https ：

これはSafariではなくiOSChromeブラウザで発生しています。 他の誰かが確認できますか？

WP Rocketプラグインは今のところ削除されていますが、この問題はすでに3か月間開いており、現在の未解決の問題数（+400）ですぐに修正されるとは思えません。

関連： https ：

WP-rocketがすぐに「修正」を追加することを願っています:)

開発者からの更新はありますか？ あなたはそれに取り組んでいますか？

@ wp-media / devこれはますます見られており、バグによって機能がまったく使用できなくなっているため、優先順位を付ける必要があると思います。 それを次のスプリントに追加して、解決策を見つけられるかどうかを確認しました。 🙏

@ wp-media / devこれはますます見られており、バグによって機能がまったく使用できなくなっているため、優先順位を付ける必要があると思います。 それを次のスプリントに追加して、解決策を見つけられるかどうかを確認しました。 🙏

いいですね。 この機能は、速度に関しては私のWebサイトに大きな違いをもたらします。もう一度アクティブにしてもらいたいです=）

@arunbasillalいいえ、この問題はR＆Dが必要であるとマークされており、スプリントの一部にすることはできません。 問題をスプリントの一部にするには、最初に完全に手入れをする必要があります。

@ wp-media / devこれはますます見られており、バグによって機能がまったく使用できなくなっているため、優先順位を付ける必要があると思います。 それを次のスプリントに追加して、解決策を見つけられるかどうかを確認しました。 🙏

ありがとう！ 私はこの機能が本当に大好きです-それが私のすべてのウェブサイトで使用できれば素晴らしいでしょう！

@ wp-media / productrocketこれに関するチームからのフィードバック：

• iOSの動作方法のため、これは注意が必要です。
• 重要なのは、タッチスクリーンには、おそらくタッチアンドホールド以外の良いホバーの選択肢がないということですが、少なくともiOSデバイスでは、それ自体に重要性があります（リンク先のプレビューフレームをロードします）。
• Ahmedは以前にもこれを深く掘り下げましたが、唯一の解決策は、フライングスクリプトのようにタイムアウトを使用することです。

この機能の現在の動作方法を大幅に変更しない限り、その修正はないため、先に進む前にさらに検討する必要があります。

ニーズとmouseWheelイベントとsetTimeOut。 Infinite Scrollやその他のスクリプトのようなmouseweelスクリプトでは、正しく機能せず、mousewhellだけの場合は次のページが読み込まれません。 一般に、これはすべてのスクリプトに適用され、重要です。
setTimeOutなしでJSを遅延させると、リンクを2回クリックする必要があることに加えて、問題も発生します。 例：ロシアセグメントでは、Yandex検索エンジン。 カウンターはWebビューアーを使用できます。これはユーザーアクションの記録です。 したがって、スクリプトを遅らせるべきではありません。ユーザーアクションを表示するときに、サイトのカウンタースクリプトをロードする必要があるためです。 また、ビューアでアクション、「キーダウン」、「マウスオーバー」、「タッチムーブ」、「タッチスタート」が発生しないため、当然ロードされません。

WP Rocketチームがこれをどのように検討しているかを本当に知りたいのですが、iOSが問題を修正するまでは、少なくともx秒後にスクリプトを自動ロードするオプションが必須です。

@ wp-media / productrocketこれに関するチームからのフィードバック：

• iOSの動作方法のため、これは注意が必要です。
• 重要なのは、タッチスクリーンには、おそらくタッチアンドホールド以外の良いホバーの選択肢がないということですが、少なくともiOSデバイスでは、それ自体に重要性があります（リンク先のプレビューフレームをロードします）。
• Ahmedは以前にもこれを深く掘り下げましたが、唯一の解決策は、フライングスクリプトのようにタイムアウトを使用することです。

この機能の現在の動作方法を大幅に変更しない限り、その修正はないため、先に進む前にさらに検討する必要があります。

タイムアウトソリューションの実装のタイムラインはありますか？

X秒後にスクリプトをロードすることは解決策ではありません。 これを行うことは、この機能の目的とは正反対です。 それをせずに解決策を見つけることができれば、私たちはこの道を歩もうとします。

@arunbasillal @ engahmeds3edいくつかのテストをやり直して

私たちのウェブサイトでも同じ問題があったので、私は尋ねています。 しかし、先週以来、私たちはもう問題を抱えていません。 それは私たちの新しいウェブサイトをリリースするのは偶然ですか、それともiOSアップデートですか？

タイムアウトソリューションの実装のタイムラインはありますか？

ETAを提供することはできません。

@GeekPress Devツールが提供するモバイルウィンドウサイズを使用してChromeでサイトを表示すると（この機能の正式な名前はありますか？おそらくモバイルプレビューですか？）、2本の指でスクロールしても分析を含む遅延スクリプトがトリガーされることはありません。 また、このスレッドでのダブルクリックの問題について、どのページとリンクをテストしましたか？ トップページ？

@GeekPress Devツールが提供するモバイルウィンドウサイズを使用してChromeでサイトを表示すると（この機能の正式な名前はありますか？おそらくモバイルプレビューですか？）、2本の指でスクロールしても分析を含む遅延スクリプトがトリガーされることはありません。 また、このスレッドでのダブルクリックの問題について、どのページとリンクをテストしましたか？ トップページ？

Chromeデベロッパーツールでモバイルプレビューを使用してテストしても、タッチジェスチャが異なるため、iOSデバイスで実際にテストした場合と同じ結果が得られるとは思いません。

@Roboonlそうです、違うはずです。 そして、私はそうしていません。 WP Rocketにとって、特定の条件下でスクリプトがロードされないことは問題ないのではないかと思います。

setTimeOutが必要であるか、むしろ必要です。

関連： https ：

関連するケース： https ：

ブラウザ：Safariとchrome
デバイス：iPhone 11 Pro

タイムアウトトリガーを追加すると、 https：//github.com/wp-media/wp-rocket/issues/3420も解決され

タイムアウトトリガーを追加すると、＃3420も解決されます

@ piotrbak ＃3420がこの問題に関連しているかどうかは

@GeekPress私の理解では、ユーザーはWebページをスクロールしていて、

https://github.com/wp-media/wp-rocket/issues/3454については正しいようですが、これはモバイルにも関連しています。 おそらく、これらの問題のいずれかがhttps://github.com/wp-media/wp-rocket/issues/3420を解決するでしょう
ありがとう

すべてのアップデート？

@arunbasillal WP-rocketにオプションを追加して、その間に特定のページで除外することはできませんか？
Flying Scriptsと同様に、キーワードを含む特定のページのDelayJSを除外するオプションもあります。

別のケース：
https://secure.helpscout.net/conversation/1417928403/237257?folderId=2683093

Chromeデベロッパーツールでモバイルプレビューを使用してテストしても、タッチジェスチャが異なるため、iOSデバイスで実際にテストした場合と同じ結果が得られるとは思いません。

@Roboonl実際のモバイルデバイスでテストされています。 モバイルで当社のウェブサイトをお試しください。2回クリックする必要はありません。

@roberthedlund何かを見逃していたはずですが、

Chromeデベロッパーツールでモバイルプレビューを使用してテストしても、タッチジェスチャが異なるため、iOSデバイスで実際にテストした場合と同じ結果が得られるとは思いません。

@Roboonl実際のモバイルデバイスでテストされています。 モバイルで当社のウェブサイトをお試しください。2回クリックする必要はありません。

@roberthedlund何かを見逃していたはずですが、

https://ibb.co/qYVyhh6

@roberthedlundええと、あなたはすでにWPロケットでもそれを行うことができます。 ページ編集画面に移動し、«WPロケットオプション»メタボックスを開いて、JS実行の遅延オプションをオフにするだけです。

@roberthedlundええと、あなたはすでにWPロケットでもそれを行うことができます。 ページ編集画面に移動し、«WPロケットオプション»メタボックスを開いて、JS実行の遅延オプションをオフにするだけです。

ええ、しかし例として100ページ以上で手動でそれを行うのは理想的ではありません。

すべてのアップデート？

この問題は、Android上のChromeを搭載したバージョン3.8.6でも引き続き発生します。 Fying Scriptsを試したところ、このダブルクリックのバグは発生しませんでした。 iOSの場合、フライングスクリプトを使用している場合でも、視聴者はダブルクリックする必要があります。

すべてのアップデート？ あなたがまだWP-rocketのユーザーに問題について何も知らせていないのは奇妙だと思います。 人々が遅延JS機能をアクティブにする前に警告通知を入力することはどれほど難しいですか？ 私が問題について連絡する前に、問題に苦しんでいることをまだ知らないさまざまなフォーラムで非常に多くのユーザーを見てきました。 これはかなり大きな問題であり、警告する必要があると思います。

@socialpreneur iOSの場合、シミュレーションではなく、実際のモバイルで試していますか？

なぜ私は質問をしているのですか？

私は自分のiPhone8でもう一度やり直しましたが、自分のWebサイトを含むDelayJSが含まれているすべてのWebサイトを2回クリックする必要はありません。

@GeekPress私と私のクライアントの電話を含む実際のモバイルでは、

追加：この問題の原因となっている外部または内部のスクリプトがあるようです。 WPRocketのDelayJSやFlyingScriptsを使用しているすべてのサイトにこのダブルクリックの症状があるわけではありません。 これまでのところ、この問題がない2つのサイトはAdSenseを使用していません。 どちらが原因かを解明するために、さらに多くのケースを収集する必要があると思います。

@GeekPress

@socialpreneur iOSの場合、シミュレーションではなく、実際のモバイルで試していますか？

なぜ私は質問をしているのですか？

私は自分のiPhone8でもう一度やり直しましたが、自分のWebサイトを含むDelayJSが含まれているすべてのWebサイトを2回クリックする必要はありません。

私はDelayJSを使用している多くのウェブサイトを試し、実際の電話を試しました。 iPhone 8、iPhone SE、iPhone11およびそれらすべてにこの問題がありました。 最初の「クリック」で機能する場合もあれば、完全に機能しなくなる場合もあります。 したがって、問題は現実のものです。

@socialpreneur私たちのウェブサイト（https://wp-rocket.me）で試しましたか？ 私が言ったように、私はいくつかのウェブサイトを試した後、問題を再現することができません。

使用しているiOSのバージョンを教えてください。

@GeekPressあなたが見るすべてが真実であるというわけではありません。 少なくとも1人のWPRocketユーザーが問題を抱えている場合は、問題を解決するためにあらゆることを行う必要があります。 私のiOSは14.4です。クライアントにiOSバージョンを尋ねます。 私が言ったように、これは特定のスクリプトを使用する特定のサイトのすべてのDelay JSプラグイン（WP Rocket、Flying Scripts、Perfmatters）で発生しているため、これはあなたの原因だけではありません。

ブラウザかもしれませんが、このダブルクリックの問題を見ると、iOSだけでなく、AndroidとChromeにもあるので、明らかにiOSとSafariの問題だけではありません。 特定のサイトでこの問題を回避するために、ちょっとしたハックや追加のfunctions.phpを考え出すことができれば幸いです。

何か見つけたらお知らせします。

追加1：OK、問題が発生している3番目のサイトです。 たぶん私はいくつかの一般的なスクリプトを絞り込むことができます。

追加2：これまでのところ、DelayJSを有効にするだけではこの問題は発生しません。

しかし、いくつかのスクリプトを設定すると、ダブルクリック/タップが発生し始めます。

追加3：わかりました。これが私が見つけたものです。 「目次」を追加すると、ダブルクリックがトリガーされます。 これを報告している他のすべてのユーザーにとって同じではないかもしれませんが、これまでのところ、これはキーワードの1つです。 目次Plusはプラグイン名です。

追加4：ここに良いニュースがあります。 同じ問題を抱えている別のサイトもTOCPlusを使用しています。 @GeekPress 、このプラグインを有効にしてテストしてください。 また、すべてのサポートスタッフに、同じ問題を抱えているユーザーが自分のサイトでもこのプラグインを使用しているかどうかを確認するように伝えます。 できるだけ速くに。

追加5：TOC Plusスクリプトを遅らせないことで、サイトの1つでこの問題を解決することができました。 しかし、同じソリューションが別のサイトでは機能しなかったため、遅延に対応していないスクリプトがいくつかあるようです。

追加6：jqueryバージョンがこの問題の一部を担っている可能性があると感じています。 一方の作業サイトは最新バージョンを使用し、もう一方の非作業サイトは古いバージョン（/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp）を使用します。 さらにデバッグ...

@GeekPress TOC Plusの他に、

• googlesyndication
• adsbygoogle
• adsbygoogle.js

再現するには

1. スクロールせずに見える範囲内かどうかにかかわらず、AdSenseを使用してテストサイトを構築します。
2. ページを更新し、ヘッダーのロゴ/テキストまたはモバイルメニューアイコンをタップします。 この時点でAdSenseが読み込まれますが、ワンタップでメニューを開くことはできません。

解決

これはAdS​​enseスクリプトがどのように設計されているように見えるので、私にはわかりません。 かなりの回避策は次のとおりです。

1. 常に1秒後にAdSenseをロードします。 したがって、ほとんどのユーザーはこの問題に直面しません。
2. マウスホバーにAdSenseをプリロードします（これがモバイルタップで機能するかどうかはわかりません）
3. ユーザーにAdSenseで収益化しないように伝えてください。そうすれば、サイトははるかに速くなります...

@GeekPress私のウェブサイトはcelmetro.comで、遅延Javascript実行を有効にすると、同じダブルクリックの問題が発生します。リストに遅延するスクリプトがないかどうかは関係ありません。

関連： https ：
彼らはTOCプラスとアドセンスを使用しています。
編集：これは、影響を受けるサイトでの画面記録に関する@socialpreneurからの追加情報です。

Chromeモバイルを介して（およびChromeデスクトップを介してWeb開発ツールをモバイルとしてロードするように設定して）自分のWebサイトで問題を確認できます