P
Recherches récentes

Web performance: AVIF, Redis, lazy-load

69 vues

Performance isn't a Lighthouse score you proudly show off once. It's a discipline. Here are three levers we apply systematically — what they bring, why, where they go, and how we use them.

1. AVIF: cutting image weight

What it brings. AVIF derives from the AV1 video codec. At equal quality, it produces files 30 to 50% lighter than WebP, and far more so against JPEG. On a page, it's often the No. 1 saving.

Why it matters. Images make up most of a page's weight. Cutting that weight mechanically means a faster page, a better LCP and a lighter bill. In 2026, AVIF is supported by ~93–95% of browsers (Chrome, Firefox, Edge, Opera, Safari 16+, iOS 16+).

index.html
<picture>
  <source type="image/avif" srcset="photo.avif">
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" loading="lazy" decoding="async" alt="…">
</picture>

The catch. AVIF encoding is slow: we do it at upload or at build (never on the fly), we generate several sizes, and we cache the result. That's exactly what our ImageProcessor does.

The future of images: JPEG XL

JPEG XL (an ISO standard since 2022) has had a chaotic ride: added to Chrome behind a flag in 2021, removed in 2023, then reintroduced in Chrome 145 in early 2026 (still behind a flag, decoder in Rust). Safari has supported it by default since 17; in total, ~16% native support.

Its killer feature: lossless JPEG recompression — shrinking a JPEG by about 20% reversibly. But in 2026 we do not serve JXL alone: the strategy stays AVIF as primary, WebP/JPEG as fallback, and we're getting JXL ready for later.

FormatSupport 2026CompressionWhen to use it
WebP~97 %−25–35 % vs JPGSafe fallback
AVIF~93–95 %−30–50 % vs WebPPrimary format today
JPEG XL~16% (Safari, Chrome behind a flag)≈ AVIF + lossless JPEG recompressionGet ready for tomorrow

2. Redis: the cache that changes everything

What it brings. Redis is an in-memory key-value store. Everything that's expensive but stable — configs, menus, fragments, aggregates — is stored there and comes back in milliseconds. It also serves sessions and queues.

Why it matters. Without a cache, every visit hits the database again. With Redis, the database breathes and pages respond instantly. The only real difficulty: invalidation — clearing the right key at the right time.

DashboardController.php
// CodeIgniter 4 — memoize a heavy aggregate for 5 min
$key  = "stats:dashboard:{$userId}";
$data = cache($key);

if ($data === null) {
    $data = $this->statsModel->heavyAggregate($userId);
    cache()->save($key, $data, 300);
}

return $data;

The future of Redis: Valkey

In March 2024, Redis left its BSD open-source license for a source-available model (RSALv2/SSPL). In response, the Linux Foundation (AWS, Google, Oracle, Ericsson…) created Valkey, an open-source fork of Redis 7.2.4 under the BSD license. Redis 8 has since moved back to AGPL, but Valkey keeps growing.

In practice, Valkey is protocol-compatible: a drop-in replacement, with no code change. Since Redis 7.2 is end-of-life (February 2026), for self-hosting (OVH/Plesk) Valkey is the most worry-free open-source bet.

3. Lazy-load: only load what's visible

What it brings. Lazy-load defers loading off-screen images and iframes: fewer bytes on the first render, a shorter time-to-interactive. It's now native with loading="lazy", supported everywhere.

The nuance. We do not lazy-load the most important image at the top of the page (the LCP): on the contrary, we give it priority with fetchpriority="high". For fine-tuning, we round it out with vanilla-lazyload.

hero.html
<!-- Full-screen image (LCP): prioritized, not lazy -->
<img src="hero.avif" fetchpriority="high" decoding="async" alt="…">

<!-- The rest: deferred -->
<img src="carte.avif" loading="lazy" decoding="async" alt="…">

The through-line: measure, don't guess

These three levers are only worth it if you verify them. We profile (Lighthouse, WebPageTest), we watch the Core Web Vitals (LCP, INP, CLS), we hunt N+1 queries and blocking assets. Performance is won on facts, not on hunches.

A lean web isn't a token green pose: a light page is a fast page, cheaper to serve, and accessible even on a fickle Breton connection.

Partager