Affinity-web`Blog

L'actu AW au quotidien

 

20

Nov 07

Un site web rapide? C'est pas sorcier!

Posté à 22:31 par eMeRiKa - Catégorie Catégorie : Internet

 

La semaine passée, avait lieu à Paris, Paris Web 2007, 2 journées de conférences et une d'ateliers. Je m'y suis rendu le samedi pour les ateliers, voici le compte rendu de l'atelier Un site Web rapide c'est pas sorcier présenté par Anthony Ricaud et Mathieu Pillard travaillant chez Téléfun, société éditrice de Skyrock.com.

Bien que les connexions Internet soit de plus en plus rapides, il ne faut pas oublier les personnes surfant encore sur de mauvaises connexions. Il est également important de ne pas faire fuir ses visiteurs avec un temps de chargement trop long de son site (ce que pas mal de sites en flash font..). L'atelier séparé en deux grandes parties, l'optimisation côté serveur et côté client, avait pour but de donner des solutions pour améliorer la rapidité d'un site web.

Optimisation côté serveur :

  1. Réduire les requêtes HTTP

      Moins de fichiers :
    • Combiner les fichiers CSS, JS => plutôt que de multiplier les fichiers CSS (ex : design.css, font.css, form.css, couleurs.css) il vaut mieux les regrouper en un seul fichier. Chaque fichier demande une connexion au serveur web pour que le client télécharge le fichier, plus il y a de fichiers, plus le temps de rappatriement des sources sera long.

    • Utiliser les images Maps et css Sprites => même principe que précédemment, en regroupant ses images on réduit le nombre de connexions. Bien que le fichier image sera plus lourd, une seule connexion permettra de récupérer les images.

    • Eviter les redirections de type méta et penser à mettre dans ses urls la dernère barre oblique (ex : www.toto.com/test/ et non www.toto.com/test). Lorsque l'on ne la met pas, c'est le serveur apache qui redirige automatiquement mais il s'agit d'une perte de temps qui peut être évitée.

  2. Réduire les requêtes DNS

    • Eviter d'utiliser un grand nombre de widget externes qui doivent aller chercher leurs informations sur d'autres serveurs et donc faire des requètes DNS supplémentaires.

    • Faire attention à la configuration des CNAME de ses redirections.

  3. Réduire vos envois

    • Il est possible de réduire la taille des fichiers envoyés au client. Le serveur s'occupe de zipper ce qui lui prend plus de temps, mais l'envoi est plus rapide. Des techniques comme Gzip ou Deflate permettent environ 70% de gain. Attention, cette méthode est à utiliser sur les fichiers HTML, CSS, JS mais surtout pas sur les images où elle ne présente pas d'intérêt.

  4. Mettre en cache

    • Mettre en cache des fichiers permet d'éviter le re-téléchargement de ces fichiers par le client. Cela se fait en définissant les fichiers et leur durée de validité, ce qui permettra au navigateur web d'utiliser ceux qu'il a déja en mémoire qui sont toujours valides et de re-télécharger les autres.

Optimisation côté client :

  1. Côté xHTML

    • Réduire la "soupe" de balise, ce qui permettra au navigateur de parser et d'afficher plus rapidement la source.

    • Ne pas utiliser de tableaux imbriqués, et surtout pas de tableaux pour la mise en page (les CSS sont fais pour çà).

    • Penser à l'ordre des éléments, les navigateurs actuels affichent la page avant le chargement définitif des CSS, le visiteur pourra donc commencer à lire votre site.

    • Réduire au maximum le poids des images et flashs.

  2. Côté CSS

    • Factorisez les règles, c'est à dire regrouper les éléments aux mêmes propriétés.

    • Placer les CSS dans des fichiers externes sans multiplier leur nombre et en les compressant.

    • Mettre la balise link, de la feuille de style, dans le head de la page HTML, le plus haut possible (après doctype, title) afin que le navigateur la lise le plus rapidement possible.

  3. Côté Scripts (JavaScript)

    • Les balises bloquent le chargement du site, elles doivent donc être évitées au maximum et placées à la fin de la page HTML pour être lues en dernières.

    • Placer les scripts dans des fichiers externes sans multiplier leur nombre et en les compressant.

    • L'attribut onLoad s'éffectue uniquement quand tout le site est chargé (images comprises), il ralentit le chargement de la page et est donc à éviter. On peut lui préférer DOMContenLoaded présent nativement sous Firefox, Opéra et qu'on retrouve dans les frameworks JS pour l'utiliser sous Internet Explorer

    • Penser à bien définir var nomvariable dans les fonctions JS plutôt que nomvariable pour que le navigateur ne recherche pas une variable globale.

    • Evitez d'accéder plusieurs fois à une propriété à la suite, mieux vaut le faire en une fois (ex : faire deux innerHTML de suite sur la même balise, on peut le regrouper en une fois).

    • Bannir with et éviter eval.

    • Ne pas abuser de XmlHttpRequest, bien que les requètes se fassent asynchronent, elles demandent une connexion HTTP au serveur.

    • Faire attention à l'utilisation des effets "web 2.0" (fade..) qui sur des machines anciennes provoquent des ralentissements.

    • Attention aux performances des frameworks JS, notamment sous Internet Explorer, mieux vaut les éviter si on en utilise que quelques fonctions.

Cet atelier a été très instructif et me servira dans mes prochains projets afin d'améliorer la vitesse d'affichage de mes sites. J'espère qu'il vous apprendra également certaines techniques. Je viens d'ailleurs de me rendre compte que les slides de la présentation sont disponibles sur le blog de la devteam de skyrock.

Les derniers articles de la catégorie : Internet

Lu 3890 fois

Article Précédent

 

Commentaires de cet article

 

 

La technique du CSS Sprites est intéressante (background-position), il y a un bon tutoriel chez Pompage.net sur cette méthode .

#1 Posté par VuThé le 21/11/07 à 14:22, son 0er commentaire

Super intéressant cet article, je vais le relire à tête reposée...

Merci

A+

#2 Posté par JFMichaud le 10/12/07 à 19:10, son 1er commentaire

 

* Pseudo :

* Email : (Non affiché)

Site web :

* Message :

135 articles dans la base de données

Archives ...

 

bonjour moi je connais une adresse mail contact francophone oiu on peut commander s ...

Posté par seb le 11/08/10 à 22:24 sur l'article Acheter ses cigarettes sur internet

bonjour ou on peut acheté des clop en ligne

Posté par nana le 08/08/10 à 16:40 sur l'article Acheter ses cigarettes sur internet

Pour la livraison je compte 2 semaines J'y suis depuis quelques temps je oeux vous ...

Posté par jean le 07/06/10 à 08:39 sur l'article Acheter ses cigarettes sur internet

Seite ist im Aufbau

Posté par extrem le 28/05/10 à 13:11 sur l'article Digipresse en ligne

Cigarettes bon marché en ligne Cigarettes bon marché - Les cigaret ...

Posté par 561zeevwi le 03/05/10 à 12:37 sur l'article Acheter ses cigarettes sur internet

Bonjour tout le monde, Merci eMeRiKa pour ce tuto très clair, mais j'aimerai ...

Posté par spykoN le 30/04/10 à 10:45 sur l'article Tutorial : Ajax avec Prototype

Je ne trouve pas de référence à FF comme le principal concurre ...

Posté par eMeRiKa le 18/04/10 à 18:27 sur l'article Google Chrome

Je ne suis pas d'accord sur le fait que Firefox soit le principal concurrent de Chr ...

Posté par Tof le 17/04/10 à 00:51 sur l'article Google Chrome

664 commentaires dans la base de données

S'abonner au flux Rss

 

Singstar : une love story qui sonne faux

Il faut faut Flash pour voir l'animation

Clip the parachute ending - Birdy Nam Nam


BIRDY NAM NAM - THE PARACHUTE ENDING Clip Officiel
par Has_Been

Google Street View Slow motion

Il faut faut Flash pour voir l'animation

Cat Shower 2

Il faut faut Flash pour voir l'animation

Wii Kebab

Il faut faut Flash pour voir l'animation

Le Jour du Permis - Facebook

Il faut faut Flash pour voir l'animation
 
LinkedIn
deviantart
Twitter
 
  • RT @blozie: Facebook adopte le modèle d?influence de Twitter tinyurl.com/27qf47p...
  • @bJonathan merci pour le rt:)
  • @startupz ça c'est du FF, merci
  • sympa la campagne du SELL sur les jeux violents http://bit.ly/aW4HS4
  • #FF @clmntlxndr @XavierRapido @VincentGarreau @startupz
 

 

 

Chargement en cours!