feat: improve seo, trust signals, and performance

2026-07-20 12:07:23 +02:00
parent 49f391ee49
commit faed590a66
27 changed files with 1444 additions and 153 deletions
@@ -0,0 +1,133 @@
+# 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