# PageSpeed priority list

Source reviewed:
- PageSpeed Insights desktop report for `https://mnq.elkazurrotaberna.es/`
- Existing audit artifact: `Google-SEO-Report-mnq.elkazurrotaberna.es-full.pdf`

## Scores
- Performance: 80
- Accessibility: 96
- Best Practices: 100
- SEO: 100

## Fix first

### 1. Remove or reduce render-blocking font requests
**Files**
- `src/layouts/MainLayout.astro`

**Change**
- Reduce Google Fonts weights/families.
- Replace Material Symbols webfont with inline/local SVGs if possible.
- Keep `preconnect` only if those remote font requests remain.
- Re-evaluate the global body fade if it delays perceived first paint.

**Why**
- Lighthouse reports render-blocking requests with ~1380 ms potential savings.

---

### 2. Add explicit image dimensions and tighten image delivery
**Files**
- `src/pages/index.astro`
- `src/pages/bodas-reales.astro`
- `src/pages/corporativo-business.astro`
- Review also: `src/pages/contacto.astro`, `src/pages/nosotros.astro`, `src/pages/reuniones-familiares.astro`

**Change**
- Add `width` and `height` to page images.
- Verify above-the-fold images are not larger than their rendered size.
- Keep optimized formats consistent.
- Do not rely on CSS sizing alone for layout stability.

**Why**
- Lighthouse reports ~1423 KiB image savings.
- It also flags missing explicit image dimensions.

---

### 3. Shrink heavy assets in `public/images/`
**Files / folders**
- `public/images/`
- `public/images/generated/`

**Change**
- Replace or recompress large `.png` assets where a lighter format is acceptable.
- Prefer existing `.webp` variants where possible.
- Remove unused duplicates.
- Audit especially the heavier files such as `foto-corporativo.png`, `foto-bodas.png`, `foto-canapes.png`, `foto-plato-mnq.png`, and oversized logo assets.

**Why**
- The current image payload is a major part of the desktop performance loss.

---

### 4. Fix footer contrast
**Files**
- `src/components/SiteFooter.astro`
- `src/styles/components.css`

**Change**
- Increase footer text contrast.
- Reduce or remove low-opacity muted text in the footer.
- Review `.footer-bottom p`, `.footer-brand p`, and any `text-muted` + `opacity` combinations.

**Why**
- Lighthouse flags footer contrast issues.

---

### 5. Make WhatsApp links use the same accessible purpose
**Files**
- `src/components/SiteHeader.astro`
- `src/components/SiteFooter.astro`

**Change**
- Ensure identical WhatsApp destinations use a consistent accessible label.
- If visible text differs by context, normalize it with `aria-label`.

**Why**
- Lighthouse flags identical links with mismatched purpose/description.

---

### 6. Replace progress bar width animation with transform animation
**Files**
- `src/styles/animations.css`
- related update logic in `src/layouts/MainLayout.astro`

**Change**
- Stop animating `width` on `.scroll-progress`.
- Use `transform: scaleX(...)` with `transform-origin: left` instead.

**Why**
- Lighthouse flags non-composited animations.

---

### 7. Trim unused CSS
**Files**
- `src/styles/components.css`
- `src/styles/utilities.css`
- `src/styles/animations.css`
- `src/styles/layout.css`

**Change**
- Remove unused helpers, stale animations, and dead selectors.

**Why**
- Lighthouse reports unused CSS, but this is lower priority than fonts and images.

## Recommended implementation order
1. `src/layouts/MainLayout.astro`
2. image dimensions in page files
3. asset optimization in `public/images/`
4. footer contrast
5. WhatsApp link labeling
6. scroll progress animation
7. CSS cleanup

## Validation after each batch
1. `npm run check`
2. `npm run build`
3. Re-run desktop PageSpeed