0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Webページ表示の高速化に向けた調査ツール群を整理する

Posted at

動機

知人が運用しているWordpressベースのホームページの表示が遅いと相談を受けたことが発端。

トップページの表示で7秒くらいかかってる
これじゃお客さん離脱しまくりや

正式な保守運用は別途委託されているのですが、委託任せになっちゃうのも不利だなと思いまして、
調査のお手伝いしようと思い立ちました。

執筆段階で原因特定に至っていないのですが、調査手順・ツールを備忘録としてメモしておきます。
もっといい方法・ツール知ってるよ!!というツッコミ大歓迎です\(^o^)/

はじめに

Chromeさん、ありがとう。
サクサク動くだけではなく、開発者に思いやりのあるツールが充実しすぎていて最高です。

ツール群

  • Webページの表示パフォーマンス測定

上記を駆使して、クライアント側に問題があるのか、サーバー側なのか、ネットワークなのか、ざっくりと当たりを付ける。

今回は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が遅そうなので、そのあたりを探っていきます。
(後日追加予定)

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?