- このトピックには5件の返信、2人の参加者があり、最後に
により8年、 9ヶ月前に更新されました。
-
投稿
-
-
お世話になります。
Simplicity2 v.2.6.1でモバイル用メニューにスライドインライト(ボタン下)を
利用していますが、レンダリングブロックを回避する為にjQueryの非同期処理で
async属性を付けると、i-OSのモバイル端末ではスライドインエリアのメニュー、
検索、サイドバーの各ボタンをタップしても全く反応しなくなります。
動作するのは、ホームとトップに遷移するボタンのみです。、
尚、i-OS端末のブラウザは、Safari、Chromeにて試しましたが同様の状態であり、
キャッシュ削除や全プラグインを停止させても変わりありませんでした。但し、Android端末では、正常に動作しており、デベロッパーツールで偽装的に
i-OS端末を指定して見る限りでは正常で、Chromeのコンソールでも特にエラーは
無いようなのですが、i-OS上ではjQueryの読込みとスライドインJSの動作に関し
何が影響しているのか見当がつかず、こちらにお問い合せさせていただきました。何か考えられる対応策などがありましたら、ご教示いただけないでしょうか？
サイトURLは、https://very-style.com/ となります。お手数をお掛けしますが、宜しくお願いいたします。
-
実行される順番が担保されない、「何番目に読み込まれるかわかりませんよ。」ということです。
したがって、複数のファイルに依存関係が存在するようなスクリプトはasync属性で非同期的に読み込むべきではありません。
複数のファイルが意図した順番で読み込まれないので意図した動作も期待できません。これとか原因ではないですかね？？？
以前jsをみた時
$が使われてたように思います。多分…。もしスライドインライトにjsが使われていたら、上記引用のとおり、jQuery・JS：複数ファイルの読み込み順で動作しないのかも知れないのかも？と何となく思ったのですが。script 要素 #ブラウザー実装状況
モバイルでも対応済みのようですので。 -
現在 async を取り除かれているため、エラーの状態が把握できません。
ただ、 jQuery を async で読み込むと、端末や OS に関わらずエラーが出る可能性が極めて高いです。
通常 jQuery を非同期で読み込む際には、
async deferまたはdeferを指定します。どちらを指定するかはサイトによって異なる上に、どちらでもエラーが出る可能性があります。
jQuery の非同期読み込みは相応の知識が必要であるため、簡単にできないようであれば一旦非同期で読み込むカスタマイズはお止めになった方がいいように思います。
また、jQuery の非同期読み込みより、先にすべき高速化対策があるのもそう思う理由です。
WebPagetest でサイトを計測したところ、サーバーのレスポンスが悪いとの結果が出ています。（計測結果）
0.774 ~ 0.970 秒でサーバーが応答していますが、 Google が求めるのは 0.2 秒です。
まずはサーバーに大きな負荷をかけているプラグインがないかをお調べになってはいかがでしょうか。
P3 (Plugin Performance Profiler)は、簡単にプラグインの負荷を測定できるプラグインです。
-
レンダリングブロックを回避する為にjQueryの非同期処理で
async属性を付けると、i-OSのモバイル端末ではスライドインエリアのメニュー、
検索、サイドバーの各ボタンをタップしても全く反応しなくなりますこれはどのように設定されたのでしょうか？
サポート対象外のものにもあるように、カスタマイズによる動作不良の原因究明や、対策方法は、ちょっとサポート対象外となっています。
僕も、jQueryのasync defer関係のチューニングはさんざん試みましたが、どうしても不具合が出てしまうため現状のようになっています。
申し訳ないですが、カスタマイズ（プラグイン利用含む）をしてしまうと、原因は無限に広がってしまうため、それぞれで対応していただければと思います。
あえて対策をいうのであれば、原因となるカスタマイズ（プラグイン利用）をやめる、しかないかもしれません。 -
ご返信ありがとうございます。
かうたっく様
「もしスライドインライトにjsが使われていたら、上記引用のとおり、jQuery・JS：複数ファイルの読み込み順で動作しないのかも知れないのかも？」
確かに、asyncを外すと正常に動作する為、非同期処理において何か影響していることは間違いないです。
しかしながら不可解なのは２点有りまして、先の状況でお伝えしています通り
１）Android端末では正常に動作するのに、i-OS端末側で動作しないこと。
※i-OS端末はiPhone、iPod、iPad air2の機種・新旧OSバージョンで確認
２）フッターモバイルメニューのスライドインを button-slide-sidebar-close.phpで一連して処理していると思うのですが、ページトップへのスクロール移動については問題無く動作するので、この処理に関係するjQueryは既に読み込まれているのではないか？ ～とすればメニュー、検索、サイドバーの各ボタンは何故動かないのか？
・・・という観点からお問い合せさせていただきました。———————————————–
Akira様「現在 async を取り除かれているため、エラーの状態が把握できません。」
サイト運用に影響が出るため、その後、async属性を一旦取り外しました。
ご確認頂きましたのに申し訳ありません。「通常 jQuery を非同期で読み込む際には、 async defer または defer を指定します。」
これも試していますが、i-OS端末では動作しませんでした。
「jQuery の非同期読み込みより、先にすべき高速化対策があるのもそう思う理由です。」
そうですね。PageSpeed Insightsの計測時点によって結果値は結構変化しますが、参考としています。
アドバイス頂きました着眼点でプラグインの負荷なども考慮して出来るところから最適化してしていこうと思います。———————————————–
わいひら様「これはどのように設定されたのでしょうか？」
本フォーラム記事【#45970】でHidekichi様が指南されているコードを参考として functions.phpに追加しております。
但し、deferだとjQuryを利用する一部のJavaScriptが動作しなくなるので、asyncで設定していました。「カスタマイズ（プラグイン利用含む）をしてしまうと、原因は無限に広がってしまうため、それぞれで対応していただければと思います。」
承知いたしました。
プラグインを全て停止し、ほぼデフォルト状態においてもjQuryのレンダリングブロック回避でasync, deferを付けると障害となってしまうようで、何か対策の術がないものかと思いご質問させていただきましたが、わいひら様におかれましてもjQueryのasync defer関係のチューニングはさんざん試みられたとのことですので、これ以上の追究は無理なようですね。
Simplicityを利用中の他のユーザーさんから本件と同様の報告が無いとすれば、自分の環境上だけの問題かもしれないのでその辺りでサーバー環境の諸設定やカスタマイズ関連の影響がないか自分なりに再度調べ、どうしてもレンダリングの影響が気になればスライドインメニューの代替も検討しようかなと思います。皆様、お忙しいところ誠に有難うございました。
-
スライドイン用ファイルの記載間違いを訂正させてもらいます。
誤） button-slide-sidebar-close.php
正） buttons-footer-mobile.php
-
- このトピックに返信するにはログインが必要です。