前の関連記事：Blogger:ページ表示速度を計測して速度向上対策を考える
GTmetrixのWaterfallでページが表示される要素の順番や要する時間がわかります。これの見方を調べて対策を考えます。
タイミングデータの詳細をみる
調べる対象のページは前回と同様Blogger:モバイルサイト(8)Bloggerのタグではウェブバージョンをモバイル端末からみていることを判別できずです。
SyntaxHighligterで表示させている部分が6箇所もあります。
GTmetrixでこのページのURLを入力して「GO!」ボタンをクリック。
ページの表示速度は7.48秒になっています。
下にある「Timeline」のタブをクリックするとWaterfallが表示されます。
右上のView Larger Versionをクリックするともう少し大きな画面が表示されます。
それぞれの項目にマウスポインタをもっていくと詳細表示がでます。
一番最初はページのURL、http://p--q.blogspot.jp/2013/09/blogger8blogger.htmlです。
次の3つはBloggerのシステムのようです。
5個目にGoogleサイトにおいたSyntaxHighlighterのshCore.cssのURLがでてきます。
これのグラフ部分にマウスポインタをもっていくと読み込み時間の詳細がでてきます。
最初から635ミリ秒後に読み込みが始まったとわかります。
左の色例の横の時間は累積時間になっています。
各時間の内訳はその右に表示されます。
0ms Blocking ブラウザの同時接続数制限が空くのを待っている時間。
25ms DNS Lookup サーバーのドメインネームからIPアドレスを調べている時間。
975ms Connecting サーバーとの接続の確立時間。
0ms Sending サーバーにデータを送信している時間。
258ms Waiting サーバーからの最初の返信があるまでの時間。
0ms Receiving サーバーからデータを受け取る時間。
この場合Googleサイトとの接続確立時間が律速段階になっていることがわかります。
+2.94s DOM Loaded 2.94秒後にDOM Loadedイベントが起こるということ。
+6.84s Page Loaded 6.84秒後にPage Loadedイベントが起こるということ。
Dom Loaded時間はグラフ全体に縦に走る青線、Page Loaded時間は赤線で示されています。
次に読み込んでいるshThemeDefault.cssのタイミングデータの詳細をみてみます。
このshThemeDefault.cssは先ほどのshCore.cssと同じGoogleサイトから読み込んでいます。
マウスポインタの矢印が乗っているグラフのすぐ上のグラフは先ほどのshCore.cssのものです。
同じGoogleサイトから呼び出されていますので2番目に呼び出されるshThemeDefault.cssの接続はshCore.cssのものが再利用されるのでConnectingの時間が0mｓになっています。
その代わりshCore.cssの読み込みが始まるまではBlockされています。
これは当然の結果ですね。
Googleサイトに置いたファイルの呼び出しのリダイレクトを省略する方法はないみたい
Blogger:ページ表示速度を計測して速度向上対策を考えるでGoogleサイトに置いたファイルへのアクセスのリダイレクトを減らすためにURLの最後に「?attredirects=0」をつけてみました。
これが効果のあるものだったのか検証してみます。
shCore.cssが読み込まれるタイミングデータを全て抜き出しています。
①1回目URLの最後に「?attredirects=0」を自分でつけたもの。
②2回目再度「?attredirects=0」でリダイレクトされたものが呼び出されています。
③3回目URLがGoogleサイトのIDに変更されたもので呼び出し。
これらのグラフを抜き出して並べてみました。
リダイレクトされている最初の1.27秒が無駄ですね。
しかしGoogleサイトでリダイレクトされない方法はみつけることができませんでした。
さらに「?attredirects=0」をはずしたものと比較したものと比較してみると、「?attredirects=0」をつけた効果はまったくありませんでした。
Bloggerでのデータファイル置場に関する検証と考察 - ログろいどで比較されていますが他のファイル置き場と比較するとGoogleサイトが一番よいようです。
WaterfallをみてみるとこのGoogleサイトのリダイレクトがなければDOM Loaded時間は１秒ほど短くできそうです。
全てをテンプレートのHTMLに書いてしまえば外部ファイル置き場は使わなくて済むと思いますが、ちょっと見にくいテンプレートになってしまいそうです。
カスタマイズをやりきってもう今後はテンプレートはいじらない、となったらそうしたいと思います。
参考にしたサイト
ページの表示速度の測定と解析をしてくれます。
Introduction to Firebug: Net Panel | Software is hard
GTmetrixで表示されるFirebugのWaterfallの解説です。
Firebug Net Panel Timings | Software is hard
上のリンクの続きの解説。
Firebugを使ったページロード解析(Net panelの読み方) | Web scratch
日本語の解説です。上記サイトの翻訳ですがさらに解説が加わっています。
Bloggerでのデータファイル置場に関する検証と考察 - ログろいど
Googleサイト以外のファイル置き場と比較されています。結論としてはGoogleサイトを推奨。
0 件のコメント:
コメントを投稿