ポイント

目的：ブログサイトの表示を高速化する

Webサイトの表示を高速化する。

Google Blogger の画像サーバーが低速化したので、乗り換え先を探す。

まずは Chrome の開発者ツール（パソコンの F12）で画像表示のボトルネックを調べる。

①　ページの読み込み
②　画像の読み込み
③　画像の描画

画像を表示するまでにかかった時間が LCP（Largest Contentful Paint ）で、この値が小さいほどページが快適に表示される。

① と ② は、さらにサーバー待機時間とダウンロード時間に分かれる。上の図の色の薄い部分が待機時間、濃い部分が実際のダウンロード時間に相当する。

見た感じ、色の薄いサーバー待機時間がかなり長い。

それぞれについて 11回測定して中央値を求めた、

グラフの青色の部分がページの読み込み、緑色の部分が画像の読み込みに相当する。LCP をみると、描画の終了まで 2秒弱かかっている。

画像の読み込み時間をみると、そのほとんど 0.6秒近くをサーバー待機の時間が占めている。実際のダウンロード時間は 0.1秒もない。

今より 画像を圧縮したり解像度を下げたりしても、転送時間はほとんど変わらない。

テストに使用した画像　73.3 kB

また、今回の計測からすると、解像度を２倍に上げても転送は 0.3 秒以内に終了する。

読み込みの大部分を占めるサーバーの待機時間は、こちらではどうすることもできない。解決するには、サーバーを変更するしか無い。

今回、乗り換え先として２つのサーバーを試してみた。

いろいろ探して、無料で利用できるサーバーを見つけることができた。

こちらは個人サーバーで、管理人が自分で使用するための機能を拡張して提供している。無料で利用できて、アカウントの登録も必要ない。

ただし個人提供のサービスのため、管理人の都合でサービス終了があり得ることが明記されている。

こちらのサーバーは Cloudflare を導入されていて、速度も申し分ない。LCP も 1秒程度まで短縮している。

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 の減少 につながっている。

ダウンロード時間も短くなっているので、容量の大きい画像を使用した時にさらに差が出るかもしれない。

外部のサーバーには、次の問題点がある。

これらについて、ページ表示後に画像の差し替えることで対応する。

次の記事

前の記事

オリジナルの記事