Blogger GTmetrix で Blog の問題点を探査

サイトを開くのに 4 秒以上掛かってはいけない！　　そんなぁ～ ... 。

Blog の問題点を洗い出す方法は色々あります。
そんな中で、GTmetrix で探査する事をお勧めしておきます。
基本的には、無料ですし、登録も不要です。　サイト( Blog ) の URL を指定するだけなので簡単です。


GTmetrix は、一般的に、サイト構築を検証する目的で使われるサイトです。
ちょっと前に行ったので、どのサイトから GTmetrix に辿り着いたか、資料が無くなっていて、ご紹介できないのが残念ですが。
記憶では、技術系サイトの紹介記事からだった様に思います。

そこにあった、衝撃的な一文。　　サイトを開くのに 4 秒以上掛かってはいけない！

ちょうど、別の 写真 Blog で写真の表示に時間が掛かっているとの問題意識を持っていましたので、ドキッ！

早速、試してみました。

アクセスするサイトは　　GTmetrix のサイト　　です。

画面イメージはこんな感じです。

サイト( Blog ) の URL を指定し、
GO!　ボタンをクリック。










この画面下にも、4 秒以下にしなさいって、
表記が見られますね。

GTmetrix 側で計測･分析が行われ、結果を表示してくれます。

この時、表示項目は、各サイト毎の改善必要度の高い順に並び替えられて表示されています。
但し、英文表記です。

pdf ファイルへの書き込みも可能（画面右肩 Download PDF のリンクから）なので、後日、ゆっくり検討が可能ですね。
このファイルで、前後を比較してみましょう。

見るべきポイントは３つ。

1. Summary で A > B > C > D > E　の評価？　２種類　がどうか？  D 以下では問題です。
2. Page load time がどうか？
3. Breakdown * で上位の項目に image 絡みの項目が挙がっているか？
4.  　　　  注：　*  pdf では Priority Issues (Top 5) という 見出し に。

但し、結果は Vancouver, Canada の Test Server ( OS:Linux ) で Firefox を使って計測されます。
曜日や時間帯に拠って影響を受けます。
Blogger の場合、xxx.blogspot.com と xxx.blogspot.jp のドメイン名での違いも現れます。（リダイレクト）
数値や評価に、極端に拘る事は無いと思います。
問題点の炙り出しが可能になるのを利点としましょうか。
評価が悪くても、Page の Template や Blogger の仕組みから、対応できない項目もありますし ... 。


図に示した対処方法は、 Blog の最初の読み込み時間を低減する対策を取っただけなので、各種項目は然程 変化していません。
別投稿で示した対応策の実施に拠り、　（投稿　Blogger 画像多用の Blog に LazyLoad を　参照）
Blog の最初の読み込み時間は、4.13  秒から 3.0 秒へと短縮できている事が分ります。


Breakdown で、Serve scaled images 項目の値が異常に低く、Upload する画像の質を検討すべきですね。
原因は分っています。
写真の Blog という理由で、必要以上に Spec を上げた画像で Upload していたのを、改めなければ ... 。
通常は、Upload する画像サイズの縮小や画像品質の低下で対応しますね。

　　現在、新規分は対応中。
　　Size やsumpling / DCT はそのままで、jpg 品質を若干下げる事 ( 10% Down ) で対応中。
　　若干、Detail の表現に乱れが出ていますが、極端な皺寄せは避けられている、という事にしましょうか。
　　既存分は未対応。(2013/09 上旬現在)