Actions collectives - Se former sans impacter son budget formation pour les adhérents AGEFICE  ou FAFIEC.
REF ESMA194 | 3 JOURS |  FORMATION 100% PRATIQUE

 

formation html5 css3 et javascript

Préparez votre projet de formation.
LA FORMATION Améliorer les performances Web VOUS PERMETTRA :
  • 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
Comprendre les enjeux de la performance des sites Web au travers d’outils pertinents et apporter les améliorations nécessaires.

 

CONTENU DE LA FORMATIONCOMPRIS DANS LA FORMATIONTARIFS & DATESSE RENSEIGNER
Prérequis
Afin de profiter pleinement de la formation, il est conseillé de posséder des compétences dans le domaine du Web.
Public
La formation est destinée aux Chefs de projets, Développeurs et Ingénieurs.

 

Programme de la formation Améliorer les performances Web

Introduction

Performances et Business

  • La relation temps d’affichage / chiffre d’affaire
  • Référencement : la vision de Google
  • Ergonomie : la performance perçue par l’utilisateur

Le futur

  • La 4G et la fibre
  • Les besoins des sites

Les métriques, les outils

  • Pourquoi le temps de chargement total ne suffit pas
  • Comprendre Time To First Byte, Time To Render, Time to Interaction, $.ready()
  • Outils de diagnostic et de monitoring gratuits

TP

  • Clone des sites du client en local
  • Diagnostiquer avec WebPageTest, programmer des tests

Backend ou Frontend

  • Les checklists ySlow, PageSpeed et Opquast
  • Faire du profiling côté client, sur tous les navigateurs
  • Détecter le danger des widgets tiers (Facebook, Google+, Twitter …)
  • Que voient vos utilisateurs, avec le Real User Monitoring
  • Utiliser Google Analytics, Boomerang JS, la Navigation API
  • Outils commerciaux

Comprendre les limites de HTTP

  • Les problèmes de HTTP 1.1 et TCP
  • Débit et latence : quelle influence ?
  • Changer de protocole ? HTTP2 et SPDY

Comment fonctionne un navigateur ?

  • Quels OS / navigateurs tester ?
  • Parallélisation, pipelining, Keep-Alive

TP configuration de serveur:

  • Keep-Alive
  • gzip

Le piège de la technique du domain-sharding

Outils de R&D : Browserscope et Cuzillion

Le chemin critique, les ressources bloquantes

  • CSS et JavaScript : que faire ?
  • TP : les actions sur les fichiers CSS et JavaScript
  • TP : action de base sur les polices

Maîtriser le cache

  • TP : activation du cache
  • Les problèmes communs ou le syndrome du « Vide ton cache »
  • Invalidation standard (eTag et autre)
  • Maîtriser le cache des utilisateurs
  • TP : Implémentation d’un système efficace de cache

Le cache client ultime : HTML5 offline

  • Principe
  • API
  • Limites

Les solutions de cache serveur

  • Les solutions de cache serveur
  • TP : La technique du flush serveur
  • La stratégie de la page semi dynamique
  • Comment tricher avec les délais longs côté serveur
  • L’exemple de Facebook

Savoir charger JavaScript

  • Chargement en haut de page
  • Chargement en milieu de page
  • Chargement en bas de page
  • Les attributs natifs async et defer
  • Le chargement asynchrone, ses librairies
  • Les stratégies de chargement

TP : Chargement JS par modules

  • Autres méthodes de chargement (XHR, LocalStorage, lazy-evaluate…)
  • Le problème des publicités

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

Les images

  • Utilisation de CSS3 et des caractères unicode
  • Embarquer le contenu d’une image en CSS ou HTML
  • La technique du spriting
  • Le chargement Just In Time
  • La compression (manuelle et automatique)
  • TP : se passer d’images sur mobile. Tester les outils de compression

Le code des tiers

  • Comprendre l’impact bloquant de Google+, Facebook, Twitter
  • Le problème des publicités, trackers et widget
  • La solution : l’asynchrone
  • TP: inclure sans risque du code tiers
  • L’outil : SPOF-O-MATIC

Interfaces fluides, ce qui ralentit une page

  • outil pour surveiller, symptômes à observer
  • expérimentation avec des vieux navigateurs ou des modernes
  • manipulation off-DOM
  • setTimeout(0), le sauveur méconnu
  • délégation d’événements
  • Les outils de profiling côté client

Les techniques modernes avec HTML5

  • WebSocket et Server Sent Event
  • localStorage
  • Les WebWorkers
  • Prefetch, prerender, next

Les petites choses qui font mal

  • CSS @import
  • les filtres CSS
  • les dimensions des images
  • favicon
  • les 404
  • les redirections
  • expressions CSS
  • le charset
  • les scripts .htc

Solutions avancées

  • Faut-il se payer un CDN ?
  • domain sharding : pour quelles situations ?
  • Stratégies de chargement du contenu
  • Organiser son CSS en modules ?
  • L’influence des iframes
  • Construire un cache agressif sur mobile

Analyses de sites

Conclusion

  • SUPPORTS DE FORMATION
  • GUIDE DE BONNES PRATIQUES
  • SUIVI POST-FORMATION D’UN AN
INTER-ENTREPRISES : 1590€ HT par stagiaire
PARIS
    • 11 décembre 201812 décembre 2018 @ 

    • 12 février 201913 février 2019 @ 

    • 9 avril 201910 avril 2019 @ 

    • 11 juin 201912 juin 2019 @ 

    • 13 août 201914 août 2019 @ 

    • 8 octobre 20199 octobre 2019 @ 

INTRAS ET SUR MESURE
Nos consultants vous accompagnent pour adapter ce programme de formation à votre contexte.

Utilisez ce formulaire pour décrire votre projet de formation.


1
Fermer le menu