【Astro v5】ビルド時間を部分的に97%削減した方法 & Experimental responsive images の見送り理由
Astroで構築したブログのビルド時間を大幅に短縮することに成功しました。
具体的には、ブログ記事ページのSSGで87%、画像最適化処理で97%の削減を実現しています。
(全体では 40% 程度の削減)
本記事では、その具体的な方法と、Astro v5の新機能の採用検討結果についてご紹介します。
【最適化手法】Astroのビルド時間を97%削減するための具体的な施策と実践結果 Nx導入による高速化：-87%(ブログ記事ページのSSG) 【結果】 Astro画像最適化処理を無効化: -97%(画像最適化処理) 対応1: webp画像による事前最適化 対応2: Astroによる画像処理の無効化 対応3: 画像変換指定の削除 【結果】 【検証報告】Astro v5新機能「Experimental responsive images」採用見送りの理由 (参考) 「Experimental responsive images」導入後のログ (約17秒 ⇒ 約50秒) 【まとめ】Astro ブログのビルド時間短縮プラクティス
【最適化手法】Astroのビルド時間を97%削減するための具体的な施策と実践結果
Nx導入による高速化：-87%(ブログ記事ページのSSG)
Nxは、モノレポ管理とビルドの最適化を実現するビルドシステムです。Astroプロジェクトへの導入により、ビルドのcacheが可能になり、変更のないファイルの再ビルドを回避できるようになりました。
詳細な設定は長くなるので他の解説ブログに譲りますが、Notion（ヘッドレスCMSとして使用）のDBから記事データを取得する際に更新日時を引っ張ってきて、それをcache検索条件にしています。
【結果】
(NotionDBからfetchして当ブログページを作成している箇所の比較)
約38秒
17:16:56.541 08:16:56 ▶ src/pages/blog/[slug].astro
17:16:58.968 08:16:56 ├─ /blog/small-homepage-creation-recommendations-12/index.html (+2.43s)
17:16:59.349 08:16:58 ├─ /blog/astro-framework-page-speed-11/index.html (+380ms)
17:17:00.351 08:16:59 ├─ /blog/grid-template-benefits-10/index.html (+1.00s)
17:17:00.737 08:17:00 ├─ /blog/free-google-account-vs-google-workspace-8/index.html (+386ms)
17:17:01.981 08:17:00 ├─ /blog/seo-website-attraction-7/index.html (+1.24s)
17:17:03.932 08:17:01 ├─ /blog/css-flex-grid-app-1/index.html (+1.95s)
17:17:05.409 08:17:03 ├─ /blog/cursor-shift-2/index.html (+1.48s)
17:17:34.412 08:17:05 ├─ /blog/about-us-13/index.html (+29.00s)
17:17:36.858 08:17:34 └─ /blog/otoyo-astro-notion-blog-fork-3/index.html (+2.45s)
約5秒 (-87%)
08:25:32.980 23:25:32 ▶ src/pages/blog/[slug].astro
08:25:33.275 23:25:32 ├─ /blog/small-homepage-creation-recommendations-12/index.html (+294ms)
08:25:33.284 23:25:33 ├─ /blog/astro-framework-page-speed-11/index.html (+8ms)
08:25:33.314 23:25:33 ├─ /blog/grid-template-benefits-10/index.html (+30ms)
08:25:33.327 23:25:33 ├─ /blog/free-google-account-vs-google-workspace-8/index.html (+13ms)
08:25:33.339 23:25:33 ├─ /blog/seo-website-attraction-7/index.html (+13ms)
08:25:34.103 23:25:33 ├─ /blog/css-flex-grid-app-1/index.html (+763ms)
08:25:35.144 23:25:34 ├─ /blog/cursor-shift-2/index.html (+1.04s)
08:25:37.313 23:25:35 ├─ /blog/about-us-13/index.html (+2.17s)
08:25:38.133 23:25:37 └─ /blog/otoyo-astro-notion-blog-fork-3/index.html (+820ms)今回は10記事程度ですが、記事数が多くなってくるとさらに恩恵が大きそうですね。
about-us-13 のページなんて、画像もスタイリングもモリモリなので元々ビルドに約30秒もかかってしまってましたが、Nxを挟むことで約2秒にまで縮まっているのが大きいと思います。
Astro画像最適化処理を無効化: -97%(画像最適化処理)
Astroは画像を自動的に最適化してくれるので、jpgファイルなどを適当にソースに突っ込んでもビルド時にwebp形式のとても軽いファイルにしてくれるのがありがたい機能です。
しかし、ビルド時に毎回変換処理をするので、こまめにビルド&リリースするとなるとチリツモで結構時間を食ってしまいます。
そのため、今回はこの機能を無効化することにしました。
対応1: webp画像による事前最適化
まずはリポジトリに配置している jpg や png の画像たちを webp に変換しておきます。
brewでwebpをインストールし、cwebpコマンドでソースの画像を全てwebpにして配置しました。
私の環境では、フォルダアクションにcwebpコマンドを使ったオートメーションを組んで、フォルダにファイルを配置したら即座にwebpファイルに変換されるようにしています。
しかし、これだけでは不十分です。
Astroはwebpファイルであろうとも更なる最適化処理をしようとするため、ファイルサイズはほぼ変わらないのにまだ変換処理にかかる時間は削減できてません。
そのため、追加の設定が必要になります。
16:05:04.258 generating optimized images
16:05:14.048 07:05:14 ▶ /_astro/*****(before: 14kB, after: 4kB) (+9.79s) (1/27)
16:05:14.050 07:05:14 ▶ /_astro/*****(before: 4kB, after: 4kB) (+1ms) (2/27)
16:05:15.998 07:05:15 ▶ /_astro/*****(before: 3kB, after: 1kB) (+1.95s) (3/27)
16:05:16.055 07:05:16 ▶ /_astro/*****(before: 8kB, after: 8kB) (+56ms) (4/27)
16:05:16.195 07:05:16 ▶ /_astro/*****(before: 73kB, after: 77kB) (+140ms) (5/27)
16:05:16.330 07:05:16 ▶ /_astro/*****(before: 73kB, after: 77kB) (+135ms) (6/27)
16:05:16.340 07:05:16 ▶ /_astro/*****(before: 14kB, after: 1kB) (+9ms) (7/27)
16:05:16.350 07:05:16 ▶ /_astro/*****(before: 20kB, after: 2kB) (+9ms) (8/27)
16:05:16.361 07:05:16 ▶ /_astro/*****(before: 23kB, after: 1kB) (+11ms) (9/27)
16:05:16.369 07:05:16 ▶ /_astro/*****(before: 15kB, after: 1kB) (+8ms) (10/27)
16:05:16.379 07:05:16 ▶ /_astro/*****(before: 24kB, after: 2kB) (+9ms) (11/27)
16:05:16.384 07:05:16 ▶ /_astro/*****(before: 10kB, after: 0kB) (+5ms) (12/27)
16:05:16.631 07:05:16 ▶ /_astro/*****(before: 299kB, after: 143kB) (+247ms) (13/27)
16:05:16.756 07:05:16 ▶ /_astro/*****(before: 37kB, after: 37kB) (+125ms) (14/27)
16:05:16.876 07:05:16 ▶ /_astro/*****(before: 33kB, after: 34kB) (+120ms) (15/27)
16:05:17.011 07:05:17 ▶ /_astro/*****(before: 61kB, after: 64kB) (+134ms) (16/27)
16:05:18.813 07:05:18 ▶ /_astro/*****(before: 631kB, after: 639kB) (+1.80s) (17/27)
16:05:22.201 07:05:22 ▶ /_astro/*****(before: 702kB, after: 728kB) (+3.39s) (18/27)
16:05:27.327 07:05:27 ▶ /_astro/*****(before: 3424kB, after: 3434kB) (+5.13s) (19/27)
16:05:29.003 07:05:29 ▶ /_astro/*****(before: 463kB, after: 473kB) (+1.68s) (20/27)
16:05:30.088 07:05:30 ▶ /_astro/*****(before: 111kB, after: 89kB) (+1.09s) (21/27)
16:05:30.467 07:05:30 ▶ /_astro/*****(before: 26kB, after: 22kB) (+378ms) (22/27)
16:05:30.890 07:05:30 ▶ /_astro/*****(before: 19kB, after: 14kB) (+423ms) (23/27)
16:05:31.730 07:05:31 ▶ /_astro/*****(before: 27kB, after: 19kB) (+839ms) (24/27)
16:05:31.751 07:05:31 ▶ /_astro/*****(before: 6kB, after: 7kB) (+21ms) (25/27)
16:05:31.774 07:05:31 ▶ /_astro/*****(before: 8kB, after: 9kB) (+22ms) (26/27)
16:05:31.794 07:05:31 ▶ /_astro/*****(before: 4kB, after: 4kB) (+20ms) (27/27)
16:05:31.794 07:05:31 ✓ Completed in 27.54s.見やすくなるようファイル名は ***** に置換済み
対応2: Astroによる画像処理の無効化
対応1の対応の続きです。
ソースの画像はwebpなのですでに十分軽い画像ファイルになっているため、Astroの画像最適化処理は以下の設定で無効化します
(see: https://docs.astro.build/ja/guides/images/#no-opパススルーサービスの設定)
import { defineConfig, passthroughImageService } from 'astro/config';
export default defineConfig({
image: {
service: passthroughImageService()
}
});
これであらゆる画像に対して最適化処理をさせなくできます。
今後ソースに追加する画像ファイルは必ずwebp変換する必要が出てくるので仕組み化して対応すべきですね。
対応3: 画像変換指定の削除
ログを見ると、Astroが提供する<Image>コンポーネントに（気まぐれで）設定していたavifフォーマット指定のせいでかなりの時間を食っていることがわかったのでデフォルトのwebpフォーマットにしました。
(対応2 で画像変換処理自体を無効化しているので今回の私の環境ではおそらく意味はないです)
-- <Image {src} {alt} format="avif" />
++ <Image {src} {alt} />
【結果】
約17秒
17:49:11.886 generating optimized images
17:49:12.688 08:49:12 ▶ /_astro/*****(before: 110kB, after: 4kB) (+800ms) (1/26)
17:49:12.692 08:49:12 ▶ /_astro/*****(before: 4kB, after: 4kB) (+3ms) (2/26)
17:49:12.892 08:49:12 ▶ /_astro/*****(before: 18kB, after: 1kB) (+200ms) (3/26)
17:49:12.942 08:49:12 ▶ /_astro/*****(before: 19kB, after: 9kB) (+50ms) (4/26)
17:49:13.072 08:49:13 ▶ /_astro/*****(before: 168kB, after: 89kB) (+130ms) (5/26)
17:49:13.091 08:49:13 ▶ /_astro/*****(before: 594kB, after: 1kB) (+19ms) (6/26)
17:49:13.114 08:49:13 ▶ /_astro/*****(before: 914kB, after: 2kB) (+23ms) (7/26)
17:49:13.136 08:49:13 ▶ /_astro/*****(before: 855kB, after: 2kB) (+22ms) (8/26)
17:49:13.156 08:49:13 ▶ /_astro/*****(before: 646kB, after: 1kB) (+19ms) (9/26)
17:49:13.173 08:49:13 ▶ /_astro/*****(before: 558kB, after: 2kB) (+17ms) (10/26)
17:49:13.184 08:49:13 ▶ /_astro/*****(before: 144kB, after: 0kB) (+11ms) (11/26)
17:49:13.432 08:49:13 ▶ /_astro/*****(before: 299kB, after: 143kB) (+248ms) (12/26)
17:49:13.549 08:49:13 ▶ /_astro/*****(before: 102kB, after: 45kB) (+116ms) (13/26)
17:49:13.661 08:49:13 ▶ /_astro/*****(before: 89kB, after: 39kB) (+112ms) (14/26)
17:49:13.788 08:49:13 ▶ /_astro/*****(before: 139kB, after: 73kB) (+127ms) (15/26)
17:49:15.580 08:49:15 ▶ /_astro/*****(before: 1944kB, after: 634kB) (+1.79s) (16/26)
17:49:18.914 08:49:18 ▶ /_astro/*****(before: 1931kB, after: 703kB) (+3.33s) (17/26)
17:49:24.170 08:49:24 ▶ /_astro/*****(before: 9004kB, after: 3431kB) (+5.26s) (18/26)
17:49:25.793 08:49:25 ▶ /_astro/*****(before: 1323kB, after: 463kB) (+1.62s) (19/26)
17:49:27.049 08:49:27 ▶ /_astro/*****(before: 1082kB, after: 87kB) (+1.26s) (20/26)
17:49:27.505 08:49:27 ▶ /_astro/*****(before: 311kB, after: 21kB) (+456ms) (21/26)
17:49:27.909 08:49:27 ▶ /_astro/*****(before: 227kB, after: 14kB) (+403ms) (22/26)
17:49:28.683 08:49:28 ▶ /_astro/*****(before: 369kB, after: 19kB) (+774ms) (23/26)
17:49:28.701 08:49:28 ▶ /_astro/*****(before: 20kB, after: 7kB) (+18ms) (24/26)
17:49:28.721 08:49:28 ▶ /_astro/*****(before: 28kB, after: 9kB) (+20ms) (25/26)
17:49:28.739 08:49:28 ▶ /_astro/*****(before: 15kB, after: 5kB) (+17ms) (26/26)
17:49:28.739 08:49:28 ✓ Completed in 16.85s.
約0.5秒 (-97%)
10:36:04.411 generating optimized images
10:36:04.413 01:36:04 ▶ /_astro/*****(before: 14kB, after: 14kB) (+2ms) (1/26)
10:36:04.415 01:36:04 ▶ /_astro/*****(before: 4kB, after: 4kB) (+1ms) (2/26)
10:36:04.416 01:36:04 ▶ /_astro/*****(before: 3kB, after: 3kB) (+1ms) (3/26)
10:36:04.417 01:36:04 ▶ /_astro/*****(before: 8kB, after: 8kB) (+1ms) (4/26)
10:36:04.418 01:36:04 ▶ /_astro/*****(before: 73kB, after: 73kB) (+1ms) (5/26)
10:36:04.419 01:36:04 ▶ /_astro/*****(before: 14kB, after: 14kB) (+1ms) (6/26)
10:36:04.420 01:36:04 ▶ /_astro/*****(before: 20kB, after: 20kB) (+1ms) (7/26)
10:36:04.422 01:36:04 ▶ /_astro/*****(before: 23kB, after: 23kB) (+1ms) (8/26)
10:36:04.423 01:36:04 ▶ /_astro/*****(before: 15kB, after: 15kB) (+1ms) (9/26)
10:36:04.424 01:36:04 ▶ /_astro/*****(before: 24kB, after: 24kB) (+1ms) (10/26)
10:36:04.426 01:36:04 ▶ /_astro/*****(before: 10kB, after: 10kB) (+1ms) (11/26)
10:36:04.427 01:36:04 ▶ /_astro/*****(before: 299kB, after: 299kB) (+2ms) (12/26)
10:36:04.428 01:36:04 ▶ /_astro/*****(before: 37kB, after: 37kB) (+1ms) (13/26)
10:36:04.430 01:36:04 ▶ /_astro/*****(before: 33kB, after: 33kB) (+1ms) (14/26)
10:36:04.431 01:36:04 ▶ /_astro/*****(before: 61kB, after: 61kB) (+1ms) (15/26)
10:36:04.433 01:36:04 ▶ /_astro/*****(before: 631kB, after: 631kB) (+2ms) (16/26)
10:36:04.436 01:36:04 ▶ /_astro/*****(before: 702kB, after: 702kB) (+2ms) (17/26)
10:36:04.446 01:36:04 ▶ /_astro/*****(before: 3424kB, after: 3424kB) (+10ms) (18/26)
10:36:04.448 01:36:04 ▶ /_astro/*****(before: 463kB, after: 463kB) (+2ms) (19/26)
10:36:04.449 01:36:04 ▶ /_astro/*****(before: 111kB, after: 111kB) (+1ms) (20/26)
10:36:04.450 01:36:04 ▶ /_astro/*****(before: 26kB, after: 26kB) (+1ms) (21/26)
10:36:04.451 01:36:04 ▶ /_astro/*****(before: 19kB, after: 19kB) (+1ms) (22/26)
10:36:04.452 01:36:04 ▶ /_astro/*****(before: 27kB, after: 27kB) (+1ms) (23/26)
10:36:04.454 01:36:04 ▶ /_astro/*****(before: 6kB, after: 6kB) (+1ms) (24/26)
10:36:04.455 01:36:04 ▶ /_astro/*****(before: 8kB, after: 8kB) (+1ms) (25/26)
10:36:04.456 01:36:04 ▶ /_astro/*****(before: 4kB, after: 4kB) (+1ms) (26/26)
10:36:04.456 01:36:04 ✓ Completed in 45ms.
こちらは圧倒的ですね(最適化処理をまるっとスルーしてるので当然ではありますが)
【検証報告】Astro v5新機能「Experimental responsive images」採用見送りの理由
こちらはv5から試験的に導入された設定です。
1つの画像ファイルから複数のレスポンシブ画像を自動生成し、<Image>コンポーネントが生成する<img>タグのsizesやsrcsetなどの属性をよしなに設定してくれる機能です。
面白い機能だと思って検討してみましたが、1ファイルから複数のレスポンシブ画像をビルド時に生成する仕組みなので、ビルド時間に多大な影響があることがわかりました。(+200%…!)
CLIでレスポンシブ画像を生成でき、commitしてしまえるような仕組みなら採用できたかもしれません（そもそも試験導入段階というのもあります）。
(参考) 「Experimental responsive images」導入後のログ (約17秒 ⇒ 約50秒)
約17秒
17:49:11.886 generating optimized images
17:49:12.688 08:49:12 ▶ /_astro/*****(before: 110kB, after: 4kB) (+800ms) (1/26)
17:49:12.692 08:49:12 ▶ /_astro/*****(before: 4kB, after: 4kB) (+3ms) (2/26)
17:49:12.892 08:49:12 ▶ /_astro/*****(before: 18kB, after: 1kB) (+200ms) (3/26)
17:49:12.942 08:49:12 ▶ /_astro/*****(before: 19kB, after: 9kB) (+50ms) (4/26)
17:49:13.072 08:49:13 ▶ /_astro/*****(before: 168kB, after: 89kB) (+130ms) (5/26)
17:49:13.091 08:49:13 ▶ /_astro/*****(before: 594kB, after: 1kB) (+19ms) (6/26)
17:49:13.114 08:49:13 ▶ /_astro/*****(before: 914kB, after: 2kB) (+23ms) (7/26)
17:49:13.136 08:49:13 ▶ /_astro/*****(before: 855kB, after: 2kB) (+22ms) (8/26)
17:49:13.156 08:49:13 ▶ /_astro/*****(before: 646kB, after: 1kB) (+19ms) (9/26)
17:49:13.173 08:49:13 ▶ /_astro/*****(before: 558kB, after: 2kB) (+17ms) (10/26)
17:49:13.184 08:49:13 ▶ /_astro/*****(before: 144kB, after: 0kB) (+11ms) (11/26)
17:49:13.432 08:49:13 ▶ /_astro/*****(before: 299kB, after: 143kB) (+248ms) (12/26)
17:49:13.549 08:49:13 ▶ /_astro/*****(before: 102kB, after: 45kB) (+116ms) (13/26)
17:49:13.661 08:49:13 ▶ /_astro/*****(before: 89kB, after: 39kB) (+112ms) (14/26)
17:49:13.788 08:49:13 ▶ /_astro/*****(before: 139kB, after: 73kB) (+127ms) (15/26)
17:49:15.580 08:49:15 ▶ /_astro/*****(before: 1944kB, after: 634kB) (+1.79s) (16/26)
17:49:18.914 08:49:18 ▶ /_astro/*****(before: 1931kB, after: 703kB) (+3.33s) (17/26)
17:49:24.170 08:49:24 ▶ /_astro/*****(before: 9004kB, after: 3431kB) (+5.26s) (18/26)
17:49:25.793 08:49:25 ▶ /_astro/*****(before: 1323kB, after: 463kB) (+1.62s) (19/26)
17:49:27.049 08:49:27 ▶ /_astro/*****(before: 1082kB, after: 87kB) (+1.26s) (20/26)
17:49:27.505 08:49:27 ▶ /_astro/*****(before: 311kB, after: 21kB) (+456ms) (21/26)
17:49:27.909 08:49:27 ▶ /_astro/*****(before: 227kB, after: 14kB) (+403ms) (22/26)
17:49:28.683 08:49:28 ▶ /_astro/*****(before: 369kB, after: 19kB) (+774ms) (23/26)
17:49:28.701 08:49:28 ▶ /_astro/*****(before: 20kB, after: 7kB) (+18ms) (24/26)
17:49:28.721 08:49:28 ▶ /_astro/*****(before: 28kB, after: 9kB) (+20ms) (25/26)
17:49:28.739 08:49:28 ▶ /_astro/*****(before: 15kB, after: 5kB) (+17ms) (26/26)
17:49:28.739 08:49:28 ✓ Completed in 16.85s.
約50秒 (+200%)
2024-12-24T07:29:02.535428566Z generating optimized images
2024-12-24T07:29:02.539197289Z 07:29:02 ▶ /_astro/hacksaw_48x48.CDmeoP2c_Z112jf4.svg (before: 4kB, after: 4kB) (+2ms) (1/99)
2024-12-24T07:29:03.351090048Z 07:29:03 ▶ /_astro/1920x1080.BE4a2yiG_1OhC02.avif (before: 110kB, after: 4kB) (+811ms) (2/99)
2024-12-24T07:29:03.51131434Z 07:29:03 ▶ /_astro/1920x1080.BE4a2yiG_1ipEN1.avif (before: 110kB, after: 1kB) (+160ms) (3/99)
2024-12-24T07:29:03.688636426Z 07:29:03 ▶ /_astro/1920x1080.BE4a2yiG_Z1jV2a.avif (before: 110kB, after: 1kB) (+177ms) (4/99)
2024-12-24T07:29:03.885302555Z 07:29:03 ▶ /_astro/1920x1080.BE4a2yiG_Z1qjwob.avif (before: 110kB, after: 2kB) (+197ms) (5/99)
2024-12-24T07:29:04.231296055Z 07:29:04 ▶ /_astro/1920x1080.BE4a2yiG_oBFXR.avif (before: 110kB, after: 2kB) (+346ms) (6/99)
2024-12-24T07:29:04.705270354Z 07:29:04 ▶ /_astro/1920x1080.BE4a2yiG_Z1rk1tP.avif (before: 110kB, after: 3kB) (+474ms) (7/99)
2024-12-24T07:29:05.368288858Z 07:29:05 ▶ /_astro/1920x1080.BE4a2yiG_1dt618.avif (before: 110kB, after: 4kB) (+663ms) (8/99)
2024-12-24T07:29:05.560413096Z 07:29:05 ▶ /_astro/390x844.BhXWwlz9_1xgDiq.avif (before: 18kB, after: 1kB) (+192ms) (9/99)
2024-12-24T07:29:05.611250795Z 07:29:05 ▶ /_astro/blog-eyecatch.s4_X_ayJ_29I2do.webp (before: 19kB, after: 9kB) (+50ms) (10/99)
2024-12-24T07:29:05.648555325Z 07:29:05 ▶ /_astro/blog-eyecatch.s4_X_ayJ_Z1vfbL0.webp (before: 19kB, after: 5kB) (+37ms) (11/99)
2024-12-24T07:29:05.695655348Z 07:29:05 ▶ /_astro/blog-eyecatch.s4_X_ayJ_2oBUHX.webp (before: 19kB, after: 6kB) (+47ms) (12/99)
2024-12-24T07:29:05.748456926Z 07:29:05 ▶ /_astro/blog-eyecatch.s4_X_ayJ_ZjJBqP.webp (before: 19kB, after: 7kB) (+53ms) (13/99)
2024-12-24T07:29:05.876744072Z 07:29:05 ▶ /_astro/6.Dq8BPXnL_Z1T4gdY.webp (before: 168kB, after: 89kB) (+128ms) (14/99)
2024-12-24T07:29:05.928254752Z 07:29:05 ▶ /_astro/6.Dq8BPXnL_11ffq1.webp (before: 168kB, after: 33kB) (+51ms) (15/99)
2024-12-24T07:29:05.99070519Z 07:29:05 ▶ /_astro/6.Dq8BPXnL_Z1aGo4A.webp (before: 168kB, after: 41kB) (+62ms) (16/99)
2024-12-24T07:29:06.063517135Z 07:29:06 ▶ /_astro/6.Dq8BPXnL_1u05wY.webp (before: 168kB, after: 47kB) (+73ms) (17/99)
2024-12-24T07:29:06.174948835Z 07:29:06 ▶ /_astro/6.Dq8BPXnL_ArPN6.webp (before: 168kB, after: 67kB) (+111ms) (18/99)
2024-12-24T07:29:06.320556719Z 07:29:06 ▶ /_astro/6.Dq8BPXnL_Z2f0wRV.webp (before: 168kB, after: 83kB) (+145ms) (19/99)
2024-12-24T07:29:06.339372138Z 07:29:06 ▶ /_astro/black-coffee.CLnzl6M6_297qVv.webp (before: 594kB, after: 1kB) (+18ms) (20/99)
2024-12-24T07:29:06.361170368Z 07:29:06 ▶ /_astro/black-coffee.CLnzl6M6_ZltTbE.webp (before: 594kB, after: 4kB) (+22ms) (21/99)
2024-12-24T07:29:06.386401324Z 07:29:06 ▶ /_astro/cafe-latte.b2L6O2RB_ZP6fMH.webp (before: 914kB, after: 2kB) (+24ms) (22/99)
2024-12-24T07:29:06.415863362Z 07:29:06 ▶ /_astro/cafe-latte.b2L6O2RB_ZP8Bgr.webp (before: 914kB, after: 4kB) (+30ms) (23/99)
2024-12-24T07:29:06.439709087Z 07:29:06 ▶ /_astro/cappuccino.Li9N2IR8_2cRlnP.webp (before: 855kB, after: 2kB) (+23ms) (24/99)
2024-12-24T07:29:06.469820701Z 07:29:06 ▶ /_astro/cappuccino.Li9N2IR8_2cOYU6.webp (before: 855kB, after: 5kB) (+30ms) (25/99)
2024-12-24T07:29:06.489538378Z 07:29:06 ▶ /_astro/americano-coffee.DVUqwqiF_2civ11.webp (before: 646kB, after: 1kB) (+19ms) (26/99)
2024-12-24T07:29:06.511484124Z 07:29:06 ▶ /_astro/americano-coffee.DVUqwqiF_Z1iBHJT.webp (before: 646kB, after: 4kB) (+22ms) (27/99)
2024-12-24T07:29:06.528852904Z 07:29:06 ▶ /_astro/mocha-latte.CMxzZqtd_2dAfKa.webp (before: 558kB, after: 2kB) (+17ms) (28/99)
2024-12-24T07:29:06.551216383Z 07:29:06 ▶ /_astro/mocha-latte.CMxzZqtd_1bC9MJ.webp (before: 558kB, after: 7kB) (+22ms) (29/99)
2024-12-24T07:29:06.561963642Z 07:29:06 ▶ /_astro/logo.CGHfZFXr_2ujcKR.webp (before: 144kB, after: 0kB) (+11ms) (30/99)
2024-12-24T07:29:06.574279489Z 07:29:06 ▶ /_astro/logo.CGHfZFXr_1YqK58.webp (before: 144kB, after: 1kB) (+12ms) (31/99)
2024-12-24T07:29:06.829686472Z 07:29:06 ▶ /_astro/2.DsdgmIYO_ZuaBhY.webp (before: 299kB, after: 143kB) (+255ms) (32/99)
2024-12-24T07:29:06.890789955Z 07:29:06 ▶ /_astro/2.DsdgmIYO_2uTisG.webp (before: 299kB, after: 18kB) (+61ms) (33/99)
2024-12-24T07:29:06.960180967Z 07:29:06 ▶ /_astro/2.DsdgmIYO_Z1iymlB.webp (before: 299kB, after: 23kB) (+69ms) (34/99)
2024-12-24T07:29:07.044311979Z 07:29:07 ▶ /_astro/2.DsdgmIYO_YFCt4.webp (before: 299kB, after: 28kB) (+84ms) (35/99)
2024-12-24T07:29:07.153145217Z 07:29:07 ▶ /_astro/2.DsdgmIYO_1L6eLw.webp (before: 299kB, after: 44kB) (+109ms) (36/99)
2024-12-24T07:29:07.295460667Z 07:29:07 ▶ /_astro/2.DsdgmIYO_Zl2eIj.webp (before: 299kB, after: 59kB) (+142ms) (37/99)
2024-12-24T07:29:07.528780646Z 07:29:07 ▶ /_astro/2.DsdgmIYO_Z2uIyKk.webp (before: 299kB, after: 91kB) (+233ms) (38/99)
2024-12-24T07:29:07.647700859Z 07:29:07 ▶ /_astro/5.DADZj_AM_Z1j1qSE.webp (before: 102kB, after: 45kB) (+119ms) (39/99)
2024-12-24T07:29:07.695927042Z 07:29:07 ▶ /_astro/5.DADZj_AM_Z2oI2Gz.webp (before: 102kB, after: 17kB) (+48ms) (40/99)
2024-12-24T07:29:07.755559182Z 07:29:07 ▶ /_astro/5.DADZj_AM_twrBK.webp (before: 102kB, after: 22kB) (+60ms) (41/99)
2024-12-24T07:29:07.825401472Z 07:29:07 ▶ /_astro/5.DADZj_AM_Z1UXczB.webp (before: 102kB, after: 25kB) (+70ms) (42/99)
2024-12-24T07:29:07.930741339Z 07:29:07 ▶ /_astro/5.DADZj_AM_1buF8q.webp (before: 102kB, after: 34kB) (+105ms) (43/99)
2024-12-24T07:29:08.068378548Z 07:29:08 ▶ /_astro/5.DADZj_AM_Z1DWHxB.webp (before: 102kB, after: 42kB) (+137ms) (44/99)
2024-12-24T07:29:08.179630916Z 07:29:08 ▶ /_astro/coffee.CBgPmR-z_2D6Lc.webp (before: 89kB, after: 39kB) (+111ms) (45/99)
2024-12-24T07:29:08.226424238Z 07:29:08 ▶ /_astro/coffee.CBgPmR-z_Zctu4H.webp (before: 89kB, after: 16kB) (+47ms) (46/99)
2024-12-24T07:29:08.28420632Z 07:29:08 ▶ /_astro/coffee.CBgPmR-z_Z3hoVp.webp (before: 89kB, after: 20kB) (+58ms) (47/99)
2024-12-24T07:29:08.349299393Z 07:29:08 ▶ /_astro/coffee.CBgPmR-z_Z1Lmsva.webp (before: 89kB, after: 22kB) (+65ms) (48/99)
2024-12-24T07:29:08.450143827Z 07:29:08 ▶ /_astro/coffee.CBgPmR-z_25SJEi.webp (before: 89kB, after: 31kB) (+101ms) (49/99)
2024-12-24T07:29:08.590150566Z 07:29:08 ▶ /_astro/coffee.CBgPmR-z_1f5I5a.webp (before: 89kB, after: 37kB) (+140ms) (50/99)
2024-12-24T07:29:08.720039869Z 07:29:08 ▶ /_astro/cup.BR5jNvdJ_Z1kMhJo.webp (before: 139kB, after: 73kB) (+130ms) (51/99)
2024-12-24T07:29:08.773259279Z 07:29:08 ▶ /_astro/cup.BR5jNvdJ_Z2tQcam.webp (before: 139kB, after: 29kB) (+53ms) (52/99)
2024-12-24T07:29:08.8375131Z 07:29:08 ▶ /_astro/cup.BR5jNvdJ_Z18zxKE.webp (before: 139kB, after: 36kB) (+64ms) (53/99)
2024-12-24T07:29:08.911100513Z 07:29:08 ▶ /_astro/cup.BR5jNvdJ_Z4NeTI.webp (before: 139kB, after: 40kB) (+73ms) (54/99)
2024-12-24T07:29:09.024906445Z 07:29:09 ▶ /_astro/cup.BR5jNvdJ_tYGI.webp (before: 139kB, after: 56kB) (+114ms) (55/99)
2024-12-24T07:29:09.168736604Z 07:29:09 ▶ /_astro/cup.BR5jNvdJ_ZHJARw.webp (before: 139kB, after: 70kB) (+144ms) (56/99)
2024-12-24T07:29:10.98277531Z 07:29:10 ▶ /_astro/coffee-stain_38.CqiWbS2__Z1B1WBW.webp (before: 1944kB, after: 634kB) (+1.81s) (57/99)
2024-12-24T07:29:11.281075408Z 07:29:11 ▶ /_astro/coffee-stain_38.CqiWbS2__1Szt9a.webp (before: 1944kB, after: 77kB) (+298ms) (58/99)
2024-12-24T07:29:11.602362134Z 07:29:11 ▶ /_astro/coffee-stain_38.CqiWbS2__2uKWI7.webp (before: 1944kB, after: 98kB) (+321ms) (59/99)
2024-12-24T07:29:11.951749733Z 07:29:11 ▶ /_astro/coffee-stain_38.CqiWbS2__Z2h1v8V.webp (before: 1944kB, after: 116kB) (+349ms) (60/99)
2024-12-24T07:29:12.443558548Z 07:29:12 ▶ /_astro/coffee-stain_38.CqiWbS2__Z2pnoKc.webp (before: 1944kB, after: 177kB) (+492ms) (61/99)
2024-12-24T07:29:13.032483204Z 07:29:13 ▶ /_astro/coffee-stain_38.CqiWbS2__Zxaj3G.webp (before: 1944kB, after: 232kB) (+589ms) (62/99)
2024-12-24T07:29:13.975864459Z 07:29:13 ▶ /_astro/coffee-stain_38.CqiWbS2__ZE5pte.webp (before: 1944kB, after: 353kB) (+943ms) (63/99)
2024-12-24T07:29:15.234518649Z 07:29:15 ▶ /_astro/coffee-stain_38.CqiWbS2__Z1tdCAv.webp (before: 1944kB, after: 480kB) (+1.26s) (64/99)
2024-12-24T07:29:17.029679735Z 07:29:17 ▶ /_astro/coffee-stain_38.CqiWbS2__2gm9uG.webp (before: 1944kB, after: 664kB) (+1.79s) (65/99)
2024-12-24T07:29:20.443092216Z 07:29:20 ▶ /_astro/coffee-stain_44.BjuWiG3u_1Q5ejc.webp (before: 1931kB, after: 703kB) (+3.41s) (66/99)
2024-12-24T07:29:20.941014652Z 07:29:20 ▶ /_astro/coffee-stain_44.BjuWiG3u_1jzyho.webp (before: 1931kB, after: 85kB) (+498ms) (67/99)
2024-12-24T07:29:21.519181832Z 07:29:21 ▶ /_astro/coffee-stain_44.BjuWiG3u_8RUYh.webp (before: 1931kB, after: 105kB) (+578ms) (68/99)
2024-12-24T07:29:22.081673844Z 07:29:22 ▶ /_astro/coffee-stain_44.BjuWiG3u_jw7C2.webp (before: 1931kB, after: 117kB) (+562ms) (69/99)
2024-12-24T07:29:22.840222003Z 07:29:22 ▶ /_astro/coffee-stain_44.BjuWiG3u_Z1T8gWt.webp (before: 1931kB, after: 182kB) (+758ms) (70/99)
2024-12-24T07:29:23.777123435Z 07:29:23 ▶ /_astro/coffee-stain_44.BjuWiG3u_Z2nY44o.webp (before: 1931kB, after: 237kB) (+937ms) (71/99)
2024-12-24T07:29:25.141632381Z 07:29:25 ▶ /_astro/coffee-stain_44.BjuWiG3u_1Q4KnA.webp (before: 1931kB, after: 352kB) (+1.36s) (72/99)
2024-12-24T07:29:26.958185704Z 07:29:26 ▶ /_astro/coffee-stain_44.BjuWiG3u_3dqNB.webp (before: 1931kB, after: 476kB) (+1.82s) (73/99)
2024-12-24T07:29:29.719592779Z 07:29:29 ▶ /_astro/coffee-stain_44.BjuWiG3u_1OMh0t.webp (before: 1931kB, after: 650kB) (+2.76s) (74/99)
2024-12-24T07:29:34.950082232Z 07:29:34 ▶ /_astro/coffee-stain_99.CvLViWeq_Z2gM7wH.webp (before: 9004kB, after: 3431kB) (+5.23s) (75/99)
2024-12-24T07:29:35.481506679Z 07:29:35 ▶ /_astro/coffee-stain_99.CvLViWeq_2oTYaX.webp (before: 9004kB, after: 95kB) (+531ms) (76/99)
2024-12-24T07:29:36.053228814Z 07:29:36 ▶ /_astro/coffee-stain_99.CvLViWeq_ZKzt6N.webp (before: 9004kB, after: 125kB) (+572ms) (77/99)
2024-12-24T07:29:36.645606235Z 07:29:36 ▶ /_astro/coffee-stain_99.CvLViWeq_Z9mtrA.webp (before: 9004kB, after: 150kB) (+592ms) (78/99)
2024-12-24T07:29:37.40205185Z 07:29:37 ▶ /_astro/coffee-stain_99.CvLViWeq_Z1e2hOG.webp (before: 9004kB, after: 244kB) (+756ms) (79/99)
2024-12-24T07:29:38.154586592Z 07:29:38 ▶ /_astro/coffee-stain_99.CvLViWeq_2lpEWM.webp (before: 9004kB, after: 331kB) (+752ms) (80/99)
2024-12-24T07:29:39.185139669Z 07:29:39 ▶ /_astro/coffee-stain_99.CvLViWeq_SAYPY.webp (before: 9004kB, after: 544kB) (+1.03s) (81/99)
2024-12-24T07:29:40.5576279Z 07:29:40 ▶ /_astro/coffee-stain_99.CvLViWeq_Z1gYqD4.webp (before: 9004kB, after: 792kB) (+1.37s) (82/99)
2024-12-24T07:29:42.406711413Z 07:29:42 ▶ /_astro/coffee-stain_99.CvLViWeq_1W1DEA.webp (before: 9004kB, after: 1188kB) (+1.85s) (83/99)
2024-12-24T07:29:44.033081764Z 07:29:44 ▶ /_astro/coffee-stain_46.CqsxP8sB_Z82jmW.webp (before: 1323kB, after: 463kB) (+1.63s) (84/99)
2024-12-24T07:29:44.524330386Z 07:29:44 ▶ /_astro/coffee-stain_46.CqsxP8sB_Z1ofQVs.webp (before: 1323kB, after: 139kB) (+491ms) (85/99)
2024-12-24T07:29:45.143857593Z 07:29:45 ▶ /_astro/coffee-stain_46.CqsxP8sB_2pJqij.webp (before: 1323kB, after: 179kB) (+619ms) (86/99)
2024-12-24T07:29:45.857155618Z 07:29:45 ▶ /_astro/coffee-stain_46.CqsxP8sB_g19iI.webp (before: 1323kB, after: 213kB) (+713ms) (87/99)
2024-12-24T07:29:46.917042721Z 07:29:46 ▶ /_astro/coffee-stain_46.CqsxP8sB_VWp1i.webp (before: 1323kB, after: 328kB) (+1.06s) (88/99)
2024-12-24T07:29:48.345638184Z 07:29:48 ▶ /_astro/coffee-stain_46.CqsxP8sB_9Ir5A.webp (before: 1323kB, after: 430kB) (+1.43s) (89/99)
2024-12-24T07:29:49.552434702Z 07:29:49 ▶ /_astro/1024x512.B7pRmFQw_ZM1XGx.avif (before: 1082kB, after: 87kB) (+1.21s) (90/99)
2024-12-24T07:29:50.117652051Z 07:29:50 ▶ /_astro/1024x512.B7pRmFQw_rjrHB.avif (before: 1082kB, after: 41kB) (+563ms) (91/99)
2024-12-24T07:29:50.776980308Z 07:29:50 ▶ /_astro/1024x512.B7pRmFQw_25ls98.avif (before: 1082kB, after: 52kB) (+661ms) (92/99)
2024-12-24T07:29:51.530642742Z 07:29:51 ▶ /_astro/1024x512.B7pRmFQw_Z2gWcUF.avif (before: 1082kB, after: 61kB) (+753ms) (93/99)
2024-12-24T07:29:52.008364594Z 07:29:52 ▶ /_astro/269x503.BxfpVLjp_Z1XLTad.avif (before: 311kB, after: 21kB) (+477ms) (94/99)
2024-12-24T07:29:52.432534978Z 07:29:52 ▶ /_astro/485x411.BleKtI2L_Zw2usM.avif (before: 227kB, after: 14kB) (+422ms) (95/99)
2024-12-24T07:29:53.209908633Z 07:29:53 ▶ /_astro/638x540.CM19vKKI_rX9Wc.avif (before: 369kB, after: 19kB) (+777ms) (96/99)
2024-12-24T07:29:53.228568589Z 07:29:53 ▶ /_astro/type-a_320x320.C8K9kshh_ZavHAM.webp (before: 20kB, after: 7kB) (+18ms) (97/99)
2024-12-24T07:29:53.249041121Z 07:29:53 ▶ /_astro/type-b_320x320.fhZgScbY_Z2opAnE.webp (before: 28kB, after: 9kB) (+20ms) (98/99)
2024-12-24T07:29:53.267001504Z 07:29:53 ▶ /_astro/type-c_320x320.UdKMb4c0_Z4r3oh.webp (before: 15kB, after: 5kB) (+17ms) (99/99)
2024-12-24T07:29:53.267537916Z 07:29:53 ✓ Completed in 50.73s.ファイル名から、1画像を元に複数サイズの画像が生成されているのがわかります
【まとめ】Astro ブログのビルド時間短縮プラクティス
今回の最適化で得られた知見をまとめると
- Nxの導入による増分ビルドの活用
- 画像の事前最適化とAstroの画像処理の無効化
主にこの2つの施策により、開発効率の大幅な向上を実現できました。
特に記事数や画像数が多いブログサイトでは、これらの最適化が効果を発揮すると思いますので一度ビルドログをじっくり読み込んでみてはいかがでしょうか！