3246 sujets

Critiques de vos sites: code et design

Site Web XHTML 1.0 Strict + CSS trop Lent

Bonjour,


je suis actuellement en Stage dans une boite d'ingénierie, et j'ai remis leur site Web aux normes XHTML 1.0 Strict, et dévellopé un peu de PHP...le probleme c'est qu'avec le CSS le site est méga lent...et avant de pouvoir visualiser le site correctement, ont voit tout le sqelette ou les images apparaisent les unes apres les autres, tout doucement....


Que faire pour éviter cela ?

Merci d'avance

Kévin
Salut,

Ca m'étonnerait que ce soit lent à cause des CSS !!! La réunion d'éléments de mise en forme répétitifs indiqués à un seul et même endroit, pèse forcément moins lourds que de la mise en forme au fil du code html.

A mon avis tu n'as pas compressé tes images suffisamment, ce qui provoque ce genre d'effets. Ou alors tu as trop d'images. Ou ton débit de connexion n'était pas bon au moment du test.

Aurais tu une page en ligne pour tester ?
Bonjour,

Tu as du te tromper de salon.

Quel est la taille de ta css ? (Quelques Ko en général).

C'est peut être, et surement ton code php qui ralentis tout ça, ou soit toutes les images.

Quel poids fait ton site ?

Ce ne sont pas les css qui ralentissent un site (du moins, jamais vu).

Une page type avec les images seraient sympa pour te donner une indication.

Edit [Burned ]
Modifié par Super_baloo8 (07 Jun 2007 - 09:51)
salut !

1) tu n'as pas vraiement posé ta question dans la bonne partie de forum ...
2) le CSS n'allourdi pas une page (on contraire meme) puisqu'il se met en cache une fois chargé. Ce sont tes images qui à mon avis ne sont pas optimisé

Vérifie donc le poids de tes images et si tu ne peux pas en retirer quelques unes en les remplacant par une couleur de fond

++

[EDIT] : Trop de réponse en meme temps ^^
Modifié par putch (07 Jun 2007 - 09:53)
www.tetratech.eu/menu.php

c'est la page principale d'entrée...essayer de naviguer un peu et dite moi...à mon avis il y à trop d'image mais je ne pourrai rien y faire vu que le site ne doit pas être modifié visuellement !

merci d'avance à tous
Re,

Ton site est lourd

	Documents (0 fichiers)	
	Images (36 fichiers)	289 Ko
	 http://www.tetratech.eu/images/acces_over.gif	 28 Ko
	 http://www.tetratech.eu/images/recrutement_over.gif	 27 Ko
	 http://www.tetratech.eu/images/imprimer_over.gif	 27 Ko
	 http://www.tetratech.eu/images/mail_over.gif	 27 Ko
	 http://www.tetratech.eu/images/liens_over.gif	 27 Ko
	 http://www.tetratech.eu/images/tetratech_banniere_2.gif	 27 Ko
	 http://www.tetratech.eu/menu.php	 11 Ko
	 http://www.tetratech.eu/images/index_17.gif	 10 Ko
	 http://www.tetratech.eu/images/menu_contact.gif	 10 Ko
	 http://www.tetratech.eu/images/menu_mission.gif	 9 Ko
	 http://www.tetratech.eu/images/metier.gif	 8 Ko
	 http://www.tetratech.eu/images/logo_contact.gif	 7 Ko
	 http://www.tetratech.eu/images/logo_mission.gif	 7 Ko
	 http://www.tetratech.eu/images/index_11.gif	 7 Ko
	 http://www.tetratech.eu/images/metier_droite.gif	 6 Ko
	 http://www.tetratech.eu/images/tetratech_banniere.gif	 5 Ko
	 http://www.tetratech.eu/images/grosse_pointe.gif	 5 Ko
	 http://www.tetratech.eu/images/bouton_english.gif	 5 Ko
	 http://www.tetratech.eu/images/logo_telephone.gif	 4 Ko
	 http://www.tetratech.eu/images/logo_cadena.gif	 3 Ko
	 http://www.tetratech.eu/images/index_10.gif	 3 Ko
	 http://www.tetratech.eu/images/logo_imprimante.gif	 3 Ko
	 http://www.tetratech.eu/images/logo_arobase.gif	 3 Ko
	 http://www.tetratech.eu/images/index_14.gif	 2 Ko
	 http://www.tetratech.eu/images/index_16.gif	 2 Ko
	 http://www.tetratech.eu/images/logo_recrutement.gif	 2 Ko
	 http://www.tetratech.eu/images/index_13.gif	 2 Ko
	 http://www.tetratech.eu/images/logo_lien.gif	 2 Ko
	 http://www.tetratech.eu/images/w3c_xhtml.png	 2 Ko
	 http://www.tetratech.eu/images/index_08.gif	 2 Ko
	 http://www.tetratech.eu/images/w3c_css.gif	 1 Ko
	 http://www.tetratech.eu/images/archive_bout.gif	 1 Ko
	 http://www.tetratech.eu/images/index_23.gif	 1 Ko
	 http://www.tetratech.eu/images/news_bout.gif	 1 Ko
	 http://www.tetratech.eu/images/favicon.ico	 282 octets
	 http://www.tetratech.eu/images/index_21.gif	 114 octets
	Objects (0 fichiers)	
	Scripts (1 fichier)	487 octets
	 http://www.tetratech.eu/defile.js	 487 octets
	Feuilles de styles (1 fichier)	9 Ko
	 http://www.tetratech.eu/menu.css	 9 Ko
	Total	298 Ko


Si en plus tu as une mauvaise connection c'est normal que ça parraisse lent.
comment pourrais je améliorer cela donc ? allegement des images ? car je pense que je ne pourrait pas réduire d'avantage le code....
Je vois que beaucoup de tes images sont dans ton code html, alors qu'elles devraient être en arrière plan.
D'ailleurs, quand je regarde ton code, je vois plein de div vide ne contenant qu'une image, ou rien !
J'ai l'impression, que tu as repris une mise en page en tableau, et que tu as simplement remplacé les td par des div. Ce n'est pas la bonne manière d'aborder les css...
arff, oui c'est ce que j'ai fait...mais je n'aurai plus le temps de tout refaire les pages, ce travail a été tres long déjà..dans ce cas je ne peut rien y faire ?
en fait, comme ce sont les images qui font la structures de ton site (du fait qu'elles sont dans le code html au lieu d'être en background), elles ralentissent le site et le déforment au fur et à mesure du charment, c'est ça qui fait que le site parrait lent.

Si toutes les images de présentation n'était que des arrières planx, elles se chargeraient à la fin et l"organisation générale du site ne serait pas modifiée.
La solution "temporaire" serait de préciser les dimensions des images dans le code, mais ça ne va pas accéléler le site, au contraire, ça permettra juste qu'il arrète de "bouger" lors du chargement.
Autre chose qui serait pas du luxe, indiquer un text alternatif (alt) à toutes tes images qui portent du contenu, comme "coordonnée", "société", ...

Personnellement, je te conseille de revoir a conceptionà la base.
Il faudrait d'abord concevoir un code html logique, correspondant à ton contenu, et sans trop te soucier de design. Ensuite, quand tu obtiens une page structurée et lisible sans css (ce qui n'est pas vraiment le cas actuellement), tu attaques l'intégration du design à coup de css et de background. Il est possible éventuellement de rajouter quelques "div de présentation" mais c'est à limiter.
Les images avec du texte peuvent rester dans le code car elles représentent un contenu, mais personnellement, je séparerai le texte de son arrière plan, ce qui permet parfois une meilleure compression : texte en gif donc très net et lisible, arrière plan en jpg plus compressé...
merci des conseil, mais je n'aura plus assez de tmps pour faire tout sa..je vais devoir laisser sa tel quel...enfin bon tanpis...merci beaucoup à tous
Sujet clos
Aller à