Webサイトのページ表示速度チェックツールで計測した結果

サイトリニューアルの効果を計測

2014年4月1日からサイトのデザインをリニューアルして、微調整をしながら運営しています。かんたんにできることはある程度やったので、一度Webサイトのページ表示速度がどれくらいなのか計測してみました。

計測ツールはいろいろありますが、今回は利用者の多い代表的なツールを使用。どれも無料で利用できます。

以下では、自分用のメモ代わりとして、また訪問者が「この程度のサイトでこれくらいの速度になるのか。ふむふむ」といった参考用として、順番に結果を出していきます。

PageSpeed Insights (Google Developers)

まずはGoogle Developers の「PageSpeed Insights」です。計測した結果を点数化し、問題点や修正箇所を指摘・指導してくれます。

画像や、CSS・JavaScriptファイルのサイズを圧縮するためのツールも紹介してくれるので便利です。

モバイル表示では指でタップすることを考慮して「あまりに狭すぎるボタンの間隔を広げましょう」とアドバイスしてくれるようになりました。

モバイル表示

PageSpeed Insightsの計測結果(mobile)
ご覧のようにモバイル表示では100点中68点と、低くはないけどそんなに良くもない点数です。

……うーん。

とくに「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript/CSSを排除する」には「修正が必要」と赤く表示されています。詳細を見たところ、原因はプラグイン。修正はできますが、これをいじってしまうと今後のプラグインのアップデートやメンテナンスが面倒だし、いまのところそのままにしています。ここはいずれ修正しようと考えています。

たとえばJavaScript を非同期で読み込んだり、遅延ロードするプラグインがありますが、当ブログで使っているjQuery に干渉してしまうので止めにしました。よく利用されている「Lazy Load」なども使用していません。

「画像の最適化」で言ってるのは「表示される画像のサイズを圧縮したらいいよ」といった指摘です。でも、その問題となっている画像は何かというと、Google Adsense でその時その時に表示される広告画像でした。

これは、自分には、どうしようもないので却下。

「ブラウザのキャッシュを活用する」はfacebook とGoogle Adsense のみ。やっぱり外部から読み込むと、いろいろ影響してきますね。SNSなど、ふだんは「共有」ボタンを表示しておいて、そのボタンをタップしたらTwitterやfacebookのシェアボタンを表示するようにしてもいいかもしれないですね。

「表示可能コンテンツの優先順位を決定する」「HTMLを縮小する」は、特に緊急性もないので何もしないことにしました。

PC表示

PageSpeed Insightsの計測結果(PC)
こちらは88点とまずまずの点数。赤で指摘される問題点はありませんでした。

その他の修正点はモバイル表示と同じですね。

ちなみにキャッシュ関係でよく指摘される期間の設定や、アイキャッチ画像の圧縮(gzip)などは、「.htaccess」ファイルで設定しているので修正点はゼロ。画像での問題点はGoogle Adsense から適時表示される画像のみでした。

「まあ、これ以上やってもいいけど、いまのところはそんなに頑張らなくてもいいなかぁ~」というところですね。

Pingdom Website Speed Test

pingdomでの計測結果
Pingdom Website Speed Test」も同じように計測結果を表示し、遅くなる原因となる要因を示してくれます。グラフで示してくれるので、分かりやすいのも特長です。

パフォーマンスのgladeは79/100、ロードタイムは4.12秒。スコアの下に、

Your website is faster than 39% of all tested websites

とありますから、まあ、そんなにたいしたことなさそうですね。

かなり詳細に分析されるので、具体的に説明はしませんが、Googleさんのと同じような原因が指摘されています。(当然ですね)

Web担当者Forum版 ページ速度分析ツール

Web担当者Forum版 ページ速度分析ツールでの計測結果
Web担当者Forum版 ページ速度分析ツール」は《あるページを表示するのに、サーバー側とブラウザ側の、どこで時間がどれぐらいかかっているのかを、一発でわかりやすく表示してくれるブックマークレット》です。

読み込み速度は約3.7秒。

標準的な速度ですが、少し遅めですね。時間がかかっているポイントを見つけてさらに速くするとユーザーに喜ばれると思います。

とありました。

どうやら「Webサーバーでのページデータの準備」が圧倒的に遅延の原因になっていますね。かかった時間が2,319ミリ秒、全体比が62.7%でした。こちらはサーバー側での処理が原因だそうです。

なるほどなぁ。

GTmetrix | Website Speed and Performance Optimization

GTmetrixでの計測結果
GTmetrix」もよく利用されています。Page Speed Grade: A (91%)、Yslow Grade: B (80%) となりました。

ページの読み込み速度が2.56秒なので、まずまずですかね。

こちらでは結果をPDFファイルでダウンロードできたり、CSSを圧縮したファイルを出力してくれたりもあって、便利です。

まとめ

主な問題点は3つ

いろいろと試してみたところ、主な問題は以下の3点でした。

  • JavaScript
  • CSS
  • 画像

JavaScript とCSS はプラグインとSNS と広告が主な原因に。画像はGoogle Adsense の広告画像のみが「サイズを圧縮せよ!」と指摘されます。それにしてもfacebook は何かと重い!

画像については「Jetpack」付属のCDNサービス「Photon」(英語)を利用しています。

画像のファイルサイズを圧縮してからサーバーへアップロードし、アイキャッチ画像の出力サイズをぴったりに指定して、Photon を利用しています。画像関係に関する指摘もこれでほとんどなくなりました。

まだまだ改善できそう

上記のスコアや遅延の原因などは、計測するときによって微妙に変化しますが、大雑把にまとめてしまえば「標準よりはやや速いけど改善の余地はまだまだあるよ」といったところでしょうか。

あと、ほかにも細かな点でいろいろと積み重なっての結果ですが、また気が向いたら改善していきます。ひとまず、しばらくはこのまま様子見かな。

当ブログでやっている改善策などは、別の記事に書く予定です。今回はこれで (^_^)/~

 

関連記事

新しく自作 WordPress テーマに変更しました

なんとか、完成にまでこぎつけました。 昼にテーマのファイルをアップロードして、変更してみたら、いろいろ表示に不具合が発生して、そのときに訪問された方にはご迷惑をお掛けしました。 ページによって新テーマと旧テーマの表示が違っていて「なんでやろ…

WordPress のテーマを自作してみる

レスポンシブWebデザインを勉強して自作のWordPressテーマを作っています。 1月に『作りながら学ぶHTML/CSSデザインの教科書』を読んで、なんとなくHTML5とCSS3の初歩を理解しました。次に『WordPress レッスンブッ…

【マルチデバイス対応】 WordPress で作ったサイトをメディアクエリー(Media Query)とユーザーエージェント(UA)による判別でモバイル端末に最適化する方法

マルチデバイスに対応したサイトにする マルチデバイスに合わせた対応をする方法はいろいろありますが、今回は「レスポンシブWebデザイン」で使われる主要な技術のひとつである「メディアクエリー(Media Query)」と、「ユーザーエージェント…