Formation Améliorer les performances de vos sites Web


REFERENCE
 
 
IPSW
DUREE
 
 
3 jours
TARIFS
 
 
1650 € HT
Niveau : Intermédiaire
Cours à distance: Non
OBJECTIFS :
 

Cette formation Performance Web vous permettra d'améliorer les performances de vos sites WEB en vous détaillant toutes les phases du cycle de vie d'une page WEB. De son chargement à son affichage en passant par son interprétation toutes les technologies sont passées au crible (HTTP, navigateur, CSS, JavaScript, DOM, HTML5, cache, cookies, compression,...). Vous disposez ainsi des leviers pour ajuster les paramètres et améliorer les temps de réponse dans des proportions parfois étonnantes. La progression pédagogique s'appuie naturellement sur l'ordre réel dans lequel les technologies sont sollicitées et cela rend la formation très fluide et surtout concrète (plus on avance plus les performances s'améliorent sur les sites étudiés).
Concrètement vous serez capable de :
- Comprendre les enjeux de la Performances des sites Web
- Savoir effectuer des tests et des diagnostics des pages
- Etre capable d'accélérer le chargement des pages pages
- Fluidifier l'expérience utilisateur
- Savoir mettre en place une politique de surveillance des performances

PRÉ-REQUIS :
 

Posséder une connaissance de l'environnement web.

PUBLIC :
 

Cette formation Performance Web cible en particulier les développeurs, web designers, webmasters.

PROGRAMME :
 

 

Introduction aux performances des sites web et à l'optimisation
Performances et Business

Seulement un problème technique ?
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 et maintenant

La 4G et la fibre
Les besoins des sites

Les métriques, les outils pour la gestion des performance des sites Web

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
Travaux Pratiques Clone des sites du client en local
Diagnostiquer avec WebPageTest, programmer des tests

Backend ou Frontend : où passe le temps ?

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

Sentir et 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 marche un navigateur ?

Quels OS / navigateurs tester ?
Parallélisation, pipelining, Keep-Alive
Travaux Pratiques 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 ? Travaux Pratiques Les actions sur les fichiers CSS et JavaScript
Action de base sur les polices

Maîtriser le cache

Travaux Pratiques 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
Travaux Pratiques 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 Travaux Pratiques 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
Travaux Pratiques Chargement JS par modules Autres méthodes de chargement (XHR, LocalStorage, lazy-evaluate…)
Le problème des publicités

Surveiller les performances des sites Web

Exemple d’installation de WebPageTest Monitor Travaux Pratiques Programmer des tests Les compléments en open-source : Graphite et compagnie
La connexion type des utilisateurs ?
Travaux Pratiques 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)
Travaux Pratiques 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
Travaux Pratiques 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 performances des sites Web
Conclusion

 

 

TRAVAUX PRATIQUES :
 

La partie théorique sera illustrée systématiquement par des exemples concrets. Les TP permettront d'acquérir l'autonomie technique pour résoudre les problèmes récurrents et connus de performances des sites WEB.

S'INSCRIRE À CETTE
FORMATION PERFORMANCE WEB
Cliquez sur une date pour vous inscrire
Information pratiques sur
LA FORMATION
Lieu de la formation Paris - LA DEFENSE
Nous contacter 01 43 34 90 94
CETTE FORMATION SUR-MESURE Ce cours est réalisable en intra-entreprise, dans vos locaux ou nos salles de cours CONTACTER NOTRE SERVICE INTRA
D'autres formations
SUR LE MÊME THÈME

4 j

 
Les trois logiciels "Apache, MySQL et PHP" se sont imposés comme standards de fait pour constituer des sites Web en Open Source. Même si les plates-formes Unix/Linux restent...

2 j

 
Comprendre les architectures Web et la place d'un serveur Apache Savoir installer, configurer, sécuriser et surveiller des serveurs Apache en production Se repérer dans les...

3 j

 
Cette formation Apache s'articule autour d'une étude détaillée du serveur Apache, pierre angulaire d'une solution Web Open Source. Elle détaille Apache en...

3 j

 
Une formation très pratique sur Apache qui vous amènera à maîtriser les fonctionnalités offertes par ce standard du marché en sécurisant fortement...
Plus de formations sur le même thème

Des questions ?

ON VOUS RAPPELLE

 

0

Formations
Informatique
et Management
en ligne à ce jour

+ 0

Stagiaires dans nos
salles de cours sur
l'année

0%

De participants
satisfaits ou très
satisfaits de nos
formations

0

Formateurs experts
validés PLB