Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(blog): Article for 4.4 #986

Merged
merged 7 commits into from
Feb 15, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file not shown.
Binary file not shown.
Binary file not shown.
86 changes: 86 additions & 0 deletions src/content/blog/astro-440.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
---
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, performance upgrades, the ability to automatically infer the dimensions of remote images, and more.
Princesseuh marked this conversation as resolved.
Show resolved Hide resolved

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.
Princesseuh marked this conversation as resolved.
Show resolved Hide resolved

<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.
Princesseuh marked this conversation as resolved.
Show resolved Hide resolved

## Improved streaming performance

This release includes performance improvements for streaming. We discovered recently that `ReadableStream`s were slower than expected on Node, and migrated Astro to use `AsyncIterable` instead when running on Node. 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.
Princesseuh marked this conversation as resolved.
Show resolved Hide resolved

No changes are required to take advantage of these improvements, which benefits both static builds and runtime performance, but you may notice faster build times and improved runtime performance, as a treat.
Princesseuh marked this conversation as resolved.
Show resolved Hide resolved

## Automatically infer dimensions of remote images

Thanks to [Oliver Speir](https://github.com/OliverSpeir), Astro 4.4 can now automatically infer the dimensions of remote images, which means you no longer need to specify the `width` and `height` attributes for 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.
Princesseuh marked this conversation as resolved.
Show resolved Hide resolved

To enable this feature, set the `inferSize` prop to `true` on the `Image` component:
Princesseuh marked this conversation as resolved.
Show resolved Hide resolved

```astro
---
import { Image } from "astro:assets";
---

<Image src="https://example.com/image.jpg" alt="A cool image" inferSize={true} />
```

or as a parameter to `getImage`:
Princesseuh marked this conversation as resolved.
Show resolved Hide resolved

```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.

## 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.
Loading