Page Speed Insightsの改善方法

mrsmith11
(@mrsmith11)

2年、 8ヶ月前

Page Speed Insightsの改善方法

ひとつ、woocommerceで、

とてつもなく重いサイト

があるので、表示スピード等を改善したいです。

Page Speed Insightsは、なんと、

モバイル１０点
パソコン３８点

という驚異的に遅いサイトです。

トップページに大きな画像スライダーを配置しているのが問題でもあります。
（これは非表示すれば済む話なので、どうでもいいです）

もし下記の項目を改善できた場合、

テーマやプラグインのアップデートで、
改善した部分がまた元に戻ってしまうのでしょうか？
（その都度プログラマーを雇う必要がありますか？）

最低でも、モバイル５５点、パソコン８５点はほしいです。
woocommerce自体重いと思いますので、難しいかもしれませんが、
可能な限り、理想値に近づけたいです。

インストールしているプラグインも最低限のものにとどめているつもりです。
（絶対に必要なものしかインストールしておりません。）
（多いとは思いますが・・・）

すでにやっていることは、Jetpackのプラグインで、

サイトアクセラレーターを有効化
　画像の読み込みをスピードアップ
　静的ファイルの読み込みをスピードアップ
画像の遅延読み込みを有効にする

です。

テーマは以下です。

Shopstar!バージョン: 1.1.04
作者: Out the Box

以下、改善したい項目です。

First Contentful Paint
5.4 秒

Speed Index
12.7 秒

Largest Contentful Paint
15.0 秒

Time to Interactive
19.1 秒

Total Blocking Time
2,980 ミリ秒

Cumulative Layout Shift
0.25

使用していない JavaScript の削減
4.95 s

レンダリングを妨げるリソースの除外
2.69 s

次世代フォーマットでの画像の配信
2.1 s

最初のサーバー応答時間を速くしてください
1.85 s

使用していない CSS の削減
0.75 s

JavaScript の最小化
0.15 s

メインスレッド処理の最小化 16.3 秒

ウェブフォント読み込み中のテキストの表示

第三者コードの影響を抑えてください第三者コードによってメインスレッドが 2,220 ミリ秒間ブロックされました

一部のサードパーティリソースはファサードで遅延読み込みできます。利用可能な代替ファサード: 1 件

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

静的なアセットと効率的なキャッシュポリシーの配信 106 件のリソースが見つかりました

JavaScript の実行にかかる時間の低減 4.7 秒

過大なネットワークペイロードの回避合計サイズは 3,477 KiB でした

過大な DOM サイズの回避 889 件の要素

ちなみに、

最初のサーバー応答時間を速くしてください
1.85 s

は、サーバーを変える以外にどうにもならないんですよね？

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

7件の返信を表示中 - 1 - 7件目 (全7件中)

shokun0803
(@shokun0803)

2年、 8ヶ月前

@mrsmith11 さん、こんにちは。

PageSpeed Insightsについての質問は、厳密にいえばWordPressの質問ではないため、回答が付きづらいのだと思います。おそらくですが、Googleのフォーラム等でご質問されるのがよろしいかと存じます。

で、WooCommerceをご利用されているようですので、ページキャッシュを使うのが難しい環境かと思われます。ですので、ページキャッシュを必要としない高速化が必要になりますので、現在の環境のみでどうにかするのは相当な技術力が必要です。

そして、記載されている内容から少しだけ気になることがあるとすれば、もしかしてですが、広告を表示されているか、商品等の情報が外部から読み込まれていたりしませんでしょうか。
通常広告はJavaScriptを利用していることが多く、しかも外部サーバーからデータを読み込んでくる仕様上、PageSpeed Insightsでは致命的な遅延を発生させます。
外部から商品情報等を読み込んで（よくあるアフィリエイト等）いたりすれば、広告同様致命的な遅延を発生させます。
通常広告等は外せないため、特殊な方法を検討するか該当箇所の遅延を諦める＝PageSpeed Insightsの点数をある程度諦めることにもなります。

WooCommerceを使ったWordPressサイトの宿命的な部分でもありますので、サイトの収益性などに危機感を感じるのであれば専門のWordPress高速化事業者等を探されて対策されることも検討されてください。

ご参考になれば。
トピック投稿者 mrsmith11
(@mrsmith11)

2年、 7ヶ月前
お世話になります。

なるほど、Googleのフォーラムがあるのですね。
そちらで質問してみます。ありがとうございます。

１．
自社のWoocommerceなので、他社の広告等は表示してないはずですが、なぜか画像等がそのような表示方法になっているということでしょうか？

また、商品等の情報が外部から読み込まれているということも考えにくいです。
一応、Jetpackのプラグインで、「サイトアクセレイター」をオンにしているので、画像やcssはwordpress.comのサーバーから読み込まれているとは思いますが。

２．
woocommerceがキャッシュを使うのが難しいとのことですが、以下のJetpackのプラグインで、「サイトアクセレイター」を使用しているのですが、これはwoocommerceでは意味がないということでしょうか？
（それとも、wordpress.comのサーバーから配信されているが、キャッシュはされないということでしょうか？）

混乱していて申し訳ございませんが、よろしくお願いいたします。
```
パフォーマンスおよびスピード

Jetpack で画像を最適化し、WordPress.com のサーバーによるグローバルネットワークから画像と静的ファイル (CSS や JavaScript など) を配信するようにすることで、ページの読み込みを高速化できます。

サイトアクセラレーターを有効化

画像の読み込みをスピードアップ
静的ファイルの読み込みをスピードアップ

画像の遅延読み込みによって、サイトの速度が向上し、よりスムーズな閲覧エクスペリエンスが実現します。画像は、まとめてではなく、訪問者が画面をスクロールダウンすると読み込まれます。

画像の遅延読み込みを有効にする
```
shokun0803
(@shokun0803)

2年、 7ヶ月前

mrsmith11さん、こんにちは。

１のご質問に関しては、サイトを見ているわけではないので、可能性としてお話していることになります。
ご自身のサイトで可能性があるようであれば確認してみてください。

２のご質問に関しては、

woocommerceがキャッシュを使うのが難しいとのことですが、以下のJetpackのプラグインで、「サイトアクセレイター」を使用しているのですが、これはwoocommerceでは意味がないということでしょうか？

正確には「キャッシュを使うことが難しい」のではなく、「ページキャッシュを使うことが難しい」です。
ページキャッシュとは文字通り表示されたそのままを静的なファイルとしてキャッシュし、ユーザーに表示します。
WooCommerceのようなユーザーごとに表示が異なる可能性のあるサイトの場合、ページキャッシュを使ってしまうといろいろと不具合が生じてしまうため、ページキャッシュを使うことは難しくなります。
例として、商品が売れたのにページキャッシュが残っているために在庫数が減らないであったり、ユーザーがログインしてマイページを見ているURLが他のユーザーでも同じURLのために、ユーザーの個人情報が他のユーザーにも表示される、などが考えられます。

Jetpackのサイトアクセラレーターは画像をキャッシュしてCDN配信するものですので有効になっていると考えられます。

数値を見る限りは何らかのJavaScriptがレンダリングを阻害しているようです。広告が使用されていないのであれば、プラグインやテーマでJavaScriptを使用して何らかの処理を行っている箇所が必ずあるはずです。ちなみにWordPressはデフォルトでjQueryを読み込むと思いますが、これはPageSpeed Insightsとしては重いと判断されます。しかしWordPress自体がjQueryを使用しているのでなかなか外せないと言うのが現状です。

「最初のサーバー応答時間を速くしてください」に関しては、サーバーのスピードではなく、そのページを表示した際にWordPressが実行したPHPの処理内容でレスポンスタイムが変わってきます。
WooCommerceであれば、サイトトップには複数の商品を並べているかと思いますが、その商品一覧を出すために、PHPでそれなりの処理を行っているでしょうから、嫌でもサイトトップのPageSpeed Insightsの数値は遅くなるはずです。試しに個別の商品ページ（もちろん他のお勧めとかいろいろ載ってなければですが…）でPageSpeed Insightsをかけてみると数値が変わると思います。

高速化の基本は「レスポンスタイム」と「レンダリング」を最適化することです。
ご参考になれば。

ifnoob
(@ifnoob)

2年、 7ヶ月前

利用しているサーバーにもよりますが、WooCommerceデフォルトテーマのストアフロントでは、PageSpeed Insights スコアはオールグリーンとなります。例: モバイル=90以上・ディスクトップ=100スコア
https://ja.wordpress.org/themes/storefront/
WooCommerce利用のテーマが遅くしている様で、汎用テーマではなくWooCommerce専用テーマの利用が好ましい。WooCommerceの場合商品数が多くても、フロント側の影響は少ないですが、商品バリエーションが複数あるの場合は遅くなることがあります。また、PHPの利用メモリを300MB以上あれば特に問題はないかと。

skillsharejp
(@skillsharejp)

2年、 7ヶ月前

高速化を専門としています。

>テーマやプラグインのアップデートで、改善した部分がまた元に戻ってしまうのでしょうか？

様々な手法がありWordPressだと高速化をプラグインで調整する事が多いです。その場合テーマファイルに変更を加えない形となるので更新しても対策がいきなり全部損なわれるという事はありません。

一方でファイルに手を加える手法を行う業者もいるのでその場合は更新しても大丈夫なのか確認してください。

また更新対象のテーマ及びプラグインの仕様変更で高速化設定を再調整しなければならないという可能性は十分あります。高速化は1回で終わるという考えではなく、サイト成長やアクセス状況に合わせてしっかり長く付き合うものです。

まあご質問のサイトはもっと高速化の余地がありますがここはボランティアフォーラムですし、そういった部分はしっかりお金を払って業者に対応してもらうのが良いです。特にWooCommerceは生半可な知識で高速化しようとすると大変です。

トピック投稿者 mrsmith11
(@mrsmith11)

2年、 7ヶ月前

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

あれから暇な時にいろいろ試行錯誤してカスタマイズしているのですが、

モバイル　60点
PC　90点

までもってくることができました。

しかし、どうしてもモバイルがこれ以上数値が上がりません。

気になったことは、PCだと

使用していない CSS の削減　0.28 s

と表示されるのに対して

モバイルだと

使用していない CSS の削減　1.65 s

と表示されます。

これはなぜでしょうか？

モバイルとPCでCSSが使い分けられているのだと思いますが、

そもそもモバイルで使わないCSSをモバイル表示の時は読み込ませない設定にしたり、
そもそもPCで使わないCSSをPC表示の時は読み込ませない設定にしたり

などするプラグインなどはあるのでしょうか？
（jsも含む）

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

ifnoob
(@ifnoob)

2年、 7ヶ月前

多分このプラグインがそれに近いかと思われますが、何をしているのか完全に理解していないと、フロント側はレイアウトが崩れる等正常に動かなくなります。
https://ja.wordpress.org/plugins/wp-asset-clean-up/
また、此の類のプラグインを乱用するとサーバー側の負担が大きくスコアは下がります。
PageSpeed Insightsのディスクトップとモバイルの使用していないCSSは、モバイル時にディスクトップとしてのCSSが読み込まれている為そうなります。レスボンブルの場合これの制御はかなり大変です。
PageSpeed Insightsでは詳細が変わりにくいので、何故サイトが遅いのか以下のサイトにて研究して下さい。
https://gtmetrix.com/
(WordPress対応)

7件の返信を表示中 - 1 - 7件目 (全7件中)

トピック「Page Speed Insightsの改善方法」には新たに返信することはできません。