Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

スクロール パフォーマンスを高める受動...
 
共有:
通知
すべてクリア

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

27 投稿
4 ユーザー
4 Reactions
2,604 表示
(@会社員)
Active Member
結合: 4年前
投稿: 16
トピックスターター  

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

 { passive: true }

を追加すると良いと、あちこちでみかけ、触ってみましたが、
追加してよいものなのか、そもそも親テーマを触るのはいかがなものか
と思い報告させて頂きました。

何か策があればご教示下さい。よろしくお願い致します。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

を追加すると良いと、あちこちでみかけ、触ってみましたが、
追加してよいものなのか、そもそも親テーマを触るのはいかがなものか

もしよろしければ、参考になさったページのURLを教えていただいてよろしいでしょうか。
こちら側で検証し、もし修正が必要であれば修正したいと思います。

検索すれば出てくるかもしれませんが、できれば同じ環境で確認したいのでよろしくお願いいたします。


   
はる
(@haruinoue)
Noble Member Moderator
結合: 4年前
投稿: 1090
 

テスト


   
(@会社員)
Active Member
結合: 4年前
投稿: 16
トピックスターター  

@haruinoue はるさん ありがとうございます。

コードは書きこんでいなく、サイトUR位だったのですが…

書き方がまずかったのか、何なのか。

この返信が上手く返せればいいなと思いつつ

書いています。


   
はる reacted
(@会社員)
Active Member
結合: 4年前
投稿: 16
トピックスターター  

@yhira わいひら様 お忙しい中返信ありがとうございます。

投稿者: @yhira

参考になさったページのURLを教えていただいてよろしいでしょうか。

https://notepad.pw/share/e218yl4q2  

同じJsではないのですが、

passive:trueが特に有効なイベント wheelmousewheeltouchstarttouchmove

というのをヒントに素人なりに実行してみましたが、

PageSpeed Insightsnの診断は変わらなかったのと、
テーマが丁度更新されたので、触らずテーマのままにしておきました。

 

診断にずっとでてくるので気にはなるのですが、
特に不具合があるのか?と言えばそうでもないですし
お時間ができた時にでも検証頂けたらと思います。

よろしくお願い致します。


   
(@会社員)
Active Member
結合: 4年前
投稿: 16
トピックスターター  

なぜか、3種類のリンクを貼り付けると返信が出来なかった為、

notepad.pwにリンクを貼り付けてあります。

お手数ですがよろしくお願い致します。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391

   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

Wordfence Securityプラグインによって、攻撃と勘違いされてブロックされたみたいです。
おそらく、jsとか何かしらのコードが、プラグインのNGワードかいろいろな要素が諸々あいまってブロックに引っかかったのではないかと思います。
プラグインのことなので、詳しいことはわかりません。

Block Reason: A potentially unsafe operation has been detected in your request to this site


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

あとよろしければで良いのですが冒頭のPageSpeed InsightsでチェックしたページのURLもいただいてよろしいでしょうか。


   
(@会社員)
Active Member
結合: 4年前
投稿: 16
トピックスターター  

@yhira わいひら様 

Wordfence Securityプラグインによって、攻撃と勘違いされてブロックされたみたいです。

攻撃したつもりはなかったのですが…? 
とりあえず、@haruinoue はるさんのお力を借り、
返信ができるようになったので良かったです。

PageSpeed InsightsでチェックしたページのURL

https://ideal-jp.com/  になります。

JavaScript縮小化のチェックははずしておきましたが、
他もはずしておいた方がよろしいでしょうか?

翌日対応になり申し訳ないですが、よろしくお願い致します。

 


   
(@会社員)
Active Member
結合: 4年前
投稿: 16
トピックスターター  

@yhira わいひら様

午前中にPageSpeed Insightsを行った際は今まで通り
スクロール パフォーマンスを高める受動的なリスナーが使用されていません
とでていたのですが、

帰る前にもう一度と思いPageSpeed Insightsを行うと合格しておりました。

この間にやった事といえば、2.3.3にアップデートしたことと
functions.phpにJavaScriptの読み込みを遅らせるコードを追加したくらいです。
画像を触ったりとかもしていますが…

とりあえずご報告まで。明日もう一度試してみます。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

とりあえず、今チェックしてみた限りでは、僕の環境からでも問題ないみたいですね。


   
(@会社員)
Active Member
結合: 4年前
投稿: 16
トピックスターター  

@yhira わいひら様

今朝も問題なかったです。

どうしてなのか?と知ってみたい気もしますが…
深く考えないようにします。

とりあえず一安心致しました。

お忙しい中時間さいて頂きありがとうございました。
また、何かの際はよろしくお願い致します。

 


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

突然失礼します。

functions.phpにJavaScriptの読み込みを遅らせるコードを追加したくらいです。

おそらく上記の影響によりjQueryに多数エラーが出ています。

 
 
全部は調べていませんが、以下に影響が出ているものと思われます。
  • BaguetteBox(画像拡大効果)
  • Scrollable-table
  • クリップボード動作(SNSシェアの「コピー」)

 

これらの機能が不要であれば、気にしなくて良いと思います。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 
投稿者:: @mk2_mk2

これらの機能が不要であれば、気にしなくて良いと思います。

上記のように書いてしまいましたが、本当に問題ないのか、すべてご確認なさることをお勧めします。

JavaScriptの読み込みを遅らせたため、実際の処理の時には、まだjQuery本体が読み込まれていない?ものと思われます。


   
(@会社員)
Active Member
結合: 4年前
投稿: 16
トピックスターター  

また、何かブロックされてしまったようなのでTESTです。


   
(@会社員)
Active Member
結合: 4年前
投稿: 16
トピックスターター  

@mk2_mk2 様 ありがとうございます。

何かエラーが一つあるのは知っていましたが、
あぁいつの間にか増えているんですね ?

以前からキャッシュ系のプラグインが合わず、
本日、いろいろと試行錯誤しておりました。
一つずつ解決できるものはと思っていますがなかなか。
また、赤色のモノが増えてると思うと…

とりあえず、大きく何かおかしいとかではないと思うので、
いろいろ調べながら、一つずつやってみたいと思います。

JavaScriptの読み込みを遅らせるコードを削除してみると
”スクロール パフォーマンスを高める受動的なリスナーが使用されていません”
と、またでてきましたので、
JavaScriptの読み込みを遅らせるコードを追加しても問題ないか
あらためて後日調べたいと思います。

休み期間は、JavaScriptの読み込みを遅らせるコードを削除しておきます。

また、何かの際はお力添え下さいますようお願い致します。


   
(@会社員)
Active Member
結合: 4年前
投稿: 16
トピックスターター  

ちなみに、どこからかで調べて貼り付けたコードです。

<コード>や“引用”に貼り付けても、ブロックされてしまったので

https://notepad.pw/code/15badglh


   
(@会社員)
Active Member
結合: 4年前
投稿: 16
トピックスターター  

こちらが正しいコードです。先程には最後の部分がなぜか入力されておりました。

https://notepad.pw/code/opw9vyys


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

会社員さん

只今出先で、ちょっと詳細は確認できません。

ただ言えるのは、JavaScriptの読み込みを遅らせた場合、トラブルが多いことは一般的に知られています。

このフォーラムでも、過去に何度もそういう事例がございました。

Cocoonも、昔はJavaScriptの読み込みを遅らせる機能を、有しておりました。

しかしながら、やはりトラブルが多く廃止した経緯がございます。

Cocoonのトラブルというよりも、埋め込みやプラグイン等に、トラブルが発生していたような記憶がございます。

PageSpeed Insightsの数字をとるか、JavaScript(jQuery)の安定稼動をとるかは、個々のご判断かと思います。

もしくは、個別にjQueryの定義は先にする対応が必要なのかもしれません、JavaScriptの読み込みを遅らせたままにするのであれば。
やり方は分かりませんが。


   
わいひら reacted
(@会社員)
Active Member
結合: 4年前
投稿: 16
トピックスターター  

@mk2_mk2 様 お忙しい中、お返事すみません。ありがとうございます。

PageSpeed Insightsの数字というよりエラーちっくな赤色達が気になっただけなので…

/cocoon-master/plugins/baguettebox/dist/baguetteBox.min.js?ver=5.8&fver=20210720125341baguetteBox.min.js

上記、cocoon-masterの名前があがった為、これが問題なのかなと思い
ご相談した次第でございます。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

会社員さん

/cocoon-master/plugins/baguettebox/dist/baguetteBox.min.js?ver=5.8&fver=20210720125341baguetteBox.min.js

上記がBaguetteBox(画像拡大効果)です。

JavaScriptの読み込みを遅らせたため、baguetteBox.min.js実行時に、jQueryが未定義になってしまい、結果的にエラーになっていると思われます。

JavaScriptの読み込みを遅らせなければ、発生しないと思われます。

BaguetteBox(画像拡大効果)をお使いにならないのでしたら、Cocoonの設定から画像拡大効果を、OFFにすることができたと思います。

基本的には、個別カスタマイズに当たると思いますので、対処もご自分で…というのが、原則かと思います。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

なお、画像拡大効果については、以下のCocoonのマニュアルページをご参照ください。

https://wp-cocoon.com/lightbox-libraries/

Cocoonのマニュアルは、大変良くまとまっていますので、他の機能についても、ご一読いただきますよう、お願い致します。

(多機能ですから一読では覚えられませんが。)


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

BaguetteBoxがPageSpeed Insightsで指摘されるとの意味であれば、前述の通り、機能をOFFにすることもできます。

複数の話があり、私が少し認識違いをしているようです。
すみません。

スマホからはやはり厳しいですので、この辺で。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

baguetteBoxは他の方が開発されているjQueryプラグインなんで変更してよいものかわからないんですね…。
https://feimosi.github.io/baguetteBox.js/
ただ、Cocoonで使用していたものはv1.9.0で最新版はv1.11.1だったのでテーマのものをアップデートしておきました。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
そしたら、当サイトでも改善されたんで、これでbaguetteBox.jsは問題ないかもしれません。


   
(@会社員)
Active Member
結合: 4年前
投稿: 16
トピックスターター  

わいひら様 mk2様

投稿者:: @yhira

Cocoonで使用していたものはv1.9.0で最新版はv1.11.1だったのでテーマのものをアップデートしておきました。

ご指示頂いた通り、アップデート致しました。当サイトも改善されました。
ありがとうございます。
Cocoonで使用されているプラグインも自動で更新されていると思っていました。
とても手間がかかっているのがわかりました。いつもありがとうございます。

投稿者:: @mk2_mk2

BaguetteBox(画像拡大効果)をお使いにならないのでしたら、Cocoonの設定から画像拡大効果を、OFFにすることができたと思います。

こちらも検討させて頂きます。ありがとうございます。

 

cocoon-masterで使われているプラグインだとはわかっておりましたが、検索したりして、なるべくお手をかけまいと試行錯誤しましたが、どうにもならず…。cocoon-masterで使用しているものなので今回はこちらで相談させて頂きました。

お忙しい中、ご教授いただきありがとうございました。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

ご確認いただきありがとうございます!


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました