イントロダクション
このブログは土日になると、平日に比べてアクセス数が減ります。そのため、ブログのメンテナンスをするには絶好の機会です。
（なお、深夜～朝方はよりアクセス数が減りますが、朝起きて夜寝る生活をしたいので、その時間帯のメンテナンスは今のところ考えていないです。）
今回行った修正・改善
今回行ったブログの改善は、以下の箇所です。| 記事の目次作成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
変更前
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
測定値で見ると、逆に遅くなったように見えてしまいますが、前提で示したようにあくまで参考値です。
極端な変化はないということでしょう。
まとめ
まだまだいろいろと修正したい点がブログの中にありますが、今回はここまでです。（体感的にはページが真っ白な状態から、文字ベースのページ要素が見えるまでの時間が改善されたかなといった感じですが、あくまで体感的なものなので何とも言えません。）
今後も改善を重ねて、快適・便利なブログを目指していきたいと思います。
コメントを投稿
コメント投稿機能について