astro-performance
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseAstro Performance Skill
Astro 性能优化指南
Purpose
目标
Achieve 90+ Lighthouse scores and pass Core Web Vitals. Direct impact on SEO rankings and conversion rates.
实现Lighthouse评分≥90并通过Core Web Vitals检测。直接影响SEO排名和转化率。
Core Rules
核心规则
- Preload LCP elements (hero images/text) with fetchpriority="high"
- Set explicit dimensions on all images and iframes to prevent CLS
- Use font-display: swap for all web fonts
- Self-host fonts and subset to reduce file size
- Defer third-party scripts until after load or user interaction
- Break up long tasks to keep INP under 200ms
- Use AVIF/WebP formats with responsive images
- Keep JS bundle under 100KB gzipped
- Implement edge caching with long cache headers for assets
- Monitor real user metrics with web-vitals library
- 使用fetchpriority="high"预加载LCP元素（首屏图片/文本）
- 为所有图片和iframe设置明确尺寸以避免CLS
- 为所有网页字体设置font-display: swap
- 自托管字体并进行子集化以减小文件体积
- 将第三方脚本延迟到页面加载完成或用户交互后再加载
- 拆分长任务以将INP控制在200ms以内
- 使用AVIF/WebP格式的响应式图片
- 确保JS包的gzip压缩后体积小于100KB
- 为资源配置边缘缓存及长缓存头
- 使用web-vitals库监控真实用户指标
Core Web Vitals Targets
Core Web Vitals 指标目标
| Metric | Good | Needs Improvement | Poor |
|---|---|---|---|
| LCP (Largest Contentful Paint) | ≤2.5s | 2.5-4s | >4s |
| INP (Interaction to Next Paint) | ≤200ms | 200-500ms | >500ms |
| CLS (Cumulative Layout Shift) | ≤0.1 | 0.1-0.25 | >0.25 |
| 指标 | 良好 | 需要改进 | 较差 |
|---|---|---|---|
| LCP (最大内容绘制) | ≤2.5s | 2.5-4s | >4s |
| INP (交互到下一次绘制) | ≤200ms | 200-500ms | >500ms |
| CLS (累积布局偏移) | ≤0.1 | 0.1-0.25 | >0.25 |
Bundle Size Budgets
包体积预算
| Asset Type | Budget |
|---|---|
| Total JS | <100KB (gzipped) |
| Total CSS | <50KB (gzipped) |
| Hero image | <200KB |
| Any single image | <100KB |
| 资源类型 | 预算 |
|---|---|
| 总JS体积 | <100KB（gzip压缩后） |
| 总CSS体积 | <50KB（gzip压缩后） |
| 首屏图片 | <200KB |
| 单张图片 | <100KB |
References
参考资料
Core Web Vitals
Core Web Vitals
- LCP Optimization - Hero images, preloading, server response
- CLS Prevention - Dimensions, skeletons, font display
- INP Optimization - Task chunking, debouncing, content-visibility
- LCP优化 - 首屏图片、预加载、服务器响应
- CLS预防 - 尺寸设置、骨架屏、字体显示
- INP优化 - 任务拆分、防抖、content-visibility
Assets & Resources
资源与资产
- Bundle Size - Analysis, tree shaking, dynamic imports
- Fonts - Self-hosting, subsetting, variable fonts
- Images - Format priority, responsive images
- 包体积优化 - 分析、摇树优化、动态导入
- 字体优化 - 自托管、子集化、可变字体
- 图片优化 - 格式优先级、响应式图片
Infrastructure
基础设施
- Third-Party Scripts - GTM, facades, loading attributes
- Caching - Cloudflare headers, cache control
- Testing - Lighthouse, WebPageTest, real user monitoring
- 第三方脚本处理 - GTM、外观代理、加载属性
- 缓存配置 - Cloudflare响应头、缓存控制
- 性能测试 - Lighthouse、WebPageTest、真实用户监控
Forbidden
禁止操作
- Render-blocking CSS in body
- Synchronous third-party scripts in head
- Unoptimized images
- Web fonts without
font-display: swap - Layout shifts from dynamic content
- Main thread blocking >50ms
- 在body中使用阻塞渲染的CSS
- 在head中使用同步加载的第三方脚本
- 未优化的图片
- 未设置的网页字体
font-display: swap - 动态内容导致的布局偏移
- 主线程阻塞时间>50ms
Definition of Done
完成标准
- Lighthouse Performance ≥90
- LCP ≤2.5s
- CLS ≤0.1
- INP ≤200ms
- Total JS <100KB gzipped
- Hero image preloaded
- Fonts self-hosted with swap
- Third-party scripts deferred
- Lighthouse性能评分≥90
- LCP ≤2.5s
- CLS ≤0.1
- INP ≤200ms
- 总JS体积gzip压缩后<100KB
- 首屏图片已预加载
- 字体已自托管并设置swap
- 第三方脚本已延迟加载