En réponse à la news du 21/12/2011 où je propose à Zeny d'apporter ma contribution pour améliorer les performance du site ainsi qu'une optimisation SEO (pour le référencement): http://www.halodestiny.net/news.php?readmore=1215#skip

Les infos et ressources que je vais fournir étant particulièrement intéressantes pour un novice, je pense donc que créer un topic dans cette catégorie est la meilleure chose à faire afin de partager mes connaissance avec le plus grand nombre , car ces techniques sont valables pour tous les sites et devraient être connues de tous les webmaster (les pro en tout cas).

Pour réaliser les test de performance, j'utilise les outils Page Seed et Yslow que vous pouvez retrouver sous la forme d'extensions pour Firefox ou via le site http://www.gtmetrix.com
Perso je préfère utiliser ce dernier plutôt que d'allourdir Firefox avec des extensions superflues, d'autant plus que si vous vous enregistrez, vous pourrez faire différentes comparaisons (historique et comparaison avec d'autres pages), ce qui peut s'avérer très pratique.

Voici 2 billets pour la présentation de Page Speed et Yslow:
http://www.alsacreations.com/actu/lire/527...avec-yslow.html
http://www.alsacreations.com/actu/lire/728...eed-plugin.html

La différence entre Yslow et PageSpeed se situe sur deux points : certaines demandes sont différentes de l’un à l’autre, l'un a été dévellopé par Google, l'autre par Yahoo, mais surtout ce sont les coefficients entre les deux qui diffèrent pour certaines demandes de l’un à l’autre, d’où l’obtention de note différentes au final.

Je ne vais cependant donner ici que mon point de vue sur les choses à améliorer sur HaloDestiny pour les performances (il y a quand même près de 20 points à aborder) !

Voici le rapport de GTmetrix: http://gtmetrix.com/reports/www.halodestiny.net/rAU1tn4Q

Je vais donc commencer par le raport de Page Speed:


Il faut ici réduire les règles jugées comme inefficaces (superflues), en gros:
* html #navigation ul li deviendrait #navigation li
a.avalanche_over img deviendrait .avalanche_over img
etc...


les redirections font perdre du temps, en gros je supprimerai Xiti pour le remplacer par Google Analytics.


Comme le nom l'indique, on t'invite ici à combiner autant que possible les fichiers javascript


Pareil ici, mais pour les fichiers CSS


Il s'agit d'une manipulation à faire sur le serveur pour permettre l’envoi d’une page avec l’information Vary: Accept-Encoding afin de corriger un problème sur certains proxy pour les gens qui n’accepteraient pas le mode Gzip sur leur navigateur: http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html


Ici, simple comme bonjour, on propose de remplacer les fichiers Javascript d'origine par des versions compressés (fais quand même un backup de tes fichiers avant, au cas où et par soucis de lisibilité si jamais tu devais faire des chagements dans le futur).


Alors ici, il faut supprimer les css non utilisés dans la page.
En général, je travaille avec 2 fichiers, un qui sera sur toutes les pages ET sur l'accueil, et un autre qui sera sur toutes les pages SAUF sur l'accueil, ainsi toutes les règles non utilisés sur l'acceil seront ajoutées dans le 2ème fichier afin d'otenir des temps de chargement sur l'accueil encore plus rapides (étant donné que c'est la principale source d'arrivée des visiteurs).


Il faut autant que possible éviter de stocker des données sur d'autres sites afin de facilité le transfert réseau entre le visiteur et le site.


Ici, on t'invite à combiner les images à l'aide de la technique des sprites (CSS) afin de réduire la fréquence des requêtes sur le serveur, pour plus d'infos: http://www.weedle.fr/tutoriel-utiliser-les-css-sprites-2278


Ici, on propose de remplacer les fichiers CSS d'origine par des versions compressés (fais quand même un backup de tes fichiers avant, au cas où et par soucis de lisibilité si jamais tu devais faire des chagements dans le futur).
PS: A l'inverse, il existe un outils géant http://www.styleneat.com permettant de décompresser et réorganiser proprement un fichier CSS.


Ici, on propose de remplacer les images d'origine par des versions compressés (fais quand même un backup de tes fichiers avant, au cas où), fais également attention que certaines images en jpg deviendront des jpeg et les gif des png, il faudra donc modifier les css en conséquence.


Ici, on t'invite à activer le mode Gzip sur le serveur, pour plus d'infos: http://www.alsacreations.com/article/lire/...ip-deflate.html


Définir la taille des images permet au navigateur de pré-dimensionner les éléments affiché dans la page avant même que l’image ne soit téléchargée, ainsi le gabarit de la page est dirrectement affiché sans s'agrandir à chaque chargement d'images (pas de déformations pouvant géner la lecture).


Ne disposant pas de plusieurs serveurs, ce point n'a guère besoin d'être amélioré.


Il suffit ici de spécifier via un fichier .htaccess quelle est la date de validité d’une image, d’un fichier css, avi, etc...

soit de cette façon (afin de définir une date de validité différente pour chaque type de fichier ajouté):



Ou de cette façon (plus simple à gérer):





Voila c'est tout pour Page Speed, passons maintenant à Yslow:


Ici, il suffit tout simplement de glisser les quelques lignes de javascript (dans la mesure du posible, par exemple dans le cas d'une pub ce n'est pas possible) tout à la fin de la page, juste avant la balise de fermeture </body>.


Cela permet de distinguer les versions de chaque document, le navigateur envoie une requête au serveur pour savoir quelle version il a pour chaque document, le serveur lui répond et une comparaison s’effectue alors.
Si les numéros de version sont les mêmes, alors le navigateur utilise son cache, si les numéros sont différents, le navigateur récupère le fichier du serveur (et le met en cache).

Bref, si vous avez programmé votre gestion du cache, ces échanges entre navigateur et serveur deviennent inutiles, leur suppression peut donc vous permettre de gagner en vitesse lors du chargement de vos pages.

Pour ca, introduisez dans votre fichier .htaccess les données suivantes:




N'utilisant que très rarement des cookies sur mes sites, je ne suis pas vraiment en mesure de répondre, le mieux que j'ai à faire, c'est te rediriger vers: http://gtmetrix.com/serve-static-content-f...ess-domain.html

En gros, d'après ce que j'ai compris, les cookies transmettent à chaque visite des informations diverses et variée qui pèsent un poids supérieur à zéro. Pourtant pour des images, des fichiers plats, un cookies est rarement utile, il est donc recommandé de gérer un sous domaine type http://static.halodestiny.net qui s'occupera uniquement de contenir les fichiers plats.


Ici, on t'invite à combiner les fichiers css entre eux, les js entre eux, ansi que les images au moyen des css sprites pour réduire les requêtes sur le serveur.


Pareil que pour le point "Enable gzip compression (Page Speed)" ou l'on tinvite à activer le mode Gzip.


Et enfin, plus où moin similaire à la date de validité d'un fichier on définit cette fois la date d'expiration et dont voici un exemple de code à insérer égallement dans le fichier .htaccess



Au final, voici à quoi ressemble le fichier .htaccess



Pour ceux qui voudraient approfondir dans les possibilités du fichier .htaccess, je recommande ces liens:
http://www.siteduzero.com/tutoriel-3-35126...ionnalites.html
http://www.lafermeduweb.net/billet/-htacce...naitre-981.html
http://forum.webrankinfo.com/pratique-htac...er-t132885.html
http://css-tricks.com/snippets/htaccess/
http://www.htaccesstools.com/


La suite sur l'optimisation SEO dans un futur billet que je rajouterai sous peu

Très bon tuto, merci beaucoup, ça en aidera plus d'un !

Merci pour ces astuces, je saurais quoi faire pour optimiser le site de mon employeur

Heureusement que t'explique ce que sa veut dire parce que rien qu'avec les infos des pages, j'aurai rien compris.

Très belle présentation !
Ca peut être utile.

Content de voir que mes explications sont largement acceptées par tout le monde.

Pour ce qui est de l'aide concernant le SEO,
il faudrait d'abord corriger les différentes fautes pour rendre le site valide XHTML (107, c'est beaucoup trop):

Validateur Francais: http://validator.progysm.com
Valideur officiel du W3C (en anglais): http://validator.w3.org

Et un petit billet pour comprendre comment et pourquoi l'accessibilité d'un site peut améliorer son référencement:
http://www.pompage.net/pompe/accesibilitemoteursderecherche/

Optimisations faites, je suis plutot content, même sans avoir tout appliqué comme la compression gzip ou les sprite css, ça donne plutot un bon résultat !

Une chtite image pour illustrer

Bon c'est loin d'être un gros site aussi, le plus "lourd" étant des galeries de photos...

La validation w3c par contre je l'ai faite dès le début, que ce soit pour le html ou le css, ça évite d'avoir des bouts de codes inutiles qui se promènent ou des petites erreurs qu'on aurait pas vu.


Encore merci pour ses astuces LuciferX

Pas d'quoi, content d'avoir été utile

(bon ca va cette fois, c'est pas moi qui est déterré donc je peux dire : ) Merci pour ce tuto :) Je sais au moins comment optimisé mon site ;)

Merci à toi Lucifer ;)

Cela me rappelle les temps où j'étais sur les espaces Halo, qui était sans doute un pilier de la communauté française sur Halo, un très bon site que tu as fais ;)

heuuu on vous à apris tout ça où parceque moi j'ai pas vu ça à l'ecole

Un peu aux cours, mais pas grand chose (car en plus de travailler sur des logiciels dépassés, leurs pratiques sont elles aussi parfois un peu d'avant guerre).
Berf, j'ai surtout appris ces choses la par moi même en fréquentant certains sites/communautés de webmaster comme par exemple:
-> http://www.alsacreations.com, -> http://www.webrankinfo.com, -> http://www.pompage.net,
-> http://openweb.eu.org, -> http://fr.selfhtml.org
(ca va en faire de la lecture )

... et surtout à l'aide des nombreux sites/blogs dont je suis l'actualité quotidiennement avec Google Reader


Merci dommage que j'ai actuellement un gros soucis avec le système de rédaction d'articles qui pour une raison inconnue plante au moment de soumettre l'article, mais tôt où tard, il faudra le régler car je ne me suis pas cassé le cul sur la V3 pour rien !!!

--

Sinon, j'étais également de retour sur ce topic afin de continuer à parler des bonnes choses à faire (ou à ne plus faire) afin d'apporter un nouveau souffle pour la verstion 7 de Halo Destiny.

Je viens de consulter le dossier sur le prochain pack de cartes http://www.halodestiny.net/news.php?readmore=1244 , et je me rend compte que le rendu des images pourrait être amélioré aussi bien pour l'utilisateur que pour le serveur.

Je m'explique en prenant comme exemple cette portion de code:

Si on regarde cette façon d'afficher les images, on constate que l'adresse de la miniature est la même que celle du lien vers celle en HD.
En plus de créer un effet d'escalier disgracieux sur les navigateurs, ca consomme beucoup plus de bande passante (et donc d'argent) en plus de prendre plus de temps à s'afficher pour un utilisateur disposant de l'ADSL (ne pensons même pas à ceux qui voudraient utiliser leur téléphone où qui utiliseraient encore le câble ).

L'idéal est d'utiliser 2 images, une miniature pour la preview et la version grand format sur le lien.
En gros, l'image d'origine fait 1,95Mo (et pourrait elle aussi être optimisée) et la version miniature que j'ai réalisé pour ce test fait 84,8Ko

Faites le calcul:
12 images de +ou- 2Mo, ca fait 24 Mo
12 images de +ou- 100Ko, ca fait 1,2 Mo
Sachant également que tous les visiteurs ne vont pas systématiquement cliquer sur les liens, ca allège également un peu le serveur.

Je vois également qu'un style est ajouté à chaque image, pourquoi ne pas plutôt ajouter cela dans un fichier css et l'appeler via une classe, ca accélèrerait aussi la vitesse de chargement de la page.

Concernant la balise alt, elle est censé être un support d'informations pour l'image et nottament pour les moteurs de recherche, il vaut mieux dans ce cas compléter un peu la description afin d'augmenter les performances SEO.

En gros, au final tout ca devrait resssembler à ceci:



Et voici l'image redimmensionnée à 48% et un poil compressée qui fait bien 84,8Ko :
http://img10.imageshack.us/img10/1082/unearthed1.jpg

Je vois aussi qu'on a souvent tendance à utiliser le format .png dans les articles sur Halo Destiny, ce n'est pas vraiment une bonne idée, il vaudrait mieux utiliser le format .jpg afin d'optimiser le poid des photos, mais pour mieux comprendre tout ca, je vous renvois sur un topic ouvert par Fredolefou et qui explique bien tout ca: http://www.halodestiny.net/forums/index.php?showtopic=7143

A tiens, j'avais pas fais gaffe à ça, même si je look parfois dans le code, et effectivement ça peut aussi être un bon truc pour optimiser la navigation sur le site, car même en ADSL, 1Mo c'est "trop" pour une page.

Comme le signale Lucifer, le png n'est peut être pas destructeur comme le jpeg, mais vachement plus lourd, le minimum serais d'optimiser soit les grandes images en jpg (pour qu'elles soient plus proches de 100-300ko) soit faire des miniatures en jpg de 20-50ko, l'idéal étant bien sur de faire les 2 optimisations (en pouvant garder une meilleure qualité pour les grandes images)

et +1 pour les styles, pourquoi ne pas intégrer ça au css, quitte à rajouter du code pour peu qu'on veuille un effet différent sur une image précise.

...et merci pour le lien vers mon topic

L'idéal serait de réaliser un audit du site à l'aide de http://grader.rezoactif.com pour évaluer les perforamances SEO, mais cela ne fonctionne pas correctement à cause (je soupsonne) du fait que le site n'est pas valide W3C. (peut-être une balise mal fermée)

Il y a aussi http://nibbler.silktide.com (complémentaire à Rezoactif) qui met en lumière les principaux point à améliorer:
-> http://nibbler.silktide.com/reports/www.halodestiny.net

Pour ceux que ca intéresse, d'autres outils du même genre sont disponibles à cette adresse:
-> http://ministatus.com/mini_blog/2010/08/we...ministatus-com/

PS: Zeny, si ca t'intéresse, n'hésite pas à utiliser les panoramas que j'ai réalisé pour le header du site de Halo Destiny

Ralo Reach -> http://www.flickr.com/photos/inferno-x/set...57625360244764/
Faux HDR Halo Reach -> http://www.flickr.com/photos/inferno-x/set...57625936148184/
Halo 3 -> http://www.flickr.com/photos/lucifer-x/set...57604317136458/

Pour la partie nouvelle, je vais répondre puisque j'en suis le responsable.

Concernant les miniatures, c'est effectivement une très bonne solution, que je souhaite mettre en place pour la prochaine version de Halo Destiny en codant un système qui, lors de l'upload de l'image, créera une copie de l'image en plus petite taille, optimisée pour la diffusion web, ainsi que les navigateurs mobile. Mais pour le moment, je désire laisser comme cela pour une raison unique: le passage à D7.

En effet, l'espace de lecture sur la prochaine version sera diminuée, du moins améliorée, afin que les nouvelles soient plus accessibles et lisibles. Cela passera par plusieurs traitements de la news qui seront gérés directement par le CSS, qui m'évitera de taper certains codes à la main, comme le style des images par exemple. Cela n'a pas été fait sur D6, car au commencement de la version, nous ne nous étions pas posés la question, et surtout que cette version étant là pour une courte période maintenant, il est préférable de changer tout cela lors de la prochaine évolution.

D'ailleurs, tu parlais de la visite du site par les téléphones. Internet évoluant, nous avons aussi prévu cette situation, et je travaille depuis quelques temps sur une version allégée du site parfaitement optimisée pour les mobiles, et cela ira des nouvelles, aux forums et compagnie. Les images seront alors, via javascript/CSS, parfaitement adaptées à une telle navigation, et pourront s'adapter en fonction de la résolution, d'une tenue horizontale ou verticale du téléphone. Il en sera de même pour le forum, complètement refait par mes soins pour être un véritable plaisir de navigation et de lecture afin de suivre les discussions où que vous le souhaitiez.

Je vous remercie encore de vos idées/solutions, et j'en prend compte en ce qui concerne mon domaine (nouvelles, mobiles), elles ne sont pas tombées dans l'oreille d'un sourd ! Et pour les headers, merci beaucoup Lucifer, mais pour D7, je ne sais pas si tu l'as remarqué, mais nous avons opté pour un nouveau style de header...

Zeny m'avait un soir montré la v7, mais n'ayant pas conservé l'url et les accès, je ne me souviens plus de tout en détails !

Enfin, c'est juste que comme le header des espaces Halo est aussi dans un autre style, je ne risque plus beaucoup de les utiliser à part sur le forum, donc je me disais que ca pouvait être sympa.

PS, si vous voulez les utiliser pour d'autres créations (ou dans la V6 tant qu'elle est toujours d'actu), je n'y vois pas non plus d'inconvénients

Pour revenir au sujet, dans la lignée des outils tel que Gtmetrix, je recommande également http://sitebeam.net et http://nibbler.silktide.com