Formation Performances Web

C’est la seule formation française sur le sujet. Mise à jour depuis 2012 par un expert reconnu du sujet, elle est agrémentée de retours d’expérience sur des sites réels de clients. Que leurs sites soient en HTTP/2, sur mobile, quelle que soit la techno serveur, les apprenant·e·s repartent avec plein d’idées d’optimisations, une capacité nouvelle de diagnostic et une méthodologie pour tester des suppositions.

Qu’une technique soit dépréciée, à la mode ou futuriste, chacune apporte son lot de questions, parfois de problèmes et nous parlerons de la pertinence et de la compatibilité de chacune d’elles. En-dehors des techniques et des bonnes pratiques, nous verrons également comment maintenir la performance dans le temps : quels processus, quels outils et quels réflexes adopter.

Enfin pour donner du contexte à ce que l’on fait, nous verrons les raisons qui nous poussent à faire des pages performantes : retour sur investissement, la théorie de l’expérience utilisateur, et des données sur les équipements des utilisateurs.

  • Conforme à l’état de l’art
  • Vision à 360°
  • Haut degré d’expertise
  • Exemples concrets
  • Nombreux ateliers pratiques
  • Monitoring continu

Objectifs

La formation Performances Web vise à permettre aux apprenant·e·s de :

  • Comprendre les intérêts objectifs de la performance
  • Savoir mesurer la performance et la tester dans divers scénarios
  • Optimiser finement la vitesse de chargement des pages et de leurs ressources et leur mise en cache, initiale comme incrémentale
  • Accélérer l’affichage des contenus, en privilégiant ceux immédiatement utiles
  • Améliorer la vitesse de traitement des ressources après chargement (images, polices, JavaScript, etc.)
  • Rendre leurs pages résistantes à des lenteurs de services tiers
  • Optimiser la réactivité et la fluidité des pages une fois chargées
  • Maintenir un niveau élevé de performances au fil du temps grâce à des stratégies de supervision intelligentes

Programme

  1. Pourquoi être performant ?

    • Les raisons humaines : UX, accessibilité et écologie.
    • Combien vous coûte une seconde de retard ?
    • La vérité sur le lien avec le SEO.
    • Les challenges : les besoins des sites VS les attentes des utilisateurs
  2. Comment mesurer la performance

    • Introduction à WebPagetest : programmer des tests, repérer les métriques importantes.
    • Les métriques techniques : time to first byte, DOMContentLoaded, onload. Signification et conséquences sur le code.
    • Les métriques UX : Start Render, First Contentful Paint, First Meaningful Paint, Speed Index, Largest Contentful Paint, Last Painted Hero, Cumulative Layout Shift… Lesquelles sont utiles pour votre site ?
    • Diagnostiquer un problème de contention CPU : Time To Interactive, Total Blocking Time, First Input Delay.
    • Les métriques idéales à définir soi-même.
    • Quels objectifs de performance se donner ?
  3. Paramétrer ses tests

    Chiffres et outils pour essayer de se mettre à la place de ses utilisateurs.

    • Les débits et latences moyennes en France, dans le monde, sur mobiles ou ailleurs.
    • L’équipement mobile des utilisateurs et ses conséquences sur nos bases de code frontend.
    • Outils de tests et de simulation.
  4. Maîtriser le cache client

    Pour ne pas faire attendre vos utilisateurs la seconde fois.

    • 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.
  5. Comprendre HTTP et les navigateurs

    Une petite base théorique pour comprendre toute la série d’optimisations qui en découlera.

    • 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.
    • La fausse bonne idée : le domain-sharding
    • Optimisations HTTPS
    • HTTP/2 : théorie VS pratique.
    • Les avancées de HTTP/2 PUSH et Priorities
    • Le futur : HTTP/3…
  6. Optimiser le chemin critique

    Les techniques de base que plus aucun site ne peut ignorer.

    • La base : grouper, minifier et compresser CSS et JS.
    • Groupement des fichiers critiques : stratégies pour HTTP 1 et HTTP/2
    • Technique du critical CSS : outils et limites.
    • JavaScript asynchrone et amélioration progressive
    • Stratégie pour contrer un temps de calcul serveur long.
    • Compression gzip et brotli.
    • Pré-chargement de ressources : techniques et cas d’utilisation (dns-prefetch, preconnect, prefetch, preload, prerender, en HTML ou en header HTTP).
  7. Les polices

    Les polices sont belles mais rebelles. Comment les utiliser sans gêner l’utilisateur ?

    • 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 polices : 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-texte”,
    • Les polices iconiques, les polices variables
    • Optimiser le fichier de police (Woff2, compression, choix des caractères…)
  8. Les images

    Aussi vitales que lourdes, il y a plein de techniques à connaître pour les optimiser :

    • Comment se passer d’images ?
    • Sprites ou inline ?
    • Le chargement à la demande ou lazy-loading.
    • Dangers et opportunités de l’humble attribut src
    • SVG et polices 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 responsives : comprendre le standard srcset, sizes et picture.
    • Quelle stratégie d’image responsive ?
    • Optimisations et hacks sur les images
    • Servir des vidéos optimisées
  9. Le danger des services tiers

    Pub, tracking et autres services fournis par des tiers présentent des risques parfois critiques de performance.

    • La théorie du Single Point Of Failure, appliquée 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.
  10. Charger JavaScript

    Il y a au moins 6 manières de charger un fichier JS, voici de quoi choisir la bonne pour votre cas :

    • la classique balise script en haut de page qui présente bien des avantages,
    • les scripts inline, en milieu de page, ou en bas de page ?
    • le JS asynchrone ou à la demande,
    • les attributs async et/ou defer,
    • script type=module et import().
    • Choisir une stratégie
  11. Optimiser un bundle

    • Le tree-shaking, c’est pas automatique
    • Réduire le poids d’un bundle : méthode, outils et plugins Babel ou Webpack
    • Diviser pour mieux régner : bundle splitting
  12. Garder une interface fluide

    Une fois chargée l’interface doit être utilisable sans accroche : voyons les outils et techniques.

    • Comment marche un navigateur : layout, paint et composite.
    • Animer en restant fluide, cas pratique
    • Prise en main de l’outil Chrome Dev Tools
    • La relation compliquée Machine JS / DOM
    • Gérer des calculs lourds ou de grosses manipulations du DOM : API Web Workers, requestAnimationFrame, requestIdleCallback et… setTimeout
    • Respecter le DOM : patterns et anti-patterns
    • Les pièges classiques : gif animés, survol, défilement, ombres, parsing de JSON…
  13. Surveiller ses performances

    Pour que l’utilisateur ne soit pas le seul à savoir que le site rame, parlons des outils libres qui vous permettront de détecter les problèmes.

    • Ce que valent les checklists : PageSpeed Insights, WebPagetest, SiteSpeed.io, Lighthouse…
    • 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…)
    • Exploiter les données du Crux de Google
  14. Monitoring de scénarios complexes

    Utilisation du scripting disponible dans WebPagetest pour dépasser le cas basique d’affichage d’une page unique :

    • 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.
  15. Un site qui marche sans connexion

    La plus rapide des requêtes étant celle qu’on ne fait pas, voyons comment gérer le hors-ligne et les techniques de cache avancées

    • Stocker dans le navigateur : IndexedDB, DOM Storage, cookies.
    • Service Workers : API, démo et limites.
  16. La perception de l’utilisateur

    Si on fait de la performance, c’est pour améliorer l’expérience utilisateur. Comment la performance est-elle perçue ?

    • UX : psychologie et ordres de grandeur (secondes, fps, relatives)
    • Le design de l’attente, avec des exemples concrets d’interfaces

Prochaines sessions

  • du 4 au 6 novembre 2020 - Paris
    Attention complet

(Sauf indication contraire, chaque date dispose d’au moins 4 places encore libres)

Tarifs

⚠️ Si vous souhaitez suivre une formation à distance ou présentielle en bénéficiant du dispositif FNE-Formation spécial Covid-19 et que notre tarif unitaire dépasse le plafond d’acceptation « automatique », rassurez-vous : par solidarité, nous raboterons le tarif !

Vous inscrivezTarif unitaire
1 à 2 apprenant·e·s1 500 € HT
3 à 5 apprenant·e·s1 350 € HT
6+ apprenant·e·s1 200 € HT
Tarif fidélité1 275 € HT

Besoin d’une intra-entreprise ou sur-mesure ?

Pour une formation personnalisée, en accord avec vos besoins, dans vos locaux, dans les nôtres ou à distance, décrivez-nous votre besoin en détail.

Habituellement, le coût pédagogique d’une intra pour cette formation, forfaitaire jusqu’à 10 apprenant·e·s, est de 9 000 € HT.

Demander ma formation intra / sur mesure

Public visé et pré-requis

La formation Performances Web est destinée aux intégrateur·rice·s, aux développeur·se·s frontend et aux chefs de projet désireux de tout savoir les techniques et les process d’accélérations de pages.

Des connaissances basiques d'écriture du code HTML / CSS / JavaScript sont suffisantes pour 80% du contenu.

Livrables

Les apprenant·e·s reçoivent, en début de session, l’ensemble des diapositives du support de cours au format web, afin de pouvoir faciliter leur suivi du plan de cours.

Après la session, ils reçoivent par ailleurs, avec un e-mail de debrief très fourni et riche en ressources, une archive de référence, contenant les codebases finalisées, entièrement documentées et testées, les slides de toute la formation et diverses ressources complémentaires.

Aspects logistiques

La formation se déroule dans une salle privative climatisée, lumineuse, fonctionnelle et très confortable. L’ensemble des locaux sont facilement accessibles en transports en commun et accessibles aux Personnes à Mobilité Réduite.

Situé à Paris, près de Nation, ils sont accessibles via pas moins de 5 lignes de métro, 1 ligne de RER et 5 lignes de bus :

  • Métro Ligne 2 Philippe-Auguste ou Alexandre Dumas
  • Métro Ligne 9 Charonne ou Rue des Boulets
  • Métro Ligne 8 Faidherbe-Chaligny
  • Métro Ligne 1 Ligne 6 RER Ligne A Nation
  • Bus Ligne 26 Ligne 57 Ligne 86 Nation
  • Bus Ligne 56 Charonne-Voltaire ou Boulets-Montreuil
  • Bus Ligne 76 Charonne-Philippe-Auguste
Delicious Insights

83 avenue Philippe-Auguste
75011 Paris

Voir sur Google Maps

On trouve également nombre de parkings alentour.

  • Chaque apprenant·e amène son propre poste de travail ou ordinateur portable.
  • L’accès internet est assuré par une connexion fibre très haut débit. La salle fournit un accès Wi-Fi et, pour les cas exceptionnel, une infrastructure Ethernet filaire.
  • Vous n’êtes pas en région parisienne et cherchez un hébergement ? Pourquoi ne pas passer par airbnb ? Ça existe même pour les entreprises.
  • Les formations Performances Web nécessitent quelques installations préalables sur votre machine : toutes les instructions sont ici pour OSX, Linux et Windows.

  • Les formations vont de 3 à 10 apprenant·e·s.

En présentiel, la formation compte 7 heures par jour, avec une pause déjeuner généreuse et une pause de 20 minutes au milieu de l’après-midi. À distance (FOAD), chaque jour utilise la plage 13h30–17h (ce qui double les journées ouvrées utilisées).

Vous pourrez retrouver toutes les informations sur les modalités d’inscription et de paiement, l’annulation et le remboursement dans nos Conditions Générales de Vente, sans oublier notre règlement intérieur.


Nos locaux, pour nos formations inter-entreprise (cliquez pour agrandir) :

Formateur

Jean-Pierre Vincent

Jean-Pierre Vincent

Jean-Pierre fabrique du Web depuis 2000, côté backend en PHP et NodeJS ou côté frontend. Il a écrit le premier livre sur HTML5 en français, donne des formations et des conférences sur JavaScript ou la Webperf depuis 2010. Il livre des audits de Webperf ou des architectures JS à ses clients en indépendant depuis 10 ans, après être passé dans quelques sociétés dont Yahoo!