Skip to main content
Borrissol scores Lighthouse Performance 99 on mobile — the ceiling for a real-world multilingual marketing site with hero images, a carousel, a Maps embed, and Google Analytics. This page documents every technique that achieves that score, along with the hard rules that must be respected to keep it.

​
Core Web Vitals targets

These are the measured values on mobile Lighthouse as of the last audit. Every production deploy should be checked against them.
CLS of exactly 0 is a result of always providing explicit width and height attributes on every <Picture> and <img>. Never omit intrinsic dimensions from image elements.

​
Image pipeline

All content images live in src/assets/images/ and are processed at build time by Astro’s <Picture> component. No image should be placed in /public/ unless it cannot be processed (e.g., dynamically referenced OG images). Build-time output for every content image:
  • AVIF + WebP formats (formats={['avif', 'webp']})
  • Responsive srcset across configured breakpoints
  • Intrinsic width and height retained from the source file
Loading strategy: Source file discipline: Source files should be no larger than approximately 2× the widest responsive variant served. A 6000×4000 px source file is wasteful when the largest responsive output is 1200 px wide. Keep source files proportionate.

​
Pre-deploy asset audit

Before every production deploy, run the following command to spot any oversized files in /public/:
Nothing in /public/ should exceed 500 KB without explicit justification documented in the PR.

​
Fonts

Borrissol uses Roboto self-hosted as WOFF2. There is no Google Fonts CDN call — this eliminates a third-party DNS lookup and the associated render-blocking risk.
Never add a <link> to fonts.googleapis.com. The self-hosted WOFF2 setup is what eliminates the third-party DNS lookup from the critical path. Adding a Google Fonts CDN call would immediately degrade FCP on first visit.

​
Scripts and runtime JavaScript

Borrissol ships zero runtime JS framework bytes to visitors. All interactive behaviour is implemented in vanilla JavaScript: The prefers-reduced-motion media query is respected in the scroll reveal logic — users who have opted out of motion see content immediately without transitions.

​
Preconnect hints

Preconnect resource hints are defined in the page <head> for third-party domains that Borrissol contacts at runtime (primarily Google Analytics / gtag.js). This moves the TCP handshake earlier in the waterfall and reduces the latency cost of the first GA request.

​
OG image rules

The Open Graph image (/public/og-default.jpg) has strict constraints that exist because a previous version of the file was accidentally exported from Figma as PNG and reached 4 MB in production, silently consuming bandwidth on every social share.
Never export the OG image as PNG from Figma. PNG exports of full-bleed artwork routinely produce files of 2–6 MB. JPG at quality 80–85 % hits the same visual result under 300 KB.

​
UX additions with no performance cost

These features add meaningful UX without adding any JavaScript weight:
  • FAQ section — uses native <details> / <summary> elements. Keyboard accessible, animated with CSS, requires no JS bundle.
  • Testimonials carousel — a small vanilla JS file; no carousel library loaded.
  • Google Maps embed — rendered as a standard <iframe>. The CSS grayscale → color hover effect is a pure CSS transition with no JS.