Astro v4.4リリース！開発ツールバーやパフォーマンス改善をチェック

Astroはコンテンツファーストの静的サイトジェネレーターです。その最新バージョンであるAstro 4.4がリリースされました。

このアップデートは、開発者の生産性向上とパフォーマンス改善に焦点を当てています。この記事では、Astro 4.4の主要なアップデートポイントを紹介します。

開発ツールバーのパフォーマンス監査機能

パフォーマンス監査はAstro 4.4の目玉機能の一つです。アクセシビリティ監査機能に続き、この新機能はWebサイトのパフォーマンス問題を特定し、解決策を提案するのに役立ちます。

たとえば、開発ツールバーは画面上部に配置された遅延読み込みの画像を警告し、より優れたパフォーマンスのためにイーガーロードを推奨します。

多くのWebサイトでは、最初の通信量を減らして高速化するために画像を遅れて読み込む「遅延読み込み」が使われています。しかし、最初に表示されるビューポート内の画像が遅延読み込みされると、パフォーマンスが悪化することが知られています。

Astro 4.4の開発ツールバーはこのような問題を特定し、修正するためのガイダンスを提供します。

監査リストUI

Astro 4.4から、開発ツールバーの監査アプリには、検出された問題の小さなUIが含まれるようになりました。このリストを使うと対処すべき問題が一目でわかり、問題のあるページ部分に素早く移動して修正できます。

今後、このUIはさらに改善され、各問題についての詳細情報や修正方法に関するガイダンスが提供される予定です。

ストリーミングパフォーマンスの改善

AstroはNode.js上でのReadableStreamsのパフォーマンスが想定以上に遅いことを発見し、AsyncIterableを使用するよう移行しました。この変更により、大きなサイドバーをもつStarlightベースのWebサイトのビルド時間が最大で47%短縮されるなど、顕著なパフォーマンス向上が見られました。

リモート画像の寸法を自動推測

Astro 4.4はリモートの画像の寸法を自動的に推測できるようになりました。新しいinferSize属性を使うことで、従来必須だったwidthとheightの属性を省略できます。

これはCMSや他の外部ソースからの画像を扱うときなど、ビルド時に画像の寸法が分からない場合にとくに便利です。

1
---
2
import { Image, Picture } from "astro:assets";
3
---
4

5
<Image src="https://example.com/image.jpg" alt="A cool image" inferSize />
6
<Picture src="https://example.com/image.jpg" alt="A cool image" inferSize />

ただし、この機能を使用するととくにSSRを使用している場合にパフォーマンスが悪化するとのことです。そのため、必要な場合にのみ使用することが推奨されています。

この機能の詳細は公式ドキュメントを参照してください。

まとめ

次のいずれかのコマンドを実行すると、Astroをv4.4にアップデートできます。

npx @astrojs/upgrade
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

このリリースには多数のバグ修正も含まれています。詳細はリリースノートで確認できます。

参考

• Astro 4.4 | Astro