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.

export const siteConfig: SiteConfig = {
  // ...
  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

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

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.

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