|
| 1 | +--- |
| 2 | +title: "Astro 4.4" |
| 3 | +description: "Astro 4.4 is now available! This release includes the addition of performance audits for the dev toolbar, performance upgrades, the ability to automatically infer the dimensions of remote images, and more." |
| 4 | +publishDate: "February 15, 2024" |
| 5 | +authors: |
| 6 | + - erika |
| 7 | + - ema |
| 8 | + - matthew |
| 9 | + - nate |
| 10 | + - bjorn |
| 11 | +coverImage: "/src/content/blog/_images/astro-440/post-header-4.4.webp" |
| 12 | +socialImage: "/src/content/blog/_images/astro-440/og-image-4.4.webp" |
| 13 | +lang: "en" |
| 14 | +--- |
| 15 | + |
| 16 | +import perfAuditImage from "./_images/astro-440/perf-audit.webp" |
| 17 | +import BlogContentImage from "/src/components/BlogContentImage.astro" |
| 18 | + |
| 19 | +Astro 4.4 is now available! This release includes performance audits for the dev toolbar, improved streaming performance, the ability to automatically infer the dimensions of remote images, and more. |
| 20 | + |
| 21 | +Highlights include: |
| 22 | + |
| 23 | +- [**Performance Audits**](#performance-audits) |
| 24 | +- [**Audit list**](#audit-list) |
| 25 | +- [**Improved streaming performance**](#improved-streaming-performance) |
| 26 | +- [**New `inferSize` properties for remote images**](#automatically-infer-dimensions-of-remote-images) |
| 27 | + |
| 28 | +## How to upgrade |
| 29 | + |
| 30 | +To take advantage of the latest features, make sure you're running the latest version of Astro. You can upgrade to Astro 4.4 by running the `@astrojs/upgrade` command: |
| 31 | + |
| 32 | +```sh |
| 33 | +npx @astrojs/upgrade |
| 34 | +``` |
| 35 | + |
| 36 | +or by running the upgrade command for your package manager: |
| 37 | + |
| 38 | +```sh |
| 39 | +npm install astro@latest |
| 40 | +pnpm upgrade astro --latest |
| 41 | +yarn upgrade astro --latest |
| 42 | +``` |
| 43 | + |
| 44 | +## Performance audits |
| 45 | + |
| 46 | +Astro 4.4 includes the addition of performance audits for the dev toolbar. Much like the accessibility audits currently available, performance audits will help you identify and fix performance issues in your Astro site. For example, the dev toolbar will now warn you when a lazy-loaded image is above the fold, recommending instead that you use eager loading for better performance. |
| 47 | + |
| 48 | +<BlogContentImage src={perfAuditImage} alt="Shows a tooltip telling the user to use loading='lazy' on an image below the fold." /> |
| 49 | + |
| 50 | +## Audit list |
| 51 | + |
| 52 | +Starting from Astro 4.4, the dev toolbar's audit app includes a small UI showing the list of problems that have been detected. This list is a great way to quickly see what issues need to be addressed and to jump to the relevant part of the page to fix them. In the future, we'll be expanding this UI to show more information about each issue, and to provide more guidance on how to fix them. |
| 53 | + |
| 54 | +## Improved streaming performance |
| 55 | + |
| 56 | +This release includes performance improvements for streaming. We discovered recently that `ReadableStream`s were slower than expected on Node.js, and migrated Astro to use `AsyncIterable` instead when running on Node.js. Notably, this change reduced the build time of Starlight websites with large sidebars by up to 47% in extreme cases. For more technical details, check out the [pull request](https://github.com/withastro/astro/pull/9614) for this change. |
| 57 | + |
| 58 | +No changes are required to take advantage of these improvements, which benefit both static builds and runtime performance. You can have faster build times and improved runtime performance, as a treat. |
| 59 | + |
| 60 | +## Automatically infer dimensions of remote images |
| 61 | + |
| 62 | +Thanks to [Oliver Speir](https://github.com/OliverSpeir), Astro 4.4 can now infer the dimensions of remote images. The new `inferSize` attribute can be used as a replacement for the previously required `width` and `height` attributes on remote images. This is especially useful when working with images from a CMS or other external sources where the dimensions of the image are not known at build time. |
| 63 | + |
| 64 | +To enable this feature, set the `inferSize` prop to `true` on the `Image` or `Picture` components: |
| 65 | + |
| 66 | +```astro |
| 67 | +--- |
| 68 | +import { Image, Picture } from "astro:assets"; |
| 69 | +--- |
| 70 | +
|
| 71 | +<Image src="https://example.com/image.jpg" alt="A cool image" inferSize /> |
| 72 | +<Picture src="https://example.com/image.jpg" alt="A cool image" inferSize /> |
| 73 | +``` |
| 74 | + |
| 75 | +or as a parameter to `getImage()`: |
| 76 | + |
| 77 | +```ts |
| 78 | +import { getImage } from "astro:assets"; |
| 79 | +const processedImage = await getImage({ src: "https://example.com/image.jpg", inferSize: true }); |
| 80 | +``` |
| 81 | + |
| 82 | +Note that this feature comes with a performance cost, notably in SSR, as it requires a partial download of the image to infer its dimensions before the rest of the page can be rendered. We recommend using this feature only when necessary, and instead manually specifying the `width` and `height` attributes when possible. |
| 83 | + |
| 84 | +Read more about [using `inferSize` with remote images](https://docs.astro.build/en/guides/images/#infersize) in our documentation. |
| 85 | + |
| 86 | +## Bug Fixes |
| 87 | + |
| 88 | +As always, additional bug fixes are included in this release. Check out the [release notes](https://github.com/withastro/astro/blob/refs/heads/main/packages/astro/CHANGELOG.md#440) to learn more. |
0 commit comments