土日はブログのメンテナンスが捗る：今週末(2015/2/21-22)に修正・改善したブログの箇所

イントロダクション

このブログは土日になると、平日に比べてアクセス数が減ります。
そのため、ブログのメンテナンスをするには絶好の機会です。

（なお、深夜～朝方はよりアクセス数が減りますが、朝起きて夜寝る生活をしたいので、その時間帯のメンテナンスは今のところ考えていないです。）

今回行った修正・改善

今回行ったブログの改善は、以下の箇所です。

記事の目次作成jsを2ndから3rdへ変更 記事の内容から自動的に目次を作成する JavaScript を 2nd シリーズのものから、3rd シリーズのものへ張り替えました。 ページ表示の高速化が期待できます。

人気の投稿を切り替えるjsを改良・圧縮 人気の投稿の表示期間を切り替える JavaScript を改良しました。 ページ表示の高速化が期待できます。

ページ幅最大化のjsを圧縮 ページ幅を最大化する JavaScript を圧縮しました。 ページ表示の高速化が期待できます。

目次作成の実行の非同期化 3rd シリーズの目次作成 JavaScript をページ読み込みとは非同期で実行するようにしました。(この話については、4th シリーズで言及する予定です。) ページ表示の高速化が期待できます。

next-prevのタイトル取得jsを圧縮 次の投稿・前の投稿のタイトルを取得する JavaScript を圧縮しました。 ページ表示の高速化が期待できます。

preにボタンを追加するjsの遅延実行を設定 本文中にソースコードを埋め込む場合には <pre> を使用していますが、その下部に別ウィンドウでソースコードを自動的に追加する JavaScript を遅延実行するようにしました。 ページ表示の高速化が期待できます。

シンタックスハイライターローダーの遅延実行を設定 このブログでは、本文中のソースコードを装飾するために SyntaxHighlighter を使用しています。その SyntaxHighlighter を常に読み込んでいるとページの表示が重くなるため、独自のローダーを JavaScript で実装し、本文中にソースコードがある場合には、SyntaxHighlighter の JavaScript を読み込むようにしています。(シンタックスハイライターローダー) 今回はそのシンタックスハイライターローダーを遅延実行するように設定しました。 ページ表示の高速化が期待できます。

テンプレート中のコメントの一部をサーバで削除するようにした Blogger の場合、ブログの html 構造をテンプレートを書き換えることで自由に設定できます。その時に、自分で追加した html の部分に、html のコメント(<!-- -->)を入力していたのですが、そのコメントもブログのソースコードとしてブラウザに配信されていました。 今回は、自分で追加したそれらのコメントを Blogger のサーバ側で削除するように設定しました。 ページ表示の高速化が期待できます。

クイックジャンプを改良・現在のページ構造を反映 ブログの右下に表示しているクイックジャンプですが、しばらく改良を加えていなかったため、現在のブログの構造とは異なる状態になっていました。 現在のブログを反映させたのと、見栄えが良くなるように改良を加えました。

ページ下部の注意書きのフォントをページのフォントと統一 ブログのページ下部の注意書きのフォントだけ、ページ内の他のフォントと異なっていたため、ページで使われているフォントに統一しました。

修正改善の効果

ファイルサイズ

トップページ

変更前：178 KB (182,504 バイト)　→　変更後：172 KB (177,045 バイト)

投稿ページ：代表として「Chromeでニコニコ動画をフルスクリーン表示にすると、動画のURLが左下に表示されっぱなしになってしまう現象の対処」

変更前：159 KB (163,670 バイト)　→　変更後：154 KB (158,086 バイト)

ファイルサイズとしては、5～6 KB 程度小さくなったようです。

表示速度

GTmetrix によって測定しました。

配信される広告による速度・データサイズの違いや、実行タイミングによる違い（それを平均化するための繰り返しをしていないため）があるため、あくまで参考程度の値です。

トップページ

変更前

Page Speed Grade:(94%)

DYSlow Grade:(66%)

Page load time: 4.87s

Total page size: 2.07MB

Total number of requests: 144

変更後

Page Speed Grade:(91%)

DYSlow Grade:(68%)

Page load time: 5.57s

Total page size: 2.11MB

Total number of requests: 136

投稿ページ：代表として「Chromeでニコニコ動画をフルスクリーン表示にすると、動画のURLが左下に表示されっぱなしになってしまう現象の対処」

変更前

Page Speed Grade:(93%)

DYSlow Grade:(67%)

Page load time: 5.52s

Total page size: 2.22MB

Total number of requests: 140

変更後

Page Speed Grade:(91%)

DYSlow Grade:(67%)

Page load time: 5.24s

Total page size: 2.10MB

Total number of requests: 142

測定値で見ると、逆に遅くなったように見えてしまいますが、前提で示したようにあくまで参考値です。

極端な変化はないということでしょう。

まとめ

まだまだいろいろと修正したい点がブログの中にありますが、今回はここまでです。

（体感的にはページが真っ白な状態から、文字ベースのページ要素が見えるまでの時間が改善されたかなといった感じですが、あくまで体感的なものなので何とも言えません。）

今後も改善を重ねて、快適・便利なブログを目指していきたいと思います。