Au sein de notre client : Contexte du poste SRE Front Le rôle du SRE Web Front est de garantir une expérience utilisateur web fiable, performante et observable, depuis le navigateur jusqu'au backend. Le SRE travaille avec : Développeurs Front (VueJS) Backend (BFF/API) DevOps Produit SEO / Marketing Exigences SRE Front : VueJS réel Performance web réelle CDN réel Missions principales 1. Fiabilité & performance Web Définir et suivre les SLI / SLO Web. Superviser la disponibilité des pages critiques. Optimiser les temps de chargement. SLI typiques : Page Load Time Time to First Byte (TTFB) First Contentful Paint (FCP) Largest Contentful Paint (LCP) Taux d'erreur js Exemples : Détection d'une dégradation LCP après une release Augmentation des erreurs JS sur Safari / Chrome Latence CDN sur une région 2. Observabilité Frontend Mettre en place un monitoring navigateur, corréler erreurs frontend et backend, superviser les métriques utilisateur réelles. Sources : Real User Monitoring (RUM) Logs js Core Web Vitals Exemples : Corrélation erreur JS avec un endpoint API Détection d'un bug sur une version spécifique Chrome 3. Gestion des incidents Web Participation aux astreintes Identification rapide des dégradations frontend Coordination rollback frontend Exemples : Erreurs JS massives après déploiement CDN indisponible Dégradation performances Lighthouse 4. Déploiements sûrs Frontend Déployer via Canary ou progressive rollout. Superviser les erreurs après release. Automatiser les rollbacks. Techniques : Feature flags Versioning frontend Rollback instantané CDN Exemples : Activation progressive d'un nouveau composant VueJS Rollback après hausse des erreurs JS 5. Performance Web avancée Optimiser le rendu frontend, réduire le poids des assets, optimiser les stratégies de cache. Techniques : Lazy loading Code splitting Compression HTTP caching Exemples : Réduction bundle JS Optimisation images WebP Mise en cache CDN 6. CDN & Edge Delivery Configurer et superviser le CDN. Optimiser le cache edge. Superviser l'invalidation cache. Exemples : Mauvaise configuration cache HTML Invalidation tardive d'un asset 7. Compatibilité navigateurs Superviser les erreurs par navigateur, valider la compatibilité multi-device, détecter les erreurs spécifiques navigateur. Exemples : Bug Safari uniquement Problème sur Android Chrome 8. Core Web Vitals & SEO technique Superviser les métriques SEO et optimiser l'expérience utilisateur. Métriques : LCP CLS INP Exemples : Dégradation CLS après ajout publicité Mauvaise indexation SSR 9. Gestion des assets & cache Versionner correctement les assets, superviser l'invalidation cache, éviter les incohérences front/back. Exemples : Asset JS non synchronisé Cache obsolète 10. Sécurité Frontend Mise en place CSP Protection XSS Gestion des cookies sécurisés Exemples : Mauvaise configuration CSP Injection script externe 11. Collaboration & culture fiabilité Travailler avec les équipes frontend, intégrer la performance dès la conception, mettre en place des budgets de performance. Exemples : Revue performance avant merge Définition budgets bundle size 12. Livrables attendus Dashboards SLO / SLI / SLA Analyses post-mortems Plans d'amélioration Roadmap fiabilité