動機
知人が運用しているWordpressベースのホームページの表示が遅いと相談を受けたことが発端。
トップページの表示で7秒くらいかかってる
これじゃお客さん離脱しまくりや
正式な保守運用は別途委託されているのですが、委託任せになっちゃうのも不利だなと思いまして、
調査のお手伝いしようと思い立ちました。
執筆段階で原因特定に至っていないのですが、調査手順・ツールを備忘録としてメモしておきます。
もっといい方法・ツール知ってるよ！！というツッコミ大歓迎です＼(^o^)／
はじめに
Chromeさん、ありがとう。
サクサク動くだけではなく、開発者に思いやりのあるツールが充実しすぎていて最高です。
ツール群
- Webページの表示パフォーマンス測定
- PageSpeed Insights：Google先生提供無料Webページ診断ツール。診断と改善項目の提示をしてくれる。
- Lighthouse：Chrome開発者ツール。パソコン/モバイルの表示パフォーマンスを計測、問題有りげな箇所を提示してくれる。レスポンシブ対応していてモバイルだけ遅い、とか起きたときに使うの良いかも。PageSpeed Insightsに近い？
- Chrome開発者ツールのネットワークのログ：、TTFB(Time To First Byte)をチェックしてくれる。
- Chrome開発者ツールのパフォーマンスのログ：クライアント側のページ処理のパフォーマンスチェック。
上記を駆使して、クライアント側に問題があるのか、サーバー側なのか、ネットワークなのか、ざっくりと当たりを付ける。
今回はTTFBが遅い(CSSのTTFBに3秒弱、、1つではなく複数のCSSで発生。Google先生は0.6秒提唱としてるので、、まぁ遅いよね)ことが見えてきたので、
まずはCSS関連挙動の詳細をすすめることにした。
-
CSS読み込み
-
Chrome開発者ツールのCSS Overview(概要)：ページ内の色やフォントサイズなど概要を表示してくれる。長年、複数人によって無法地帯で増改築を重ねてきたのでしょう、同じような色でもカラーコードが異なるものがぞろぞろぞろーり、、、。こういうのはルール決めて最適化しなきゃですね。
-
Chrome開発者ツールのcoverage：CSSセレクタの使用率評価してくれる。Wordpressでおしゃれプラグインを入れすぎると、読み込まれないおしゃれCSSもたくさんありそうです。
-
jitbi：指定したURLのページで読み込まれていないCSSセレクタを抽出してくれるサービス。ありがたい結果ではあったのですが大量に出過ぎてつらい気持ちになりました、、、
-
UnCSS：htmlとCSSをinputして、htmlで実際に呼び出されてるCSSセレクタのみを抽出したCSSを作ってくれる。他ページが依存してるかもなので、男気ガッツリ削除は禁物。
-
Wordpressキャッシュプラグイン
-
Wordpress Super Cache:いま使ってるやつ。ググると参考情報も多く、実力高い？？ガーベージコレクションしてくれるってどこかで読んだのですが、この手の処理って若干怪しさがありますよね、、(コントロールできないという点で
-
Cloudfare:勉強中。。。
今回、ネットワークのログを確認した感じ、
CSSのTTFBが遅そうなので、そのあたりを探っていきます。
(後日追加予定)