Bonne pratiques pour optimiser son site web

Bonjour à tous,

Je voudrai savoir savoir quelles sont les "bonnes pratiques" pour optimiser son code (HTML, CSS, Javascript, ...) pour qu'il soit plus rapide à charger, plus réactif ...

J'ai eu comme élément de réponse dans mes recherches, qu'il fallait compresser son code javascript (enlever les commentaires, réduire la taille des noms de variables, fusionner plusieurs fichiers ensemble ...). Quel est le meilleurs outils pour faire cela ?

merci d'avance

Salut,

Un ensemble de choses qu'on peut faire http://developer.yahoo.com/performance/rules.html

Bonjour,

cocoLeNain a écrit :
compresser son code javascript (enlever les commentaires, réduire la taille des noms de variables, fusionner plusieurs fichiers ensemble ...).

C'est un outil qui fait ça, le développeur garde précieusement en local son code originel bien commenté pour le modifier (je précise au cas où, même si je pense que c'est ce que tu voulais dire ), le résultat étant mis en production.

Pour les CSS, il existe des outils en ligne, la plupart ayant pour base CSS Tidy.

Pour compléter les conseils de Yahoo!, la présentation des développeurs de Téléfun à Paris Web 2007 sur ce sujet :

http://www.slideshare.net/haricot/un-site-web-rapide/

En effet Felipe, c'est ce que je voulais dire. J'ai entendu parler de JsMin, mais je n'ai pas encore tester.

De manière générale, un bon choix du format image selon l'environnement et le contexte présente un gain bien plus significatif que d'optimiser du code.

original.defeat a écrit :
De manière générale, un bon choix du format image selon l'environnement et le contexte présente un gain bien plus significatif que d'optimiser du code.

Pour un petit site, sans doute.
Pour un gros site, l'optimisation du code serveur est important. Si avec un code non optimisé il faut quatre serveurs pour faire tourner un site, tandis qu'avec un code optimisé il n'en faut plus que deux... il y a un certain intérêt à optimiser.
Non?

L'optimisation du code n'est pas inutile, loin de là, mais le média image peut consommer une ressource très importante. Exemple vu récemment. A vue d'oeil, un seul visiteur doit probablement engendrer 800 Ko de charge pour le serveur. En optimisant ces médias, il est possible de réduire la consommation de 80%.

Hum...

Il ne s'agit pas, quelque-soit le site, de se précipiter sur des techniques d'optimisation de ceci ou de cela, aussi tentantes soient-elles, ou juste parce que des outils existent et sont proposés ici ou là.

Cela vaut aussi bien pour les contenus graphiques que pour le code : sans évaluation préalable, il n'y a pas d'optimisation "d'une manière générale".
Modifié par Laurent Denis (25 Nov 2007 - 11:32)

Il y'a des "optimisations" qui sont applicables de manière générale, qui sont en fait des bons réflexes à adopter, comme par exemple le choix du format qui va être utilisé selon le contexte d'utilisation. Utiliser le format PNG pour une photographie va provoquer un surpoids inévitable. Utiliser GIF va dégrader la qualité de restitution. C'est un fait qui s'applique dans de nombreux (tous) les cas d'utilisations. Je pense également aux images qui sont réduites par le navigateur, grâce aux attributs width et height, alors que la définition originale impose toujours son poids.

Pour les techniques d'optimisation, elles ne sont pas applicables partout, mais sur la plupart des sites, c'est le cas. Le poids excessif étant causé par le mauvais format (et parfois du mauvais type de format) qui est choisi, ou par l'encodeur qui n'utilise pas les "meilleures méthodes" disponibles. Utiliser un PNG rgb+alpha sur un site par exemple va emmener le webmestre à utiliser diverses bidouilles (scripts JavaScript, CSS etc.) afin qu'il soit correctement restitué sur IE6x. C'est souvent inutile : si le PNG est mal restitué, c'est qu'il est probablement mal conçu. Il existe d'autres solutions, propres à PNG, pour résoudre ce problème. Sans compter que si l'utilisateur désactive JavaScript, la bidouille ne fonctionne plus.

Recherchez le meilleur format selon le contexte d'utilisation permet d'obtenir tous les bénéfices attendus : le temps de chargement diminue pour le visiteur, la charge diminue pour le serveur, etc. etc. etc.

original.defeat a écrit :
Utiliser un PNG rgb+alpha sur un site par exemple va emmener le webmestre à utiliser diverses bidouilles (scripts JavaScript, CSS etc.) afin qu'il soit correctement restitué sur IE6x. C'est souvent inutile : si le PNG est mal restitué, c'est qu'il est probablement mal conçu.

C'est plus le navigateur qui est mal conçu en l'occurence puisque le PNG existait bien avant IE6 (IE5 sur mac supportait l'alpha chanelling)... de la mauvaise volonté de la part de Microsoft je pense....

original.defeat a écrit :
Il existe d'autres solutions, propres à PNG, pour résoudre ce problème.

La je suis curieux et preneur de ces solutions car a ma connaissance le PNG est le seul format supportant l'alpha chanelling et je ne vois pas comment on peut le rendre compatible IE6.

original.defeat a écrit :
Sans compter que si l'utilisateur désactive JavaScript, la bidouille ne fonctionne plus.

Un utilisateur qui desactive javascript sur IE6 le fait généralement en sachant qu'il va y perdre en terme de visualisation des pages... du moment que le contenu est lisible, ce type d'utilisateur ne s'attache pas au fond "gris-moche" que l'on retrouve généralement en fond des PNG sur IE6. Ou il télécharge FF

skywalk3r a écrit :
La je suis curieux et preneur de ces solutions

Je suppose qu'il s'agit de solutions pour une dégradation correcte. Notamment: enregistrer une couleur de fond par défaut (qui remplacera le gris moche sous IE6).

skywalk3r a écrit :
a ma connaissance le PNG est le seul format supportant l'alpha chanelling

Le seul format web (c'est-à-dire: raisonnablement léger et un peu implémenté par les navigateurs).

skywalk3r a écrit :
C'est plus le navigateur qui est mal conçu

IE6 supporte le canal alpha contrairement à ce qui est dit partout, et sait en interpréter certaines données. Ce qu'il ne supporte pas, c'est la translucidité - une partie du canal alpha ou les valeurs alpha autre que 0 ou 255 sur les pixels. J'ai écris cela ici. Visitez cet article avec IE6 et un autre navigateur, et comparez.

Florent V. a écrit :
Je suppose qu'il s'agit de solutions pour une dégradation correcte

skywalk3r a écrit :
La je suis curieux et preneur de ces solutions (...)

Il ne s'agit pas d'une dégradation. Plusieurs solutions existent (dont certaines qui peuvent emmener à une dégradation douce) et sont expliquées dans l'article ci-dessus.

Dans certains cas, l'attribut bKGD peut être rajouté à un PNG rgb+alpha (ce que les logiciels appellent "PNG32") pour rendre le PNG parfaitement restituable sous IE6. Dans ce cas, le PNG est un "vrai" PNG rgb+alpha, et est néanmoins parfaitement restitué par IE6.

Dans d'autre cas, un réencodage en PNG rgb (PNG24) -sans pertes- voire PNG paletted (PNG8) -avec pertes cette fois - avec l'arrière plan peut être envisagé.

original.defeat a écrit :

IE6 supporte le canal alpha contrairement à ce qui est dit partout, et sait en interpréter certaines données. Ce qu'il ne supporte pas, c'est la translucidité

Ca revient un peu a faire du GIF (outre le fait que l'on peut utiliser des games de couleurs beaucoup plus importante) ce qui laisse voir une pixellisation sur les bords arrondis, ce genre de choses... Bref, je trouve interressant justement le fait d'avoir cette translucidité dans le PNG, qui offre une approche beaucoup plus pratique a mon gout (en fait je l'utilise beaucoup et n'ai aucun complexe à utiliser la propriété "filter" sur IE6, bien que ca retarde la mise en place du design, de peu mais tout de meme
)

Edit : Et je continue malgré tout à penser que IE6 est mal conçu
Et la transparence 0 ou 1 pour moi c'est po de l'alpha chanelling (qui consiste a mélanger la couleur d'un pixel avec celui qui est censé se trouver en dessous)... Enfin je dis ca mais je suis pas du tout un expert en format d'images
Modifié par skywalk3r (26 Nov 2007 - 14:28)

skywalk3r a écrit :
Ca revient un peu a faire du GIF

Du tout. Vous lisez trop vite, jeune padawan

Si ce n'est que la translucidité qui vous intéresse, une bonne solution est de restituer l'effet souhaité avec un outil qui peut le faire, et de capturer cette restitution pour encoder dans un éventuel PNG rgb, voire PNG paletted. Dans ce cas, l'image obtenue n'a plus aucun attribut de transparence ou de translucidité, car elle ne possède ni canal alpha, ni valeurs alpha. Elle ne pose donc aucun problème à IE6.

Même si ça n'intéresse peut être pas grand monde, PNG mériterait peut être quelques articles sur alsa ; la FAQ contient des petites erreurs et imprécisions sur le sujet.

original.defeat a écrit :
Même si ça n'intéresse peut être pas grand monde, PNG mériterait peut être quelques articles sur alsa.

S'il y a moyen de faire un tutoriel axé pratique et conseils du type «Exploiter à fond les possibilités du format PNG pour vos sites web», pourquoi pas.

Florent V. a écrit :
axé pratique et conseils

Il y'a même beaucoup plus à dire... PNG n'est pas qu'un simple format ; c'est, au même titre que XHTML, une recommandation du W3C ... et ce n'est pas simplement pour son rapport qualité/poids exceptionnel.

original.defeat a écrit :
Il y'a même beaucoup plus à dire...

Oui, mais je ne suis pas sûr que le beaucoup plus en question soit si captivant que ça pour les lecteurs d'Alsa.
D'où l'idée d'axer un tutoriel, si tutoriel il y a, sur l'aspect très concret et pratique des choses.