サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021年4月20日 18:03
いつもCocoonを使用させていただき感謝しています。
このような素晴らしいテーマを無料でご提供いただき、誠にありがとうございます。
今回は、Googleのアルゴリズム改訂に伴い、速度対策が必要になるため、その対策についての質問を挙げさせていただきました。
5月より、「ページ速度」と「CLS」が検索順位に影響するようになると、Googleから公式に発表されております。
それに伴って、高速化対策をしているのですが、その点で機能について質問させてください。
①「Twitterの埋め込み」を利用した際の表示速度について
添付の画像は、私が運営しているサイトの以下の口コミ記事の速度測定結果なのですが、Twitter埋め込みを利用していると、表示速度が著しく低下してしまっています。
URL： https://chilltimeblog.com/medilift-comments/
Twitterのscriptを読み込むため、ある程度遅くなってしまうのは仕方ないことは承知しているのですが、今後は検索順位に大きく影響しそうなので、scriptの遅延読み込みを検討しております。
記事では、Cocoonの「Twitter(埋め込み)ブロック」を使用しているのですが、これを遅延読み込みする場合は、どのようなコードを加えたらよろしいでしょうか。
また、Twitterの遅延読み込みについてCocoon機能の実装などのご予定はございますでしょうか。
色々検索してみたのですが、htmlでコード埋め込みした場合の遅延読み込みの対策はまとまっているものの、Cocoonの「Twitter(埋め込み)ブロック」に対応したものが見つけられなかったため質問させていただきました。
Twitterを利用すると速度の問題で、今後はSEOでの上位表示がかなり難しくなるように感じます。
なかなか難しい問題かもしれませんが、ご確認をいただけますと幸いです。
お忙しいところお手数おかけしてしまい申し訳ございませんが、ご確認をよろしくお願い致します。
2021年4月20日 19:32
Twitterを利用すると速度の問題で、今後はSEOでの上位表示がかなり難しくなるように感じます。
これの情報元のURLはありますか。
確かに検索順位決定のシグナルの一つにはなるとは思うんでですが、それが原因で上位表示できなくなるほどの大きなシグナルなのかというと疑問です。
もしそのように思われた情報元となるページがあるのであれば、URLを提示いただければ幸いです。
こちらの方でも確認してみます。
色々検索してみたのですが、htmlでコード埋め込みした場合の遅延読み込みの対策はまとまっているものの、Cocoonの「Twitter(埋め込み)ブロック」に対応したものが見つけられなかったため質問させていただきました。
そのURLも提示してください。
どのような対策をしたいのかがわからないと、こちらも何とも言えません。
ただし、詳細なカスタマイズとなる場合は、申し訳ないですがサポートの対象外となり得ることもあらかじめご了承ください。
Topic starter
2021年4月20日 22:25
@yhira わいひら様
いつもお世話になっております。
早速、ご返信をいただきまして誠にありがとうございます。
また、重ね重ねになりますが、いつも素晴らしいコンテンツをご提供いただきありがとうございます。
これの情報元のURLはありますか。
確かに検索順位決定のシグナルの一つにはなるとは思うんでですが、それが原因で上位表示できなくなるほどの大きなシグナルなのかというと疑問です。
もしそのように思われた情報元となるページがあるのであれば、URLを提示いただければ幸いです。
こちらの方でも確認してみます。
こちらですが、改めて確認してみたのですが、ページ速度がどの程度重要なシグナルになるかという詳細の記述はございませんでした。
こちらの発表によるとページ エクスペリエンスが検索順位決定要因に追加されるものの、別記事では以下の記載があるので、わいひら様が仰るとおり良いコンテンツを発信していれば、引き続き上位表示を狙えるようにも思えました。
【別記事での記載内容】
「ページ エクスペリエンスは重要ですが、それでも Google は、ページ エクスペリエンスが劣っていても、全体的に価値の高い情報を含むページを上位にランキングするようにしています。」
「高速化しないと」という焦りから、やや解釈が甘い状態で質問してしまい誠に申し訳ございませんでした。
そのURLも提示してください。
どのような対策をしたいのかがわからないと、こちらも何とも言えません。ただし、詳細なカスタマイズとなる場合は、申し訳ないですがサポートの対象外となり得ることもあらかじめご了承ください。
こちらにつきましても説明が不足しており申し訳ございません。
遅延読み込みにつきましては、以下の記事と、その参考記事を見ながらTwitterの遅延読み込みを試みました。
URL： https://nowaki.work/googleads-twitter-lazy
しかし、Twitterのhtmlコードでの埋め込みは以下のような形になりますが
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">サイトを一新してみました?<br><br>ブログ風のデザインから、<br>サイト風のデザインに変えてみたよ☺️<br><br>意外と簡単にできたわりに、<br>満足度高めです✨<br><br>気が向いたら<br>新しいサイトデザイン見にきてね！</p>— ハチ＊無料テーマ×6桁ブロガー (@chilltimeBlog_8) <a href="https://twitter.com/chilltimeBlog_8/status/1315212648066084864?ref_src=twsrc%5Etfw">October 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
CocoonのTwitter埋め込みブロックを利用すると、コードが以下のようになります。
<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper"> https://twitter.com/chilltimeBlog_8/status/1315212648066084864?s=20 </div></figure>
そのため、
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
の部分を削除する対応などができず、遅延読み込みができずにおりました。
この点につきまして、何かアドバイスがいただけたらと思い質問をさせていただいた次第です。
また、サポートの対象外になる場合もある旨承知いたしました。
いつもCocoonをありがたく利用させていただいておりますので、その点は問題ございません。
可能な範囲内で問題ありませんので、ご確認とご回答をいただけますと幸いです。
お時間のある際で良いので、どうぞよろしくお願い致します。
2021年4月21日 19:11
Twitterのタグがそのように出力されるのは、WordPressの仕様でテーマ側は関与していない部分です。
テーマ側の問題ではなさそうなので、ちょっと個別の対応は難しいです。
なので、PHP等で以下のような処理を加える必要があるのかもしれません。
https://celtislab.net/archives/20160608/lazy-load-oembed/
とはいえ、Twitter自体iframeでツイートを出力していると思うのですが、最近WordPressはiframeのLazy Loadに対応してなかったっけ。
Cocoonのバージョンは幾つでしょうか。
あと、その他の対応方法として以下の方法を見つけました。
https://wordpress.org/support/topic/lazy-load-for-twitter-embeds-2/
書き込みに出てくるFlying Scripts by WP Speed Mattersというプラグインもあるようです。
https://wordpress.org/plugins/flying-scripts/
これは、ユーザーがスクロール等アクションを行うまでまでJSの読み込みを遅延するプラグインのようです。
試してないので、うまくいくかわかりません。
Topic starter
2021年4月22日 15:14
@yhira わいひら様
お忙しい中、ご返信をいただきましてありがとうございました。
また、たくさんお調べいただき、様々な対応方法をご紹介くださり誠にありがとうございました。
本件、Wordpressの仕様になるため、Cocoonでの対応は出来かねてしまう点、承知いたしました。
お忙しいにも関わらず、調査・検討をしていただけたことに感謝しております。
とはいえ、Twitter自体iframeでツイートを出力していると思うのですが、最近WordPressはiframeのLazy Loadに対応してなかったっけ。
Cocoonのバージョンは幾つでしょうか。
また、上記についての回答ですが、現在利用しているバージョンは以下の通りでどちらも最新版かと思われます。
参考までにご共有させていただきます。
Wordpress：5.7.1
Cocoon：2.2.8.8
Twitterの遅延読み込みについては、今回ご提案いただいた方法をもとに、4月中に対応を進めていこうと思います。
大変お忙しいにも関わらず、ご対応いただきまして誠にありがとうございました。
今後ともどうぞよろしくお願い致します。
2021年4月22日 20:06
ちょっと前のバージョンなら、WordPressのLazy Loadの不具合があったのですが、このバージョンなら大丈夫なバージョンです。
2021年4月22日 20:07
ちょっと前のバージョンなら、WordPressのLazy Loadの不具合が確かあったと思うのですが、このバージョンなら大丈夫なバージョンで問題ないはずです。
Cocoon：2.2.8.8
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。