skills.rest
hellobanora
hellobanoraCOMMUNITY
Explore all skills by this author →
GitHub

performance

Optimize Astro website performance for Core Web Vitals and static rendering.

1|Updated Mar 20, 2026
Search Tags:#performance#lighthouse#astro#core web vitals#image optimization#font loading#script loading
One-click install
npx skills add https://github.com/hellobanora/Claude-Code-Banora --skill performance-hellobanora
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance
Source: https://github.com/hellobanora/Claude-Code-Banora/tree/main/.claude/skills/performance
Command: npx skills add https://github.com/hellobanora/Claude-Code-Banora --skill performance-hellobanora

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps prevent performance regressions on the Banora Chiropractic Astro website by keeping pages fast, lightweight, and stable as new features, media, and third-party tools are added.

Core Features & Use Cases

  • Image Optimization: Choose the right image delivery approach, dimensions, formats, and loading behavior to reduce layout shift and page weight.
  • Font and Script Discipline: Limit font families, self-host critical fonts, and load external scripts asynchronously or with defer to avoid blocking rendering.
  • Astro Performance Guardrails: Preserve static generation, minimal JavaScript, and Lighthouse-friendly implementation patterns across pages.
  • Use Case: When adding a new hero image, analytics tag, chatbot widget, or contact-page embed, this Skill guides the safest implementation for speed and Core Web Vitals.

Quick Start

Use the performance skill to review the current page and recommend the fastest Astro-friendly implementation for any new image, font, or external script.

Frequently Asked Questions about performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize Astro site performance to pass Core Web Vitals?▼

To optimize Astro site performance and pass Core Web Vitals, enforce static rendering, minimize JavaScript, and apply performance guardrails for image delivery, font loading, and third-party scripts to prevent regressions.

What is the best way to add third-party scripts to Astro without blocking rendering?▼

The best way to add third-party scripts without blocking rendering is to load external scripts asynchronously or with defer. This script loading discipline preserves Astro static rendering speed and prevents performance regressions.

How do I optimize hero images in Astro to reduce layout shift?▼

To optimize hero images and reduce layout shift, choose appropriate image dimensions, formats, and loading behavior. Proper image delivery reduces page weight and stabilizes visual elements during Astro page builds.

Do I need to self-host critical fonts to improve Lighthouse scores in Astro?▼

Yes, you should self-host critical fonts and limit font families to improve Lighthouse scores. Font loading discipline avoids blocking rendering and helps maintain lightweight, stable Astro page builds.

Why does adding a chatbot widget cause slow page loads and how do I fix it?▼

Adding a chatbot widget causes slow page loads by introducing render-blocking JavaScript. Fix it by applying Astro performance guardrails, loading external scripts asynchronously, and maintaining minimal JavaScript to protect Core Web Vitals.

Related Skills

Explore More Software Engineering Skills→
chiruu12chiruu12
1

benchmark

Automate web page performance benchmarking to detect regressions in load times and Core Web Vitals.

Community
Advanced
Prompt-or-Die-LabsPrompt-or-Die-Labs
7

lighthouse-ci-integrator

Automate Lighthouse performance testing and assertions in CI/CD workflows.

Official
Intermediate
hellobanorahellobanora

components

Design Astro UI components with Tailwind styling and semantic accessibility.

Community
Advanced
charl-krugercharl-kruger
5

web-perf

Measure Core Web Vitals and profile resource timing with Chrome DevTools MCP.

Community
Advanced