-
Notifications
You must be signed in to change notification settings - Fork 165
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat(blog): Article for 4.4 * fix: build * Update src/content/blog/astro-440.mdx Co-authored-by: Emanuele Stoppa <[email protected]> * fix: feedback * Apply suggestions from code review Co-authored-by: Elian <[email protected]> Co-authored-by: Sarah Rainsberger <[email protected]> * fix: images * Update src/content/blog/astro-440.mdx Co-authored-by: Chris Swithinbank <[email protected]> --------- Co-authored-by: Emanuele Stoppa <[email protected]> Co-authored-by: Elian <[email protected]> Co-authored-by: Sarah Rainsberger <[email protected]> Co-authored-by: Chris Swithinbank <[email protected]>
- Loading branch information
1 parent
d8a1086
commit 79d7c18
Showing
4 changed files
with
88 additions
and
0 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
--- | ||
title: "Astro 4.4" | ||
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." | ||
publishDate: "February 15, 2024" | ||
authors: | ||
- erika | ||
- ema | ||
- matthew | ||
- nate | ||
- bjorn | ||
coverImage: "/src/content/blog/_images/astro-440/post-header-4.4.webp" | ||
socialImage: "/src/content/blog/_images/astro-440/og-image-4.4.webp" | ||
lang: "en" | ||
--- | ||
|
||
import perfAuditImage from "./_images/astro-440/perf-audit.webp" | ||
import BlogContentImage from "/src/components/BlogContentImage.astro" | ||
|
||
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. | ||
|
||
Highlights include: | ||
|
||
- [**Performance Audits**](#performance-audits) | ||
- [**Audit list**](#audit-list) | ||
- [**Improved streaming performance**](#improved-streaming-performance) | ||
- [**New `inferSize` properties for remote images**](#automatically-infer-dimensions-of-remote-images) | ||
|
||
## How to upgrade | ||
|
||
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: | ||
|
||
```sh | ||
npx @astrojs/upgrade | ||
``` | ||
|
||
or by running the upgrade command for your package manager: | ||
|
||
```sh | ||
npm install astro@latest | ||
pnpm upgrade astro --latest | ||
yarn upgrade astro --latest | ||
``` | ||
|
||
## Performance audits | ||
|
||
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. | ||
|
||
<BlogContentImage src={perfAuditImage} alt="Shows a tooltip telling the user to use loading='lazy' on an image below the fold." /> | ||
|
||
## Audit list | ||
|
||
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. | ||
|
||
## Improved streaming performance | ||
|
||
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. | ||
|
||
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. | ||
|
||
## Automatically infer dimensions of remote images | ||
|
||
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. | ||
|
||
To enable this feature, set the `inferSize` prop to `true` on the `Image` or `Picture` components: | ||
|
||
```astro | ||
--- | ||
import { Image, Picture } from "astro:assets"; | ||
--- | ||
<Image src="https://example.com/image.jpg" alt="A cool image" inferSize /> | ||
<Picture src="https://example.com/image.jpg" alt="A cool image" inferSize /> | ||
``` | ||
|
||
or as a parameter to `getImage()`: | ||
|
||
```ts | ||
import { getImage } from "astro:assets"; | ||
const processedImage = await getImage({ src: "https://example.com/image.jpg", inferSize: true }); | ||
``` | ||
|
||
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. | ||
|
||
Read more about [using `inferSize` with remote images](https://docs.astro.build/en/guides/images/#infersize) in our documentation. | ||
|
||
## Bug Fixes | ||
|
||
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. |