DSC_0460.jpg ESC_0133.jpg DSC_0462.jpg

 i need more coffee

Atteint depuis mon plus jeune âge d'hippopotomonstrosesquippedaliophobie (cultivez vous ça ne fera pas de mal) j'ai décidé de faire un blog sur ma maladie (be feeeaar..).
Blague à part c'est un blog totalement axé génie logiciel que vous trouverez ici. Du PHP, du J2EE, et évidement toutes les technologies qui leur sont liées.

Have fun !

Trucs et Astuce pour accélérer CmsMadeSimple

13 décembre 2013Posté par : Kevin Danezis dans CmsMadeSimple

Cela fait bien longtemps que je cherche à prendre le temps pour écrire cet article, voici donc la première édition 2013 de mon propre guide de trucs et astuces pour accélérer les performances de vos installations CmsMadeSimple.Soyons clair, toutes les modifications et customisations que je vous propose ci dessous ne sont pas à la portée de tout le monde. Certaines modifications nécessitent ainsi un accès à la machine, accès que la plupart des hébergeurs vous refuseront de facto. Néamoins ces astuces sont au moins à tester chez vous, quitte à revenir en arrière après test.

De manière générale : Je ne vous proposerais ici que des modifications pour CmsMadeSimple, même si certains conseils sont évidement valables pour toutes les applications web. Autre chose : je me refuse volontairement de proposer une modification qui entrainerait une édition du code source de CmsMadeSimple. Inutile de venir ajouter telle ou telle astuce de "hack" de fichier source, je suis simplement contre ce genre de pratique qui génère plus de problème qu'il n'apporte de solution.

Pour information : voici quelques sources et url très intéressantes qui m'ont aidées à réaliser cette édition 2013.

  • http://gtmetrix.com/
  • http://developer.yahoo.com/yslow/
  • https://developers.google.com/speed/pagespeed/?hl=fr
  • http://www.i-do-this.com/blog/43/Put-Your-CMS-Made-Simple-Site-on-Steroids

Modifications dans CmsMadeSimple

Ces modifications ne nécessitent pas de travaux impossible à mettre en place.

I - Activez le cache des menus

Les dernières versions de CmsMadeSimple proposent un cache activable pour le menu ce qui réduit drastiquement le nombre de traitement (dont sql) à réaliser pour générer le menu de votre site. Si il y a une seule opération à réaliser ici : c'est celle là ! surtout si vous êtes en mutualisé chez un hébergeur qui, bien souvent, possède des lenteurs justement du côté du SQL.

Dans l'admin de cmsmadesimple, onglet disposition, option menu, cliquez sur chaque coche afin d'activer la mise en cache.

II - Réduisez la quantité de données embarqué par le menu

Toujours dans la même veine, et sous condition que vous n'utilisez pas les propriétés de vos pages : extra1, image, thumbnail, etc... Alors vous pouvez remplacer votre code d'appel dans vos gabarits :

{Menu [...] }

par

{Menu [...] loadprops="0"}

Ce qui aura pour effet de réduire un peu plus la charge portée par MySql.

III - Abusez du strip

Tout le monde ne le sait pas forcement mais cmsmadesimple embarque de facto certaines fonctionnalités très intéressantes. les fonctions {strip}{/strip} de smarty permettent par exemple de supprimer les espaces dans le code généré. C'est très intéressant de placer ce code en début et fin des gabarits de votre menu ou des gabarits de listes d'article, ainsi votre code reste lisible côté administration et gagne en poids côté code généré ! c'est d'ailleurs très impressionnant de voir l'avant-après de ces manipulations.

Pour le CSS il existe la même chose : [[strip]][[/strip]] qui fait exactement la même chose et permet de réduire significativement le poids de vos feuilles de style générées. A tester absolument !

Et pour Javascript ? La solution passe par l'installation du module CgExtension (php 5.3 minimum) ce qui vous donnera droit à la balise {jsmin}{/jsmin}

IV - Désactivez les modules inutiles

Un module n'est pas utilisé ? vous n'envoyez par exemple jamais d'email ? pourquoi laisser CmsMailer actif dans ce cas ? Désactiver les modules vous ferra gagner du temps.

Modifications dans vos propres fichiers uploadés

I - Réduisez le poids des images dans le contenu

Pré-requis : nécessite le module CgSmartImage (php 5.3 minimum)

Je considèrerais ici uniquement les images qui sont présentes dans votre contenu (article, texte de page) et non les images qui servent à votre design. Il est très fréquent qu'un utilisateur upload une belle image de 3000 pixels de large alors même que la largeur du contenu ne peut dépasser les 600 pixels. Une astuce très propre consiste à remplacer un peu de code.

Si c'est du contenu de page, dans votre gabarit remplacez :

Si c'est du contenu d'article (module News), dans le gabarit de détail d'article, remplacez :

[...]

{if $entry->summary}

    {eval var=$entry->summary}

{/if}

{if $entry->content}

    {eval var=$entry->content}

{/if}

[...]

par

{cgsi_convert filter_resize='w,600'}

[...]

{if $entry->summary}

    {eval var=$entry->summary}

{/if}

{if $entry->content}

    {eval var=$entry->content}

{/if}

[...]

{/cgsi_convert}

Il vous restera dans tous les cas lors de l'ajout d'une image, même très large, de changer la largeur proposée par 600 et de vider le champs hauteur qui sera recalculé automatiquement par le système pour conserver le ratio. Évidement il est inutile de le faire si l'image est déjà inférieure à 600 pixels dans notre cas présent.

Le résultat sera la génération d'une miniature de 600px de large qui remplacera l'habituelle grosse image bien lourde, vous économisant ainsi un poids conséquent sur la bande passante.

D'autres solutions du même type existent, vous pouvez lire quelques échanges sur le sujet : http://www.cmsmadesimple.fr/forum/viewtopic.php?id=5049

II : Réduisez le poids des images dans votre design

Autre point portant sur les images : pensez à réduire de deux façons l'impact des images dans la charte graphique de votre site :

Réduisez leur poids en choisissant l'extension avec soin.

On choisira du jpg pour une photo, du gif pour une petite icône (10 * 10 pixels), pour une image avec très peu de couleurs (exemple : noir ou blanc et rien d'autre). Enfin on choisira du png pour le reste. N'hésitez pas à jongler sur les différentes extensions afin de trouver celle qui vous offre la meilleure qualité pour le poids le plus petit.

Réduisez leur poids en adaptant leur dimensions.

Ce que je vois beaucoup c'est écrire <img width='80' src='image.jpg'/> pour une image qui est en réalité plus grande que les 80px annoncés. Cela ne réduit en rien le poids transféré, car c'est le navigateur côté client qui redimensionnera l'énorme image... le mal est donc déjà fait. Il est donc important pour une image présenté sous 80px de s'assurer qu'elle ne fasse que 80px de large et pas plus.

Réduisez leur poids en les compressant

Grâce à des logiciels spécialisés (Photoshop n'est pas un logiciel très bon dans ce domaine). Ce système permet de gagner parfois jusqu'à 50% du poids d'une image ! Voici un site qui propose de réaliser en une fois le travail : http://www.smushit.com/ysmush.it/

Réduisez leur nombre en les combinant

Réduisez le nombre d'image à télécharger en utilisant la technique dite du "Sprite CSS" qui consiste à combiner les images du design en une seul et unique image (gain de temps à charger côté client) et à utiliser le CSS pour n'afficher qu'une portion de cette image là où vous le souhaitez dans le design. Voici par exemple pour mon propre site un exemple :

mix.jpg

Cette image contient en réalité 2 images utilisées différemment sur le blog. Dans ce cas le gain est moins dans le poids de l'image que dans la réduction du nombre de requête HTTP nécessaire pour rapatrier toutes les images côté client

Modifications dans votre config.php et .htaccess

Ces modifications vont nécessiter d'avoir accès par FTP pour modifier l'un / l'autre des fichiers. Si .htaccess n'existe pas : créez le.

I - Activez les pretty url

Ca n'accélère pas la vitesse pure de votre site mais ça aide au référencement alors pourquoi ne pas en profiter ? passez d'une url monsite.com/index?page=presentation-societe à quelque chose de plus propre : monsite.com/notre-societe ainsi :

config.php :

$config['url_rewriting'] = 'mod_rewrite';

$config['page_extension'] = '';

.htaccess :

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.+)$ index.php?page=$1 [QSA]

II - Activez le cache et la compression d'Apache

Ces blocs de codes sont à insérer dans votre .htaccess et surtout à tester les uns après les autres, en effet une erreur pourrait vite apparaitre si votre configuration Apache diffère fortement de la mienne. Néamoins le retrait du code fautif dans votre .htaccess résoudra tout vos soucis donc pas de panique !

Activons le cache navigateur pour les fichiers d'images et les fichiers plats CSS + JS

<ifmodule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg "access plus 1 year"

ExpiresByType image/jpeg "access plus 1 year"

ExpiresByType image/gif "access plus 1 year"

ExpiresByType image/png "access plus 1 year"

ExpiresByType text/css "access plus 1 month"

ExpiresByType application/pdf "access plus 1 month"

ExpiresByType text/x-javascript "access plus 1 month"

ExpiresByType application/x-shockwave-flash "access plus 1 month"

ExpiresByType image/x-icon "access plus 1 year"

ExpiresDefault "access plus 2 days"

</ifmodule>

Désactivons les Etag de nos serveurs (attention à tester, ne fonctionnera pas par exemple sur une installation WAMP)

#Turn Off ETag

Header unset ETag

FileETag None

Les fichiers plats n'ont pas besoin de cookies : on les vire !

#Suppression si possible des cookies pour les fichiers plats

<IfModule mod_headers.c>

        <FilesMatch "\\.(js|css|jpg|png|jpeg|gif)$">

                RequestHeader unset Cookie

                Header unset Set-Cookie

                Header set Cache-Control "max-age=86400"

        </FilesMatch>

</IfModule>

Compressons les fichiers php/html/css et js afin de minimiser le cout de la bande passante

<filesmatch ".(php|html|css|js)$">

SetOutputFilter DEFLATE

</filesmatch>

Modification de vos DNS

Une petite astuce que j'utilise beaucoup pour contourner les limitations naturelles des navigateurs qui n'autorisent que 10 requêtes HTTP en simultanées par sous-domaine. Déjà comprenez ce qu'implique 10 requêtes HTTP : Si j'ai 1 page contenant 3 fichiers CSS, 2 fichiers javascript et 15 images de toutes sortes, mon navigateurs va effectuer 1+3+2+15 = 21 requêtes HTTP, et croyez moi quand je vous dis que ce genre de cas de figure est un minimum de nos jours. La limitation des 10 requêtes va imposer à mon navigateur de télécharger dans l'ordre d'arrivée ma page (code HTML) puis 9 autres élements (image ou css ou js, j'ai dis selon l'ordre d'arrivée). Ce qui signifie que rien d'autre ne sera téléchargé tant que l'une de ces 10 requêtes n'est par terminée. Si cette limitation avait un sens du temps des modems 56k, c'est un peu crétin de nos jours que de brider les possibilités des navigateurs, la solution passe donc dans le fait que la limite est liée au sous domaine (www par défaut) et non au domaine entier (furie.be pour moi)

Créez vous un nouveau sous domaine : Appelez le par exemple "static" ou simplement "s" et faites le pointer sur votre serveur.

Configurez votre serveur : votre site http://s.furie.be doit amener sur la page d'accueil de votre cms tout comme http://www.furie.be le fait, il faut donc réaliser un alias dans Apache.

Créez un plugin dans CmsMadeSimple : créez le fichier /plugins/function.cdn_url.php

<?php

function smarty_function_cdn_url($params, &$smarty)

{

        $config = cmsms()->GetConfig();

        if(isset($config['cdn_url']))

                return $config['cdn_url'];

        else

                return $config['root_url'];

}



function smarty_cms_help_function_cdn_url() {

  echo lang('help_function_cdn_url');

}



function smarty_cms_about_function_cdn_url() {

        ?>

        <p>Author: Bess : www.furie.be</p>

        <?php

}

?>

Modifiez votre fichier config.php : ajoutez la ligne suivante :

$config['cdn_url'] = 'http://static.cmsmadesimple.fr';

Modifiez vos gabarits : remplacez dans les feuilles de styles et partout ailleurs l'habituel [[root_url]] et {root_url} par leur nouvel équivalant [[cdn_url]] et {cdn_url}.

Vous avez maintenant deux adresses qui sont utilisées pour accéder à vos images, vos feuilles de style et fichiers javascript ce qui théoriquement trompera le navigateur qui lancera 20 requêtes HTTP à la fois :)

comments powered by Disqus