> For the complete documentation index, see [llms.txt](https://faction-os.gitbook.io/faction-os-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://faction-os.gitbook.io/faction-os-docs/.spec_system/archive/phases/phase_16/session_02_performance_and_image_optimization.md).

# Session 02: Performance And Image Optimization

**Session ID**: `phase16-session02-performance-and-image-optimization` **Package**: public-website **Status**: Not Started **Estimated Tasks**: \~14-20 **Estimated Duration**: 2-4 hours

***

## Objective

Optimize images, CSS, scripts, font loading, and static payload size without weakening the Cyber-Tactical visual direction.

***

## Scope

### In Scope (MVP)

* Review image usage and convert content images to Astro `<Image />` or `<Picture />` where appropriate.
* Keep `public/` limited to intentional pass-through assets.
* Verify images have useful alt text and are not distorted.
* Review CSS for unused heavy decorative layers and excessive blur/shadow cost.
* Review browser scripts and remove unnecessary JavaScript.
* Review font loading strategy and document any third-party font request.
* Prefer self-hosted fonts before production if practical.
* Check static build output size and obvious large assets.
* Apply Lighthouse-oriented fixes that fit the static Astro architecture.

### Out of Scope

* Rebuilding the visual direction.
* Adding analytics or performance beacons.
* Full automated image pipeline beyond current launch needs.
* Generated social image pipeline.

***

## Prerequisites

* [ ] Session 01 responsive fixes completed or known.
* [ ] All launch images are present.

***

## Deliverables

1. Optimized image usage.
2. Font loading review and follow-up decision.
3. Reduced unnecessary JavaScript.
4. Static payload notes and fixes.
5. Build verification after optimization.

***

## Performance Guardrails

* Keep visual assets specific and useful; do not replace product context with generic dark background imagery.
* Avoid unnecessary client JavaScript for effects that CSS can handle.
* Stop continuous animations for reduced-motion users.
* Use responsive images for product, brand, showcase, press, and Open Graph assets where Astro optimization applies.
* Do not use third-party tracking or analytics for performance insight.

***

## Task Expansion Guidance

When expanded with `plansession`, keep the checklist to 14-20 tasks covering:

* Image inventory.
* Astro image conversion.
* Alt text pass.
* Public asset review.
* CSS cost review.
* Script review.
* Font strategy review.
* Static output size review.
* Lighthouse-oriented fixes.
* Build/typecheck.

***

## Success Criteria

* [ ] Launch images use optimized paths where appropriate.
* [ ] Images load without distortion and include useful alt text.
* [ ] No unnecessary JavaScript remains for static presentation.
* [ ] Font strategy is production-ready or has a recorded launch blocker.
* [ ] Static build succeeds after optimization.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://faction-os.gitbook.io/faction-os-docs/.spec_system/archive/phases/phase_16/session_02_performance_and_image_optimization.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.