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

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

共有:
通知
すべてクリア

AMP表示の高速化!?

14 投稿
4 ユーザー
12 Reactions
1,236 表示
 tk
(@tk)
Active Member Registered
結合: 7年前
投稿: 11
トピックスターター  

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

AMP表示に関して、ちょっとわからないところがあって質問させてください。

AMP表示の際は、amp-header.phpの中で、get_the_singular_content()で全てのページ内容を取得して、
AMP用に整形(convert_content_for_amp)していると思うのですが、

get_template_part('tmp/single-contents')で、もう一度ページの内容を取得しているのは何故でしょうか。
 
'the_content'のadd_filterなどは2度呼ばれたりと、冗長な気もするのですが、何か訳あってのことでしょうか。
 
キャッシュなど未使用で、非AMPページとAMPページの表示速度を比べると、AMPページのサーバーレスポンスが倍くらい遅いようです。  (私の環境だけかもしれませんが、、)
 
convert_content_for_ampで生成したAMP用のページ内容をそのまま、get_template_part('tmp/single-contents')で使用できれば、素人考えながら高速化できるのではないかと思いました。
 
自分のスキルでは、ソースを追っても、なぜページ内容を2度取得しているかはわからず、質問させていただいた次第です。
 
お手数おかけしますが、よろしくお願いいたします。
 

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

すべての指摘箇所をGitHubの行のURLでリンクいただいてよろしいでしょうか。
https://github.com/yhira/cocoon
複数の該当箇所があるとどちらの事を言っているのかわからない場合もあるので。

AMP表示の際は、amp-header.phpの中で、get_the_singular_content()で全てのページ内容を取得して、
AMP用に整形(convert_content_for_amp)していると思うのですが、

例えば上記のget_the_singular_content()だったら以下のURLみたいな。
https://github.com/yhira/cocoon/blob/6da2f6e9aebee9157f82d4da176708b672b1785e/tmp/amp-header.php#L32

キャッシュなど未使用で、非AMPページとAMPページの表示速度を比べると、AMPページのサーバーレスポンスが倍くらい遅いようです。 (私の環境だけかもしれませんが、、)

ページのhtmlを多数置換処理しているので、初回は遅いです。
なのでその代わりに2回目以降はキャッシュが利用されるようになっています。
遅いとしたら、ほぼこの置換処理のせいです。
それに比べたら、本文が2回呼び出されているとかは全く関係ないほど処理に時間がかかっていると思います。

convert_content_for_ampで生成したAMP用のページ内容をそのまま、get_template_part('tmp/single-contents')で使用できれば、素人考えながら高速化できるのではないかと思いました。

ほとんど変わらないと思います。
変わっても0.01秒かそこらくらいではないのかなと思います。
正しく計測してわけではありませんが作成していた時の体感として、AMPページ表示に時間かかっているのは、ほぼconvert_content_for_ampが95%以上のように思います。


   
tk reacted
返信引用
 tk
(@tk)
Active Member Registered
結合: 7年前
投稿: 11
トピックスターター  

素早い返信ありがとうございます ? 

説明が下手ですいません。

私のサイトでは、記事を表示する際に、記事内容の下に、カスタムフィールドを加工して表を追加しています。

この表を追加するのに、add_filterの'the_content'きっかけで処理を行っています。

AMP表示の際は、下記のthe_contentが2回呼び出されているので、カスタムフィールドを加工する処理が2度行われており、時間のロスになっているのかなと、思った次第です。

https://github.com/yhira/cocoon/blob/29e524a64048c150ccf51bdf6fa032bf5e16f9f2/tmp/content.php#L124

そこで、下記の場所の1回目で呼び出して生成したAMP用の$all_contentを利用できないものかと質問させていただきました。

https://github.com/yhira/cocoon/blob/6da2f6e9aebee9157f82d4da176708b672b1785e/tmp/amp-header.php#L33

 

やはり、高速化を図るには、convert_content_for_ampをなんとかするのが良いのでしょうか。preg_replaceが大量使用されており、使っていない置換はコメントアウトするとかが良きでしょうか。

ちなみに、

AMP表示の高速化をしたいと思ったのは、最近、Googleサーチコンソールのモバイル(AMP)表示の評価が日に日に下がっていったことがきっかけでした。(添付した図のような感じです。)

理由が分からなくて、特にサイトを変更したわけでなく、Googleの評価基準が変わったことによって評価が下がっただけかもしれませんが ? 

表示を早くすれば、評価も上がるかと思い、この質問に至りました。

以上、よろしくお願いいたします。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17398
 

ご提示いただいた2箇所に関しては、個人的にはそんなにタイムロスになっているとは思えないです。
$all_contentはページ全体のHTMLコードであり、the_contentは本文のみのHTMLコードです。
$all_contentを利用すると、グローバル変数を使う必要が出てきて、コードが複雑になりますし、$all_contentから本文を正規表現で抽出する必要も出てきて、速さ的にはどっこいどっこいかと。
加えて、2回目呼び出し以降はキャッシュが読み込まれるので、2回目以降の速さは変わりません。

やはり、高速化を図るには、convert_content_for_ampをなんとかするのが良いのでしょうか。preg_replaceが大量使用されており、使っていない置換はコメントアウトするとかが良きでしょうか。

どちらかと言うとこっちの対応した方が、速くはなると思います。
とはいえ、そこまでしてAMPを利用するSEO的優位性もないような気もします。AMPだからといって上位表示される訳でもないので。

AMP表示の高速化をしたいと思ったのは、最近、Googleサーチコンソールのモバイル(AMP)表示の評価が日に日に下がっていったことがきっかけでした。(添付した図のような感じです。)

これに関しては、実際のページをPageSpeed Insights等でチェックしてみないと詳しいことは分かりかねます。
フォーラムの案内にありますように、実際のページのURLを提示して頂ければ幸いです。
とはいえ、テーマ側のプログラムを変更していない(実際に最近は変更していない)のであれば、処理は同じなので急にそんなに評価が変わるとはちょっと考えにくいです。
Google側の評価基準が変わったか、サーバー側の問題も考えられます。
とはいえ、実際のページを見ていないので詳しいことはわからないです。


   
tk reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17398
 

グラフはGoogleサーチコンソールのページエクスペリエンスのことですよね?
僕の運営している他のサイトでは、特に変わっていないのでちょっと何が原因か今んとこわからないです。


   
tk reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17398
 

他のサイトでも、こういうのはあったけど最近落ちているということはないですね。
なので、Googleの評価基準が同時期に変わったのであれば、同じプログラムを使用している僕のサイトも落ちると思うので、評価基準が変わったというのでもなさそう。


   
tk reacted
返信引用
 tk
(@tk)
Active Member Registered
結合: 7年前
投稿: 11
トピックスターター  

ご丁寧な回答ありがとうございます。

色々納得いたしました。

サイトに関しては、知り合いのサイトなので、ここでは提示を控えさせていただきたいと思います。すいません。

サーチコンソールの具体的な数値を見ていると、

モバイルのLCPの問題:2.5秒越が原因で「改善が必要」となり「良好」の緑の棒グラフが下がっているようです。
数値も、2.6秒や2.7秒と微妙に2.5秒を超えていました。

サイトのテーマ自体はいじっていないのですが、記事の投稿はしており、記事数が増えたことやサーバー側に何か変化がなかったかなど、別方向で調べてみます。

こんな素人な質問に丁寧にお答えいただきありがとうございました。

 

ps.また寄付企画の第2弾ありましたら、参加させていただきますのでよろしくお願いいたします。


   
返信引用
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

一度 PageSpeed Insights やデベロッパーツールの Lighthouse で計測するのがいいかもしれません。

※ Lighthouse は、拡張機能の影響を受けないシークレットモードでの計測がおすすめです。

計測結果から、サーバーの応答時間が長いのか、何かがレンダリングをブロックしているのか、Web フォントの読み込みによるものなのかなど、どこに問題があるのかが分かります。

この投稿は3年前 2回ずつAkiraに変更されました

   
tk and わいひら reacted
返信引用
 tk
(@tk)
Active Member Registered
結合: 7年前
投稿: 11
トピックスターター  

Akira様

ご教授いただきありがとうございます ? 

PageSpeed Insaightsを見ているのですが、「最初のサーバー応答時間を速くしてください。」とampページの表示(携帯電話)の時だけ表示されています。

デスクトップであれば、そこは天下のcocoonなのでパフォーマンスは96点とか出ています。

携帯電話の際は、低速 4Gでのエミュレーションによる測定なので、パフォーマンスも78点と微妙です。

デベロッパーツールのネットワークを見てみると、ampページの表示の際は、Waiting(TTFB)が長いようです。

わいひろ様もおっしゃっているように、HTMLをAMP用のタグに変換する関数で時間がかかっていると思われます。

推測ですが、大量にページがあるサイトなので、サーチコンソールのクローラー(!?)がサイトを訪れるときは、キャッシュが作られていない状態のAMPページにアクセスして、速度が遅いと判断されていると思われます。

対策として、サーバーのグレードを上げようかと考え中です。(他力本願 ? )

 


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17398
 

素のCocoonならAMP化しなくてもPageSpeed Insightsは94点ぐらいはいきますよ。
これに対して、広告やプラグインのスクリプト、SNSの埋め込み、外部画像などが追加されて、通常はどんどん遅くなります。
詳しくは、先日書き込みがあったこちらに書きました。
https://wp-cocoon.com/community/postid/60191/
スコアが78点だったら、かなり良い方のように思います。

とりあえずAMP化しなくても素ならPageSpeed Insights94点はいくので、前回も書きましたが無理してAMPを利用する必要はないと思います。

わいひろ様もおっしゃっているように、HTMLをAMP用のタグに変換する関数で時間がかかっていると思われます。

先日の後、思い出しました。
よくよく思い出したら、HTML→AMP変換にそこまで時間は掛かっていません。
それ以上にかかっているのは、大量にあるCSSから不要なコードを取り除く処理です。
これがかなり時間がかかる。とはいえ、不要なCSSを除外しないとCSSのサイズエラーになるのでしないわけにもいかず…。


   
tk reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17398
 

とはいえ、スコアは94でもLCPは2.6秒と0.1秒遅いですね。


   
tk reacted
返信引用
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

非 AMP ページ(通常ページ)のモバイルの計測結果では、「最初のサーバー応答時間を速くしてください。」とは表示されないと考えていいでしょうか。

であれば、2 つの選択肢が頭に浮かびました。

① AMP を無効にする

AMP を無効にします。現在の AMP は、Web 開発者のための技術です。サイト運営者が、無理をしてまで AMP を有効にする必要はありません。

AMP がサイト運営者にもたらすメリットは、サーバー障害が起きてもサイトが完全に停止しにくい、その環境をお金をかけずに作れるぐらいだと思います。

② キャッシュの保存期間を長くする

1 日になっているキャッシュの保存期間を長くします。該当箇所は下記リンクの部分です。

https://github.com/yhira/cocoon/blob/master/lib/amp.php#L1074

このキャッシュのおかげで、2 回目(2 人目と言ってもいいかも)以降は、convert_content_for_amp() などの関数は動きません。

※ ログインしているサイト管理者には、キャッシュは無効になっています。

ただ、1 日経てばキャッシュはなくなり、再び 1 回目(1 人目)の表示の際に convert_content_for_amp() などの関数が動きます。そのため、キャッシュの保存期間を長くするのが有効かもしれないと思いました。どのページにも、まんべんなくユーザが訪れているサイトに有効かもしれません。

※ キャッシュの期間を長くする場合は、下記リンクのコードの追加が必要かもしれません。

https://notepad.pw/share/21lt2oacq

参考:管理者がページを書き換えたときのみAMPキャッシュが更新される


   
tk and わいひら reacted
返信引用
さる子
(@saruko)
Reputable Member Moderator
結合: 5年前
投稿: 482
 
投稿者:: @akira

AMP を無効にします。現在の AMP は、Web 開発者のための技術です。サイト運営者が、無理をしてまで AMP を有効にする必要はありません。

Akiraさんと同意見です。AMP化のメリットとデメリットについて一度考えて(サイト管理者の方に提案して)みるのもいいかと。メリットよりデメリット、主にAMP化する手間のほうが大きいなら無理にAMP化をしなくていいと思います。

 

最近iPhoneのSafariで拡張機能が使えるようになりましたが、AMPページを強制的に通常ページにリダイレクトする拡張機能もあるようです。ダウンロード数も多いようです。AMPページが好きではない人も一定数いるようです。(日本国内の普及率はわかりませんが…。

AMPページを通常のWebページにリダイレクトしてくれるiOS 15のモバイルSafari対応の機能拡張「AMP Shockwave」がリリース。 https://applech2.com/archives/20211004-amp-shockwave-for-ios15-safari-extension.html

 

企業のニュースサイトはAMP化のメリットが大きそうですが、個人のサイトや小規模のサイトはあまりAMP化のメリットはなさそうだな…というのが個人の意見です。


   
tk and わいひら reacted
返信引用
 tk
(@tk)
Active Member Registered
結合: 7年前
投稿: 11
トピックスターター  

わいひろ様、Akira様、さる子様

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

なるほど、CSSの除去で遅くなっているのですね。早速不要なcssを削ってみて、少しでも変換時間が短くなるように試してみます。

また、みなさまのご提案のAMPの無効化も検討してみます。

非 AMP ページ(通常ページ)のモバイルの計測結果では、「最初のサーバー応答時間を速くしてください。」は表示されていないので、AMPページの無効化で問題は解決すると思います。

ただ、SEO的にどのような変化があるのかも気になるところなので、サイトの管理者と話し合いながら、実験的に、AMPの無効化にも挑戦してみます。

現状、サイトへの流入の3割(約35万PV)ほどがAMPページなので、いきなり変更は少しリスクがあるような気がしました。

また、Akira様に教えていただいた、キャッシュ時間を長くするというのも試してみようと思います。

 

また、同じようなこと悩んでいる方のために、メモを残しておいます。

LCPを0.3秒速くしたいために、サーバーを変更してみました。

wpX Speed w4プラン →  ConoHa WING リザーブド2GB

狙いとしては、ConoHaで「W3 Total Cache」を動かして、データベースキャッシュとオブジェクトキャッシュが活かせることです。(wpXでは、キャッシュプラグイン「W3 Total Cache」が正しく動かないようです。)

で、結果は、

今のところ、特に変化なしです ? 
変化あれば追記します。
(3月8日に変更したばかりなので、これから変化があるかもです。)


   
返信引用
共有:

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

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

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

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

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

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

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

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