黄昏より暗きもの、血の流れより赤きもの

読者です 読者をやめる 読者になる 読者になる

黄昏より暗きもの、血の流れより赤きもの

自分の好きな事を好きなように書いて行きます。

重いはてなブログを改善!表示速度をUPするためにした事

統計 javascript

海外のホームページなどを見ていると、表示速度が早く使い勝手が良い事がある。そこで今日は重いこのはてなブログを改善!表示速度をUPするためにした事を紹介したい。

1.画像やスクリプトの重いものを切る

まず行ったのは現状使わないプラグインを切ってみた。Twitter人気エントリーなどは無駄だし、そこまで宣伝で煽るまでもないためである。

2.gistを張り込まず、はてな記法でソースを紹介する

今まで本記事でソースコードを張り込んでいた。しかしgistだと外部のサイトを読み込むため、回線等の問題で遅くなる。またはgitHub側のサーバーの状況に左右されやすくなる。試しにはてな記法で完結させる事を思い付いた。

参考:はてなブログにソースコードを貼り付ける方法:くりにっき はてなブログにソースコードを貼り付ける方法

3.今月の記事一覧を最初に表示

次に今月の記事一覧を最初に表示してみた。これはTeXの数式など内部の処理の重いページがトップに表示される事があり、見るのに時間がかかるからだ。

話を変えて、このはてなブログの内部の話をしたい。恐らくこの記事が表示されるまでの間、javascriptが読み込まれ、重たい画像が長い時間読み込まれる。次に記事と言う訳だが、一記事というか一ページ内に多くの記事を表示してしまうと、呼び出しに時間がかかる恐れがある。そこで最新の1ヶ月分だけ読み出すことで、1ページ内に多くの記事を表示する数を抑え、表示を速くしてやろうと言う腹づもりだ。

もっと言うと select * from articles where post_time > '今月初旬' となるように、SQLで言うクエリのパラメータを調節。こうする事で1日1記事投稿すると仮定すれば、月間で大体30記事までなので絞り込めるはずだ。

さて記事一覧ページは「archive」にあたり、 ○年△月の記事一覧を表示したい場合は「program-study.hatenablog.jp/archive/年/月/」と入力してやればよい。月の部分は"1"でも"01"でも同様に動くため、気にしなくても問題はない。以下、ソースコードを紹介したい。

<script type="text/javascript">
var dt = new Date();
//CakePHPのDSに同じ
var DS = '/'; 
//記事一覧ページ
var blog_URL = 'http://program-study.hatenablog.com/archive'; 
//記事一覧ページの[年]
var Year = dt.getFullYear();
//記事一覧ページの[月]
var Month = dt.getMonth() + 1;
//リダイレクト先 
var redirect_URL = blog_URL + DS + Year + DS + Month;

if( location.href == 'http://program-study.hatenablog.com/')
{
  location.href=redirect_URL;
}
//program-studyを自分のブログのに変えると
//使い回せます。
</script>
<noscript> 
<p>
<a href="http://program-study.hatenablog.com/archive">[ここにブログタイトル]</a>
</p>
</noscript>

参考:【JavaScript】日付処理 - Qiita 【JavaScript】日付処理 - Qiita
参考:はてなブログのトップページを記事一覧表示にしたよ - ボム君.com はてなブログのトップページを記事一覧表示にしたよ - ボム君.com

その結果どうなったの?

そして施策を行ったので、新トップページ(今月の最新記事一覧画面)の表示速度がどれだけになったかを調べてみる。本来ならば施策適用前、施策適用後でそれぞれ複数回計測を行い、その表示速度の分布がどう変化したかを調べる必要が有る(母平均の検定:A/Bテスト)。

しかしながら施策適用前の計測を忘れてしまった。仕方がないので施策適用後の実行時間をfirebugによりn=3回計測。その平均値と標本標準偏差を取ってみたい。尚サンプルサイズが小さいので、実際の数値との誤差が大きくなる事をご了承頂きたい。


f:id:program_study:20160906022449j:plain
図:firebugの計測の様子

又こうした表示速度を調べるためのツールは、無料のものから有料のものまで様々だ。catchpointなどの有料のツールの中には、標本数nを大きく取る事ができ、統計的に調査しやすいものもある。その為中心極限定理の成立しうる状況程、サイトのアクセス数に応じ多くサンプルが取れるため、精度の高い結果が得られる事が期待できるものまである。

検証の結果(単位:秒)

1回目 2回目 3回目 標本平均 標本標準偏差
26.25 17.19 19.46 20.96 4.71

3回の計測からでは甲乙付けがたいが、少なくとも20秒かかる事が分かった。サイトに必要な部品の表示が終わった後も尚読み込みが続くが、これははてなブログの仕様だろうか?あるいはスキンなどに依って表示速度は変わる物なのか?その辺も気になる所だ。

又アクセス数ならば、この日を境目にして分布の変化を読み取る事が可能だ。アクセス数についてもA/Bテストを行ってみたいとも思う。