Web hors-ligne : Stale While Revalidate ou le meilleur de l’UX pour le pire de l’écoresponsabilité

Disclaimer : Cet article est le quatrième de la série d’articles sur le web hors-ligne et les services workers.
Sommaire :
Web hors-ligne : l'alliance entre l'optimisation utilisateur et les pratiques éco-responsables
Web hors ligne : Précacher votre application pour un usage hors ligne dégradé avec des fallback
Web hors-ligne : Stratégies de cache du plus green au plus simple, entre offline first et online first

Introduction

Après avoir vu les stratégies cache first, network first et network only, passons à la stratégie stale while revalidate qui a capté l'attention des développeurs mais surtout des designers. Cette stratégie de cache des service workers, permet d'équilibrer un affichage immédiat des données et actualisation en temps réel. Cependant, dans un contexte où l'éco responsabilité est de plus en plus au cœur des préoccupations, il est essentiel de se pencher sur l'impact de cette façon de faire. Dans cet article, nous explorerons les avantages et inconvénients UX de la méthode stale while revalidate, ses implications en matière de performance et de durabilité, tout en examinant les appels réseau qu'elle entraîne.

Stale While Revalidate : La magie de l'instantanéité

Instantanéité d'affichage

La première grande force de stale while revalidate réside dans sa capacité à offrir une expérience utilisateur fluide. Lorsqu'un utilisateur accède à une page web, il s'attend à ce que les informations s'affichent immédiatement. Avec cette technique, le navigateur peut servir une version mise en cache de la page, ce qui garantit un affichage quasi instantané. Dans ce cas, le contenu est souvent "stale" (obsolète), mais il apparaît immédiatement à l'utilisateur. Pendant que le contenu est chargé en arrière-plan, l'expérience est optimisée et l'attente est minimisée. Celui-ci s’oppose donc à un network first (qui prendra le temps de charger la donnée quand il aura du réseau et donc aura un temps d'attente) et à un cache first auquel il ressemble (mais en mettant la donnée à jour à chaque appel en tâche de fond)

De plus, cette instantanéité contribue à réduire le taux de rebond. Un utilisateur frustré par un long temps de chargement est plus enclin à quitter la page. En offrant une réponse rapide, stale while revalidate encourage l'utilisateur à rester sur le site, améliorant ainsi les chances de conversion. Ce dynamisme, qu'apporte cette méthode, s'inscrit directement dans les objectifs d'une expérience utilisateur réussie.

Informations à jour

Cependant, le véritable attrait de cette technique ne réside pas seulement dans l'affichage rapide, mais aussi dans la promesse de données actualisées. Bien que l'utilisateur voit un contenu potentiellement obsolète lors de son entrée sur le site, le service worker s'active pour récupérer les dernières informations en arrière-plan. Une fois cela fait, le contenu se met à jour automatiquement, garantissant ainsi que tout utilisateur, revenant quelques instants après, bénéficiera d'une version du site avec les données les plus récentes.

Cette combinaison – moitié instantanéité, moitié mise à jour – rassure considérablement l'utilisateur. Ils savent qu'ils obtiennent une expérience de navigation efficace sans perdre l'exactitude des informations. En conséquence, cela renforce leur confiance dans la plateforme et contribue à bâtir une relation de confiance.

Exemple d’implémentation

event.respondWith(
        (async () => {          
            // ouverture ou création des caches
            const cacheRessources = await caches.open(CLE_RESSOURCES);
                        
            // récupération de la page cachée
            const pageCache = await cacheRessources.match(event.request.url)
            
            // si on a une page cachée
            if (pageCache) {
                // stocke le résultat de la requete de manière asynchrone
                fetch(event.request)
                    .then((result) => {
                        // place le resultat dans le cache
                        cacheRessources.put(event.request, result.clone());
                    }).then(() => {
                        console.log('Contenu du cache mis à jour');
                    }).catch(() => {
                        console.log('Contenu non mis à jour');
                    });
                
                // renvoie la page cachée
                return cacheRessources.match(event.request)
            } else {
                try {
                    // stocke le résultat de la requete
                    const result = await fetch(event.request);
                    // place le resultat dans le cache
                    await cacheRessources.put(event.request, result.clone())
                    // renvoie le resultat
                    return result
                } catch (e) {
                    console.log(e)
                }
            }
       })(),
    );

Impact sur l'éco responsabilité : Une double réalité

Effets invisibles des appels réseau

Malgré ses avantages indéniables en matière d'UX, stale while revalidate doit faire face à une réalité sombre : ses implications sur la durabilité et l'écoresponsabilité. Bien que la mise en cache des données permettra d'économiser de la bande passante, des appels réseau sont toujours effectués en arrière-plan pour vérifier et mettre à jour le contenu. Ces requêtes, bien qu'elles soient exécutées de manière transparente pour l'utilisateur, ont un coût énergétique.

Chaque demande envoyée à un serveur nécessite de l'énergie pour alimenter le centre de données et pour faire voyager les paquets de données à travers le web. Ainsi, lorsque l’on adopte une stratégie comme stale while revalidate, il est crucial de prendre en compte la fréquence et le volume de ces appels. Une mise à jour trop fréquente pourrait annuler les bénéfices apportés par la mise en cache initiale. Par conséquent, la manière dont les données sont recalibrées et téléchargées devient une question épineuse dans le cadre de l'éco responsabilité numérique. Finalement, les impacts écologiques sont quasi similaires à la stratégie network first soit quasi nulle. Pour rappel : transmettre une donnée 1x a le même coût énergétique que de la stocker pendant 1 année.

Choisir l'optimisation

Si par défaut, l’actualisation se fait à chaque appel, adopter une stratégie d'optimisation et d’interrogation efficace est primordial. En tant que développeurs et designers, la responsabilité incombe à chacun d'optimiser la fréquence des appels fait en arrière-plan pour minimiser l'impact non seulement sur l'expérience utilisateur selon vos besoins métiers, mais également sur notre empreinte carbone numérique. En utilisant des techniques telles que la préfetching des données ou la gestion de la fréquence des appels via des algorithmes intelligents, on peut en effet équilibrer ce dilemme entre convivialité et durabilité.

En choisissant de réduire les appels réseau, on peut à la fois conserver l'optimisation de l'UX tout en faisant un pas vers une approche plus écoresponsable. Une stratégie efficace pourrait inclure la priorisation des mises à jour pendant les périodes de faible trafic ou l'utilisation de données agrégées pour réduire la charge sur le serveur.

Vers un avenir plus vert avec Stale While Revalidate

Écoresponsabilité et technologies durables

Alors que les technologies web continuent d'évoluer, il devient nécessaire de se tourner vers des solutions qui favorisent non seulement une excellente UX, mais aussi la durabilité. L'intégration de la méthode stale while revalidate offre une voie prometteuse, à condition de la coupler avec des initiatives écoresponsables. Cela signifie que les designers doivent également se concentrer sur l'efficacité énergétique. Si vous développez vous même votre stale while revalidate, vous pouvez aussi choisir de ne pas “revalider” votre contenu à chaque fois pour économiser en données.

Par exemple, la mise en œuvre de stratégies adaptées de cache via les service workers peut réduire la charge sur les serveurs et, par conséquent, diminuer les besoins énergétiques. De plus, utiliser des outils de développement qui évaluent et optimisent la performance et l'impact carbone de nos applications peut s'avérer bénéfique. En collaborant avec des entreprises engagées dans des pratiques durables, il est possible de faire évoluer le paysage numérique vers un modèle plus respectueux de l’environnement.

Conclusion : un équilibre délicat

En fin de compte, la méthode stale while revalidate illustre bien le dilemme contemporain entre performance UX et écoresponsabilité. Bien qu'elle offre des améliorations significatives en matière d'instantanéité et de confort pour l'utilisateur, il convient de garder en tête son impact environnemental. En veillant à optimiser les appels réseau et à réduire la fréquence des mises à jour, il est possible d’adopter une approche durable tout en préservant l’expérience utilisateur.

Pour naviguer avec succès sur ces eaux tumultueuses, une collaboration entre développeurs, designers et parties prenantes en matière d'éco responsabilité s'avère essentielle. L’avenir numérique réside dans notre capacité à intégrer des solutions qui non seulement ravissent les utilisateurs, mais qui respectent notre planète.