Improve Astro site loading with critical CSS, the styles needed for the first screen, plus file compression, font loading adjustments, main image preloading, and deferred third-party scripts. Includes integration settings and a layout example.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
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 website accessibility using WCAG 2.1, guidelines for making web content usable by people with disabilities. Check image descriptions, contrast, forms, keyboard controls, and screen reader support with automated and manual testing.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Plan personalized sales emails to prospects you have not contacted before. This skill covers prospect selection, contact research, email drafts, follow-up sequences, inbox delivery, and reply handling, with guidance on tools and campaign improvements.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Plan pricing for AI products by comparing charges based on usage, tasks, or results. Use customer value and computing costs to shape pricing tiers, usage limits, hybrid plans, and margin improvement strategies.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Plan AI sales development systems that qualify prospects, organize outreach, classify replies, and hand opportunities to people. Use customer criteria, budget, CRM setup, and sales goals to shape platform choices and a four-week rollout plan.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Plan AI-assisted SEO, from keyword research and competitor comparison pages to content production using data and templates. It also guides content changes for AI search citations, tool selection, quality checks, and ongoing performance tracking.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Plan UGC campaigns, ads built around user-style content, from creator recruitment and production briefs to AI video variations. Organize organic testing, paid promotion, and creative refreshes for TikTok, Meta, and YouTube Shorts.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.