Optimize Your Site

Integrations#

This theme has integrated with:

• sharp: image optimization
• @playform/compress: HTML, CSS, JS, images minify (has problems for a while; see GitHub Issue #55 ↗)

CDN#

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

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.

---
// 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 ↗ 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.

---
// 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.' />

<!-- 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 ↗ 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.

export default defineConfig({
  // ...
  image: {
    // ...
    domains: ['<specific site domain>'] 
  }
})

File Size Analysis#

Install npm package rollup-plugin-visualizer. Then append the following code to your 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.