WEBサイトの初回読み込みの速度が遅い

Question

WEBサイトの読み込みの速度が、12〜13秒ほどかかっていて解決策を探してます。

制作したWEBサイトの読み込み読み込み速度がものすごく遅いので、Chromeの検証ツールでみるとHTTPリクエストがあってから Waiting で11秒ほどかかっていて、これをどうにかしたいのです。今までここまで時間がかかる事案がありませんでした。なにが理由なのかがわかりません。
現状は下記のような状態です。

3.6ms / Blocking
19.6ms / DNSLookup
216.3ms / Connecting
114.2ms / SSL
0.7ms / Sending
10.5s / Waiting
5.8ms / Receiving

PageSpeed Insights では進捗の80%ほどでエラーとなります。

サイト構成
・レンタルサーバー
・SSL（共有）
・WordPress

試したこと
WordPressのプラグインを全て停止
読み込み画像の圧縮

追加で画像添付いたします。

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

Comments

[mather]

どのコンテンツのロードが遅いのか具体的に示してください。
HTMLの読み込みが遅いのですか？
また、タイトルに「初回読み込み」とありますが、2回目以降は全く遅くないのでしょうか？

[tabuu]

静的なHTMLや画像でも同様に時間がかかりますか？
Wordpressとのことですが、全てのURLで同様に時間がかかりますか？

[ham]

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

mather様 ＞初回と記述いたしましたが、2回目以降も10秒ほどかかります。元質問へ画像を添付させていただきました。HTML部分だと思われますがいかがでしょうか。

tabuu様 ＞ 静的なHTMLの読み込みを試しておりませんでした。また、現状でサイト内リンクのURLも同様に時間がかかります。

Answer 1

正直10秒以上になるのはよほど画像や動画だらけのページでもない限り
ファイルの重さよりは処理の重さの方に原因がありそう

10.5s / Waitingってことなんでやっぱりサーバーサイドに原因ってことかな

サーバーサイドの場合はDBのリクエストが原因なことが多いので
query-monitorでDBのリクエストにかかってる時間を調査

サーバーサイドが原因の場合にあるもう一つの可能性が
セッション変数の肥大化によるメモリーのオーバーフロー

一度セッション変数を破棄してみて改善するかを確認、
それで改善したらセッション変数を適宜片付けられていないところが無いかチェック

しかし、PageSpeedInsightではセッション変数は関係ないのでまあこっちの可能性は低い

Comments

[ham]

KazuhiroHatano様
ご回答ありがとうございます。
アドバイスいただいたquery-monitorを入れましてサマリーをみたところ下記のような状態です。しかし、query-monitorを入れたのが初めてでどこを見ていいのかわかっていません。

この場合、見るポイントはどこになりますか。
よろしくお願いいたします。

Page Generation Time 10.519
Peak Memory Usagu 9,482 kB
Database Query Time 0.0160
データベースクエリー Total: 25
Object Cache 96.2% (969hits,38misses)
( 赤文字)!使用されていない外部オブジェクトキャッシュ
( 赤文字)The APCu extension PHP is installed but is not in use by WordPress
Opcode cache in use: ZendOpcache

※PHPエラーが5つ出ますがレベルは注意レベルです。
※クエリ項目で重複クエリが(1)とあり、潜在的脅威にWP_Query->get_posts() とあります。

[KazuhiroHatano]

Page Generation Time が異常ですね

Database Query Time 0.0160 ならDBの問題ではなさそう
Peak Memory Usagu 9,482 kBだからセッション変数の肥大とか変数作りすぎとかもない

PHPの処理の問題で遅くなってるとメモリーの負荷も相応に高くなるものなんで
可能性はなくはないにしろ、これはPHP側じゃないかもしれんですね

SEOのサービスとかSNSとの連携のために
file_get_contentsとかcurlとかでAPIへの問い合わせの応答待ちしてるとことかないですか

[ham]

SEO、SNSとの連携による応答待ちなど、今後も参考とさせていただきます。
ありがとうございました。

Answer 2

CSSやJSの非同期読み込みや記述のインライン化をしてみてください。
念のためにバックアップはしっかり取っておいてください。

宣伝っぽくなりますがそれで自分のホームページの読み込み速度が1/5まで改善しました。

Comments

[ham]

yoshi0819様
ご回答ありがとうございます。
CSSやJSの非同期読み込み、記述のインライン化を試してみようと思うのですが、こちらの状況的にすぐには作業できなそうですので取り急ぎお礼申し上げます。

Answer 3

ワードプレスの問題の切り分けとして、下記を行えばだいたい把握できます。
今回はTTFBなので、1.で切り分けができるかと思います。

1.　テーマをTwenty Nineteenなどのデフォルトテーマにして計測する
→レンタルサーバーの問題なのか、ワードプレスの問題なのかの切り分けができます。

2.　Chromeデベロッパーツール（検証モード）などでエラーが出ていないか確認する
→テーマまたはプラグインに問題があるかの切り分けができます。

3.　プラグインを全部外して計測する
→プラグインが問題なのか、テーマが問題なのかの切り分けができます。
→プラグインを全部外して早く表示されるようなら、プラグインをひとつずつ有効化して、どのプラグインに問題があるのか確認します。

4.query-monitorプラグインの実行
→データベースのリクエストにかかってる時間が計測できるので、ワードプレスのクエリの問題かどうかの切り分けができます。

5.W3C(https://validator.w3.org/)で確認する。
→こちらでHTMLの問題点を割り出します。

Comments

[ham]

zilch様
ご回答ありがとうございます。
お礼が遅くなりすみません。

状況が改善いたしまして、いただきましたアドバイスは今後の参考とさせていただきます！
ありがとうございました。

Answer 4

10.5s / Waiting は流石に異常です。
.htaccessのカスタマイズは行っていないでしょうか。
.htaccessのカスタマイズの失敗により、
速度を大幅に低下させてしまうケースがあるため
心当たりがありましたら元に戻すとなおる可能性があります。

Comments

[ham]

yasutomi様
ご回答ありがとうございます。
ご指摘の.htaccess の記述を確認しまして、記述を変えてみましたが改善しませんでした。
下記に試したコードを転記いたします。

何かおかしな点がありましたらご指摘いただけると助かります。
よろしくお願いいたします。

変更前
----------------------------------------------------
RewriteEngine on
RewriteCond %{HTTP_HOST} ^www.domain.com
RewriteRule ^(.*)$ https://domain.com/$1 [R=301,L]

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

#####wpsecurity_login#####
SetEnvIf Request_URI ".*" WpLoginNoLimit
#####end:wpsecurity_login#####

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE

BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|ico)$ no-gzip dont-vary

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/js
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-woff
AddOutputFilterByType DEFLATE application/x-font-opentype
</IfModule>
----------------------------------------------------

変更後
----------------------------------------------------
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf
</IfModule>

[KazuhiroHatano]

日本語フォントを大量にサーバーにgzip圧縮させてる状態とかだったらそこが原因かもですね
svgも物によってはやばい重さのやつがいるし

一回DEFLATE全部なしにしてみるのも試してみては

[ham]

ご回答ありがとうございました。
改善した方法が曖昧になってしまいましたが、個人的には .htaccess の何かが悪かったのかな、、と考えております。
gzip圧縮、svgも今後の参考とさせていただきます。

Answer 5

みなさま、ご回答ありがとうございました。

おかげさまで12、3秒かかっていたサイト読み込みが主要部分1.5秒ほど、全体で3.5秒ほどとなりました。
しかし、これが解決に繋がったというものがどの部分で、どうのようにしたら改善したか、が曖昧になってしまいました。

試したことは、
● プラグイン全て Off　→　確認後結果が変わらなかった為、元に戻した。
● .htaccess の見直し　→　書き換えた後、結果が変わらなかったが、書き換えたまま。
● 画像の圧縮　→　そのまま。
● 読み込んでいるjs、CSSを一度全て外し、確認後結果が変わらなかった為、元に戻した。

でしたが、なぜかいくつか試した後翌日該当サイトを表示したら速くなっていました。
試す際はキャッシュ等全て削除して複数ブラウザで確認したのですが、
時間差でとなると、htaccessだったのかな、という気がしますが断定できません。

遅い状態のデータコピーは残っていますので、
引き続き、一つづつ試して原因を調べたいと思います。

どうもありがとうございました。