SFEIR Lille

Attention : l'inscription se fait uniquement sur notre site web : https://sfeir.com/pages/event-sfeir-school-web-performance-lille.html

La webperf, ou l'optimisation des performances web est essentielle pour obtenir un meilleur référencement web, améliorer la conversion mais surtout pour offrir une expérience utilisateur de qualité. C'est également un levier essentiel pour limiter l'impact écologique des sites web, et s'inscrire dans une démarche de qualité.
Cette formation d'une journée vous plongera dans les stratégies et les outils essentiels pour mesurer, analyser et optimiser les performances front de vos pages web.

## Objectifs Pédagogiques

• Comprendre l'importance de la performance front
• Repérer ou éviter les problématiques de performance
• Savoir résoudre les problématiques et implémenter les bonnes pratiques
• Monitorer le trafic réel
• Automatiser les tests de performance

## Programme de la formation

1. Introduction - Définition de la performance web front, comment la mesurer, introduction au chemin critique
2. La stabilité visuelle - Chargement des fonts, chargement d'images, réservation des espaces
3. La vitesse de chargement - Définition et métriques, optimisations des images, chargement JavaScript, optimisations du chemin critique, optimisations réseau, cache client/public, workers
4. L'interactivité - Thread principal et event loop, Interaction to Next Paint (INP), optimisations du thread principal
5. Surveiller et maintenir un niveau de performance - l'API PerformanceObserver, automatisation et synthetic monitoring, Real User Monitoring (RUM)

## Prérequis

### Connaissances requises :

• Connaissances de base en HTML, CSS et JavaScript
• Une expérience avec dev tools est un plus

### Sur votre machine :

• Node.js LTS
• Git
• Un IDE pour coder

Inscription sur notre site web : https://sfeir.com/pages/event-sfeir-school-web-performance-lille.html

Au programme :
12h15 : Début de la présentation 🎤
13h : Questions/Réponses 💬
13h10 : À table ! On vous réserve un repas bien mérité ! 🍽
Et pour ce qui est du menu, il est unique et ne contient qu'un plat du jour ! Voici ce que notre chef du jour vous concocte :

🍱 Le plat du jour : Tanstack Start : Typesafe, Rapide, Intuitif. Le Framework Full-Stack où la Developer Experience redevient reine.

Marre des frameworks complexes et des compromis entre performance et Developer Experience (DX) ? Découvrez Tanstack Start, la dernière pépite de l'écosystème Tanstack (React Query, Tanstack Table, etc.).

Tanstack Start se démarque radicalement par son approche client-side first et sa typesafety intégrale, offrant une vélocité de développement inédite. Le résultat ? Des applications prévisibles, ultra-rapides et un plaisir de coder retrouvé.

# Ce que vous allez découvrir :

• Concepts Clés et Écosystème : Plongez dans les principes fondamentaux qui font de Tanstack Start un game-changer pour le développement web moderne.
• La Magie en Action (Démo Live) : Au cours d'une démo concrète et rapide (avec React), nous allons construire une application full-stack fonctionnelle en quelques minutes. Vous verrez de vos propres yeux la puissance et la fluidité de ce framework.

🧑🏻‍🍳 À propos de votre chef du jour : Anthony Quéré

"Je suis développeur Full-Stack chez SFEIR Lille et intervenant. Je suis passionné de développement et particulièrement des sujets autour de l'amélioration de la productivité des équipes tech."

Au programme :

12h15 : Début de la présentation 🎤
13h : Questions/Réponses 💬
13h10 : À table ! On vous réserve un repas bien mérité ! 🍽
Et pour ce qui est du menu, il est unique et ne contient qu'un plat du jour ! Voici ce que notre chef du jour vous concocte :

🍱 Le plat du jour : Observabilité Kubernetes : la stack Grafana en pratique

Kubernetes génère beaucoup de signaux… et autant de bruit. Cette session montre comment construire une observabilité efficace, maîtrisée et économiquement soutenable avec l’écosystème Grafana :

• Loki (logs)
• Tempo (traces)
• Mimir (métriques)
• Grafana (visualisation/alerting)

On y aborde les choix d’architecture, la mise en place de la collecte jusqu’aux tableaux de bord, ainsi que la corrélation logs-traces-métriques qui accélère l’investigation et réduit le MTTR.

Au-delà de la technique, on compare de façon pragmatique l’option OSS à une solution SaaS type Datadog : contrôle, portabilité, ordres de grandeur des coûts et des capacités.

Découvrons ensemble cette stack, ses avantages, ses limitations et comment vous pourriez l’utiliser chez vous.

🧑🏻‍🍳 À propos de votre chef du jour : Bastien Chalier

Bastien CHALIER est consultant DevOps & Kubernetes basé à Lille et CTO de Fransys Cloud. Il conçoit et opère des plateformes cloud s’appuyant massivement sur l’open source, de Kubernetes à la stack Grafana, pour industrialiser observabilité, automatisation et fiabilité. Défenseur des outils ouverts et des communautés qui les font vivre, il aime partager des retours d’expérience concrets venus de la prod.