平成28年度サイト軽量化工事の概要について
記事公開：平成28年12月17日
この度、当サイト「ゲニウス（北）の北海鉄旅いいじゃないか」を軽量化し、サーバのデータ通信容量を抑えつつページの表示速度を速めるための工事を行うこととし、その概要をとりまとめた上で一部の施工を完了いたしましたのでご報告いたします。
※12月24日に改稿。いろいろ調べ直して、計画を変えました。
当サイトは現在、時事関連の記事などの利用が好調で、利用客が増加している状況です。
それに伴いまして、データ通信量が増加しています。レンタルサーバを間借りさせていただいている関係上、このペースで利用が増加した場合に、将来的に通信速度の低下などによりサイト運営に支障が発生する状況でありました。
しかし、サイトの仕様を見直すことによりデータ通信量の大幅な圧縮が可能であると判断されましたので、急遽サイト軽量化の工事を行うこととしました。
第一期工事として、緊急的に通信量を減らすべく、昨日12月16日に一部ページにおけるJavaScriptの使用を停止しました。
第二期工事はふたつの作業を並行で行います。まず、本日以降今年度中にサイトの画像のファイルサイズ圧縮を段階的に行う予定です。
もうひとつは、JQueryを使用せずにサイトのユーザビリティ改善を行う方法を検討し、実施いたします。
まず、すでに完了している第一期工事について説明いたします。
当サイトでは、サイト再編と同時にJavaScriptのライブラリ「JQuery」の使用を開始しました。サイトのわかりやすさの向上、および将来のレスポンシブデザイン化のためにJavaScriptを使用する必要がありましたが、その際に比較的軽量なライブラリでありメンテナンスに有利なJQueryを採用いたしました。
それに合わせて、htmlのコーディングについても、メンテナンスの省力化のため、全ページでJQueryを読み込む仕様に変更しておりました。
しかし、現状ではJQuery・JavaScriptを一切使用していないコーナーが多数存在するほか、サイト利用客の増加によってページ読み込みごとにJQueryの読み込みが発生していることからデータ通信量の大幅な増加が発生しておりました。
JQueryを読み込むことは、読み込みのためのHTTPの数往復の通信、およびJQueryのファイルの読み込みが発生するため、二重の通信増大要因となります。
そこで、一部コーナーについては緊急措置として、JQueryを読み込まないよう仕様変更を行うことで、通信を減らしてサイトを軽量化することとしました。
工事はトップページ、更新履歴、「乗り鉄な旅行記」「素人流・鉄道観察」「当サイトについて」「独り言」「メールフォーム」の各コーナーの全ページ、それに「北の特急（＋α）図鑑」の列車歴史ページに施工しました。それ以外のページでは、JQueryを使用しているか、将来使用する可能性があるため、工事を行っておりません。
この工事によって、JQueryを使わないページでは不必要のスクリプトを読み込まないことで最低85kBの通信量節約を実現したほか、htmlも2行ほど分量を削減できたことで、ページあたり100Byteほどの軽量化に成功しました。
今後は、JQueryを使用せず、素のJavaScriptを活用してユーザビリティを改善する予定です。詳細は後述します。
続いて、第二期工事のうち、画像の軽量化について説明いたします。
当サイトでは非常に多くの画像を利用しており、画像を表示することでも通信が発生します。
ページ自体のデータ量は10～30kB程度ですが、画像は写真の場合1枚あたり数十～百数十kBのサイズがあり、この読み込みには大きなデータ通信が必要となります。
これを少しでも縮小するため、アクセス数の比較的多い（たりめーだ）トップページで使用している画像などは、ファイルサイズの圧縮を行っています。PNG画像の場合は、元のファイルの30％程度、JPGの場合は70～80％程度にサイズを小さくすることが可能です。
同様に各コーナーの画像も圧縮しようと考えてはいたのですが、ファイルサイズ圧縮作業には時間を要するため、サイト再編以降は記事を増やして内容を強化することを優先させる方針を採っていることもあり、作業を後回しにしておりました。
しかし、先述の通りサイトの軽量化は今のうちにまいておくべき種であるとの判断があり、遅まきながら作業を開始することといたしました。
というか、このテの作業って、後回しにしておくと後でもっと大変になっちゃうんですよね。いっぺんに大量の画像を圧縮するとなると、やる気が出なくなっちゃいますからね。この点、早めにやっておけば、その後は画像を追加するごとにこまめに圧縮をやっておけば、大変な作業を一挙にこなす苦労をせずに済みます。
第二期工事のもうひとつの柱である、JQueryを使わないユーザビリティ向上について、現在の構想を説明いたします。
当サイトでは現在、ページ内リンクをクリックした際にスムーズに画面が動くスクリプトなどを導入しているほか、将来はJQueryを活用したレスポンシブデザイン化を予定していました。
しかし、通信量を減らすべく、JQueryを使わず、素のJavaScriptを使ってそれらの仕様を実現する方法を検討することといたしました。
調べたところ、「JQueryでできることは大抵バニラのJSでもできる」らしいので、何とかなるかと。というか、そんなに難しいコードにはならないでしょうし、いずれにせよググって見っけたコード拾って改造して使ってるだけなので、そもそもJQuery導入によるメンテナンスコスト低減はなかったかもしれません。
なお、第一期工事に伴い、将来のレスポンシブデザイン化にあたって予定していた「スマートフォン表示とPC表示の切り替えボタン」の実装を断念します。
ボタンの設置にはJavaScriptが必要ですが、スクリプトの読み込みによるデータ通信量増大と切り替え可能な設計によるユーザビリティ向上を天秤にかけたところ、前者が重大と判断しました。ご理解のほど願います。
以上の点、ご承知おきください。
……って言ったって、こんな細かい工事の話、たいていの人はどうでもいいですよね。
じゃあなんでこんなん書いたか？ サイトを自分で管理している方には、なにか参考になるかな、と思いましてね。