[amateur] emilianafans.com

Alors :

- 'doctype' écrit en majuscule c'est toujours mieux

- La meta revisit-after est une légende urbaine, et est complètement inutile. Autant que la meta keywords !

- Un DOCTYPE HTML5, mais aucune balise HTML5 utilisée. Ce site n'a d'HTML5 que le DOCTYPE.

- Évite les balises vides. Ton id #top peut être placé autre part, comme suit :

<div id="conteneur-home top">
</div>

C'est tout pour l'instant, je ferai des retours plus approfondis dès que possible.

Knozelfhoegtj a écrit :

- 'doctype' écrit en majuscule c'est toujours mieux

N'importe quoi. En HTML on peut écrire les balises et leurs attributs en majuscules comme en minuscules, ça n'a aucune espèce d'importance.

Knozelfhoegtj a écrit :

- La meta revisit-after est une légende urbaine, et est complètement inutile. Autant que la meta keywords !

N'importe quoi. Meta keywords est utile pour des tas de crawlers (annuaires, robots adsense, etc). Ceux qui t'expliquent que la meta keywords ne sert à rien racontent juste des conneries. Elle ne sert à rien uniquement pour le référencement.

Knozelfhoegtj a écrit :

- Un DOCTYPE HTML5, mais aucune balise HTML5 utilisée. Ce site n'a d'HTML5 que le DOCTYPE.

N'importe quoi. 99% de HTML4 est aussi HTML5.

Bref, dans le doute, abstiens toi.
Modifié par jb_gfx (02 Sep 2012 - 04:53)

Salut,

Code/Perf

1. La meta keywords est obsolète.

2. Tu devrais combiner tes deux stylesheets en mettant un @media print {} pour minimiser les requêtes HTTP (d'ailleurs GTMetrix te le dit aussi, mais il te propose de l'inliner dans ton HTML, ce qui est mon bien ... le mieux reste de fusionner tes deux stylesheets) :

a écrit :
The following external resources have small response bodies. Inlining the response in HTML can reduce blocking of page rendering.

http://www.emilianafans.com/en/ should inline the following small resources:

http://www.emilianafans.com/style/style_print_20120901_min.css

3. Dans ton header langues, tu as "ENGLISH" et "FRANCAIS". Tu devrais plutôt les écrire normalement (pas en majuscules) et leur mettre un text-transform: uppercase.

4. Pour ton Google Analytics, passe le en "asynchronous", comme tu peux le voir sur le code de danielmall.com, ça t'évitera de charger tous tes assets en même temps : ton site charge d'abord, et ensuite GA intervient. C'est mieux.

5. Optimise tes images, il en reste quelques unes non optimisées :

a écrit :
Optimizing the following images could reduce their size by 1.1KiB (29% reduction).

Losslessly compressing http://www.emilianafans.com/style/img_style/common-social.png could save 600B (20% reduction). See optimized version
Losslessly compressing http://www.emilianafans.com/style/img_style/footer-01.gif could save 493B (74% reduction). See optimized version

6. T'as pas mal d'hiérarchies de sélecteurs assez lourdes que tu devrais fixer :

a écrit :
http://www.emilianafans.com/style/style_home_20120901_min.css has 4 very inefficient rules, 11 inefficient rules, and 1 potentially inefficient uses of :hover out of 82 total rules.

Very inefficient rules (good to fix on any page):

ul#menu1 li a Tag key with 2 descendant selectors and ID overly qualified with tag
ul#menu1 li a:hover Tag key with 2 descendant selectors and ID overly qualified with tag
...

Inefficient rules (good to fix on interactive pages):

ul#menu1 li Tag key with descendant selector and ID overly qualified with tag
#footer-menu1 ul a Tag key with 2 descendant selectors
...

Rules that use the :hover pseudo-selector on non-anchor elements. This can cause performance problems in Internet Explorer versions 7 and 8 when a strict doctype is used.

img.cadre-img-link:hover

7. Ajoute dans les headers HTTP ta favico pour qu'elle puisse être mise en cache, et donne-lui une date d'expiration. D'ailleurs tu devrais réduire sa taille.

8. Configure tes ETags dans ton htaccess, là y en a aucun.

Design

a. Je suis pas sûr que la double présence des liens sociaux soit utile.

b. Je trouve globalement qu'on a l'impression d'être serré, pas beaucoup de line-height, et globalement, pas beaucoup d'espace.

Voilà voilà ... pour GTMetrix, tu as le rapport complet ici, mais ton site est déjà super rapide, chapeau bas ... quel est ton hébergeur ?

Bonjour.
Merci pour vos retours! Vous réagissez plus que mes propres visiteurs qui n'ont pour le moment quasimment rien dit, bref on sait même pas si ça leur plait ou pas... M'enfin! Je suis là pour le code

Ya pleins de choses déjà dans ce que vous dîtes. Bien bien!

@Knozelfhoegtj, @jb_gfx

Pour le HTML5, j'étais parti du principe qu'on pouvait tout de même placer le doctype même si j'ai 99% de code HTML4, sachant que mon but est de le faire évoluer dans ce sens. Si on peut éventuellement me clarifier là dessus. Je peux laisser ça comme ça rassurez-moi ?


@Stephanelam

Code/Perf

1. Ok il me semble avoir lu qu'elle était osbolète mais comme le disait jb_gfx, elle me servait juste pour d'autres type de choses autre que le référencement. Me serais-je trompé ?

2. Je savais même pas qu'on pouvait fusionner les stylesheets! Comme quoi...

3. Bien vu! Erreur de ma part là.

4. OK.

5. Toujours ces deux là qui m'embêtent! Vais voir ce que je peux faire.

6. OK

7. Ah? Comment tu fait ça ? Pour la taille ça marche.

8. ETag ? What that ?

Design

a. Je me suis posé la question au départ, j'avais finalement retenu les deux (juste sur l'accueil). A voir effectivement si c'est utilisé ou à balayer.

b. Tu parles de l'accueil ou de l'ensemble du site ?


Pour mon hébergeur, je suis sur Planet Hoster. Ils sont installés au Canada et ont récemment ouvert aussi à Paris. Ca fait 1 an que je suis chez eux et je suis très satisfait.

Merci pour ton retour complet en tout cas et aussi vite! Je connaissais pas ce site pour le rapport, je le rajoute à mes favoris.

PhilouMinety a écrit :
Pour le HTML5, j'étais parti du principe qu'on pouvait tout de même placer le doctype même si j'ai 99% de code HTML4, sachant que mon but est de le faire évoluer dans ce sens. Si on peut éventuellement me clarifier là dessus. Je peux laisser ça comme ça rassurez-moi ?

Tout à fait, tu peux mettre 100% de code HTML4 avec un doctype HTML5, ça reste ok.

PhilouMinety a écrit :
1. Ok il me semble avoir lu qu'elle était osbolète mais comme le disait jb_gfx, elle me servait juste pour d'autres type de choses autre que le référencement. Me serais-je trompé ?

Non, tu peux la laisser, mais dans le sens où tu n'as pas Adsense, et si tu n'utilises pas d'annuaires, tu peux la virer selon moi. Enfin bon, après, c'est une ligne de code, c'est pas grave si tu la laisses, ça fera mal à personne.

Par contre, revisit-after, franchement, ...

PhilouMinety a écrit :
Je savais même pas qu'on pouvait fusionner les stylesheets! Comme quoi...

Eh si, on peut, et c'est même mieux !

PhilouMinety a écrit :
5. Toujours ces deux là qui m'embêtent! Vais voir ce que je peux faire.

Un petit coup sur SmushIT et ça devrait aller.

PhilouMinety a écrit :
7. Ah? Comment tu fait ça ? Pour la taille ça marche.

8. ETag ? What that ?

Les deux vont ensemble, c'est quelques lignes à rajouter dans le fichier .htacess qui est à la racine de ton site :

<IfModule mod_expires.c>
	Header set Cache-Control "public"
	ExpiresActive on

	# Perhaps better to whitelist expires rules? Perhaps.
	ExpiresDefault                          "access plus 1 month"

	# cache.manifest needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5)
	ExpiresByType text/cache-manifest       "access plus 0 seconds"

	# your document html 
	ExpiresByType text/html                 "access plus 0 seconds"

	# data
	ExpiresByType text/xml                  "access plus 0 seconds"
	ExpiresByType application/xml           "access plus 0 seconds"
	ExpiresByType application/json          "access plus 0 seconds"

	# media: images, video, audio
	ExpiresByType image/gif                 "access plus 1 month"
	ExpiresByType image/png                 "access plus 1 month"
	ExpiresByType image/jpg                 "access plus 1 month"
	ExpiresByType image/jpeg                "access plus 1 month"
	ExpiresByType video/ogg                 "access plus 1 month"
	ExpiresByType audio/ogg                 "access plus 1 month"
	ExpiresByType video/mp4                 "access plus 1 month"
	ExpiresByType video/webm                "access plus 1 month"

	# webfonts
	ExpiresByType font/truetype             "access plus 1 month"
	ExpiresByType font/opentype             "access plus 1 month"
	ExpiresByType font/eot                  "access plus 1 month"
	ExpiresByType font/woff                 "access plus 1 month"
	ExpiresByType image/svg+xml             "access plus 1 month"
	ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

	# css and javascript
	ExpiresByType text/css                  "access plus 1 month"
	ExpiresByType application/javascript    "access plus 1 month"
	ExpiresByType text/javascript           "access plus 1 month"
</IfModule>

<FilesMatch "\.(ico|css|pdf|flv|jpg|jpeg|png|gif|js|swf)(\.gz)?$">
Header unset ETag
FileETag None
</FilesMatch>

PhilouMinety a écrit :
a. Je me suis posé la question au départ, j'avais finalement retenu les deux (juste sur l'accueil). A voir effectivement si c'est utilisé ou à balayer.

Perso, je trouve que ça fait trop "j'insiste, suivez-moi, personne ne regarde mon site, alors faites-le". Mais c'est que mon avis.

PhilouMinety a écrit :
b. Tu parles de l'accueil ou de l'ensemble du site ?

De l'ensemble du site.

PhilouMinety a écrit :
Pour mon hébergeur, je suis sur Planet Hoster. Ils sont installés au Canada et ont récemment ouvert aussi à Paris. Ca fait 1 an que je suis chez eux et je suis très satisfait.

Ah, ok. j'en ai un peu marre du temps de chargement que m'impose OVH, j'ai un site bien moins lourd que le tien, et pourtant, j'ai un temps de chargement de plus d'une seconde et demie ...

PhilouMinety a écrit :
Merci pour ton retour complet en tout cas et aussi vite!

De rien !

PhilouMinety a écrit :
Je connaissais pas ce site pour le rapport, je le rajoute à mes favoris.

Il est super utile pour ce qui est perf, mais tu peux aussi directement aller sur le site de PageSpeed, et pour YSlow, il y a un bookmarklet

jb_gfx a écrit :


N'importe quoi. En HTML on peut écrire les balises et leurs attributs en majuscules comme en minuscules, ça n'a aucune espèce d'importance.

J'ai été formé sur du XHTML 1.0 strict, donc, forcément. Puis je n'ai jamais dit que l'on ne pouvait pas. Juste que c'était mieux.

jb_gfx a écrit :


N'importe quoi. Meta keywords est utile pour des tas de crawlers (annuaires, robots adsense, etc). Ceux qui t'expliquent que la meta keywords ne sert à rien racontent juste des conneries. Elle ne sert à rien uniquement pour le référencement.

D'accord, et bien écoute, je veux bien voir tes sources.

La meta keywords a un intérêt fortement limité. Mais bon, comme dit plus haut ce n'est qu'une ligne de code, ça ne mange pas de pain.

jb_gfx a écrit :


N'importe quoi. 99% de HTML4 est aussi HTML5.

Bref, dans le doute, abstiens toi.

Je n'ai pas dit le contraire. Mais à quoi bon avoir un site HTML5 n'utilisant aucune balise (sachant que c'est censé être sémantiquement plus accessible) HTML5 ? Je maintiens ce que j'ai dit. Et absolument aucun doute, ne t'en fais pas pour moi.
Modifié par Knozelfhoegtj (02 Sep 2012 - 15:25)

@Tous

Pour en revenir au HTML5, qui fait débat, c'est mieux alors que je rebascule sur le doctype HTML4 ou franchement ça va rien changer surtout si j'ai pour but d'évoluer mon site au fur et à mesure ? Ca a l'air d'être divisé.

Pour la meta Keywords, effectivement je ne suis pas inscrit dans les annuaires. Ca me sert peut être à rien de la conserver.

@Stephanelam

Merci pour les ETags, je vais regarder ça de plus près et m'y intéresser.

Tu n'as pas tort pous les liens réseaux sociaux. Une fois suffit largement. Je vais peut être modifier ça.

Pour l'espace, si tu avais vu la version précédente, tu serais devenu clostro J'ai essayé d'aérer vraiment dans cette version. Bon faut que je vois comment faire plus aéré. Si t'as quelques idées je suis preneur, j'avoue que c'est ce qui me pose souvent le plus de difficulté la mise en page.

Pour mes tests, j'utilise webpagetest et woorank aussi. Mais ton site est pas mal, j'ai généré le PDF des résultats avec tout inclus, vraiment pratique!

Ah la la à peine fini une version avec tellement d'heures de boulot qu'il faut déjà s'y remettre, dur dur quand même


Merci à vous trois en tout cas. Je vais me pencher là dessus! J'avais un peu peur je vous avoue mais tout ce que vous avez dit est vraiment constructif. Ya du boulot encore!
Modifié par PhilouMinety (02 Sep 2012 - 15:51)

Bah ça ne va rien changer, je précisais juste au gentil monsieur plus haut qu'un DOCTYPE HTML5 ne servait pas à grand chose sans balise HTML5. Maintenant, étant donné que tu as pour intention de faire évoluer ton site vers cette techno', je pense que tu pourrais/devrais rester sur du HTML5, oui

Ok. Non mais bon c'est intéressant de voir vos points de vue.
Merci.

Knozelfhoegtj a écrit :
Bah ça ne va rien changer, je précisais juste au gentil monsieur plus haut qu'un DOCTYPE HTML5 ne servait pas à grand chose sans balise HTML5. Maintenant, étant donné que tu as pour intention de faire évoluer ton site vers cette techno', je pense que tu pourrais/devrais rester sur du HTML5, oui

En même temps, ça ne change strictement rien par rapport à un doctype HTML4, non ? Bon.

Hello!

Je trouve ton site très clean et bien structuré.

Par contre le header manque peut-être d'un peu de couleur ou de contraste, histoire de faire ressortir le nom du site et dynamiser un peu l'ensemble.

Bonne continuation

Hello Gianni.
Merci pour tes remarques.


Je vais appliquer pas mal de modifs que vous m'avez soumis et essayer de progresser là où c'est possible. Pour le moment je fais petit à petit, déjà d'une parceque j'ai passé pas mal de temps sur cette version et j'ai besoin d'une petite pause! Et puis l'actu bouge en ce moment, donc je suis pris sur d'autres sujets.

Sinon question tout de même au passage, pour la fusion des feuilles de styles (screen+print), du coup pour déclarer mon CSS, je fait ça :

<link rel="stylesheet" type="text/css" href="....css" />

Je précise pas le média ?
Modifié par PhilouMinety (05 Sep 2012 - 11:36)

Tu marques media="all", et de toute façon la distinction se fera au sein de ta stylesheet à l'aide des MQ.

Bonsoir.
Bon petit à petit je tiens compte de vos remarques et j'essaye d'améliorer les choses. Je suis loin d'avoir fini et j'ai pas trop pris le temps de travailler dessus.
Cependant je me suis attaqué sur mon footer et ma feuille de style pour l'accueil.
J'ai réussi à alléger le footer tout en modifiant le contenu et l'aspect, et enlever mes balises css inutiles (il me reste encore le header à fixer niveau css).

Dans mes résultats gtmetrix, je suis par contre étonné d'un résultat sur la partie du CSS inutile. Il me reste 5 balises non utilisées mais qui le sont suivant l'apparition ou non de données sur l'accueil. Là où le résultat m'interpelle, c'est qu'il me dit ceci:

a écrit :
58.9% of CSS (estimated 3.4kB of 5.8kB) is not used by the current page.

Rapport Gtmetrix

C'est que 5 petites balises, je suis très surpris du %. Je n'ose trop y croire sur ce coup là. Qu'en pensez-vous ?

Merci!
Webicalement.
Modifié par PhilouMinety (25 Sep 2012 - 21:46)

Pour les perfs, le meilleur outil du moment est webpagetest (rapport sur ton site).
Et un petit article pour ne pas trop en faire.

EDIT: L'actu perf sur le groupe webperf de diigo.
Modifié par paolo (26 Sep 2012 - 10:00)

Bonjour.
Webpagetest fait partie également de mes outils. C'est vrai que je le trouve très bien. J'ai pas pensé à comparer les résultats du CSS avec Gtmetrix...

Merci pour le lien avec l'article, m'en vais lire ça attentivement.
A+