Développement Performances Web

Optimiser ses fichiers (HTML, CSS, images) pour améliorer les performances d'un site

Objectifs

→ Définir les performances Web et ses enjeux
→ Améliorer ses performances
→ Optimiser ses fichiers
→ Analyser et surveiller ses performances
→ Optimiser une page HTML responsive

Public concerné

Intégrateurs et développeurs Web.

Pré-requis

Il est nécessaire de maîtriser le HTML, les CSS et d‘avoir quelques notions de JavaScript ou de jQuery.

Programme

Définir les performances Web et ses enjeux

  • Définir la notion de performance Web
  • Comprendre l‘enjeu des performances sur la navigation mobile
  • Comprendre l‘impact des performances sur le référencement
  • Comprendre l‘impact des performances sur l‘expérience utilisateur (UX)

 

Partage d‘expériences sur des cas concrets

Améliorer ses performances

Assimiler le fonctionnement d‘un navigateur

  • Décomposer une requête afin de comprendre l‘ordre de chargement des fichiers externes
  • Décrypter le temps de chargement d‘une page

 

Restructurer ses requêtes

  • Réduire le nombre de requêtes
  • Minifier ses ressources pour réduire leur temps de chargement
  • Compresser ses ressources
  • Précharger certaines ressources
  • Paralléliser les requêtes afin de ne pas bloquer le chargement du HTML
  • Utiliser des CDN à bon escient

 

Comprendre les bases de l‘optimisation côté serveur

  • Optimiser le fichier .htaccess pour sécuriser un site
  • Activer la compression
  • Personnaliser le cache avec les en-têtes d‘expiration

 

Étude de cas : analyse complète d‘un fichier .htaccess

Optimiser ses fichiers

Analyser son JavaScript

  • Utiliser les méthodes defer et async
  • Savoir placer son code JavaScript pour un meilleur chargement dans le HTML

 

Exercice : intégrer correctement des fichiers JavaScript dans une page HTML

 

Maximiser ses images

  • Choisir le bon format en fonction du type d‘images
  • Réduire la taille des images pour un chargement plus rapide
  • Utiliser les méthodes de Lazy Loading pour ne pas surcharger la page
  • Utiliser les polices d‘icônes
  • Réaliser des sprites pour diminuer le nombre de requêtes
  • Délivrer des images Retina sur mobile
  • Optimiser sa favicon

 

Exercice : choisir le bon format et optimiser une série d‘images

 

Améliorer le HTML et le CSS

  • Alléger ses codes HTML et CSS pour une lecture plus rapide par le navigateur
  • Optimiser les performances des sélecteurs CSS
  • Fluidifier et optimiser ses animations CSS3
  • Optimiser sa page 404 pour une meilleure expérience utilisateurs (UX)

 

Exercice : réaliser une animation fluide

Analyser et surveiller ses performances

  • Utiliser les outils de diagnostic en ligne
  • Utiliser les outils de développement des navigateurs
  • Comprendre la notion de Speed Index
  • Identifier les ressources critiques (SPOF…)
  • Surveiller les performances (Monitoring…)

 

Étude de cas : analyse des performances de divers sites Internet

Optimiser une page HTML responsive

  • Optimiser le HTML et les CSS
  • S‘intéresser à la ligne de flottaison
  • Optimiser l‘appel aux librairies JavaScript externes
  • Optimiser le code JavaScript
  • Optimiser les images (Retina…)
  • Analyser les performances globales de la page

 

Exercice : rendre une page HTML responsive, complexe et performante

Méthodes pédagogiques

Alternance de théorie, de démonstrations et de mise en pratique grâce à de nombreux exercices concrets facilement transposables en milieu professionnel : analyse des performances de différents sites, développement et optimisation d‘une page Web, etc.

Moyens techniquesMoyens spécifiques à cette formation :

→ Sublime Text 3


Moyens génériques :

  • d’un poste de travail Mac ou PC de dernière génération équipé d’un écran plat 21” ou 27”
  • d’une tablette graphique
  • d’un iPad sur demande
  • d’une connexion très haut débit à Internet
  • d’une clé USB de 8 Go offerte en début de formation
  • Le poste du formateur est relié à un système de vidéo projection
  • 8 participants maximum par stage
  • 9 participants pour les formations certifiantes
  • Toutes les formations sont dispensées sur les dernières versions officielles de chaque logiciel
  • Un support de cours ou un livre est remis à l’issue des principaux stages
Suivi
  • Chaque apprenant bénéficie d’une hotline gratuite et illimitée par e-mail
  • Fiche d’évaluation, feuille d’émargement et attestation de présence
Profil du formateur

Développeur Web ayant plus de 10 ans d‘expérience en enseignement.

Marketing Digital
Web
Médias sociaux
Voir toutes les formations

Performances Web

2 jours 14 heures 2 780 €HT*

* À partir de

Organisez cette formation dans votre entreprise selon vos plannings et les disponibilités de nos intervenants (dates continues ou discontinues).

Cliquez ici pour plus d'informations

Ce tarif inclut :

  • La préparation pédagogique de la formation par notre équipe (validation des pré-requis, définition des objectifs et des compétences visées
  • Un entretien téléphonique avec le formateur
  • L’animation de cette formation dans vos locaux pour 3 stagiaires maximum
  • Les supports de cours (si prévus)
  • La gestion administrative de la formation (frais de dossier, devis, conventions…)

Ce tarif n’inclut pas :

  • La mise à disposition du matériel nécessaire au bon déroulé de la formation (ordinateurs, vidéo-projecteur, logiciels…),
  • De rendez-vous de préparation avec le formateur,
  • La conception de supports spécifiques,
  • Les éventuels frais de déplacement et d’hébergement du formateur.

Important :

  • Ces formations peuvent également être organisées dans nos salles de formation exclusivement pour vos collaborateurs (dans ce cadre, nous nous chargeons de tous les aspects logistiques).
  • Dans le cadre de formations « intra / sur mesure », la durée des formations peut bien sûr être modifiée selon vos impératifs et objectifs

Fermer

Demander un devis