サイトをリニューアル 読み込みの軽量化とその方法など

サイトをリニューアルしました。デザインの変更と、トップページの軽量化。



　サイトのリニューアルをしました。

　前回の記事で述べたようにブログ名を変えよう、と思っていたのですが、そちらは新しいサイト名が浮かばずブログごと再放置していました。そして、再放置から戻ってみると、離れていた分、このブログのとてつもなく悪いところが目につきました。目についたのはトップページの強烈な重さと、全体的に暗いデザインです。これはいかん。

　そういうわけで、基本部分は大部分は変わっていませんが、1.トップページの軽量化、2.デザインの変更をしました。順に説明していきましょう。

1.トップページの軽量化

以前まで、このサイトのトップページは恐ろしいほど重い状態にありました。「Pingdom Website Speed Test」と名のウェブページの重さを計測してくれる無料で高機能なウェブサイトがあるのですが、改良前に測ってみたところ、以下のようになりました。

・リクエスト数が233
・読み込みにかかった時間は7.86秒
・ページサイズは3.1MB（！）
・検査された全てのサイトの82%よりも読み込みが遅い

　※Perf. gradeは「Performance Grade」の略で、Googleの「PageSpeed Insights」のようなものです。「PageSpeed Insights」は、何が邪魔になっているのか、どこをイジれば読み込みのパフォーマンスが向上するのか教えてくれるので、これもなかなか面白いサービスです。

ちなみに、ヤフージャパンの測定結果。
あれほどの情報が詰まっているのに軽量。
なお、普通のアフィまとめは測定不能レベルに重い。

　いくら海外からの接続とはいえ、これはひどい結果です。ここまでこのサイトが重くなっている主な要因は次の3点です。



●各記事フッターのSNSボタンの読み込みが重かった
　「読み込み時間」「読み込みサイズ」の二つの面で何よりも最大の障害だったのが、「SNSボタン」です。私はツイッター、はてぶ、Facebook、Pocket、Google+のボタンをレイアウトの関係で表示するようにしていました。このボタンがトップページの各記事の後ろにフッターとして設置されていたため、トップページでは「5ボタン*7記事分」、計35ボタンが表示されるようになっていました。しかも、画像を表示しているだけでなく、SNSへの投稿情報なども取得、表示しているので、リクエスト数も多くなります。

忍者おまとめボタン

　これがすこぶる読み込みが遅く、障害となっていました。しかし、SNSボタンを排除するのはあまりしたくない。

　そこで、どうするのか考えた結果、トップページには表示せずに記事単体のページのみに表示するように細工をすることにしました。その方法は以下の通りです。

・単体ページにのみ表示
<b:if cond='data:blog.pageType == "static_page"'>
   <!-- ここにHMTLソースコードを挿入 -->
</b:if> 

　これを忍者おまとめボタンの前後に挟むことで、トップページを表示しているときにはそのボタンを表示しないようにしています。これがだいぶ効果があったのですが、その効果は後述します。


●サイズのデカい背景画像
　リニューアル前、このサイトの背景には綺麗な宇宙から見た地球の画像が使われていました。このbloggerサービスで背景を選ぶときに、デフォルトで表示される候補の中の一つになっている画像です。

　なぜそのような画像を使っていたかというと、これには理由があります。そもそも、このブログと前のブログを書いていたとき、ｷｭｯﾁｬﾆｱ開拓記のように「Aurora 4ｘ」のAARでも書いてみようかなと思っていました。地球の画像というのはそのイメージにまさにピッタリで、そのためにブログ設立時の背景選びでその画像を選びました。

　しかし、それは今も昔。何をどう間違ったのか、トリプルデイPのぷち炎上騒動とデレマス感想ブログの盛り上がりを見て、デレマスの感想でも書こうかとそれまで感想を書いたことが無いのにも関わらず、需要の無い感想文を書きはじめて、今はこの通りです。飽き性なので、途中で書かなくなりました。

　そういうわけで、ブログの内容と関係ない画像ですし、これが読み込みの妨げになっているのなら、わざわざ使い続ける必要はありません。背景は別の軽くてあっさりとしたものに差し替えることにしました。

　ただ、今のものに差し替えるのはデザイン変更の時です。

●各記事の見出しとして、未圧縮の画像を使っていたこと
　私のブログは、各記事のタイトルと画像、少々のリード文だけをトップに表示して、後は「Read More」ボタンを押した先の記事ページに本文全体が表示されるようにしています。これはこれで、記事全部を垂れ流すよりは読み込みが圧倒的に早いのですが、記事の頭に使っていた画像が未圧縮で重かったので読み込みの妨げになっていました。

　そこで、とりあえず未圧縮の画像たちを記事の方をいじることでひっこめ、いくつかについては画像圧縮サービスで圧縮したものに差し替えました。

オプティミジラという
可愛くも胡散臭い名前

　圧縮に用いたのは「Optimizilla」です。このオプティミジラは名前は何となく胡散臭いですが、ドラッグで画像をアップロードでき、圧縮した場合の圧縮率や圧縮後の画像サンプル、圧縮の度合いを簡単に選べる優れものです。特に、圧縮率が表示されるのが意外と楽しく、色々な設定にしてどうなるのか遊んでしまうほどです。

　これでだいたい画像の容量は元の30%ほどになります。例えば、下に掲載した修羅場トリオの3人の画像は、元々のサイズが220KBもあったのですが、圧縮によって64KBにまで圧縮されました（-156KB）
　圧縮って、わりと大事ですね。

　この圧縮をトップページに表示されている大きな画像に施しました。



　さて、背景画像を除いて、1のSNSボタンの非表示化、3の記事見出し画像の圧縮で、どれだけの効果が出たのか、「Pingdom Website Speed Test」で実際に見てみましょう。見てみた結果が、次の画像です。

また一つヤフーに近づいてしまった…

結果として、以下のようになりました。
・リクエスト数　81（-152）
・読み込み時間　3.13秒（-4.73秒）
・ページサイズ　1.1MB（-2MB）
・全てのサイトの52%よりも読み込みが速い！

　SNSボタンの排除が大幅にリクエスト数と読み込み時間を減らし、画像の圧縮がページサイズを減らしました。これで、通常のブログ並みには軽量化されました。軽量化が終わったので、お次は赤と黒で構成された暗いデザインの一新です。

2.デザインの変更

　デザインについては、「百聞は一見に如かず」と言う言葉があるようにまず見てもらった方が速い。よって、変更前（赤）と変更後の（青）のスクショを貼っておきます。ご覧ください。

　あっ…、ナチュラルボーン優柔不断なので、今見ると変更前の方が良いんじゃないかという思いがふつふつと湧き上がってくる。漢文の背景画像と茶色と赤のサイトデザイン、なんだかかっこよくない？…いや、背景を変えるとテキストから右側のバーまで全ての設定が狂わされるバグが今のところあるので、変えるのはめんどくさい。後者の方は青とタイトルと茶色が何かバランスが悪いような気がしないでもなく、変える必要があるようにも感じられるが、後者が断然優れている。きっと、いいはずだ。うん。

　もっとも、現実でファッションセンスが壊滅的で、美術など1か2しか取ったことが無い自分のセンスなど考慮に値しないですが。

　これでデザインが洗練されただけでなく、背景画像の軽量化で更に軽くなりました。具体的には以下の通りです。

・リクエスト数　81（+0）
・読み込み時間　2.45秒（-0.68秒）
・ページサイズ　1.0MB（-0.1MB）
・全てのサイトの63%よりも読み込みが速い！

　特に背景画像が軽くなったことでページサイズが0.1MBほど減少し、そのせいもあってか読み込み時間も短縮しました。一番最初のデータと比べると、リクエスト数、読み込み時間、ページサイズのすべてについて、1/3ほどになっています。つまり、リニューアル前に比べて、重さが1/3になった、読み込みが3倍速くなった、ということです。

おわりに

　気まぐれで始めたサイトのリニューアルですが、結果として、ブログに読み込む時間を当初の1/3にする大きな成果を挙げることができました。よもやここまで速くできるとは思ってもみなかったので、なかなか満足しています。デザインについては、正直良くなったのか悪くなったのか分かりませんが、今の色合いも透明感が少しはあって良いでしょう。リニューアルは成功でした。　

　ところで、こういうブログの中身を作るよりも、こういう細部をポチポチ変えるのが自分にとってブログの主役になっているような気がします。本来、ブログの中身があってこそのサイトのデザインという外枠があるはずなのに、中身がスカスカのまま外見だけ整えているのは本末転倒な感じがします。

　しかし、それが私の生き方のような気がしますので、とうぶんこのまま変な方向性で生き続けたいと思います。それでは、また。