はてなブログでのWebサイト表示を早くしてみた時にやったこと

某AWS紅魔館図書室 *1の表示遅いよねー。。。。えっ、12秒余りもかかってる。。。。

ということで某所は、平均6～8秒まで早めてました。

そういえばと思って自分のサイトを計測してみたら、ホーム画面で15秒かかっててほげー。

今回、はてなブログのホーム画面表示を 2-4 秒まで適当に早めたのですが何をしたのかを。

目次

計測

何をするにも計測できないと始まらない。

計測と改善には、GTMetrix と Google Chrome デベロッパーツール(F12) を使ってます。

• GTMetrix
• Build Insider : Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能

実際の作業は、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 をみてもわかるのですが ざっくりいうと

1. Web Serverからの初めの応答
2. Webサイトの描画 (DOM)
3. 各部品の取得と描画

の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. はてなブログ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 をフッターに移動します。

• ブログをおよそ2倍の速さで表示する、などの改善と機能追加を行いました

これでさらに改善しました。

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