Affinity-web`Blog

L'actu AW au quotidien

 

20

Nove 07

Un site web rapide? C'est pas sorcier!

Posté à 22:31 par Fr 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 1980 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 :

92 articles dans la base de données

Archives ...

 

Idem pour le coup de coeur :) L'idéal serait de virer le CD et les tutos ...

Posté par eMeRiKa le 05/10/08 à 12:24 sur l'article Advanced Web : avis sur le magazine

Je suis totalement avec toi ! Si vous faîtes vous-même votre veille per ...

Posté par VuThé le 05/10/08 à 12:10 sur l'article Advanced Web : avis sur le magazine

Quelle réussite ce site ! Beaucoup de retours positifs. Merci pour votre e ...

Posté par Laurent le 02/10/08 à 09:24 sur l'article Portfolio : Redesign Live-session.fr

con mis deseos màs sinceros de felcidad paz y hienestar jamaj

Posté par jamaj le 01/10/08 à 20:02 sur l'article Miro, le Firefox de la vidéo

je l'ai trouve exelent comme design vraiment parfait

Posté par tutoriaux photoshop le 30/09/08 à 04:05 sur l'article Concours : Very Nice Blog #1

Dans ce cas, il faut concevoir deux sites : l'un classique et l'autre dédi&e ...

Posté par eMeRiKa le 29/09/08 à 22:44 sur l'article Webdesign : le 1000 s'accroche

Salut ! ... C'est sexy sa ... Pouvez-vous m'envoyer des photos sexy comme sa SVP .. ...

Posté par Etienne le 29/09/08 à 21:44 sur l'article Britney Spears, la puissance de photoshop

Oui, mais alors quid des téléphones portables et autres iphone ou bla ...

Posté par jigece le 29/09/08 à 12:53 sur l'article Webdesign : le 1000 s'accroche

404 commentaires dans la base de données

S'abonner au flux Rss

 

I'm a PC (par Steve Ballmer PDG Microsoft)

Il faut faut Flash pour voir l'animation

Sticky Note Experiment - Eepybird

Il faut faut Flash pour voir l'animation

Nouvelle pub Lego

Il faut faut Flash pour voir l'animation

Nils Inne painting and skateboarding

Il faut faut Flash pour voir l'animation

Les 10 phrases que les femmes ne diront jamais

Il faut faut Flash pour voir l'animation

Surprise (via O'SteEL)

Il faut faut Flash pour voir l'animation
 
LinkedIn
deviantart
Twitter
 
 
Gaming Webdesign

Voir toutes mes créations

 
  • @OSteEL c'est organisé par ma prof !
  • Va visiter les jardins de l'innovation d'orange Labs Grenoble cette après midi !
  • rha tjs aussi tordant ce site.
  • "Aujourd'hui, ma copine a acheté deux billets à 70 ? chacun pour un concert de Bob Marley qui devrait avoir lieu dans 15 jours. VDM "
  • Il neige sur Mars tinyurl.com/3sl83q... ! Youpi quand on aura assez salopé la Terre, on pourra pourrir Mars.
 

 

 

Chargement en cours!