Formation WebPerf – Performances Web côté client

Cette formation va vous permettre de passer maitre dans l’art de l’optimisation des performances Web (coté client)

Description de la formation WebPerf

La WebPerf ou optimisation de la performance Web permet d’obtenir un meilleur référencement Web, de rendre le contenu plus fluide et visible, d’optimiser son design mais surtout, de maximiser la satisfaction des internautes.Avec le temps, intégrer une gestion des performances dans des projets informatiques est devenu une nécessité.

Openska vous propose cette formation WebPerf Performances Web côté client sur 3 jours afin de vous permettre d’optimiser les performances de vos applications Web du côté client. Au travers de cette formation vous apprendrez étape par étape à analyser, monitorer et modifier pour optimiser vos applications au travers de cours à la fois pratiques et théoriques. À terme, vous serez capables de déployer une gestion des performances Web efficace dans tous vos projets.

Bulletin d’
inscription
 Demande de
devis
 Détail du
programme

Programme de la formation WebPerf – Performances Web côté client

  • Pourquoi être performant ?
    • Combien coûte une seconde de retard ?
    • L’influence sur le référencement
    • Les challenges : ce que veulent les utilisateurs et les besoins des sites
  • Paramétrer ses tests
    • Limites de L’HyperText Transfer Protocol (HTTP)Les débits et latences moyennes en France, dans le monde, sur mobiles ou ailleurs
    • Les équipements des utilisateurs
    • Outils de simulation
  • Comment mesurer la performance
    • Introduction à WebPagetest : programmer des tests et repérer les métriques importantes
    • Les métriques techniques : time to first byte, document ready, onload. Signification et conséquences sur le code
    • Les métriques UX : Start Render, First Contenful Paint, First Meaningful Paint, Speed Index … Comment les interpréter ?
    • Les métriques idéales à mesurer soi-même
    • Diagnostiquer un problème de contention CPU : Time To Interactive, mesures CPU
    • Quels objectifs de performance se donner ?
  • Maîtriser le cache client
    • Théorie : cache classique, invalidation standard, worker, pré-chargement, 302, immutable …
    • Le vrai problème du cache : l’invalidation
    • Stratégies et outils de mise en pratique et de vérification
  • Comprendre HTTP et les navigateurs
    • Le TCP, la latence et ses conséquences sur un site classique
    • HTTP 1.1 : keep-alive, pipelining ou parallélisation, la limite des 14Ko
    • Optimisations HTTPS
    • HTTP/2 : théorie et démo
    • HTTP/2 rend-il obsolète les techniques classiques de Webperf ?
    • Le futur : QUIC, cache-digest, code 103 …
  • Optimiser le chemin critique
    • La base : grouper, minifier et compresser CSS et JS
    • Stratégies de chargement des CSS / JS : 1 ou plusieurs fichiers
    • Technique du critical CSS : outils et limites
    • Compression gzip et brotli
    • Stratégie pour contrer un temps de calcul serveur long
    • Faire attention aux redirections
    • Pré-chargement de ressources : techniques et cas d’utilisation (dns-prefetch, preconnect, prefetch, preload, prerender, en HTML ou en header HTTP)
  • Les polices
    • Le comportement des navigateurs : texte invisible (FOIT), texte non-stylé (FOUT) ou
      page blanche ?
    • Rappel sur les bases pour un bon dialogue intégrateurs / graphistes
    • Les variantes (et leurs limites) de chargement de fonts : API JS FontFace, propriété
      CSS font-display, les loaders JS, encodage inline et mix de ces techniques
    • Les astuces src:local, police système, variantes “faux-text”
    • Optimiser le fichier de police (Woff2, compression, choix des caractères …)
  • Les images
    • Comment se passer d’images ?
    • Sprites ou inline ?
    • Le chargement à la demande ou lazy-loading
    • SVG et font iconiques : techniques et limites
    • Connaître les formats classiques GIF, PNG et JPEG ainsi que les nouveaux formats (WebP, JPG XT, JPG XR, JPG 2000 …)
    • Optimiser automatiquement un GIF animé, des JPG et des PNG
    • Les images responsive : comprendre le standard srcset, sizes et picture,connaître les alternatives
  • Le danger des services tiers
    • La théorie du Single Point Of Failure, appliqué aux pages Web
    • Détecter un SPOF : outil navigateur, avec WebPagetest ou en intégration continue
    • Les solutions : comment inclure les fichiers tiers ? Quand exécuter son propre code ?
    • Détecter qu’un tiers fait ramer l’interface
  • Charger JavaScript
    • la classique balise script en haut de page qui présente bien des avantages
    • les scripts de bas de page
    • le JS asynchrone ou à la demande
    • les attributs async et/ou defer
    • le JS inline
    • script type=module et import()
    • Optimiser un bundle :
    • Le tree-shaking, c’est pas automatique
    • Un bundle ou plusieurs ?
  • Garder une interface fluide
    • Le DOM : son importance, les bonnes pratiques d’intégration et de jQuery.
    • Comment marche un navigateur : layout, paint et composite.
    • Exemple pratique avec l’optimisation d’un slideshow animé
    • Les animations CSS et les librairies d’animation JS
    • JavaScript : les outils de profilage
    • Prise en main de l’outil Chrome dev tools.
    • Les pièges classiques : gif animés, hover, scroll, shadows …
    • Gérer des calculs lourds ou de grosses manipulations du DOM : API Web Workers, requestAnimationFrame, requestIdleCallback et … setTimeout
  • Surveiller ses performances
    • Ce que valent les checklist : Opquast, ySlow, PageSpeed Insights, WebPagetest,SiteSpeed.io, Lighthouse…
    • Démo de plugins navigateur
    • Mettre en place un vrai monitoring en interne : process et outils (OpenSpeedMonitor,WPT Monitor, SiteSpeed.io, grafana …).
    • Les API JavaScript pour récupérer les informations de performance chez l’utilisateur.
    • Mesures d’évènements délicats (texte visible, SPA prête …)
  • Monitoring de scénarios complexes
    • navigation multi-pages
    • passer un formulaire
    • tester avec et sans code tiers
    • valider la résistance aux serveurs tiers lents ou morts
    • tester les sites en responsive
  • Un site qui marche sans connexion
    • Stocker dans le navigateur : IndexedDB, DOM Storage, cookies.
    • Détecter et s’outiller pour l’offline
    • Service Workers : API, démo et limites
    • L’offline qui marche partout : HTML5 Application Cache
  • La perception de l’utilisateur
    • UX : psychologie et ordres de grandeur (secondes, fps, relatives)
    • Le design de l’attente, avec des exemples concrets d’interfaces
  • Niveau : Spécialisation
  • Ref : WEBPERF
  • Durée : 2 jours
  • Prix : 1090€
  • Niveau : Spécialisation
  • Ref : WEBPERF
  • Durée : 2 jours
  • Prix : à définir
organiser votre formation

Objectifs

  • Comprendre les enjeux de la Performances des sites Web
  • Savoir effectuer des tests et des diagnostics des pages
  • Accélérer le chargement des pages
  • Fluidifier l'expérience utilisateur
  • Mettre en place une politique de surveillance des performances.
  • Maîtriser l’outil open-source Webpagetest

Public

  • Intégrateurs
  • Développeurs frontend
  • Chefs de projet

Pré-requis

  • Avoir déjà un peu écrit du code HTML / Javascript.
Pré-inscription
Cette formation se fait avec Alsacréations
logo_alsacreations
Nous proposons
Consulting
Formation