Webページの速度向上をした

Tags : #http, #optimize, #h2o,
このエントリーをはてなブックマークに追加
以前からこの個人のWebページの表示速度面であまり気にかけずにいたが
ふとGoogleのWebページのモバイルフレンドリーであるか，速度計測ができるツールを試した所
まだまだ改善点があったので半年以上ほったらかしのこのサイトに手をいれることにした。
といっても，このサイトは静的サイトジェネレータで作成しているので
基本的にはWebサーバ面での高速化とコンテンツ面の最適化等を実施した。

実施したこと

Webサーバ

  • WebサーバをApacheからH2Oへの移行
  • 通信時の圧縮処理の追加
  • Expiresの設定

WebサーバをApacheからH2Oへの移行

元々Apacheより H2O を使いたいを思っていたので
高速なWebサーバのH2Oへ移行した。
以前使っていた時は自身でビルドしていたが
rpm等があり簡単にインストールすることができた。
rpm repositoryの追加をする。
$ sudo vim /etc/yum.repos.d/bintray-tatsushid-h2o-rpm.repo
#bintray-tatsushid-h2o-rpm - packages by tatsushid from Bintray
[bintray-tatsushid-h2o-rpm]
name=bintray-tatsushid-h2o-rpm
#If your system is CentOS
baseurl=https://dl.bintray.com/tatsushid/h2o-rpm/centos/$releasever/$basearch/
#If your system is Fedora
#baseurl=https://dl.bintray.com/tatsushid/h2o-rpm/fedora/$releasever/$basearch/
gpgcheck=0
repo_gpgcheck=0
enabled=1

そして，yum でinstallする。

$ sudo yum install -y h2o

# 起動
$ sudo service h2o start

通信時の圧縮処理の追加

Gzip等を使った通信時の圧縮処理を追加した。
H2Oのデフォルト設定はOFFなので
/etc/h2o/h2o.conf を編集する。
# 圧縮設定をON
compress: ON

# gzip 設定とbrotliも設定
compress: [ gzip, br ]

Expiresの設定

キャッシュのコントロールをするExpire設定の追加。
/etc/h2o/h2o.conf を編集する。
pathのディレクティブでも使えるので
リソース別にキャッシュ期限を使い分けするのも良い。
expires: 1 month

コンテンツ

  • css, js ファイルのminify
  • jpeg, png画像のロスレス圧縮

css, js ファイルのminify

css, jsファイルのファイルサイズの圧縮としてminifyをした。
複雑な難読化まではしていないが, 改行やスペースの除去等でも効果はでる。

jpeg, png画像のロスレス圧縮

サイトのヘッダー画像や各種記事の画像の最適化を実施。
毎回実施してられないので, 静的ページの作成時に自動で処理するPelikan Pluginを追加した。
optimize image
jpegtran と OptiPNGを使って圧縮を実行してくれる。

実施結果

測定結果
MOBILE FRIENDLINESS: 92/100
MOBILE SPEED: 74/100
DESKTOP SPEED: 89/100
MOBILE SPEED以外は概ね良好な数値になっている。
(MOBILE FRIENDLINESSは今回関係無いけど...。)
MOBILE SPEEDはCSSやJavaScriptの一部がブロッキングしていて表示が遅れている。
といっても有名なブログ等もMOBILE SPEEDは60を下回っていたりするので
まだ良いのかもしれないが, 今後はGoodのレベルにはしておきたい。
まぁ，それは明日以降に改善に取っておいて, 一まずはサーバ側等の改善としてここまでにしておこう。

Related Posts