Demande d'avis et conseils sur PoliceBelge.com

Sébasti1900 · 15 Avril 2014

Bonjour à tous,

Voilà cela fait un peu près 1 an que j'ai lancé le site http://www.policebelge.com.
Il compte un peu près 20.000 visites/mois (5000 visiteurs uniques), je sais c'est pas terrible.

Voilà ayant tout mis en place moi même et n'étant pas un pro de l'informatique, j'attends avec plaisir vos conseils et critiques (constructives) afin d'augmenter le taux d'audience et donc je suppose le référencement.

J'attends également vos avis et conseils sur le design afin de voir ce que je pourrai éventuellement améliorer.

Un grand merci de m'avoir lu et au plaisir de vous lire

zeb · 15 Avril 2014

Re: J'attends vos conseils car je ne suis qu'un débutant !

Commence peut être par ouvrir plus le site pour les non inscrits car c'est bien marqué partout qu'il faut se créer un compte mais moi perso quand je rentre chez les flics j'ai envie de tout sauf d'y laisser mon identité :wink:
Comprend par là que même sans avoir de mauvaises intentions, la police traine un bagage qui fait que t'as pas forcement envie de sortir tes pafs.
Il est fort possible que ça impacte les utilisateurs web aussi ...
Les couleurs c'est "délicat" perso en arrivant j'ai eu une impression "FN" c'est bloquant pour beaucoup aussi.

Ceci étant dit, je suis surpris le site m'a fait une bonne impression car clean et pro (c'est rare), c'est peut être un peut lent faudrait se pencher sur l'optimisation car il y a beaucoup à faire.

Le code est un peut brouillon mais ça tu le verra en optimisation.
La sémantique c'est pas ça faut travailler.

Après tu sais vaux mieux 50k visiteurs motivés que 50m qui bouffe de la ressource pour rien ...

Voilà pour mon rapide coup d’œil.

Sébasti1900 · 15 Avril 2014

Re: J'attends vos conseils car je ne suis qu'un débutant !

Tout d'abord merci de l'intérêt

Ensuite tout est lisible pour les visiteurs excepté la section recrutement sinon normalement vous savez lire tout le reste.

Pouvez vous m'expliquer plus en profondeur ce qui vous bloque, ce qui ferait "FN"? Car ça n'est vraiment pas le genre d'image que les collègues et moi même souhaitons faire passer :-/

Concernant la lenteur je trouve aussi et donc je vais creuser le lien que vous m'avez donné afin de voir comment mieux l'optimiser

Merci encore de vos remarques cela me permet d'avoir une vue extérieure.

zeb · 15 Avril 2014

Re: J'attends vos conseils car je ne suis qu'un débutant !

Sébasti1900 a dit:
tout est lisible pour les visiteurs excepté la section recrutement sinon normalement vous savez lire tout le reste.

C'est l'incitation qui est fort présente (encart en bas a droite très flachi par exemple) Sinon je n'ai pas pris le temps de comprendre ce qui était possible ou pas

Sébasti1900 a dit:
Pouvez vous m'expliquer plus en profondeur ce qui vous bloque, ce qui ferait "FN"? Car ça n'est vraiment pas le genre d'image que les collègues et moi même souhaitons faire passer :-/

2 détails clés (pour moi) :
* accueil bandeau rouge / bleu écrit en blanc ça suscite d'instinct un recul pour voir ou on met les pieds (suis peut être parano ou conditionné

) En tous cas en France ça percute tout de suite l'esprit ...
* la petite flamme sur les picto forum qui fait allusion a la grenade enflammée symbole fort repris ailleurs qui a tendance là encore a me faire "ralentir".

Si on ajoute que l'image comprend des uniformes (normal somme toute vue le thème) là forcement je suis déjà debout sur les pédales de freins et je tire sur le volant pour appuyer plus fort

Comprend que c'est un ressenti "instinctif" pas basé sur une lecture ou une analyse poussé qui écarterait probablement le ressenti, mais que forcement quand tu as ça d’entrée ça calme. Même si tout est normal par ailleurs.

A titre d'info je regardais un truc sur la police allemande il y a un certains temps et la dominante était verte ça me faisait pas du tout le même effet ...

Dernier détail oublié tout a l'heure, le défilement des sujets forum est un poil rapide a l'accueil.

Sébasti1900 · 15 Avril 2014

Re: J'attends vos conseils car je ne suis qu'un débutant !

Ok donc faut que je supprime "l'invitation" à s'inscrire ^^

Concernant la couleur du bandeau, c'est parce que nos uniforme sont bleus et le rouge c'est pour attirer l'attention sur avis de recherche. En faites n'ayant pas le FN en Belgique ça ne m'a pas choqué (je n'y ai même pas pensé ^^), si un belge passe par là et obtient le même ressenti, je changerai.
Concernant la flamme, comme quoi il s'agit du pays, voici le logo de la police belge pour vous donner une idée du pourquoi

.
OK je vais diminuer la vitesse, encore merci

.

zeb · 15 Avril 2014

Re: J'attends vos conseils car je ne suis qu'un débutant !

Tu comprend le pourquoi sur le coup ;-)
Bon courage pour la suite ...

Sébasti1900 · 15 Avril 2014

Re: J'attends vos conseils car je ne suis qu'un débutant !

Effectivement lol

Merci

Sébasti1900 · 16 Avril 2014

Re: J'attends vos conseils car je ne suis qu'un débutant !

Bon j'ai optimisé par rapport au lien reçu, il y a encore quelques trucs que je n'arrive pas à faire.

Par contre j'ai mis des tailles au images mais quand gtmetrix refait le test il n'en tient pas compte :-/

zeb · 16 Avril 2014

Re: J'attends vos conseils car je ne suis qu'un débutant !

en se basant sur http://gtmetrix.com/reports/www.policebelge.com/FmCpOMGZ

"Specify image dimensions" > Pour les images essaye de changer ça :
<IMG style="width:429px; height:118px;" ... en :
<IMG width="429" height="118" ...

"Defer parsing of JavaScript" > Pour les javascript c'est plus délicat tu les prend un par un et tu test ça. il se peut que ça rende le site inutilisable ou non fonctionnel auquel cas tu reverse le code puis tu passe au suivant. De même si tu arrive a grouper tes scripts c'est mieux (moins il y en a en nombre mieux c'est)

"Combine images using CSS sprites" > c'est assez simple et ça concerne les très petites images voir ici. Tu peux aussi tirer profit de l'encodage base 64 pour cela (voir paragraphe Data-URI).

"Serve scaled images" tu pourra peut être tirer profit de mon tuto au sujet des miniatures et du cache d'image.

"Inline small CSS" + "Optimize the order of styles and scripts" > d'une façon générale évite le style inline comme mentionné sur le premier point concernant les images met tout dans une feuille de style si possible unique.

"Optimize images" > mon tuto mentionné au dessus sur le souci des images "scaled" répond en partie au souci dans la mesure ou il est fait clairement allusion au poids des photos et leur impact sur le chargement il faut toutefois prendre ce point avec des pincettes car l'outil te dira toujours que tu peux faire plus léger en augmentant le taux de compression mais au final c'est l'image qui est pourrie ...

"Remove query strings from static resources" > j'ai pas trop compris le pourquoi du comment mais ça m'a pas l'air fondamental je creuserais pourtant le pourquoi des urls présentées par gtmetrix car ça a pas l'air clean.

"Inline small JavaScript" > comme pour le CSS regroupe tous les trucs javascript en un fichier (si possible)

"Specify a cache validator" + "Leverage browser caching" > ça c'est délicat car dépend du serveur et de sa techno l'idée est que tu dois renvoyer pour chaque ressource (page, image, feuille de style, javascript, ...) une durée de validité du document (longue si possible). Le but est de favoriser la mise en cache d'un élément pour éviter qu'en navigation une image demandées sur trois pages différentes soit redemandée au serveur. En plus d'être écolo ça accéléré le rendu de la page car le navigateur a déjà la data. Il y a deux pistes pour cela :
* le htacces qui configure ça
* php qui envoie "manuellement" des entêtes précalculées.
Mine de rien c'est un truc important

"Enable gzip compression" > semble en place.

J'ai pris la liste dans l'ordre des priorité j'ai pas vérifié si c'était géré le but c'est surtout de te donner des pistes et du grain a moudre. ;-)

edit > 95 % c'est un minimum de nos jours pour commencer a parler de site bien optimisé ... plus c'est mieux. Je te dis cela pour que tu ai des repères.

Sébasti1900 · 17 Avril 2014

Re: J'attends vos conseils car je ne suis qu'un débutant !

Voilà j'ai fait ce que vous m'aviez dit. Par contre certaines petites images installé via CSS ne s'affiche pas en base64 donc j'ai été obligé de les laisser comme ça et j'ai rencontré également quelques soucis avec les scripts qui ne fonctionnaient plus si je mettais async ou defenfer ou si je les déplaçais.

Malgré tout j'ai :

- Activé la compression GZIP
- Optimisé les images
- Transformé en Base64 les petites images du code source
- Utilisé le CSS sprites pour le logo (survolé) ainsi que là où c'était possible
- Indiqué un temps d'expiration du cache
- Indiqué la taille des images.

Je suis passé de
Page Speed Grade: (75%) C à Page Speed Grade: (89%) B
YSlow Grade: (77%) C à YSlow Grade: (82%) B

Merci !

Si quelqu'un à d'autres remarques/avis sur le site ? Je suis à l'écoute

zeb · 17 Avril 2014

Re: J'attends vos conseils car je ne suis qu'un débutant !

Bah tu as déjà bien changé la donne un full refresh de ton accueil chez moi est déjà plus percutant.

Tu as plein de petite portions de script javascript dans tes pages qui commencent par "<script type='text/javascript'>" ...
Si elles sont communes a toute sles pages tu devrais les regrouper dans un fichier "truc.js" que tu chargerait sous la forme : <script type='text/javascript' src='url truc.js' />

Tu peux regrouper tout ce qui traine dans le header par exemple dans le même ordre que maintenant.

Bon après niveau contenu texte si tu compte te placer sur de requêtes précises en ref nat faudrait aborder la sémantique (<Hx>, <p> <ul li> etc ...) pour structurer ton contenu.

Ta galerie image gagnerait avec un peu de texte aussi.

zeb · 17 Avril 2014

Re: J'attends vos conseils car je ne suis qu'un débutant !

J'oubliais ... tant que tu as les mains sous le capot, essaye de virer tous les sauts de lignes inutile dans le code HTML et de bien le tabuler ça sera plus lisible donc plus simple a faire évoluer, maintenir optimiser.

Sébasti1900 · 17 Avril 2014

Re: J'attends vos conseils car je ne suis qu'un débutant !

Merci des conseils ZEB mais que veux-tu dire par tabuler ? Tu parles d'enlever les <br /> ?

zeb · 18 Avril 2014

Re: J'attends vos conseils car je ne suis qu'un débutant !

l'indentation du code a l'aide de caractère de tabulation rend le code plus lisible donc il est plus facile a observer, analyser, optimiser.
En pratique pour le HTML dès que tu ouvre une balise, les balises contenues a la ligne suivante seront décalées vers la droite d'une tabulation. Quand on ferme une balise on reviens au niveau de tabulation de l'ouvrante.

Code:

<a>
  <b>
    <c>
       ..............
    </c>
    ............
  </b>
</a>

Cela ne constitue pas a proprement parler une optimisation ou une amélioration technique (ça marchera quand même) mais cela rend la vie beaucoup plus simple pour analyser. De même, c'est con, mais c'est le signe d'un site bien tenu ;-) Si tu te souviens des profs qui disaient ne pas corriger une copie qui ressemble a un torchon tu va comprendre l'analogie entre un code bien écrit et l'optimisation plus facile.
Bon après je te rassure il y a un "bon nombre de branquignoles" qui écrivent leur code comme des pieds

Disons que pour aborder le web sémantique (fondamental pour la visibilité sur les moteurs) vue côté code ça aide énormément.

Sébasti1900 · 18 Avril 2014

Re: J'attends vos conseils car je ne suis qu'un débutant !

zeb a dit:
l'indentation du code a l'aide de caractère de tabulation rend le code plus lisible donc il est plus facile a observer, analyser, optimiser.
En pratique pour le HTML dès que tu ouvre une balise, les balises contenues a la ligne suivante seront décalées vers la droite d'une tabulation. Quand on ferme une balise on reviens au niveau de tabulation de l'ouvrante.

Code:

<a> <b> <c> .............. </c> ............ </b> </a>

Cela ne constitue pas a proprement parler une optimisation ou une amélioration technique (ça marchera quand même) mais cela rend la vie beaucoup plus simple pour analyser. De même, c'est con, mais c'est le signe d'un site bien tenu ;-) Si tu te souviens des profs qui disaient ne pas corriger une copie qui ressemble a un torchon tu va comprendre l'analogie entre un code bien écrit et l'optimisation plus facile.
Bon après je te rassure il y a un "bon nombre de branquignoles" qui écrivent leur code comme des pieds

Disons que pour aborder le web sémantique (fondamental pour la visibilité sur les moteurs) vue côté code ça aide énormément.

Ok merci c'est plus clair ! Je vais revoir tout ça dès que j'aurai fini mon changement d'hébergeur

Sébasti1900 · 22 Avril 2014

D'autres avis sur le design ?