Shrinker le code permet-il d'alléger les pages ?

Bonjour,

Je suis confronter des obligations de réduction drastique du poid de mes pages.

Mais il est difficile de réduire du code Xhtml. Le fait de le shrinker (entendez par là de tout remettre à la ligne et supprimer au maximum les espaces dans le code) permet-il réellement de gagner quelque chose ?

Samuel Berg a écrit :
permet-il réellement de gagner quelque chose ?

Oui : tu gagnes beaucoup de difficulté à comprendre, à relire, à modifier et à remettre à jour ton code
Plus sérieusement, l'intérêt est quasi nul si on le compare à ce que tu peux gagner par exemple en allégant le poids de tes images.

Exemple : en supprimant une toute petite image (3ko) de la page, tu gagnes souvent autant que le poids de la page en entier (un code HTML pèse entre 3 et 10ko en moyenne)

Bonjour,
C'est vrai que quand on voir certaines souces, présentées sur une ligne, ça fait pas très lisible !

Pour ceux qui ont de gros problèmes de poids et un serveur solide, il y a moyen de compresser les pages pour les décompresser sur le navigateur du visiteur (réduction de poids de 50 % environ).
Cela demande un serveur solide car je crois que la compression de page à la volée le sollicite de manière importante, mais je n'en sait pas plus.

Hum, je vois.

Donc il me reste à :

- optimiser à bloc mes images en travaillant à la couleur
- optimiser mon CSS à la recherche des rappels inutiles (cascades)
- supprimer les commentaires et les sauts de paragraphes inutiles dans le code.

Je suis actuellement à 105 Ko pour la page d'accueil et je n'ai pas encore rajouté les bandeaux de pub !

105 ko ne me paraît pas énorme. Quel serait le poids final, avec les bandeaux ?

a écrit :
optimiser mon CSS à la recherche des rappels inutiles (cascades)

Oui, mais ça ne changera pas le poids de la page. Le fichier CSS externe est - normalement - mis en mémoire cache des navigateurs, ce qui permet un affichage plus rapide avec une feuille de style externe plutôt que liée.

a écrit :
supprimer les commentaires et les sauts de paragraphes inutiles dans le code.

Oui.
Ici, on peut supprimer du code en travaillant la partie CSS :

[#orange]Un exemple :[/#]

[#orange]CSS[/#]
.untelle {
   margin: 5px 15px;
   color: #000;
   background-color: #fff;
   }

[#orange]BALISAGE[/#]
<div id="machin">
   <p [#red]class="untelle"[/#]>bla bla bla bla bla bla</p>
</div>

[#orange]Un exemple qui allège le code HTML :[/#]

[#orange]CSS[/#]
#machin p{
   margin: 5px 15px;
   color: #000;
   background-color: #fff;
   }

[#orange]BALISAGE[/#]
<div id="machin">
   <p>bla bla bla bla bla bla</p>
</div>

En procédant ainsi, on peut réduire la code utilisé dans le balisage ; même si ça surcharge un peu la partie CSS, c'est moins grave car une feuille de style externe n'est chargée qu'une fois.
Modifié par (21 Apr 2006 - 11:15)

Un truc un peu curieux qui m'a traversé l'esprit récemment.

On pourrait mettre les commentaire concercernant le html dans des balises php et en commentaire php donc.

soit,

au lieu de :

<!-- commentaire -->

on aurait :

<?php
/* Commentaire */
?>

n'étant pas interprétée, la chaine de caractère du commentaire n'est pas envoyée à l'utilisateur et ne compte plus dans le poids à charger.

Evidemment quantitativement c'est des broutilles.

Je trouve cette idée bien sympa pour les sites devant maigrir quelque peu et riches en commentaire divers. Même si ça semble dérisoire, ça aide certainement -combiné à d'autres solutions.

Étant donné que ça supprime les commentaires du code source, ils ne sont plus visibles pour quelqu'un voulant examiner le code d'un site.
Si on se préoccupe de ce cas de figure, il faudrait éviter d'employer cette méthode sur certains commentaires utiles, du type "<!-- fermeture du div#machin -->", qui peuvent aider à la lisibilité du code.
Modifié par (21 Apr 2006 - 12:54)

Approuvé, je n'aime pas trop non plus l'idée que quelqu'un parcours mon code avec toutes les aides utiles et commentaires...

Samuel Berg a écrit :
Je suis actuellement à 105 Ko pour la page d'accueil

Juste pour le code HTML ?
C'est monstrueux en effet

hummmmmmmmm !

Et à votre avis, côté serveur, multiplié par le nombre de site sur un mutualisé, ça ne risque pas de venir encombrer un peu inutilement le parser php ?

neko a écrit :
ils ne sont plus visibles pour quelqu'un voulant examiner le code d'un site.

Oui les commentaires ne sont plus visibles à partir d'un navigateur mais seulement à l'ouverture du fichier en mode texte.

Comme je l'ai dit c'est juste une idée un peu curieuse qui m'a traversé l'esprit.
Modifié par clb56 (21 Apr 2006 - 13:02)

Heuuu.... Quand j'ai dis ça :

a écrit :
105 ko ne me paraît pas énorme. Quel serait le poids final, avec les bandeaux ?

J'imaginais que c'était dû à des images.
C'est vrai que si ce n'est que du code HTML, c'est... lourd. Dans ce cas, l'idée de compresser les pages...

Menon, sots !

Le xhtml ne fait que 38 Ko...

Bonjour,

Pour revenir sur le fait de compacter les pages à la volée, notez que c'est très facile en php :

<?php ob_start("ob_gzhandler"); ?>
...... ton code html .....
<?php ob_end_flush(); ?>

Samuel Berg a écrit :
Menon, sots !

Le xhtml ne fait que 38 Ko...

Bref c'est bien ce que je dis : ça ne te sert à rien d'essayer de compacter le code de ta page (38ko) alors qu'il y'a des d'éléments bien plus lourds (>60ko) et plus facile à compacter, comme les images.
Mais je ne suis qu'un sot...
Modifié par Raphael (21 Apr 2006 - 14:13)

Bon après un travail hyper minutieux qui m'a demandé la journée voilà le résultat des courses :

85 Ko soit une optimisation de 18Ko ce qui n'est pas mal du tout !
Pour arriver à ce résultat j'ai du :

- Optimiser mes images et abandonner le png8 (le gif et le jpg sont dans les 3/4 des cas plus performants en gain de poids)

J'ai par ailleurs dû gagner quelque kilo-octets en optimisant mon modèle et mon CSS.
Mais je suis très déçu ! La page va remonter à 10Ko dés que je vais mettre la pub, je parle pas des développements futurs !

Sniff !

A votre avis, ce genre de code peut-il être considéré par les moteurs comme du forcing de référencement et qu'ils en viennent à me blacklister ? En gros la balise title est rempli par le titre... normalement c'est bon pour l'accessibilité...

 <a href="rubrique.php3?id_rubrique=63" title="Réglementation professionnelle et juridique Billetterie">Billetterie</a><br />
                  </li>
                  <li>

                    <a href="rubrique.php3?id_rubrique=64" title="Réglementation professionnelle et juridique Collectivités">Collectivités</a><br />
                  </li>
                  <li>
                    <a href="rubrique.php3?id_rubrique=65" title="Réglementation professionnelle et juridique Contrats du spectacle _">Contrats du spectacle _</a><br />
                  </li>
                  <li>
                    <a href="rubrique.php3?id_rubrique=68" title="Réglementation professionnelle et juridique Droit à l&rsquo;image">Droit à l&rsquo;image</a><br />

                  </li>
                  <li>
                    <a href="rubrique.php3?id_rubrique=69" title="Réglementation professionnelle et juridique Droits d&rsquo;auteur et droits voisins">Droits d&rsquo;auteur et droits voisins</a><br />
                  </li>
                  <li>
                    <a href="rubrique.php3?id_rubrique=71" title="Réglementation professionnelle et juridique Licences">Licences</a><br />
                  </li>

                  <li>
                    <a href="rubrique.php3?id_rubrique=73" title="Réglementation professionnelle et juridique Responsabilité">Responsabilité</a><br />
                  </li>
                  <li>
                    <a href="rubrique.php3?id_rubrique=74" title="Réglementation professionnelle et juridique S.C.I.C.">S.C.I.C.</a><br />
                  </li>

Modifié par Raphael (21 Apr 2006 - 16:01)

Si tu est toujours à quelques octets près, tu peux peut-être effacer les indentations ... ça mange pas de painet il paraît que le gain peut-être substanciel surtout si les indentations étaient faites au moyen d'espaces au lieu des caractères de tabulation.

Je pense aussi car c'est un menu déroulant et la somme des titles est énormes... par contre je me demandais pour le référencement.

Si c'est bon je laisse si c'est pas bon j'enlève.

Sans les titres je pense de 38,7 à 34,2....
Modifié par Samuel Berg (21 Apr 2006 - 16:45)

Samuel Berg a écrit :

- Optimiser mes images et abandonner le png8 (le gif et le jpg sont dans les 3/4 des cas plus performants en gain de poids)

Attention ! Si tu compresses avec photoshop la compression du PNG n'est pas optimale. Mais tu peux utiliser SUPERPNG plugin pour photoshop qui donne de bons résultats.

J'ai abandonné le gif (sauf images animées) pour le PNG. Les rapports qualité/poids sont souvent supérieur au gif.

EricLB a écrit :

J'ai abandonné le gif (sauf images animées) pour le PNG. Les rapports qualité/poids sont souvent supérieur au gif.

Tout à fait exact