「メイド・イン・ヘブン」スキン適用中

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カスタマイズ依頼

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

Twitterの埋め込みでPageSp...
 
共有:
通知
すべてクリア

[解決済] Twitterの埋め込みでPageSpeed Insightsスコアーが異常に悪くなる

11 投稿
3 ユーザー
3 Likes
4,449 表示
 AK
(@AK)
Active Member
結合: 3年前
投稿: 12
Topic starter  

----------------------------------------------
サイト名:AKバイク【原付特化】
サイトURL: https://50-125.scooter.akio3594.com
ホームURL: https://50-125.scooter.akio3594.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-modernblack/style.css
WordPressバージョン:5.6
PHPバージョン:7.4.4
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.2.5.4
カテゴリ数:4
タグ数:0
ユーザー数:2
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:1751バイト
functions.phpサイズ:2315バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:5
Auto Post Thumbnail:0
Retina:1
ホームイメージ:
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:1
WEBフォントLazy Load:1
----------------------------------------------
利用中のプラグイン:
----------------------------------------------

問題のあるURL

https://50-125.scooter.akio3594.com/

 

お世話になっております。

質問の件なのですが、Twitterを記事に埋め込むとページスコアーが異常に低くなります。

現在メインで運営しているブログ、サブドメインで運営しているブログの2つあり、テーマは両方ともcocoonを使用させていただいています。

※cocoon標準の高速化設定や、プラグインの設定はサーバーの設定は同じです。

以下ページ速度の比較。

メインで運営しているブログ(独自ドメイン)

※トップページ

・モバイル60点
・パソコン90点ほど
 
サブドメインで運営しているブログ
※トップページ

・モバイル27点
・パソコン43点
 
ちなみに、高速化設定やプラグインを全て無効化しても、サブドメインブログはスコアーにほぼ変化がありませんでした。
 
 
スコアー改善のためにやったこととしては
・「テキスト圧縮の有効化」をhtaccessで編集。
・footer.phpでTwitterの読み込みを遅延
・cocoon設定の高速化に全てチェック
・画像圧縮系プラグイン(パンダ)を有効化、一括最適化
 
上記の対処をしましたが、あまり効果ありませんでした。

PageSpeed Insightsにて、以下のURLが記載されていいました。

 
URL /embed/embed.vendors~ondemand.Tweet.c58614d….js
(platform.twitter.com)
 
Twitter関連だと思い、
・Twiiterのasyncを削除し非同期読み込み
・Twitterのscriptタグの削除
 

上記を試しましたがスコアーは改善されず...

 
 
Twitterを埋め込むとスコアーが悪くなるのは承知ですが、ここまで大幅にスコアーを落とす原因になるのでしょうか?

何かの不具合でこうなっているのか気になり質問させていただきました。

 
 
最後にPageSpeed Insightsの画面画像を添付しています。

   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16479
 

Twitterを埋め込むとスコアーが悪くなるのは承知ですが、ここまで大幅にスコアーを落とす原因になるのでしょうか?

埋め込み用のスクリプトサイズは異常に重いので、その可能性は十分にあると思います。
不具合でそうなっているとはちょっと考えづらいです。


   
 ak
(@ak)
Active Member
結合: 3年前
投稿: 12
Topic starter  

わいひらさん返信ありがとうございます。

 

埋め込み用のスクリプトサイズは異常に重いので、その可能性は十分にあると思います。
不具合でそうなっているとはちょっと考えづらいです。

 

では、対策としてはTwitterの埋め込みを減らす以外はないのでしょうか?


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16479
 

では、対策としてはTwitterの埋め込みを減らす以外はないのでしょうか?

埋め込みの数が一つだったとしても、Twitterのスクリプトを読み込まないと、Twitterが正常表示されないのでスクリプトが読み込まれる事に関しては同じかと思います。
スクリプトを読み込ませないと、表示は速くなりますが、それだとツイート自体が正常表示されないので、意味はなくなります。

なのでTwitterの埋め込みを表示したいのであれば、しょうがない仕様と思うしかないと思います。
「埋め込みを利用しないで表情を速くする」か「遅くはなるけどツイートの埋め込み表示をする」のトレードオフかと思います。


   
 ak
(@ak)
Active Member
結合: 3年前
投稿: 12
Topic starter  

返信ありがとうございます。

なるほど、Twitterを埋め込むと遅くなるのはやはり仕方ないのですね。

このことを踏まえて、いろいろと考えた結果、Twitter埋め込みではなくツイッタ風にすることでかなり高速化することができました。

参考URL: https://50-125.scooter.akio3594.com/

具体的なスコアーは以下。

・モバイル27点→モバイル77点
・パソコン43点→パソコン94点
 
ここまで改善できました。
 
私一人の力ではなく、アドバイスもらったり先輩方の記事を参考にしました。

cocoon利用者向けに、Twitter埋め込みが遅くなるのを改善した経緯を記事化しようと思うのですが、わいひらさん的には、こういった記事を書いても大丈夫でしょうか?
cocoonは素晴らしいテーマでお世話になっているので、そのことをお伝えした上で記事を書かせていただこうと思っています。
 
 


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16479
 

このことを踏まえて、いろいろと考えた結果、Twitter埋め込みではなくツイッタ風にすることでかなり高速化することができました。

高速化を主眼に置く場合、今のところそれしか方法はないかもしれません。

cocoon利用者向けに、Twitter埋め込みが遅くなるのを改善した経緯を記事化しようと思うのですが、わいひらさん的には、こういった記事を書いても大丈夫でしょうか?

全然問題ないです。自由にしていただいて大丈夫です。
というよりむしろ、ユーザーさんのトラブルシューティング記事があると、検索から多くの方が解決方法を見つけられる確率が高くなり、僕がフォーラムで答える頻度も相対的に下がると思うので、大歓迎です。
ありがとうございます。


   
 ak
(@ak)
Active Member
結合: 3年前
投稿: 12
Topic starter  

ありがとうございます?

では、書かせていただきます。

また、記事が出来たらわいひらさんに報告しますね。


   
(@alejandro)
Eminent Member Registered
結合: 5年前
投稿: 27
 

Twitterのタイムラインや個別ツイートの埋め込みを改善する方法かと思い、読ませていただきました。タイムライン風のスタイルを適用させて表示することで解決に至ったようですが、気になったのが権利問題や、Twitter社とのサービス利用規約の部分です。

Twitter社が指定する埋め込み方法(API使ったりしたもの)じゃなくても大丈夫なのでしょうか?

最新の利用規約からは、判断しかねたので質問させていただきました。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16479
 

引用方法は人それぞれなので、それは規約を読んでそれぞれで判断していただくしかないかもしれません。
これは引用の範囲内なのか、それともTwitter規約に反してしまうのかは、自信の判断になると思います。
僕はTwitterの関係者ではないので、正確なことはわかりません。
どうしてもという場合は、Twitterに問い合わせて判断を仰ぐのが確実かと思います。


   
(@alejandro)
Eminent Member Registered
結合: 5年前
投稿: 27
 

わいひらさん、ありがとうございます。

やはりそうですよね。判断できないことを無理にアレコレせず、今までどおりのTwitter社が提供する方法でツイートの引用もしくは転載をしていきます。


   
わいひら reacted
(@アキ)
Active Member
結合: 3年前
投稿: 12
Topic starter  

あれはんどろさんこんにちは!

確かに他人のツイートを引用するとなると、この方法では微妙ですね。

私は、あくまで自分のツイートのみTwitter風にしています。

参考になるかわからないですが、コメントさせていただきました。


   
わいひら reacted
共有:

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

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

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

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

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

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

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

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