Formation Performances Web

Programme

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

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 ?

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.

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.

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…

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).

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…)

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

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.

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

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

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…

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

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.

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.

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

Formateur

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!

• LinkedIn
• Twitter @theystolemynick

Public visé

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. Vous devriez :

• Connaître les fondamentaux du HTML tels que décrits ici
• Connaître les fondamentaux du langage JavaScript : variables, types de données, boucles, fonctions.

Pré-requis

Cette formation n’a pas de pré-requis (acquis exigés contrôlables par tests, diplômes, certifications…).

Moyens pédagogiques & techniques

• Toutes nos formations sont synchrones, y compris les sessions distancielles : on est « en direct », pas sur la base de vidéos pré-enregistrées.
• Nous n’envisageons pas pour le moment de proposer à nouveau des sessions inter-entreprises présentielles avant, au plus tôt, le 1er avril 2022.
• Un riche support de cours est fourni, qui sert de fil conducteur. Il contient généralement une présentation (diapos) détaillée et des supports de départ dédiés pour chaque partie pratique.
• Les apprenant·e·s peuvent poser leurs questions à tout moment.
• Les sessions alternent théorie et pratique par intervalles courts (de 5 minutes à 1 heure)
• Les parties pratiques reposent sur des mises en situation concrètes (ex. code source de départ, dépôt Git de départ, exercice en ligne avec énoncé et documentation, etc.)
• Les parties pratiques sont réalisées soit en individuel, soit en sous-groupes susceptibles de varier d’un exercice à l’autre, afin de tirer parti du pair programming et mettre en avant la collaboration.
• Les sessions distancielles utilisent une réunion périodique Zoom accessible via le client installable ou le client pur web (sans installation ni privilèges spécifiques). Elles tirent parti notamment des fonctionnalités de vignettes vidéo, partage d’écran, de discussions, de la découpe en sous-salles et potentiellement des quizzes et annotations / tableaux blancs.

Moyens d’évaluation et de suivi

• Chaque demi-journée de formation fait l’objet d’un émargement (numérique ou papier). Pour les sessions distancielles, si un·e apprenant·e ne fournit pas son émargement complet dans les temps, les journaux de connexion Zoom feront foi.
• Chaque première période dans la journée commence par le « debrief » : pendant environ une demi-heure, on fait collectivement ré-émerger les connaissances abordées pour la première fois lors de la journée précédente, afin de remettre tout le monde « dans le bain », de consolider la compréhension et de renforcer l’entente de groupe.
• Tout au long de la formation, la validation des acquis se fait par la réalisation réussie des parties pratiques (exercices, mini-projets, labos, mises en situation diverses, etc.). Des quiz interactifs complètent parfois la mise en pratique. Le formateur / la formatrice reste disponible pour toute question ou tout point de blocage durant les parties pratiques.
• Si un·e apprenant·e manifeste une difficulté, le formateur ou la formatrice peut choisir de l’accompagner spécifiquement sur son poste de travail le temps nécessaire, y compris lors de sessions distancielles grâce aux fonctionnalités dédiées de Zoom (assistance individuelle / one-to-one).
• À l’issue de la session, chaque apprenant·e peut recevoir son attestation de fin de formation (sur demande), et pour les sessions distancielles, nous émettons un certificat de réalisation proforma, utile notamment pour la prise en charge par un financeur tiers (ex. OPCO).
• Une fois la formation terminée, chaque apprenant·e reçoit un lien vers un questionnaire d’évaluation à chaud, qui lui permet notamment d’exprimer son ressenti sur l’atteinte (effective ou à court terme) des objectifs de la formation.

Les apprenant·e·s reçoivent, à chaque début de période, un accès aux diapositives du support de cours au format web, afin de pouvoir faciliter leur suivi.

Après la session, ils reçoivent par ailleurs :

• un e-mail de debrief très fourni et riche en ressources,
• une archive de référence, contenant les éléments de code finalisés, les slides de toute la formation et diverses ressources complémentaires.

L’évaluation des acquis se fait en cours de formation, au travers de l’examen par le formateur de la bonne utilisation de l’outillage par les apprenant·e·s et de l’obtention des résultats attendus.

Besoins matériels et logiciels

• Disposer d’un ordinateur de performance suffisante, correctement configuré (notamment selon l’éventuel guide d’installation associé à la formation et indiqué au plus tard en convocation)
• Cet ordinateur doit être équipé d’une webcam, d’un micro et d’une sortie audio
• Disposer d’une connexion internet avec un débit minimal descendant/montant de 1Mbps, et idéalement au moins 5Mbps (tester ici)
• Pouvoir exécuter Zoom, soit en tant que logiciel installé, soit via le client 100% web. Le bon fonctionnement du client installé peut être testé ici.
  Aucune installation spécifique n’est à prévoir, si ce n’est au moins un navigateur basé Chromium (Chrome / Edge / Brave / etc.) et, idéalement, un Firefox Developer Edition (mais un Firefox classique ira aussi).

• Les formations Performances Web nécessitent quelques installations préalables sur votre machine : toutes les instructions sont ici.

Modalités d’inscription et délais d’accès

Quel que soit le type de session que vous visez (intra- ou inter-entreprises, distanciel ou présentiel), la demande initiale (de devis, de convention…) se fait en ligne sur la page de la formation souhaitée. Vous trouverez ci-avant des liens de demande de convention pour chaque session inter-entreprises ayant de la disponibilité, un bouton de demande de proposition pour une session intra-entreprise, et pour toute autre question, un bouton de contact plus bas sur cette page. Les formulaires en ligne sont à privilégier car ils accélèrent le traitement en évitant la multiplication des échanges e-mails afin d’obtenir l’ensemble des informations nécessaires.

Pour une session inter-entreprise déjà planifiée, nous répondons aux demandes de devis et conventions de formation (qui valent devis) dans un délai maximum de 48h ouvrées (et le plus souvent, en quelques minutes). Pour des sessions intra-entreprise, nous vous recontactons en général sous 72h ouvrées pour affiner votre besoin et vous préparer une proposition adaptée au mieux.

Les e-mails fournissant les devis et conventions de formation, ainsi que les pages de nos formations, fournissent un lien vers un questionnaire en ligne de positionnement des apprenant·e·s : ces informations doivent nous parvenir au plus tôt, idéalement avant signature, afin que nous puissions valider la bonne adéquation de la prestation à son public.

Les convocations partent par e-mail au plus tard 7 jours avant le début de la session, date à laquelle la décision éventuelle d’annulation (typiquement en raison d’un quorum de participants non-atteint pour de l’inter-entreprises) est prononcée. Si la session est confirmée avant ce délai, et à votre demande, nous pouvons vous envoyer les convocations plus tôt.

Pour une session inter-entreprise, il est possible de s’inscrire en ligne (demande de convention et renvoi par e-mail de la convention signée) jusqu’à la veille du début de la session, sous réserve que la disponibilité demeure. Si le délai nominal d’envoi de convocation est déjà passé, celle-ci est envoyée immédiatement à réception de la convention signée.

Toutefois, dans le cas d’un client particulier (personne physique), les délais légaux de rétractation peuvent exiger une contractualisation suffisamment en amont de la session. Ces délais sont de 10 jours calendaires pour une session présentielle, et 14 jours calendaires pour une distancielle. Afin de permettre une inscription de dernière minute aux clients personnes physiques, celles-ci ont la possibilité de renoncer explicitement à leur droit de rétractation lors d’une demande de convention en ligne tardive.

En cas de subrogation de paiement (OPCO, Pôle Emploi, Région, UE, etc.) il est impératif que nous recevions l’accord de financement avant le dernier jour de la formation. En cas de financement refusé ou partiel, le client est redevable de plein droit du reliquat de prise en charge.

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.

Accueil PSH / PBS

La loi du 5 septembre 2018 pour la « liberté de choisir son avenir professionnel » a pour objectif de faciliter l’accès à l’emploi des personnes en situation de handicap.

Notre organisme a à cœur de donner à tou·te·s les mêmes chances d’accéder à (ou de se maintenir dans) l’emploi.

Nous pouvons adapter certaines de nos modalités de formation : pour cela, étudions ensemble vos besoins.

N’hésitez pas à contacter notre Référent Handicap, Christophe Porteneuve, par e-mail ou téléphone.

N’hésitez pas à contacter notre Référent Handicap, Christophe Porteneuve, par e-mail à handicap@delicious-insights.com ou téléphone au 06 62 05 96 56.