[heriquet]

Salut la compagnie !

Alors ce site n'est pas tout nouveau, je l'avais réalisé il y a 18 mois, mais je viens de repasser dessus afin de mettre à jour CMSMS et tous les modules, ainsi que les scripts JavaScript. J'en ai profité pour mettre en oeuvre les dernières techniques que j'ai apprises entre-temps et "corriger" les points négatifs relevés par GTMetrix (encore un grand merci à Bess pour m'avoir fait découvrir cet outil indispensable !).

Il s'agit de http://www.afortech.be/.

Le rapport GTMetrix se trouve ici.

Concrètement, il s'agit d'un CMS tout simple, en une seule langue, et qui contient des galeries Picasa. Le design a été créé par mon associé.

Rien de bien sophistiqué donc.

Je profite que la parole m'est donnée pour poser 2-3 questions d'optimisation.

1) J'utilise le tag [[strip]] dans l'unique fichier CSS (combiné) et malgré tout j'ai une mauvaise note de gtmetrix, qui me signale pouvoir gagner 60% de taille de fichier. Est-ce que d'autres subissent ce phénomène ?

2) Y a-t-il un moyen de minifier le HTML dans CMSMS ?

3) Pour la recommandation "Leverage browser caching", j'ai une remarque à propos de Google Analytics, qui n'est en cache que 12h. Peut-on faire quelque chose pour éviter cela ?

Pour terminer, ce n'est pas une question, mais pour la recommandation "Defer parsing of JavaScript", j'ai testé une méthode suggérée sur cette page, et qui propose ceci :

Code :

[== JavaScript ==]
(function() {
      function getScript(url,success){
        var script=document.createElement('script');
        script.src=url;
        var head=document.getElementsByTagName('head')[0],
            done=false;
        script.onload=script.onreadystatechange = function(){
          if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
            done=true;
            success();
            script.onload = script.onreadystatechange = null;
            head.removeChild(script);
          }
        };
        head.appendChild(script);
      }
        getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js',function(){
            // YOUR CODE GOES HERE AND IS EXECUTED AFTER JQUERY LOADS
        });
    })();

Je l'ai testé avec succès, mais avez-vous une meilleure méthode pour différer les scripts ?

Merci et bonne soirée !

Heriquet

[spamor]

Salut !
Propre et joli ton site !


>>> 1) J'utilise le tag [[strip]] dans l'unique fichier CSS (combiné) et malgré tout j'ai une mauvaise note de gtmetrix, qui me signale pouvoir gagner 60% de taille de fichier. Est-ce que d'autres subissent ce phénomène ?

Oui, souvent, car certains styles sont peut-être utilisés ailleurs dans le site. Mais à moins de créer un css global, et un css par page, puis tout combiner, je ne vois pas comment y remédier. Le souci n'est pas vraiment important cela dit.
Tu peux tout de même gagner en poids :
a/ en remplaçant div#header h1 a par #header h1 a ; idem pour les autres sélecteurs
b/ en supprimant les commentaires de tes css

Encore une fois, ça n'est vraiment pas grave, tu es largement dans le vert !

>>> 2) Y a-t-il un moyen de minifier le HTML dans CMSMS ?
Je suppose, peut-être en "strippant" directement dans le gabarit ? Tu as fait le test ? (attention, pourrait entraîner des erreurs au niveau des appels javascript, j'ai déjà eu le souci mais je ne sais plus quelle en était la cause, peut-être à cause des mentions CDATA ou des commentaires conditionnels mal interprétés... me souviens pas)

>>> 3) Pour la recommandation "Leverage browser caching", j'ai une remarque à propos de Google Analytics, qui n'est en cache que 12h. Peut-on faire quelque chose pour éviter cela ?
Essaie de spécifier, dans ton fichier .htaccess :

Code :

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 week"
</IfModule>

et vois si Google outrepasse ce délai ?

En tout cas, beaux efforts d'optimisation !

2 remarques lors du zoom sur une photo :
- tu peux traduire "Image 1 of 4" par "Image 1 sur 4" ; cela se passe dans le fichier .js du module Gallery
- le bouton "close" n'apparaît pas, j'ai une icône d'image manquante.

1 remarque générale : les pages "en construction" (en même temps, normal pour un maçon )
Mieux vaut les éviter, dépêche-toi de les alimenter !!!

Bon courage !

[Jean le Chauve]

Pour le strip : mode d'emploi

[nelex2300]

J'aime beaucoup très atypique

[heriquet]

Merci Nelex. Pour les autres remarques, je garde cela sous le coude car je n'ai malheureusement pas le temps pour le moment. Mais c'est très intéressant !

[jrz]

Bonjour,

D'une manière générale optimiser le css revient à une écriture en ligne, généralement quand on écrit du css on a l'habitude d'écrire du code de manière structurée ce qui facilite la lecture ou la relecture :

[BOF]
/* code css structuré*/

#container {
background: transparent;
position: relative;
width: 960px;
margin: 0 auto;
overflow: hidden;
}
#gauche {
width: 110px;
float: left;
min-height: 600px;
}
#content {
width: 960px;
float: left;
background: #fff url('images/logo.png') no-repeat bottom right;
}
[EOF]


/* version optimisées tous les commentaires sont supprimés aucune ligne vide*/


[BOF]
#container{background:transparent;position:relative;width:960px;margin:0 auto;overflow:hidden;}
#gauche{width:110px;float:left;min-height:600px;}
#content{width:960px;float:left;background:#fff url('images/logo.png') no-repeat bottom right;}
[EOF]


La le css est beaucoup plus difficile a lire, n'importe quel bon éditeur de texte est capable de passer d'une version structurée à une version en ligne

Il faut aussi prendre l'habitude d'écrire les attributs de manière simplifier


Cordialement

Max

[bess]

@jrz : inutile dans cmsms : tu écrit ton CSS dans les feuilles de style et tu encadre le tout par [[strip]][[/strip]] il ferra le boulot à ta place et tu perds rien de la lisibilité puisque le code source reste identique.