ポイント
- 画像表示のボトルネックを探す
- 画像を圧縮しても速くならない
- 画像サーバーを変更すると速くなる
目的：ブログサイトの表示を高速化する
Webサイト の表示を高速化する。
Google Blogger の 画像サーバーが低速化したので、乗り換え先を探す。
画像表示のボトルネックを検証
まずは Chrome の開発者ツール（パソコン の F12）で画像表示のボトルネックを調べる。
① ページの読み込み
② 画像の読み込み
③ 画像の描画
画像を表示するまでにかかった時間が LCP（Largest Contentful Paint ）で、この値が小さいほど ページ が快適に表示される。
① と ② は、さらに サーバー待機時間 と ダウンロード時間 に分かれる。上の図の色の薄い部分が待機時間、濃い部分が実際のダウンロード時間に相当する。
見た感じ、色の薄いサーバー待機時間がかなり長い。
それぞれについて 11回 測定して中央値を求めた、
11回測定した中央値
グラフの青色の部分が ページの読み込み、緑色の部分が画像の読み込み に相当する。LCP をみると、描画の終了まで 2秒弱 かかっている。
画像の読み込み時間をみると、そのほとんど 0.6秒 近くをサーバー待機の時間が占めている。実際のダウンロード時間は 0.1秒 もない。
今より 画像を圧縮したり解像度を下げたりしても、転送時間はほとんど変わらない。
テストに使用した画像 73.3 kB
また、今回の計測からすると、解像度を２倍に上げても転送は 0.3 秒 以内に終了する。
画像サーバーの変更
読み込みの大部分を占めるサーバーの待機時間は、こちらではどうすることもできない。解決するには、サーバーを変更するしか無い。
今回、乗り換え先として２つのサーバーを試してみた。
方法１：外部サーバー（ul.h3z.jp）
いろいろ探して、無料で利用できるサーバーを見つけることができた。
こちらは個人サーバーで、管理人が自分で使用するための機能を拡張して提供している。無料で利用できて、アカウントの登録も必要ない。
ただし個人提供のサービスのため、管理人の都合でサービス終了があり得ることが明記されている。
実際の転送速度
こちらの サーバー は Cloudflare を導入されていて、速度も申し分ない。LCP も 1秒 程度 まで短縮している。
方法２：Blogger の旧画像サーバー
Google Blogger 限定になるが、一部のページで Blogger の旧画像サーバーを利用することができる。
今でも、さめさんの記事の方法で、旧サーバーの 画像URL を取得できる。
そこで、新旧画像サーバーを比較してみた。
新旧画像サーバーの比較
驚いたことに、旧画像サーバーの 待機時間はほぼ ゼロ になっている。0.6 秒分、そのまま LCP が短縮している。
３つのサーバーの比較
| 単位（ミリ秒） | 新画像サーバー | ul.h3zip | 旧画像サーバー |
|---|---|---|---|
| 画像読み込み開始 | 1,040 | 812 | 853 |
| 接続 | 96 | 18 | 114 |
| サーバー待機 | 615 | 57 | 1 |
| ダウンロード | 40 | 23 | 16 |
| 画像の読み込み完了 | 1,790 | 910 | 984 |
| LCP | 1,871 | 966 | 1,020 |
サーバーを変更すると、待機時間の減少がそのまま LCP の減少 につながっている。
ダウンロード時間も短くなっているので、容量の大きい画像を使用した時にさらに差が出るかもしれない。
サーバー変更の問題点
外部のサーバーには、次の問題点がある。
- サーバーにトラブルが起きると画像が表示されない
- サービスが終了する可能性がある
これらについて、ページ表示後に画像の差し替えることで対応する。
次の記事
前の記事
オリジナルの記事