Formation Performances web

Accélérez les temps de chargement de vos pages et de vos ressources dans le but de favoriser votre référencement et… votre chiffre d'affaire.

Apprenez à diagnostiquer et corriger les performances de vos pages ! Améliorez l’expérience utilisateur (et vos revenus) en accélérant le chargement des pages et en les fluidifiant, que l’on soit sur mobile ou pas.

C’est la première 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 stagiaires repartent avec plein d’idées d’optimisation, une capacité nouvelle de diagnostic et une méthodologie pour tester des suppositions.

Une formation interactive avant tout !

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.

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

  • 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.
  • La fausse bonne idée : le domain-sharding.
  • 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.

Surveiller les performances

  • Exemple d'installation de WebPageTest Monitor
  • TP: programmer des tests
  • Les compléments en open-source : Graphite et compagnie
  • La connexion type des utilisateurs ?
  • TP : scénarios complexes de navigation

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.
  • Manipulation off-DOM
  • 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

Public

Responsables de sites et chefs de projets web souhaitant améliorer les temps de chargement des pages et des ressources dans le but d'accroître la visibilité, l'expérience utilisateur et de favoriser le référencement.

Objectifs

Comprendre les enjeux de la performance web, pouvoir effectuer des tests et diagnostics fiables, accélérer le chargement des ressources à la fois du côté serveur et du côté client.

Prérequis

Avoir de bonnes bases en langages HTML, CSS et JavaScript. Avoir des connaissances minimales en réseau et en administration de serveur web.

Suivi et appréciation des résultats

L'exécution physique de l'action de formation est suivie à l'aide de feuilles de présence émargées par demi-journée par les stagiaires et le formateur.
Sanction : attestation de fin de stage.

Besoin d'un financement ?

Une formation est un investissement, pour mieux vous permettre de vous former, des possibilités de financement vous sont proposées.

Voir les différents financements

Avant cette formation, préparez-vous avec :

À la suite de cette formation, nous vous recommandons :

Témoignages

Ils ont aimé

Tout d'abord, la formation est donnée par un professionnel très compétent, à l'écoute et très sympathique. La formation s'est déroulée dans des conditions optimales (nous étions seulement 3 personnes formées). Elle est très bien construite, avec démonstration au fur et à mesure de l'efficacité des solutions proposées. C'est donc très visuel et concret, tout en restant très utilisable dans l'application. Elle apporte aussi un lot d'outils très très utiles, et pas forcément très connus. Au final, on ressort d'ici en ayant la conviction que les 2 jours de formations (qui pourraient même s'étaler sur 3) vont nous être vraiment très très utiles dans notre parcours professionnel.

Envie de connaître la date
de nos prochaines formations ?

Calendrier des formations

Nous contacter

Téléphone : 09 54 96 50 50 Adresse e-mail : contact alsacreations point fr

Alsacréations
10 Place du Temple Neuf
67000 Strasbourg, France