[Pro] Kalott Lyrikal

Bonjour,
je voudrais que vous critiquiez mon site, Kalott Lyrikal
J'ai developpé Kalott Lyrikal sur une plateforme de ma création, plateforme que je compte utiliser pour de nombreux projets pro, donc j'aimerais votre appréciation, qui à travers la critique du site va m'amener à discerner les éléments propres à la plateforme, pour la perfectionner.

Je ne vais pas faire de mystères,
j'ai développé le site sous Linux, dans l'urgence. Une fois uploadé je me suis rendu compte de grosses bévues sur IE7 donc j'ai du corriger les bugs, ce qui m'a amené à rentrer des aneries CSS et HTML pour compenser des bugs de IE7, ou bugs de ma part.
Etant dans l'urgence je n'ai pas poussé le vice à inspecter le site sous IE6, mais pour le bien etre de ma plateforme j'envisage de le faire par la suite.

J'ai corrigé par honneur la plupart des aneries sous IE7, par contre sur safari mobile, ca ne fonctionne pas trop bien. J'envisage de renettoyer les CSS, donc j'aimerais vos avis pour repartir sur de bonnes bases.


J'ai tendance à mettre partout CLEAR:LEFT;FLOAT:LEFT, j'aimerais d'ailleurs avoir votre avis pour savoir si j'abuse ou pas de cela. Car j'ai limpression que c'est l'arme ultime pour maitriser mon rendu.

Le site www.kalottlyrikal.net
Modifié par DarKA (05 Jan 2011 - 06:46)

Bonjour,

Ton site est extrêmement long à charger... Puis il lague quand on souhaite scroller. Il n'y a pas pire pour faire fuir un visiteur

D'un point de vu design, ce n'est pas vraiment ça (les pubs ultra colorées + le bloc blanc facebook dans un site noir, c'est juste moche).

La vidéo qui se lance toute seule, c'est bien gentil, mais c'est super casse pied... Je n'ai pas de son sur mon poste (ouf) mais imagine le visiteur qui était déjà en train d'écouter sa propre musique... bonjour le mélange cacophonique !

Niveau code :
* tu as 12 erreurs de code à corriger.

* Pour répondre à ta question : ton utilisation de clear et float est vraiment superflue, il te serait bénéfique de revoir les bases du positionnement CSS.

* Utiliser le doctype HTML5, c’est cool, mais si tu n’utilise d’HTML5 que son doctype, je ne vois pas vraiment où est l’intérêt...

* Tu ne déclare pas la langue principale de la page (attribut lang sur html + meta Content-Language si ton serveur n’envoie pas le header correspondant).

* Par contre tu as des meta totalement inutiles : la série d’og.

* 12 feuilles de style externes... C’est juste trop. Il faut réduire ce nombre (idéalement, une seule feuille suffit (plus correctifs éventuels)).

* 25 fichiers JS externes... Idem, il faut réduire le nombre et placer tous les scripts en fin de document. Il serait également bien de placer les scripts en ligne en externe. Mais une question reste : tous ces scripts sont réellement nécessaires ? Sur toutes les pages ?

* Tu as des éléments inutiles :

 <div id="col1" class="left_container">
<div class="lof-slidecontent news_slider_1" id="news_slider_1">
<div class="preload" style="display: none;"><div></div></div>

* Il faut m’expliquer l’intérêt de ce truc :

 <img alt="Coup de coeur de kalott : Man SmOOky Ft Sk - C Bay Kè An Ka FiGhT" src="/images/transparent_pix.gif" style="background-image:url(http://www.kalottlyrikal.net/upload/images/prod/21/man-smooky-ft-sk-c-bay-ke-an-ka-fight2010122809201.JPG)"/> 

* Title sur les liens n’est pas obligatoire, il n’est nécessaire que lorsqu’il apporte une information nécessaire à la bonne navigation du visiteur ET supplémentaire à l’intitulé du lien. Un title reprenant exactement le même texte que l’intitulé (comme sur tes les liens de tes h1) est totalement inutile et redondant.

* Ta hiérarchie des titres est incorrecte, elle passe de h1 à h3 sans h2 entre les deux. L’attribution des niveaux de titre est d’ailleurs bancale...

En résumé : le code est vraiment difficile à lire et pas vraiment propre, tu y gagnerais à faire en sorte qu’il s’affiche un peu plus joliment. Il faut absolument que tu revoies les performances de ton site, c’est un horreur à naviguer, http://gtmetrix.com/reports/www.kalottlyrikal.net/Z3NnDGuKGTmetrix[/url> pourra t’aider à cela.

En termes de perf, c'est un condensé de mauvaises pratiques. Grade F sur Yslow.
J'ai une connexion haut débit qui fonctionne bien, et ça rame au chargement...
Les pubs et le widget fb sont trop imposants.

Re,
Merci Laurie-ANne et Paolo, cela me donne des pistes à étudier pour pouvoir améliorer ma plateforme.
Donc Laurie Anne comme tu veux des explications, je vais tacher d'expliquer mon fonctionnement si l'on puis dire...

Les erreurs javascripts sont dues en majeur partie à google adsense. Je ne sais pas pourquoi, mais il refuse de fonctionner sans lever d'erreurs.

D'un point de vue design, outre le noir, j'ai voulu laisser les blocs facebook en blanc pour qu'ils soient bien reconnaissable.

Les tags OG sont des tags Open Graph. Je les trouvent assez interressant. Et en tout cas pour ma cible et l'utilisation qu'elle fait de facebook cela m'a paru indispensable.

Les éléments inutiles que tu as justement levés, sont dus à mon slider en javascript. C'est sensé permettre un préchargement en javascript. Mais je ne suis pas sur du bon fonctionnement de cela, donc je pense qu'il va falloir que je tranche.

L'intéret de l'image avec le background qui présente son vrai contenu, c'est que cela permet à un portail alimenté via CMS et alimenté de facon automatique, de pouvoir présenter des images en page d'accueil qui s'adaptent facilement. J'avais trouvé cette astuce dans un bouquin, j'ai trouvé que cela s'adaptais parfaitement à mon besoin ici.

Enfin en moyenne, il y a 5 fichiers JS Externes, pour 5 à 6 fichiers CSS. Petite modification à apporter étant donné les chiffres que tu as annoncé !

@Paolo, effectivement Grade F pour Yslow. Cela m'embete moins car effectivement je n'ai pas cherché le tuning, et que étant donné que c'est une plateforme que j'utilise, bah, il y a beaucoup de fichier dans tous les sens. N'empeche ce sont clairement des pistes d'améliorations soulevés.

Merci !
Modifié par DarKA (05 Jan 2011 - 18:43)

DarKA a écrit :
Donc Laurie Anne comme tu veux des explications, je vais tacher d'expliquer mon fonctionnement si l'on puis dire...

Ma "demande" n'en était pas une et ne concernait qu'un seul point. Je voulais juste mettre en avant que cette portion de code était totalement idiote.

DarKA a écrit :
Les erreurs javascripts sont dues en majeur partie à google adsense. Je ne sais pas pourquoi, mais il refuse de fonctionner sans lever d'erreurs.

Je parlais des erreurs de code HTML...

DarKA a écrit :
D'un point de vue design, outre le noir, j'ai voulu laisser les blocs facebook en blanc pour qu'ils soient bien reconnaissable.

Bah... c'est réussi en un sens... on ne vois que ça, mais c'est particulièrement moche.

DarKA a écrit :
Les tags OG sont des tags Open Graph. Je les trouvent assez interressant. Et en tout cas pour ma cible et l'utilisation qu'elle fait de facebook cela m'a paru indispensable.

Mouais... c'est pourtant totalement inutile.

DarKA a écrit :
L'intéret de l'image avec le background qui présente son vrai contenu, c'est que cela permet à un portail alimenté via CMS et alimenté de facon automatique, de pouvoir présenter des images en page d'accueil qui s'adaptent facilement. J'avais trouvé cette astuce dans un bouquin, j'ai trouvé que cela s'adaptais parfaitement à mon besoin ici.

Et c'est une grosse erreur d'accessibilité... Mettre l'image directement dans le code HTML est plus propre, tout aussi simple à gérer avec le CMS et ne posera pas de problèmes.

DarKA a écrit :
Enfin en moyenne, il y a 5 fichiers JS Externes, pour 5 à 6 fichiers CSS. Petite modification à apporter étant donné les chiffres que tu as annoncé !

Chiffres donnes par GT metrix. Mais que ce soit 5 ou 25, c'est trop. Un seul fichier JS et un seul CSS suffisent amplement.
Modifié par Laurie-Anne (06 Jan 2011 - 08:35)