Geckozone

Bonjour,

Je viens de me rendre compte que mes pages pèsent autour de 150ko au total, entre le html, les pages de script, les styles et les images. Alors bien sûr ça tombe très vite à quelques ko seulement quand le visiteur a tout chargé en cache, mais je me demandais si ce n'était pas un peu excessif pour la page d'accueil...

Qu'en pensez vous ?

Andong

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

Bonjour,
avec l'adresse de ta page, ce serait mieux

Hum, c'est pas encore en production...
http://www.eclatdereve.com
login: geckozone
mdp: geckozone

Vite vite !

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

Andong a écrit :Hum, c'est pas encore en production...
http://www.eclatdereve.com
login: geckozone
mdp: geckozone

Vite vite !

Le htaccess ne marche pas chez moi

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

mon Firefox que j'aime et que j'adore a écrit :Authorization Required
This server could not verify that you are authorized to access the document requested. Either you supplied the wrong credentials (e.g., bad password), or your browser doesn't understand how to supply the credentials required.

Apache/1.3.37 Server at www.eclatdereve.com Port 80

Je te conseillerais d'utiliser l'onglet "Net" de Firebug pour voir dans quel ordre les différents fichiers sont chargés et ceux qui posent vraiment problème.

Après il y a différentes choses que tu peux faire pour optimiser la taille de ton code HTML et de tes feuilles de style (mais ça il faudrait qu'on puisse les voir). Et en ce qui concerne les images il existe également des outils comme http://psydk.org/PngOptimizer

Héhé la bonne blague je mettais le mauvais fichier htpasswd à jour...
Désolé.
Maintenant ça devrait marcher beaucoup mieux.

login:geckozone
mdp:geckozone

Il est clair que j'ai du boulot à faire pour optimiser ne serait-ce que ma feuille de styles principale qui fait 20ko...
Après j'ai aussi 18ko potentiellement à sauver en clônant des noeuds en javascript sur le machine du client, mais pour le reste... et surtout est-ce que ça vaut le coup ? savez-vous s'il y a en gros une limite implicite à ne pas dépasser ? pour les gens en haut débit je pense qu'ils s'en moquent éperduement de quelques 10aines de ko en plus à charger une fois dans leur navigation, mais pour les autres qui restent en bas débit ?

Pour répondre à Benoît : j'ai 27ko de script js externe qui se charge avant le reste, et puis j'ai surtout 70ko d'images sur ma page d'accueil, que je vais tenter d'optimiser mais vu l'esprit du site je ne peux rien virer...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

Effectivement toutes tes images sont en GIF, tu pourrais gagner un petit quelque chose en les convertissant en PNG. Pour les plus grandes, il vaudrait mieux partir de l'original (si tu l'as) que du GIF pour éviter le crénelage qu'on voit pour l'instant dans les courbes.

Tu pourrais aussi gagner beaucoup en te débarrassant des classes et des ID sur les éléments qui ne sont pas sélectionnés par tes feuilles CSS. Celles-ci peuvent également être factorisées en regroupant certaines propriétés communes à plusieurs éléments avec un sélecteur plus général.

Tu vois cela comme un problème du point de vue des visiteurs, mais n'oublie pas qu'il y a aussi un coût à la bande passante de ton côté. Si tu dépasses une certaine limite, ton hébergeur va peut-être te faire passer dans une formule "supérieure".

Pour les photos, tu pourrais également essayer le format jpeg qui est probablement plus approprié à des images complexes.

Au niveau des CSS, tu as énormément de <div id="">. Plutôt que de répéter le style pour chaque id, essaye d'utiliser les balises sémantiques du html (p, hX avec X= 1-6, etc.) en combinaisons avec l'attribut "class".

Par exemple, à droite, tu as menu_droite_cadre_0, menu_droite_cadre_2 etc. Ce sont les mêmes styles, mais ils sont répétés plusieurs fois, l'utilisation d'une classe est plus appropriée.

Tu peux également éviter de positionner chaque élément en position absolue. Une utilisation judicieuse des flottants peut faire économiser pas mal de déclaration de type

Code : Tout sélectionner

#menu_droite_cadre_1{
		top:2.2em;
		height:5.813em;
		}

De plus, ça permettra à ta mise en page de se dégrader plus agréablement si l'on agrandis le texte (essaye en faisant Ctrl + pour voir

)

Bon à part ça je ne peux m'empêcher de conclure en notant que la page semble tout à fait utilisable sans javascript et sans CSS, que les textes alternatifs des images sont manifestement bien renseignés : on aimerait le voir plus souvent

Merci pour vos commentaires

Effectivement le jpg serait mieux pour les images complexes comme pour l'image principal de l'accueil par exemple, et mes gif sont un peu moches parfois mais pour l'instant tout ça c'est un peu bidon (j'ai piqué l'image principale sur le site d'agatha

) Ceci dit je note pour la version définitive.

Là où j'ai un pb c'est que quand je convertis mes gif en png généralement ils sont légèrement plus gros. Il y a un truc ? Je vais jeter un coup d'oeil à png optimizer mais pour l'instant je bug...

Et du côté des ids et class inutiles, c'est vrai qu'il doit y en avoir un paquet mais il y en a aussi pas mal qui servent à mes scripts donc prudence... En tout cas quand j'ai commencé le site je ne savais même pas qu'on pouvait factoriser les css alors effectivement je dois pouvoir gagner là-dessus.

Et merci à calimo pour les balises sémantiques dont je n'avais jamais entendu parler

Bon, autre question, autre post. A tout de suite.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

Andong a écrit :Là où j'ai un pb c'est que quand je convertis mes gif en png généralement ils sont légèrement plus gros. Il y a un truc ? Je vais jeter un coup d'oeil à png optimizer mais pour l'instant je bug...

PNG Optimizer, Optipng, PNGOut... normalement tous produisent des images sensiblement plus petites que les gif (sauf très rares exceptions, je ne me souviens pas d'en avoir vues...)
Quel outil utilises-tu ? N'oublie pas de mettre le taux de compression PNG à 9, c'est de toutes façons une compression sans perte !

Andong a écrit :Et du côté des ids et class inutiles, c'est vrai qu'il doit y en avoir un paquet mais il y en a aussi pas mal qui servent à mes scripts donc prudence... En tout cas quand j'ai commencé le site je ne savais même pas qu'on pouvait factoriser les css alors effectivement je dois pouvoir gagner là-dessus.

Il y a aussi l'héritage... (#menugauche ul par exemple, qui va sélectionner tous les ul se trouvant dans #menugauche...)
Tout ceci est valable aussi en javascript : ça vaut la peine de trouver comment généraliser pour réduire le code, donc la complexité, la facilité de mise à jour, etc.

Andong a écrit :Et merci à calimo pour les balises sémantiques dont je n'avais jamais entendu parler

Dans ce cas, un peu de théorie HTML ne ferait certainement pas de mal

http://www.w3.org/TR/html4/
http://www.tuteurs.ens.fr/internet/web/html/bases.html (oublie ce qui est xhtml, mais ils décrivent les balises les plus importantes).

Le HTML est un langage riche, ce serait dommage de ne pas l'utiliser

Bon j'ai regardé PNG optimizer mais j'avais déjà bien bossé mes gifs et à part pour quelques images ça ne me fait pas gagner grand chose.

Par contre j'ai découvert la compression gzip et ça m'intéresse. Reste à savoir si mon hébergeur accepte la compression à la volée, ce qui n'est pas gagné... Mais déjà si je compresse mes scripts et mes css une fois pour toute (mots qui sont bien relatifs aujourd'hui...) ça devrait être profitable.

En tout cas merci pour vos conseils, il reste plus qu'à mettre ça en oeuvre.

Je ne peux pas éditer le titre du topic en visiteur ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

Andong a écrit :Je ne peux pas éditer le titre du topic en visiteur ?

Non, sinon tout les visiteurs pourraient modifier le titre de ton sujet.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

Geckozone

Poids des pages

Poids des pages