MNQ-Catering-y-Evento/docs/seo-audit/pagespeed-priority-list.md

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