ブログの読み込みが遅い
AstroとCodeberg Pagesを用いてブログを立ち上げたは良いものの、Codebergのサーバーがドイツにあるという事もあり、そのままだと読み込みがかなり遅いので軽量化に挑戦してみることにしました。
画像
カバー画像
トップページに表示している画像だけでも結構なサイズになっていたので、Googleの提供しているSquooshを使って圧縮していきます。
これだけでも画像の容量を1/3 程度に抑えることができました。
記事内の画像
検証中に気がついたのですが、ゲームの記事で使っている画像など、1920x1080のスクショをそのままペタペタ貼ってたので、キャッシュなしの状態から開こうとするとかなりの遅さになってしまっていました。
こちらは以下の記事を参考に、Cloudflare Workersを利用して画像サイズを圧縮する仕組みを作ります。
if (url.pathname.endsWith(".webp")) {
return fetch(imageRequest);
}
const options = {
cf: {
image: {
fit: "scale-down",
width: 1280,
height: 800,
quality: 75,
format : "webp"
}
}
}こんな感じで、手動で圧縮済みのwebp 以外のファイル且つ幅が1280以上若しくは高さが800を超える画像を自動でリサイズして、品質 75%のwebpに変換するようにしてみました。
ファイルサイズを見てみると、元々の1920x1080のスクショに比べて、見た目をほとんど維持したまま20分の1に抑えられています。
キャッシュ
デフォルトだとCodeberg Pagesはキャッシュの寿命が10分に設定されているので、Cloudflareを使って24時間に設定し直しました。
追加でCache Rulesを使って以下のような条件を設定して、Astroによって生成されたjs、cssやfontsフォルダ、カバー画像のキャッシュ期間を1年に設定。
結果
当初の1/3ほどの時間でページが描画されるようになりました。実際に試してみて体感でもかなり速くなっていると感じたので、成功です。
ここまで無料でさせてくれるCloudflareは本当に凄いですね……