Éducation, société et technologie

Optimisation et performance des pages web

mardi 10 août 2004 par André Vincent

Conseils pour optimiser vos pages web, en augmenter la vitesse de téléchargement et en améliorer les performances.

 Un analyseur de performance

Pour vérifier la perfomance de vos pages web :

Disponible aussi directement par le menu de Web Developper (une extension pour Mozilla et Firefox) à Informations -> View Speed Report

 Les facteurs affectant les performances d’une page web

Le nombre total des OBJETS à télécharger

Pour qu’une page web puisse s’afficher correctement, en plus du document HTML lui-même, le serveur web doit aussi envoyer les autres fichiers requis pour construire la page (fichiers CSS, scripts, images, médias, etc...). Chaque fichier constitue un objet qui exige une requête HTTP du client au serveur et réduit d’autant la vitesse d’affichage d’une page. La réduction du nombre de requêtes HTTP au serveur web est un élément crucial dans l’optimisation des performances d’une page web. Bien que la plupart des logiciels de navigation soient aujourd’hui en mesure d’envoyer plusieurs requêtes simultanément à un serveur web, ces requêtes sont en général réglées entre 4 et 8.

  • Excellent : 5 et moins.
  • Bon : 9 et moins.
  • À optimiser : plus de 9.

Le nombre total des IMAGES à télécharger

Les nombre d’images (et leur poid) contituent souvent le principal facteur de dégradation des performances d’une page web. Particulièrement la page d’accueil. Parce que la plupart des logiciels de navigation placent les images recues en cache locale, les autres pages d’un même site utilisant ces mêmes images ne feront pas de requête supplémentaire au site et verront leur performance améliorée.

La mise en page par tableaux exigeant un découpage excessif des images en petits morceaux en est souvent la cause. Le positionnement des images en arrière fond (background-image) peut souvent résoudre ce problème (en fusionnant les multiples petites images en images plus grandes). Les images rétroactives (rollovers) peuvent aussi avantageusement être remplacées par le même effet à l’aide de règles CSS (voir : CSS - Menus et navigation).

  • Excellent : 4 et moins
  • Bon : 8 et moins
  • À optimiser : plus de 8

AUTRES FACTEURS (à venir)

Le nombre total des fichiers CSS à télécharger

Le nombre total des fichiers MULTIMÉDIA à télécharger

Le nombre total des fichiers de SCRIPTS à télécharger

Le poid total des OBJETS à télécharger

Le poid total des IMAGES à télécharger

Le poid total des fichiers MULTIMÉDIA à télécharger

Le poid total des fichiers CSS à télécharger

Le poid total des fichiers de SCRIPTS à télécharger

Exemple pour la présente page

Exemple pour le portail du gouvernement du Québec


Accueil | Contact | Plan du site | | Statistiques du site | Visiteurs : 10353 / 1832740

Suivre la vie du site fr  Suivre la vie du site Cours Web  Suivre la vie du site Sites web statiques  Suivre la vie du site Normes et standards   ?    |    titre sites syndiques OPML   ?

Site réalisé avec SPIP 3.1.4 + AHUNTSIC

Creative Commons License

Visiteurs connectés : 1