> For AI agents: the site index is available at https://www.juniortree.com/llms.txt; this page is available as Markdown at https://www.juniortree.com/docs/advanced/optimize.md.
> Improve your site performance and user experience

## Page metadata

- **Source URL:** https://www.juniortree.com/docs/advanced/optimize

# Optimize Your Site

## Integrations

This theme has integrated with:

- `sharp`: image optimization
- [`@playform/compress`](/docs/integrations/others#playformcompress): HTML, CSS, JS, images minify (has problems for a while; see [GitHub Issue #55](https://github.com/cworld1/astro-theme-pure/issues/55))

## CDN

Some light-weighted libraries are using js static links. You can configure CDN links to improve your site performance.

```ts title="src/site.config.ts"
export const theme: ThemeUserConfig = {
  // ...
  npmCDN: 'https://cdn.jsdelivr.net/npm'
  // Recommend:
  // - https://cdn.jsdelivr.net/npm
  // - https://cdn.smartcis.cn/npm
  // - https://unkpg.com
  // - https://cdn.cbd.int
}
```

## Coding

It is a good way to use "Typescript-like" syntax comment in your `.astro` files. It can ensure your comment will not be rendered in the final production HTML file.

```astro
---
// Here is a safe place to put your comment
import { AstroComponent } from '@/components'
---

<div>
  <!-- This is a bad comment style which will still in the production -->
  {/* This is a better comment style */}
  <AstroComponent>Hello, Astro!</AstroComponent>
</div>
```

## Pictures

### Use optimized component

Display optimized images with the `<Image />` component: [Use the built-in `<Image />` Astro component](https://docs.astro.build/en/guides/images/#display-optimized-images-with-the-image--component) to display optimized versions of:

- your local images located within the src/ folder
- configured remote images from authorized sources

`<Image />` can transform a local or authorized remote image’s dimensions, file type, and quality for control over your displayed image. The resulting `<img>` tag includes alt, loading, and decoding attributes and infers image dimensions to avoid Cumulative Layout Shift (CLS).

**What is Cumulative Layout Shift?:**

  Cumulative Layout Shift (CLS) is a Core Web Vital metric for measuring how much content shifted on
  your page during loading. The `<Image />` component optimizes for CLS by automatically setting the
  correct width and height for your images.

You can use `loading="lazy"` to enable lazy loading for images.

```astro title="src/pages/somepage.astro"
---
// import the Image component and the image
import { Image } from 'astro:assets'

import myImage from '../assets/my_image.png' // Image is 1600x900
---

<!-- `alt` is mandatory on the Image component -->
<Image src={myImage} alt='A description of my image.' />
```

```html
<!-- Output -->
<img
  src="/_astro/my_image.hash.webp"
  width="1600"
  height="900"
  decoding="async"
  loading="lazy"
  class="my-class"
  alt=""
/>
```

Using this, it will transform your images to a WebP format. `.md` and `.mdx` files are enabled default.

### Change Image Size

Although this theme has integrated with some known image optimization plugins, you way still need to optimize your images for some key pages like homepage.

A easy way is using online tools like [TinyPNG](https://tinypng.com/) to manually compress your images.

### Adapt External Images

If you are using external images, excepting the lazy-load tag, you can also add [Astro pre-optimize service](https://docs.astro.build/en/guides/images/#authorizing-remote-images) for it. This will change external images to local optimized ones.

```js title="astro.config.mjs"
export default defineConfig({
  // ...
  image: {
    // ...
    domains: ['<specific site domain>'] // [!code ++]
  }
})
```

**caution:**
This may have a bad work for svg files.

## File Size Analysis

Install npm package `rollup-plugin-visualizer`. Then append the following code to your `astro.config.ts`:

```ts title="astro.config.ts"
export default defineConfig({
  // ...
  vite: {
    plugins: [
      visualizer({
        emitFile: true,
        filename: 'stats.html'
      })
    ]
  }
})
```

Build your project and open the generated `stats.html` file to analyze your bundle size. After that finish, you can remove the above code and package to keep your project clean.