Astro-specific performance optimizations for 95+ Lighthouse scores. Covers critical CSS inlining, compression, font loading, and LCP optimization. Use when optimizing Astro site performance, improving Astro Lighthouse scores, or configuring astro-critters. Do NOT use for non-Astro sites (use perf-web-optimization or core-web-vitals) or running Lighthouse audits (use perf-lighthouse).
インストールする前に、エージェントに与えられる指示の中身を確認できます。
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>まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Audit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible". Do NOT use for SEO (use seo), performance (use core-web-vitals), or comprehensive site audits covering multiple areas (use web-quality-audit).
日本語の概要は準備中です。原文の説明を表示しています。
When the user wants to build an AI-powered outreach system, write cold emails, improve deliverability, or scale personalized outreach. Also use when the user mentions 'cold email,' 'cold outreach,' 'outreach automation,' 'Instantly,' 'Smartlead,' 'Clay,' 'email sequences,' 'deliverability,' 'personalization at scale,' 'reply rate,' or 'outreach stack.' This skill covers the complete AI cold outreach system from signal detection through conversion. Do NOT use for technical implementation, code review, or software architecture.
日本語の概要は準備中です。原文の説明を表示しています。
When the user wants to price an AI product, choose a charge metric, design pricing tiers, or optimize margins. Also use when the user mentions 'AI pricing,' 'usage-based pricing,' 'consumption pricing,' 'outcome pricing,' 'BYOK,' 'bring your own key,' 'per-seat pricing,' 'pricing tiers,' 'AI margins,' 'cost per token,' or 'pricing model.' This skill covers pricing strategy, packaging, and margin management for AI-native products. Do NOT use for technical implementation, code review, or software architecture.
日本語の概要は準備中です。原文の説明を表示しています。
When the user wants to deploy AI sales development reps, automate sales qualification, build signal-to-action routing, or design AI agent architecture for sales. Also use when the user mentions 'AI SDR,' 'AI sales agent,' 'automated qualification,' 'signal routing,' 'sales automation,' '11x,' 'Artisan,' 'AiSDR,' 'AI BDR,' or 'autonomous sales.' This skill covers AI SDR deployment, qualification automation, and agent architecture for sales development. Do NOT use for technical implementation, code review, or software architecture.
日本語の概要は準備中です。原文の説明を表示しています。
When the user wants to build programmatic SEO with AI, create competitor alternative pages, optimize for AI Overviews, or scale content production. Also use when the user mentions 'SEO,' 'programmatic SEO,' 'AI content,' 'competitor alternative pages,' 'AI Overviews,' 'search optimization,' 'DataForSEO,' 'content at scale,' 'keyword strategy,' or 'organic traffic.' This skill covers AI-powered SEO strategy from keyword research through programmatic page generation. Do NOT use for technical implementation, code review, or software architecture.
日本語の概要は準備中です。原文の説明を表示しています。
When the user wants to create UGC ad campaigns, recruit UGC creators, generate AI UGC content, or scale with user-generated content. Also use when the user mentions 'UGC,' 'user-generated content,' 'creator ads,' 'Spark Ads,' 'whitelisting,' 'AI UGC,' 'Arcads,' 'Creatify,' 'creator brief,' or 'UGC testing.' This skill covers the UGC growth framework from creator recruitment through AI-powered scaling. Do NOT use for technical implementation, code review, or software architecture.
日本語の概要は準備中です。原文の説明を表示しています。