~ モバイル版(スマートフォン)の操作 ~
左右にスワイプすると、前後の投稿へ移動します。
← 前の投稿 | 次の投稿 →
日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2015年2月22日日曜日

土日はブログのメンテナンスが捗る:今週末(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

変更前
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


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


まとめ

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

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

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



スポンサーリンク

コメントを投稿

コメント投稿機能について