perf-astro by tech-leads-club/agent-skills
npx skills add https://github.com/tech-leads-club/agent-skills --skill perf-astro针对 Lighthouse 95+ 分数的 Astro 专属优化方案。
npm install astro-critters @playform/compress
// astro.config.mjs
import { defineConfig } from 'astro/config'
import critters from 'astro-critters'
import compress from '@playform/compress'
export default defineConfig({
integrations: [
critters(),
compress({
CSS: true,
HTML: true,
JavaScript: true,
Image: false,
SVG: false,
}),
],
})
自动提取并内联关键 CSS。无需配置。
功能说明:
构建输出会显示内联情况:
Inlined 40.70 kB (80% of original 50.50 kB) of _astro/index.xxx.css.
在最终构建中压缩 HTML、CSS 和 JavaScript。
配置选项:
compress({
CSS: true, // 压缩 CSS
HTML: true, // 压缩 HTML
JavaScript: true, // 压缩 JS
Image: false, // 如果使用外部图片优化则跳过
SVG: false, // 如果 SVG 已优化则跳过
})
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
为性能优化你的 Layout.astro 结构:
---
import '../styles/global.css'
---
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 字体回退(防止 FOIT) -->
<style>
@font-face {
font-family: 'Inter';
font-display: swap;
src: local('Inter');
}
</style>
<!-- 非阻塞的 Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
media="print"
onload="this.media='all'"
/>
<noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">
</noscript>
<!-- 预加载 LCP 图片 -->
<link rel="preload" as="image" href="/hero.png" fetchpriority="high">
<title>{title}</title>
<!-- 延迟加载第三方脚本 -->
<script>
let loaded = false;
function loadAnalytics() {
if (loaded) return;
loaded = true;
// 加载 GTM、分析工具等
}
['scroll', 'click', 'touchstart'].forEach(e => {
document.addEventListener(e, loadAnalytics, { once: true, passive: true });
});
setTimeout(loadAnalytics, 5000);
</script>
</head>
<body>
<slot />
</body>
</html>
npx lighthouse https://your-site.com --preset=perf --form-factor=mobile
另请参阅:
astro-critters 已安装并配置@playform/compress 已安装并配置media="print" onload 模式<head> 中预加载每周安装量
73
代码仓库
GitHub 星标数
1.8K
首次出现
2026年2月5日
安全审计
安装于
github-copilot70
opencode70
gemini-cli69
codex69
cursor66
amp65
Astro-specific optimizations for 95+ Lighthouse scores.
npm install astro-critters @playform/compress
// astro.config.mjs
import { defineConfig } from 'astro/config'
import critters from 'astro-critters'
import compress from '@playform/compress'
export default defineConfig({
integrations: [
critters(),
compress({
CSS: true,
HTML: true,
JavaScript: true,
Image: false,
SVG: false,
}),
],
})
Automatically extracts and inlines critical CSS. No configuration needed.
What it does:
Build output shows what it inlined:
Inlined 40.70 kB (80% of original 50.50 kB) of _astro/index.xxx.css.
Minifies HTML, CSS, and JavaScript in the final build.
Options:
compress({
CSS: true, // Minify CSS
HTML: true, // Minify HTML
JavaScript: true, // Minify JS
Image: false, // Skip if using external image optimization
SVG: false, // Skip if SVGs are already optimized
})
Structure your Layout.astro for performance:
---
import '../styles/global.css'
---
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Font fallback (prevents FOIT) -->
<style>
@font-face {
font-family: 'Inter';
font-display: swap;
src: local('Inter');
}
</style>
<!-- Non-blocking Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
media="print"
onload="this.media='all'"
/>
<noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">
</noscript>
<!-- Preload LCP images -->
<link rel="preload" as="image" href="/hero.png" fetchpriority="high">
<title>{title}</title>
<!-- Defer third-party scripts -->
<script>
let loaded = false;
function loadAnalytics() {
if (loaded) return;
loaded = true;
// Load GTM, analytics, etc.
}
['scroll', 'click', 'touchstart'].forEach(e => {
document.addEventListener(e, loadAnalytics, { once: true, passive: true });
});
setTimeout(loadAnalytics, 5000);
</script>
</head>
<body>
<slot />
</body>
</html>
npx lighthouse https://your-site.com --preset=perf --form-factor=mobile
See also:
astro-critters installed and configured@playform/compress installed and configuredmedia="print" onload pattern<head>Weekly Installs
73
Repository
GitHub Stars
1.8K
First Seen
Feb 5, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
github-copilot70
opencode70
gemini-cli69
codex69
cursor66
amp65
React视图过渡API使用指南:实现原生浏览器动画与状态管理
5,700 周安装