GreekNotes Pure

Back

Optimize Your Site

ここはpure\src\pages\docs\[...id].astro

Improve your site performance and user experience

Integrations#

This theme has integrated with:

CDN#

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

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
}
ts

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>
astro

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.

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.' />
astro
<!-- Output -->
<img
  src="/_astro/my_image.hash.webp"
  width="1600"
  height="900"
  decoding="async"
  loading="lazy"
  class="my-class"
  alt=""
/>
html

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.

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

File Size Analysis#

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

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

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.

pure\src\pages\docs\[...id].astroのおわり

Edit on GitHub

DOCS