ブログの素早さを上げる

2020-05-02

software

ブログのスピード

Webサイトにおいて最も重要な要素はスピード。
スピードを高めてブログパワーを高める。

• 1. スピード測定
• 2. オフスクリーン画像の遅延読み込み
• 3. 画像サイズ削減
  • 3.1. 次世代フォーマットでの画像配信
  • 3.2. 画像圧縮
• 4. テキスト圧縮
• 5. gzip圧縮
• 6. 結果

---

最終的に、

• 画像サイズ削減
• テキスト圧縮

の2つが特に有効。
PageSpeed Insights のスコアは27％ほど上昇。(63 → 80)

1. スピード測定

まずは現状を知る。
GoogleのPageSpeed Insights で測定。

スピード測定したいURLを入力するとスコアを出してくれる。
問題個所や改善方法も教えてくれる。至れり尽くせり。

---

---

100点満点中63点。高いのか低いのかわからない。
やるたびにスコアが変わるのでここでは3～4回やって真ん中あたりを雑に採用。
「モバイル」と「PC」が選べるので数値の低い「モバイル」の方を見る。

---

---

画像表示がネックになっているらしい。
言われた通りオフスクリーン画像の遅延読み込みを試す。

2. オフスクリーン画像の遅延読み込み

ページを開いた際に全ての画像を読み込まないで画面内に入ったものから読み込む手法。

hexoのプラグインで対応できるようなのでインストール
hexo-lazyload-imageに書いてある通りにする。

1	npm install hexo-lazyload-image --save

でインストール。
_config.ymlに下記内容を追加。

1 2 3 4

lazyload: enable: true onlypost: false loadingImg: # eg ./images/loading.gif

これでページを開くと確かに遅延読み込みができている。
本来の画像の代わりに「Loading」と書かれた画像が一瞬表示された。
PageSpeed Insights のスコアも63点から67点に上がった。

ただ一瞬遅れて画像が表示されるのが気持ち悪い。かえってレスポンスが悪く感じる。
使うかどうかひとまず保留。enable: falseとする。

3. 画像サイズ削減

3.1. 次世代フォーマットでの画像配信

JPEG 2000、JPEG XR、WebP などの画像フォーマットは圧縮性能が高く、転送時間が抑えられるとのこと。
どれもブラウザの対応状況が悪い。主要なブラウザが全て対応してから考える。

3.2. 画像圧縮

次世代フォーマットが駄目そうなので旧世代フォーマットのまま画像サイズを削減する。
squooshを使う。これもGoogle産。

---

---

「Drag & Drop or select an image」すると編集画面になる。

---

---

フォーマットは「MozJPEG」。
Qualityを見づらくならない程度に落とす。
だいたい10～70％程度のサイズ削減ができた。画像ごとのばらつきが大きい。

これだけでPageSpeed Insights のスコアは63点から76点に上がった。(画像の遅延読み込みはしてない状態)

---

---

時間もだいぶ短縮できた感ある。

4. テキスト圧縮

テキスト内の空白やら改行やらいらないものを削除してファイルサイズ削減を図る。
Hexoのプラグインの中にそういうのがあるので使う。
Hexoのプラグインが並んでるとこで探す。

1. hexo-html-minifier #HTML用
2. hexo-clean-css #CSS用
3. hexo-uglify #JavaScript用

この3つを使う。
1つで全部まとめてやってくれるプラグインもあったが更新日時が古かったのでやめた。
面倒だけど3つインストール。

1 2 3

npm install hexo-html-minifier --save npm install hexo-clean-css --save npm install hexo-uglify --save

_config.ymlに下記内容を追加。
デフォルト設定を信じる。

1 2 3 4 5

html_minifier: uglify: clean_css:

これでスコアは76点から80点に。

5. gzip圧縮

ファイル転送時にgzipという形式で圧縮することで転送速度がさらに上がるらしい。
これはサーバ側で設定できる。
私はnginxを使用しているのでnginxの設定ファイル/etc/nginx/nginx.confを編集する。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

http { include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; #tcp_nopush on; keepalive_timeout 65; #gzip on; include /etc/nginx/conf.d/*.conf; }

の#gzip on;のところを編集。
コメントアウトを解除してgzip on;とすれば最低限動くはず。

1	systemctl reload nginx

でnginxの設定を反映。

1	curl -I -H 'Accept-Encoding:gzip,deflate' 対象のアドレス

のコマンドでgzipが機能しているか確認できる。
返ってきた文字列の中に

1	Content-Encoding: gzip

が含まれていたらOK。

さっそく試してみたところ含まれていなかったのでNG。
サーバー内部から試すとOKだった。
PageSpeed Insights からも認識されていない。
謎。保留。

後日サイトをドメイン登録したら反映された。

6. 結果

3. 画像サイズ削減
4. テキスト圧縮

の2つが特に有効。
PageSpeed Insights のスコアは27％ほど上昇。(63 → 80)

※後日、HTTPSに対応したところスコアが70前後に下降。

タグ Hexo, nginx