Optimize Your Site

Integrations#

This theme has integrated with:

• sharp: image optimization
• @playform/compress: HTML, CSS, JS, images minify

CDN#

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

1
export const theme: ThemeUserConfig = {
2
  // ...
3
  npmCDN: 'https://cdn.jsdelivr.net/npm',
4
  // Recommend:
5
  // - https://cdn.jsdelivr.net/npm
6
  // - https://cdn.smartcis.cn/npm
7
  // - https://unkpg.com
8
  // - https://cdn.cbd.int
9
}

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.

1
---
2
// Here is a safe place to put your comment
3
import { AstroComponent } from '@/components'
4
---
5

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

Pictures#

Display optimized images with the <Image /> component#

Use the built-in <Image /> Astro 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).

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

1
---
2
// import the Image component and the image
3
import { Image } from 'astro:assets';
4
import myImage from '../assets/my_image.png'; // Image is 1600x900
5
---
6

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

1
<!-- Output -->
2
<img
3
  src="/_astro/my_image.hash.webp"
4
  width="1600"
5
  height="900"
6
  decoding="async"
7
  loading="lazy"
8
  class="my-class"
9
  alt=""
10
/>

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

Change Image Size#

Althought 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 ↗ 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 ↗ for it. This will change external images to local optimized ones.

1
export default defineConfig({
2
  // ...
3
  image: {
4
    // ...
5
    domains: ['<specific site domain>'] // [!code ++]
6
  }
7
})