某AWS紅魔館図書室 *1の表示遅いよねー。。。。えっ、12秒余りもかかってる。。。。
ということで某所は、平均6～8秒まで早めてました。
そういえばと思って自分のサイトを計測してみたら、ホーム画面で15秒かかっててほげー。
今回、はてなブログのホーム画面表示を2-4秒まで適当に早めたのですが何をしたのかを。
計測
何をするにも計測できないと始まらない。
計測と改善には、GTMetrixとGoogle Chromeデベロッパーツール(F12) を使ってます。
実際の作業は、GTMetrixでどこがボトルネックなのかをみつつ、Chromeデベロッパーツールのネットワークタブでどこに時間がかかったり取得できてなかったりするかを見る感じ。
あとは、はてなブログの設定画面をごにょごにょするだけの簡単なお仕事です。
作業開始前
作業開始前のGTMetrix結果はこんな感じ。
Page load time: 15.51s Total page size: 2.33MB Total number of requests: 304
遅いですねー。各項目もヒドイものです。
他のはてなブログ
自分のブログが遅いのか、他も遅いのか。
遅くないならなぜかを見ていきます。参考にしたのは、Shibayanせんせー と酢酸せんせー のサイト。
見る限り、5-6秒はできるはず。
サイドバー周りとか、かなり色々参考にしています。
Page load time: 5.39s Total page size: 1.95MB Total number of requests: 134
Page load time: 6.59s Total page size: 3.41MB Total number of requests: 121
やること
実際のWebサイトの表示や、GTMerixのTimeLineをみてもわかるのですがざっくりいうと
- Web Serverからの初めの応答
- Webサイトの描画 (DOM)
- 各部品の取得と描画
の3つを中心にどこが遅いのか見ています。
Web Server からの初めの応答
一番大事です。
ChromeデベロッパーツールでもGTMetrixでもいいのですが「Webサイトに繋いで最初にサーバーから応答があるまで == ブラウザがクルクル + 白画面のまま」の状態がわかりやすいかと。
この時間が1秒以上、最低2秒で応答がないとページ遷移が辛かったりサイトが死んでると見なされかねないので本当に注意です。
Azure WebSiteにホスティングしたWordPressは限定的ながら対策を打てますが、はてなブログはSaaSなのでこればかりは高速化はこちらでも困難です。
ただし、はてなブログは優秀で平均して500msでの応答なので問題ないでしょう。
Webサイトの描画 (DOM)
例えば、一画面で描画する記事の量が膨大だと、いつまでたっても描画は終わりません。また記事が長いにも関わらず、moreタグを使って続きを隠さなかったりしても本文の量に影響を受けます。
順番に対策していきましょう。
1. ホーム画面で記事全文が表示されないようにする
これは元々やっていたので問題ありません。
moreタグで、記事詳細を隠すことでホーム画面に全文表示されなくなります。
SpeakerDeckやSilverlightのようにとっても重い処理をホーム画面に出さないためには必須です。
2. 一画面で表示される記事の量を調整する
元々一画面毎の記事表示数を15にしていました。
表示される記事ごとに要素が増えるのでいったん5まで減らします。
どのみち本文全文を表示させておらず、流し読みをするような作りにもしていないので。
これで、GTMerixで15secだったのが6secまで早くなりました。
Page load time: 6.19s Total page size: 1.83MB Total number of requests: 143
しかし表示速度は早まりましたが、原因となっているスコア1つ1つは改善していません。対応しましょう。
各部品の取得と描画
部品の取得とタイミングですね。
1. はてなブログProで消せるものは消す
Webサイトの画面やGTMerixのPrefer asynchronous resourcesのスコアが悪いので見てみると
これはひどいですね。
まず、せっかく「はてなブログPro」にしているので、フッタとヘッダは余計ですし消します。
広告はすでに切っているので問題ありません。
GTMerixがこれで、少し改善します。
2. サイドバーの部品を見直す
サイドバーも余計なものを載せるのはいい加減直します。
今回は、ここまで減らします。
これで少し改善しました。
Page load time: 5.50s Total page size: 951KB Total number of requests: 121
3. 記事についてくる部品を見直す
Prefer asynchronous resourcesの多くが、TwitterButtonやFaceBookなど、各記事のフッタについているボタンやHatenaブックマークコメントが原因とURLからわかります。
元々 TwitterやHatenaブックマークを中心にブログは見られているようなので、他は切り捨てます。むしろじゃま。
このフッタに表示するボタンはデザインから設定できます。
ついでに、 はてなスターも検索ボット/SEOに悪影響という話をそこかしこで聞いているので、いい機会なので切りました。
とくに、「はてなブックマークコメント」の影響は大きくこれを切ることで大幅な改善が果たされます。
Page load time: 4.43s Total page size: 1.58MB Total number of requests: 92
4. css や js を フッターに移動する
はてな開発から出ている通り、 再度バーに置いていたcssやjsをフッターに移動します。
これでさらに改善しました。
Page load time: 3.35s Total page size: 636KB Total number of requests: 70
4. 画像とかは？
残りはCDNを使うなどの処理が効果的なのですが、CloudFrareとかCloudFrontは、はてなブログで使えるのかな.... めんどくさいのでいいや。
ということでここまででいったんおしまい。
最終結果
GTMerixは毎回計測結果がずれるのですが、おおよそ3.5 ～ 4秒ですね。
Histryみると改善がわかりますね。
Chromeデベロッパーツールだと2秒程度です。
WordPressはプラグインで各種キャッシュ処理までできますが、はてなブログだとこの程度かな。。。。 画像の遅延読み込みはしたくないので。
簡単な作業ですが、見直し大事です。
AzureWebSiteでWordPressだとどうなのか
某AWS紅魔館図書室のサイトはこうです。
スコアまぁまぁいいですが、時間がかかっています。
ただし、これはサーバーからの初回オブジェクトの応答自体が4secを占めています。
つまり、サーバー側の応答でとってもアレ。サーバー応答後のコンテンツに関しては対応をいれたので、コンテンツ生成時の処理が必要ですね。おいおいやりましょう。
まとめ
特に効果があったのは、はてなブックマークコメントの非表示です。
ブックマークコメントがある状態
ブックマークコメントを非表示にした状態
利便性から考えると、はてなブックマークコメントを出しておきたいところですが...。
*1:Azure WebSites
