Version complète: sur le forum Webmaster Hub : Que pensez vous de mon site ?
Webmaster Hub > Accueil > Le salon de Webmaster Hub
cooloweb
Salut à tous !

Je viens de terminer mon site et je voudrai des avis et des critiques. Soyez indulgeant c'es mon permier site wink.gif

http://www.cooloweb.net
Bug
salut

honettement ?

je serai personellement vachement fier si mon premier site avait été aussi bien fait, mais relativisons, je n'avais pas les moyens de me payer dreamweaver à cette époque (en 1997 j'utilisai notepad)
  • j'ai un doute sur la légalité des vidéos que tu proposes en téléchargement
  • quand tu vas vouloir modifier ton site pour utiliser des CSS, tu vas en baver avec toutes tes tables (à peu près 95 tableaux imbriqués sur la page d'accueil et 90 sur la page des vidéos)
  • ton graphisme de menus est sympa même si on a un peu l'impression que tu as mélangé plusieurs thèmes, celui de la partie centrale, j'aime moins, mais comme on dit, les gouts et les couleurs ...
à part ça, c'est un site sympa

ah, j'oubliai: si tu veux, tu peux passer dans le <head> la partie google adsense de:

<script type="text/javascript"><!--
google_ad_client = ...

à:

...color_text = "000000";
//--></script>

ça sera toujours ça wink.gif
Sans Esprit
Il met du temps à charger au début mais j'aime bien
par contre ton code est immense le poid de ta page ne doit pas etre negligeable !!
il est vrais que pour y mettre du Css tu va avoir du mal tongue.gif et je sais ce que je dis j'ai fait la meme erreur au debut
cooloweb
Merci de vos réponses
- pour les vidéos, je ne sais pas si elles sont légales, je les ai trouvée sur Kazaa.
- je sais que j'ai beaucoup de tableaux, le CSS n'est pas mon point fort mais j'aimerai bien l'utiliser. A votre avis, combien de temps je mettrai pour tout mettre en CSS ? (aproximativement)
- pour google ads, je te remercie mais je ne suis pas si débutant que ça ! wink.gif

Si vous avez d'autres remarques ou suggestions, n'hésitez pas.
ElMoustiko
Pour une version xhtml/css, si tu n'as jamais manipulé, tu risques d'avoir un peu de mal au debut (oui c'est jamais facile d'apprendre quelque chose de nouveau, parceque oui ca n'as rien a voir avec la mise en page par tableau) Je dirais qu'au bout de 2sem tu devrais reussier a faire quelque chose de bien, peut etre moins si tu demandes de l'aide a des gens qui connaissent, enfin je te dis ca a vue de nez, ca depend aussi des gens !

@++
cooloweb
Oui c'est mon premier site merci. Tu peux me dire où est-ce que tu vois un arbre de noel ?? wacko.gif
Pourquoi tu dis façon kit graphique ?
Je sais pour le poid des imags mais je sais pas comment les réduire...
cartouche
Pour les videos si tu les a chopé sur kazaa, tu n'a pas payer les droits de diffusion, donc en gros t'as pas le droit de les mettre sur ton site. Maintenant, t'es loin d'etre le seul a la faire, je dis pas que c'est bien, mais bon ...

Sinon moi j'aime bien le design smile.gif Peut etre un peu lourd a charger effectivement pour ceux qui sont en 56K, essaye de reduire le poids des images en cherchant sur des tutos par exemple.
Sans Esprit
Sur mon site tu trouveras les debut du CSS alors bonne lecture et si tu t'investit ca peut etre tres rapide à apprendre et mettre en place.
Denis
Évidemment, pour s'initier aux CSS en français, il y a deux adresses très intéressantes :

http://openweb.eu.org/css/
http://www.alsacreations.com/articles/
cooloweb
Merci je vais regarder tout ça wink.gif

a++
Vincent
Bonjour

pour un premier site, il n'est pas mal du tout ! si tout le monde faisait aussi bien du premier coup, il n'y aurait que des sites d'expert aujourd'hui sur le net tongue.gif

A premiere vue, tu as beaucoup d'images et ta page est extrement lourde.
Pour te rendre compte, voici le ** Web Page Speed Report : cooloweb**

Nous telechargeons quand meme pas loin de 1 Mo de donnée avec + de 60 images ! cela fait environ 3 minute pour un modem 56k.

Je pense que tu ne devrais pas faire 1 image par bouton mais 1 image pour l'ensemble des boutons et ecrire le texte en html au dessus un peu comme sur le tutoriel rollover d'el moustiko
ElMoustiko
Et bien merci de faire un peu de pub a mes tutoriels, j'espere qu'il pourront aider, ils sont la pour ca
Je met a jour assez souvent en ce moment mes "conseils" pour bien debuter la creation de pages web en xhtml et css, accessible avec le lien que donne Vincent dans le menu de droite
Ce ne sont que des conseils bien sur ! mais je pense qu'il sont assez utiles...

ps : Pour les fautes d'orhtographe, desolé, mais il doit y en avoir, je n'ai pas tout relu, je le ferais des que j'en aurais le temps et en utilisant acces-pour-tous... blush.gif
cooloweb
Je ne me rendais pas compte que les images pesaient ples de 800ko :o
je vais essayer le tutoriel d'el moustiko mais ça ne servira que pour les boutons du haut et ça n'enlévera que 200ko environ

Elles doivent peser combien les images au maximum ?
Loupilo
CITATION(cooloweb @ dimanche 11 juillet 2004, 17:04)
Elles doivent peser combien les images au maximum ?

Salut,

il n'y a pas de "maximum". Mais il y a des limites qu'il ne vaut mieux pas dépasser...

Sur le Hub, pour le logo : ~7ko.
Pour le slogan : ~11ko
Pour le fond du header: ~2ko.
Environ 20ko en tout pour le header.
Pour les petites icônes en haut : ~1ko.
Pour les icônes à côté des forums : ~1ko en moyenne.

Tu vois, il y a relativement peu de poids, les images sont compressées.

Mais sur ta page tu utilises énormement d'images...
Même en les compressant, tu ne pourras pas descendre sous les 5/600ko.

Essaie de réduire un peu leur nombre. Et après, spécifie les images de décoration dans une feuille de style.
J'ai testé ton site en désactivant les images. Le contenu est toujours exploitable !
Bien sur, il manque le header. Celui la, tu dois le laisser, mais compresse-le un peu.

Tu devrais vraiment séparer présentation et contenu, le gain sera énorme, du point de vue du visiteur, mais aussi de celui des moteurs de recherche !

Et demande toi si toutes ces images sont indispensables ?
Si être plus "sobre" ne serait pas plus mal ?

Bonnes réflexions wink.gif
Loupilo
Vincent
CITATION(cooloweb @ dimanche 11 juillet 2004, 17:04)
Je ne me rendais pas compte que les images pesaient ples de 800ko :o
je vais essayer le tutoriel d'el moustiko mais ça ne servira que pour les boutons du haut et ça n'enlévera que 200ko environ

Elles doivent peser combien les images au maximum ?

il y a les boutons du haut + les boutons de droite et de gauche comme :
- moteur interne
- zone membre
- sites a visiter
etc...
bref, tous ceux qui commencent par -http://www.cooloweb.net/Images/blah212
tu en as 6 qui font chacun 20ko, donc fusionner les 6 en 1 ca te fera gagner au minimum 100 k.

Elmoustiko : un tutoriel aussi bien que ca, il ne peut que aider wink.gif
Vincent
j'ai regardé tes images :
Aucune des images n'est compressée !
je viens de faire un test avec la plus grosse, le haut de ta page et en compressant à 25%, pour moi elle garde une qualité plus que correct, elle descend de 289k à 20k !
je l'ai mise la :
http://mangeur.de.cigogne.z.free.fr/images...t12_allegee.jpg
cooloweb
Merci Vince ! graçe à ton image et plusieurs modif que j'ai faites mes images ne font plus que 600ko
comment fait on pour d'écompresser des images ?
ElMoustiko
Par exemple pour les images de fond et ce genre de chose, une couleur unie est souvent aussi efficace qu'une image legerement plus complexe, donc les css paraissent etre une bonne alternatives. Je remarque aussi souvent que les propriétés sur les background comme les repeat-y et repeat-x ne sont pas toujours utilisées, essai de voir si tu n'aurais pas l'occasion de le faire, sinon tes bords de menus ne sont vraiment pas indispensble selon moi, les supprimer t'economiserai aussi des images, les remplacer par des bordures plus legeres en css suffirait largement je pense... en fait dans l'ensemble ton site est assez chargé graphiquement, peut etre trop, c'est une erreur de jeunesse quasi inevitable je crois ! (regarde mon 1er site => les puriste s'abstenir de regarder la source, j'ai honte ! http://moustikeuh.free.fr )
Sinon je vais remettre en cause un point de ton design, le feu de bois en haut de l'image... c'est une image animé, donc tu gagne(ou perd plutot) encore en poids d'image, une image plus detaillée et plus jolie mais fixe serait tout aussi efficace voir plus et moins lourde (ce genre d'effet de gifs animé est aussi une erreur (selon moi) de debutant ! tjrs mon 1er en guise d'exemple! )

A titre d'indication, mon site actuel : www.elmoustikoblog.net tout contenu confondu (sauf tous les elements textuels du blog dans la base de donnée) fait 226ko images+xhtml+css avec les images des tutos aussi
Bien sur j'ai deja realisé quelques sites, j'en suis a 7/8 mois de webmastering derriere moi ! donc qd tu en sera au meme point tu risques d'en arriver au meme resultat sinon mieux !

@++ et bon courage,n'oubli pas que pour un premier site c'est tres bien !
Denis
Selon moi, il n'y a pas de recettes magiques pour arriver à un bon taux d'images ou de poids d'images, si ce n'est de penser en terme de traduction vers un temps de téléchargement concret. En ce sens, le lien proposé vers websiteoptimization est ton meilleur ami. Analysons rapidement ce qui sort de ce rapport :

58 requêtes HTTP pour un total de 691ko. Énorme : ... 86ko de HTML, 599ko réparties en 54 images, 5 ko de javascript... et pas une once de CSS. En tout, 138 secondes pour tout télécharger. En prenant en considération qu'en plus du poids de tes images, chacune d'entres elles demandent 0.2 secondes supplémentaires pour traverser la requête http, c'est plus de 10 secondes que tu perds, simplement parce que les images existent. Et leur poids comme tel n'est pas encore compté. Conclusion, réduis au maximum le recours aux images ou au moins compresse-les le plus possible pour limiter les dégats. En passant beaucoup de ton code vers une formule CSS, tu aurais également tôt fait d'améliorer la performance de ton site. smile.gif

Sinon, il n'y a que deux conseils que je peux te donner pour l'instant qui risquent de t'être réellement utiles (les autres viendront avec le temps et l'expérience, pour l'instant, je crois qu'ils te nuiraient plus qu'autre chose) :

1 - Garde en tête que le poids de ta page est contitué de tout ce qui la compose. Donc, plus tu mets d'images, plus ce sera lourd. Si un utilisateur avec une connexion normale (56k) télécharge 4 à 5 kilo-octets d'information à la secondes et que l'on peut se douter que passé une dizaine de secondes d'attente son stock de patience devient back-order, ça veut dire que tu disposes d'environ 40 à 50 kilo-octets pour faire tes pages. Évidemment, c'est un peu extrème, mais ça te permet de te mettre un objectif comparativement à ton 691 kilo-octet actuel. Dans les faits, c'est tout à fait réalisable, mais plus ton site est lourd graphiquement, plus tes chances s'envolent en fumée. Tu pourrais commencer par te donner une objectif réaliste, comme 300 ko pour ta page. Pour y arriver, suffirait en partie de compresser tes images adéquatement. Ce qui nous amène au conseil numéro 2. wink.gif

2 - Il te faut une solution simple pour maximiser ton gain de performeance graphique. À ce titre, un de nos copains "Hubien" (Hadrien) a mis en place un outil merveilleux, et j'ai nommé "PngOptimizer". Malgré le nom, ce petit outil optimisera également les gifs et les jps que tu lui passeras. En un éclair, ta page redescendra à un niveau presque convenable. http://www.psydk.org/PngOptimizer.php

Quand ce sera fait, nous pourrons passer au prochain point, l'optimisation du code. Mais ça, c'est une autre paire de manches ! wink.gif
cooloweb
Salut Denis et merci bien pour tes précieux conseils !
j'ai installé PngOptimizer mais le problème c'est que ça nr compresse les Gifs et sur mon site y en a quasiment pas
N'existerait-il pas un programme permettant de compresser des jpg ???
Vincent
essaye Xnview, il se peut qu'il fasse ton affaire.
cooloweb
Pour ce que tu m'as dis ElMoustiko, tu parlais du backround de la page ou des menus et c'est quoi repeat-y et repeat-x ?

Moi non plus je n'aime pas trop le petit feu et je comptais d'ailleurs faire un autre bouton avec le nom de mon site par ex
Denis
Ah et bien tiens donc tu as parfaitement raison, ça ne compresse pas les jpgs... Honte à moi, désolé, mon erreur. dry.gif

Cependant, ça permet de soulever un autre point dans cette histoire... pourquoi des jpgs justement, la plupart de tes images devraient être au format gif ou png, pas jpg. De manière générale, le jpg est utilisé pour des images de type photographies alors que les tiennes ne correspondent pas à ce besoin. Mon constat, commence par ressauver tes images sous le bon format (ex. gif 128 ou 256 couleurs) et ensuite, passe-leur un coup de pngoptimizer. smile.gif
cooloweb
Je suis surpris de ce que tu me dis ! je pensais que tout le monde utillisait le jpg

Bon je vais me mettre au boulot (j'en ai plus de 50 à faire) wacko.gif
Vincent
héhé wink.gif

ca me fait penser que tout le monde utilise internet explorer
et tout le monde fait des sites avec des tableaux tongue.gif
cooloweb
heu whistling.gif j'ai mis les images au format gif et leur poid ont diminué d'environ 10* + quelques octets avec Png...
je suis trop content j'comprends pas ce que j'ai fais j'étais persuadé que le format habituelle pour les sites était le jpg
quand j'aurai fini le poid total de mes images devrait donc passer de 600 à 60

je commence à comprendre pourquoi le taux de visite était de 72% ...
cooloweb
je commence à comprendre pourquoi le taux de visite à une page était de 72% ...
ElMoustiko
Pour les repeat-x et repeat-y, ca sert a repeter une image d'arriere plan (background) selon l'axe des abscices (X) ou des ordonnée (Y), c'est a dire horizontalement et verticalement

Par exemple je vois que pour ton menu tu as utilisé une image en degradé de bas en haut, si tu regarde bien (en faisant abstraction du texte) tu remarqueras que l'image est la meme de gauche a droite, c'est a dire que si tu repete l'image horizontalement (repeat-x) tu obtiendras le meme motif, il parait facile de prendre une image de 1px de large (oui oui 1px de large) contenant ton degradé, et de la repeter horizontalement, ainsi tu obtient le meme rendu avec une image netement plus petite
Tu n'as plus ensuite qu'a ajouter le texte sur le fond te le tour et joué

Si je reprend tout ca en css : (supposons que tes menus sont contenu dans un element ayant pour classe menu (class="menu")

.menu a {
display: block; /*pour permetre de dimensionner tes cellules*/
width: 100px;
line-height: 25px;
background: url(tonimagede1pixeldelarge.gif) repeat-x;
}

et en html :
<a href="tonlien">Le titre du lien</a>


Tu vois le principe ?

@++
cooloweb
Super ! biggrin.gif mes images ne pèsent plus que 116ko 207 en tout

croyez vous que je devrais encore baisser où est-ce que ça va comme ça ?
Denis
CITATION(cooloweb @ dimanche 11 juillet 2004, 16:05)
Je suis surpris de ce que tu me dis ! je pensais que tout le monde utillisait le jpg

Une petite recherche sur Google m'a permi de te trouver un article pas trop mal expliquant les différences entre les deux formats. smile.gif

http://actuel.fr.selfhtml.org/articles/graphisme/gif-jpeg/

Bravo, pour ton taux de compression, c'est déjà une belle réussite. Je ne crois pas que tu devrais tenter de les compresser davantage, je fais pleinement confiance à pngoptimizer pour avoir appliqué le taux correct sur tes images. Maintenant, si tu veux faire descendre ton poids de page plus bas encore, c'est sur la structure même qu'il faudra se pencher. smile.gif

Autrement dit, remplacer ou joindre certaines images pour diminuer le nombre de requêtes http et favoriser l'utilisation de CSS pour remplacer certaines autres. Mais le plus important à ce point, ce n,est plus tellement tes images, mais bien ton HTML. Si tu entreprend de virer tous tes tags FONT et autres éléments de présentation pour les remplacer par des équivalences CSS, au bas mot, tu diminuera encore de 50% le poids de ta page...

Mais là, on entre dans quelque chose d'un peu plus corsé. Te sens-tu d'attaque ? Si oui, il est temps de commencer à lire les articles que je t'ai proposé lors de mon premier message :

http://openweb.eu.org/css/
http://www.alsacreations.com/articles/

Bonne chance ! Reviens quand tu auras des questions. u_idea_bulb02.gif
Vincent
CITATION(cooloweb @ lundi 12 juillet 2004, 00:26)
Super ! biggrin.gif mes images ne pèsent plus que 116ko 207 en tout

croyez vous que je devrais encore baisser où est-ce que ça va comme ça ?

Je pense aussi que les images ont assez maigri comme ca, faut pas non plus les rendre rachitique wink.gif

Pour finir avec les images et avant d'entamer les CSS, n'oublies pas de rassembler l'ensemble de tes boutons en 1 :
- toutes les images commencant par -http://www.cooloweb.net/Images/blah212
- toutes les images commencant par -http://www.cooloweb.net/Images/Fond

gain espéré : 5*5.7ko + 7*2.1ko = 43.2ko
Xavier
Si je puis me permettre de revenir aux PNGs : si tu les a compressés à partir des jpg, comme le jpg entraine une perte de qualité, ça entraine une forte augmentation de la taille de ces images ^_^ Si tu as les originales non compressées, tu risque de pouvoir gagner encore de la place en les compressant directement...
LaurentDenis
Hum... Si tu souhaites aller plus loin, il faut regarder un peu le code des pages à présent. Comme documentation, je te recommande Ecrire une page Web, fait par les élèves de l'ENS, qui donne toutes les bases dans un langage... humain wink.gif

Il semble que tu aies beaucoup procédé par copié-collé de pages ou de bribes de codes que tu as pris en exemple. C'est une très bonne façon de commencer, mais il faudrait y mettre un petit peu d'ordre.

En l'état, ta page d'accueil (par exemple) comporte 3 sections <html>...</html>, 3 sections <body>...</body> et 4 sections <head>...</head>, ce qui est un peu trop wink.gif

En effet, abondance de biens ne nuit pas, mais... une page HTML ne peut comporter qu'une section <html>...</html> unique, et dans celle-ci :
- une section <head>...</head> unique pour des informations non directement affichées par le navigateur dans la fenêtre, mais nécessaires à la bonne restitution de la page,
- une section <body>...</body> unique pour ce qui sera affiché.

Donc typiquement :
CODE
<html>
    <head>
          ici pleins de lignes de code
    </head>
    <body>
          ici pleins de lignes de code
    </body>
</html>


Avant d'aborder des choses commes XHTML, CSS et autres, l'étape suivante me semble donc de déplacer un peu les bouts épars et d'éliminer les morceaux inutiles. Tes pages y gagneront à nouveau en poids, et tu pourras aborder le code avec quelque-chose de lisible (pour l'instant, tu aurais beaucoup de mal à t'y retrouver).

Pour t'aider, voici à quoi devrait ressembler le résultat dans un premie temps:

CODE
<html>
    <head>
         -ici un seul <title>CooloWeb.net : Le site g&eacute;n&eacute;raliste de l'internaute et du webmaster class&eacute; en 8 th&egrave;mes</title>
         -ici plein de <meta...
         -ici un seul <style>...</style>
         -ici plein de <script>...</script>
    </head>
    <body background="...
         -ici plein de lignes de code
    </body>
</html>
Denis
CITATION(LaurentDenis @ lundi 12 juillet 2004, 06:42)
Hum... Si tu souhaites aller plus loin, il faut regarder un peu le code des pages à présent. Comme documentation, je te recommande Ecrire une page Web, fait par les élèves de l'ENS, qui donne toutes les bases dans un langage... humain wink.gif

Ouais, merci pour cette ressource Laurent, je ne la connaissais pas. Approche très intéressante pour présenter HTML.
PwetPwet
Denis - Assainisseur Web


lol, c'est tellement vrai que ...

... je sais plus quoi dire shutup.gif
Denis
CITATION(PwetPwet @ lundi 12 juillet 2004, 16:00)
lol, c'est tellement vrai que ... je sais plus quoi dire  shutup.gif

Veux-tu que je te propose une phrase ou deux ? wink.gif
LaurentDenis
CITATION(Denis @ lundi 12 juillet 2004, 21:31)
Ouais, merci pour cette ressource Laurent, je ne la connaissais pas. Approche très intéressante pour présenter HTML.

Le mérite revient en fait à Cédric Malherbe qui l'a signalé en juin dernier sur la liste de l'AFUL.
Denis
Qu'il en soit remercié alors. C'est une excellente mise en contexte. smile.gif
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.