Optimisation de mon site

Fermé

SweetRiver Messages postés 102 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 22 novembre 2016 - 4 août 2011 à 23:01
magicshark Messages postés 402 Date d'inscription mardi 27 juillet 2010 Statut Membre Dernière intervention 6 mai 2014 - 5 août 2011 à 15:51

Bonjour,

Ayant créé mon site récemment,

http://www.soslignes-ecrivain-public.fr/

avec un résultat qui globalement me convient, je suis à la recherche de trucs, d'astuces et de conseils extérieurs sur un meilleur rendu, des erreurs à rectifier, des points d'amélioration, de choses que je n'aurais pas faites et qui le devraient...

Votre avis extérieur m'intéresse donc...

Merci par avance !

Cdt

A voir également:

Optimisation de mon site
Site de telechargement - Accueil - Outils
Site comme coco - Accueil - Réseaux sociaux
Optimisation pc - Accueil - Utilitaires
Site de vente en ligne particulier - Guide
Quel site remplace coco - Accueil - Réseaux sociaux

5 réponses

Réponse 1 / 5

mpmp93 Messages postés 6648 Date d'inscription mercredi 13 avril 2011 Statut Membre Dernière intervention 28 septembre 2015 1 339
Modifié par mpmp93 le 5/08/2011 à 11:54

Bonjour,

Avec quel outil éditez-vous vos pages?

Le tag <font est obsolète....

La définition d'une fonte doit être réalisée en CSS et non plus au travers de FONT et ses attributs.

Sinon même remarques que magicshark: prolifération de DIVs et styles redondants....

Pourtant l'aspect général de votre site est plutôt bonne.... Mais en arrière-boutique, c'est spaghetti!

Je cite votre site: Notre langue est probablement l'une des plus complexes à maîtriser... Je rajouterai que HTML/CSS aussi - mais on peut simplifier les choses et faire du bon code HTML/CSS

C'est ce que je m'évertue à expliquer depuis 1 an 1/2 à mes collègues de travail en leur expliquant la nouvelle norme HTML5 et la manière d'exploiter CSS de manière plus judicieuse:
- imbrication sémantique au travers des nouveaux éléments header, footer, article, aside, nav....
- struturation en css en empruntant les chemins d'imbrication sémantique de ces nouveaux éléments HTML5, ce qui réduit la prolifération de classes css.

Un seul exemple, on retrouve souvent ce genre de chose:

<ul class="navbar"> 
<li><a href="./index.html"><img alt="" src="images/img0014_over.png"><span><img alt="" src="images/img0014.png"></span></a></li> 
<li><a href="./Prestations.html"><img alt="Prestations et tarifs" title="Prestations et tarifs" src="images/img0015_over.png"><span><img alt="Prestations et tarifs" title="Prestations et tarifs" src="images/img0015.png"></span></a></li> 

<li><a href="./Contact.php"><img alt="" src="images/img0016_over.png"><span><img alt="" src="images/img0016.png"></span></a></li> 
<li><a href="./FAQ.html"><img alt="" src="images/img0017_over.png"><span><img alt="" src="images/img0017.png"></span></a></li> 
<li><a href="./Actualite.html"><img alt="" src="images/img0018_over.png"><span><img alt="" src="images/img0018.png"></span></a></li> 
<li><a href="./Autourduncafe.html"><img alt="L'espace détente de SOS Lignes" title="L'espace détente de SOS Lignes" src="images/img0010_over.png"><span><img alt="L'espace détente de SOS Lignes" title="L'espace détente de SOS Lignes" src="images/img0010.png"></span></a></li> 
<li><a href="./Quisuisje.html"><img alt="" src="images/img0019_over.png"><span><img alt="" src="images/img0019.png"></span></a></li> 
</ul>

Alors que ceci est bien plus simple:

<nav> 
  <a href="./index.html"><img alt="" src="images/img0014_over.png"><img alt="" src="images/img0014.png"></a> 
  <a href="./Prestations.html"><img alt="Prestations et tarifs" title="Prestations et tarifs" src="images/img0015_over.png"><img alt="Prestations et tarifs" title="Prestations et tarifs" src="images/img0015.png"></a> 
  <a href="./Contact.php"><img alt="" src="images/img0016_over.png"><img alt="" src="images/img0016.png"></a> 
  <a href="./FAQ.html"><img alt="" src="images/img0017_over.png"><img alt="" src="images/img0017.png"></a> 
  <a href="./Actualite.html"><img alt="" src="images/img0018_over.png"><span><img alt="" src="images/img0018.png"></a> 
  <a href="./Autourduncafe.html"><img alt="L'espace détente de SOS Lignes" title="L'espace détente de SOS Lignes" src="images/img0010_over.png"><img alt="L'espace détente de SOS Lignes" title="L'espace détente de SOS Lignes" src="images/img0010.png"></a> 
  <a href="./Quisuisje.html"><img alt="" src="images/img0019_over.png"><img alt="" src="images/img0019.png"></a> 
</nav>

Et le css qui va présenter les balises <A...> comme si elles étaient encardées par <LI>..:

nav a { display: block; }

plus besoin de li

Cordialement

magicshark Messages postés 402 Date d'inscription mardi 27 juillet 2010 Statut Membre Dernière intervention 6 mai 2014 13
5 août 2011 à 11:56

je plussoi again

SweetRiver Messages postés 102 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 22 novembre 2016 6
5 août 2011 à 13:26

Bonjour mpmp93,

Merci pour tous les commentaires.

Je n'utilise pas un éditeur HTML mais Web Builder 7 ( http://www.wysiwygwebbuilder.com ).

Je n'ai que peu de connaissances en CSS et HTML, ce qui explique le côté "spaghetti" du code. Je comptais donc approfondir cela et voir également ce que permet le logiciel.

Pour ma gouverne, quelles sont les répercussions globales ? Temps de chargement accru, erreurs par les robots d'indexation ?
Merci d'éclairer ma lanterne, je ne suis pas allé encore si loin dans la recherche d'optimisation, et c'est donc le but de mon post. ;)

Autrement, au niveau des fonctionnalités, de la mise en page ou autre, avez-vous vu des choses critiques ou des points d'amélioration peut-être ?

Merci bcp en tout cas !

mpmp93 Messages postés 6648 Date d'inscription mercredi 13 avril 2011 Statut Membre Dernière intervention 28 septembre 2015 1 339
5 août 2011 à 14:40

Bonjour,

Le problème du code spaghetti:
- code trop important par rapport au contenu,
- pages plus longues à charger...

En général, quand les visiteurs ont l'ADSL, ça n'a pas de répercussions évidentes...

Par contre, en RTC (ligne tel classique avec modem 56K.... si, si, ça existe encore...), une page chargée va lagguer...

D'autre part, les tels mobiles et tablettes qui se connectent en 3G ont un quota limité en volume, en général 1GO en débit descendant par mois... Au-delà, les conditions d'accès changent... De plus, la 3G est loin d'être aussi rapide que l'ADSL. Par exemple, votre page d'accueil pèse 25k, ec qui fait 26 blocs de 1K à transmettre, hors css, js, images et fonds graphiques. Avec un code HTML optimisé, on peut descendre de 25% à 50%.... C'est parfois de 0,5 secondes à 2 secondes que le visiteur en 3G va gagner sur le temps de chargement... Des études très sérieuses faites par de grands portails (Amazon par exemple), démontrent que perdre 1 seconde fait diminuer les ventes de 10%!

Donc, une page doit être 'light' coté code, peu chargée graphiquement, utiliser la compression au départ du serveur. Exemple de code pour la compression au départ du serveur:
http://html5.immo-scope.com/index.php?page=general/reduireLaBandePassanteDesPages

Rien que cette ligne peut diviser la bande passante par deux!

Notez que le site que vous visitez est en HTML5. je vous invite à regarder le code source. Juste pour l'en-tête:

<body>
    <header>
    <h1>HTML5 / CSS 2.x/3 / PHP / MySQL ...</h1>
        <nav>
          <a href="index.php?page=accueil">retour page d'accueil</a>
      </nav>
    </header>...suite du code HTML5....

Dans ce header vous avez l'image de fond, la taille et le positionnement des titres et du menu. Notez avec attention que le code extrait ne fait appel à aucun id ou class; Tout tient dans le css...

Ce genre d'optimisation extrême n'est malheureusement proposé par quasiment aucun composeur de page web genre Web Builder et consors...

Note annexe concernant votre barre de menu sur votre site: vous avez une image par option. Le problème est que les moteurs de recherche ne comprennent pas le texte dans les images. Il faut avoir une image sans texte et mettre le texte dans l'image. Un exemple de menu qui fonctionne ainsi:
http://vergel-authenac.fr/

Le code HTML de la barre de menu:

<nav>
    <a href="index.php?page=contact" title="contact" data-page="contact">Contact</a>
    <a href="index.php?page=liens" title="liens" data-page="liens" class="active">Liens</a>
    <a href="index.php?page=situation" title="situation" data-page="situation">Situation</a>
    <a href="index.php?page=historique" title="Historique" data-page="historique">Historique</a>
    <a href="index.php?page=accueil" title="Accueil" data-page="accueil">Accueil</a>
</nav>

C'est toujours du HTML5. Il n'y a qu'une seule ligne contenant une classe css class="active"

Le fond de chaque onglet est une image comme pour votre site, sauf que ici c'est la même image pour les onglets standards, et une image spécifique pour l'onglet actif. Ce menu est mutualisé dans un script annexe chargé par include. Tout le mécanisme est expliqué ici:
http://html5.immo-scope.com/index.php?page=html5/menuMutualiseAvecSimpleXml

Ce menu mutualisé utilise un pseudo-attribut data- qui apparaît en HTML5 et qui est exploité par PHP au travers de la librairie simpleXml.

A+

SweetRiver Messages postés 102 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 22 novembre 2016 6
5 août 2011 à 14:51

Hé ben, un sacré merci mpmp93, les explications sont claires et très intéressantes.

@+

magicshark Messages postés 402 Date d'inscription mardi 27 juillet 2010 Statut Membre Dernière intervention 6 mai 2014 13
5 août 2011 à 15:07

juste pour ma culture personnelle et général :p es ce qu'il vaut mieux coder en xHTML ou HTML ?

Réponse 2 / 5

magicshark Messages postés 402 Date d'inscription mardi 27 juillet 2010 Statut Membre Dernière intervention 6 mai 2014 13
5 août 2011 à 07:49

j'ai un petit peu regardé le code source qu'affiche mon nav. et quelque chose ma sauté au yeux, le nombre impressionnant de balise style et script que tu ouvres puis ferme ... apres tes images de fond ne devraient pas être des img (balise html) mais dans le css background-image:url('......');
sa te permet de faire des image de 1 px de largeur et de les répeter. ça fait donc des images moins lourdes a charger.
j'aime pas trop ton menu en haut en faite je le trouve bien sauf c'est petit trou entre s'il n'était pas là tu aurai jolie petit bandeau sympathique apres mis à part ça je le trouve bien, jolie ... donc même si j'ai un peu critiquer .. sympa

Réponse 3 / 5

SweetRiver Messages postés 102 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 22 novembre 2016 6
5 août 2011 à 11:52

Bonjour Magicshark,

Merci pour ce retour très intéressant.

Je vais voir tout cela...

La critique constructive, rien de mieux, alors encore merci !

Bonne journée

Réponse 4 / 5

magicshark Messages postés 402 Date d'inscription mardi 27 juillet 2010 Statut Membre Dernière intervention 6 mai 2014 13
5 août 2011 à 11:54

je plussoi

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

SweetRiver Messages postés 102 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 22 novembre 2016 6
5 août 2011 à 13:38

@magicshark

J'ai suivi ton conseil pour la barre de menu, le résultat me parait plus sympa en effet.

http://www.soslignes-ecrivain-public.fr/

Discussions similaires

C'est quoi le site qui remplace coco chat

Colis en cours de transport vers votre site de livraison ?

adele