avr 27

Quelques outils intéressants

Nitrogento

Eh oui, il arrive…

Après 6 mois développement et deux de Beta tests, des semaines de création de sites et de traduction de documentations, de benchmarks et de tests, voici qu’approche la sortie de Nitrogento !

Cette toute nouvelle extension pour Magento va vous permettre d’obtenir un « All in one » d’optimisation :

  • Création du Sprite et patch du thème
  • Ventilation des ressources statiques sur les CDN
  • Concaténation, Minify et Compression des JS & CSS et du HTML
  • Block caching des blocs qui ne sont pas déjà dans le cache Magento
  • Custom Caching, mettez votre propres blocs « maison » dans le système de Cache Magento
  • Full Page Cache, ehhhhh oui, même pour la CE !

Autant dire que ca va légèrement dynamiser votre site… De plus, les fameux blocs maisons (custom) qui ne sont pas gérés actuellement par le cache de Magento pourront y être intégrés grâce aux Hooks que crée Nitrogento pour vous.

On va passer de Moogento à Maaaaagento, moi je vous le dis !

Date prévue de sortie : le 3 mai 2011 !

Jetprofiler

Cet outil est une vraie petite merveille. Un bon monitoring de son Mysql, rien de tel.

Comme expliqué dans mon précédent Post, le problème de mysql c’est qu’on ne peut pas le faire grossir proprement. En fait au dela de 4 cores, c’est inutile voir nuisible. Donc on multiplie les serveurs. Même si Magento ne tape pas très intensément sur la DB (en général) c’est parfois un des points de contention.

Une implémentation particulièrement complexe au niveau SQL peut aussi provoquer des surcharges ou une Cron un peu gourmande. Bilan, le Mysql rame et on se demande pourquoi.

Avec Jetprofiler, vous pourrez rapidement trouver plus d’information, qualifier le problème en quelques clics.

Pagespeed Online (by Google )

Alors ce n’est pas exactement nouveau, Google Pagespeed, on l’aime à la maison mais là, c’est le petit plus à la Google.

Après le plugin pour Firefox, le GT Metrix, on a maintenant un chouette site dédié chez Google à Pagepseed. Rien de révolutionnaire mais c’est très pratique, notamment pour les gens comme moi qui ne sont pas fan de Firefox, car c’est en ligne. Mais en plus, c’est directement linké au niveau de la KB de Google et CA, c’est sympa.

On ne sait pas ce que c’est que le Defer Javacript blablabla ? Eh ben on clic sur le lien « learn more » et c’est expliqué, merci Google. Allez, un petit exemple :

http://pagespeed.googlelabs.com/#url=www.nbs-system.com

Mytop (mysqltop)

Aussi simple que possible, Mytop, c’est comme le top d’unix mais pour Mysql.

Voila, tout est dit, un petit outil CLI (Command Line) pour permettre de monitorer en un clin d’oeil son Mysql. Ca ne va pas faire le même boulot que Jetprofiler mais c’est light et c’est déjà pas mal. http://jeremy.zawodny.com/mysql/mytop/

Innotop

Dans la série « top est notre ami », innotop, ca parle, ca parle… de Top pour innodb. XAPRB nous délivre son outil plus avancé que mytop, bien plus avancé même, mais c’est un bonheur car pour les amoureux de la command line, il y a tout ou presque.

http://www.xaprb.com/blog/2006/07/02/innotop-mysql-innodb-monitor/

Atop

Désolé, ca doit être le chocolat de paques, je fais une petite fixation sur les top en ce moment. Atop, c’est comme top, mais en plus sympa. Les process sont mieux triés, le package est disponible en debian stable, alors comment parler de trucs qui font des top sans parler d’atop ?

écrit par Philippe Humeau \\ tags: , , , , ,

avr 22

Quelques optimisations


A la suite d’Imagine US et des technical tracks ainsi que de plusieurs lectures récentes, je vous propose quelques informations ou techniques que j’ai trouvé intéressantes.

J’allais également oublier, les slides de ma conférence à Imagine sont disponibles ici et la vidéo a été mise en ligne ici.

Zend asynchronous

Lors des tech tracks d’Imagine, j’ai aussi pu voir le passionnant papier de Kevin de Zend. Le principe est de faire des requêtes qui seront servies de manière Asynchrone, ni plus ni moins qu’un Job manager en fait. actuellement je recommandais l’usage de Gearman pour la plupart de gestions de Queue mais quand on a pas besoin d’un fonctionnalité aussi avancé, Zend Asynchronous peut être une ressource à la fois simple et efficace.

Le papier de Kevin est disponible ici.

Mysql, ca ne se scale pas…

On commence de plus en plus a avoir des sites énormes en hébergement. Que ce soit du Ecommerce ou des médias, un gros site va très clairement faire chauffer la base de données. Le soucis avec Mysql, largement reporté déjà mais visible entre autre dans ce thread sur le forum Mysql, c’est que InnoDB et MyISAM se scale très très mal.

Quand on a un serveur qui a plus de 4 processeurs (plus de 4 cores pour être précis), Mysql ne sait pas en tirer partie. Pire, c’est même parfois un handicape. Alors en attendant la version 5.4 qui nous promet une refonte massive de l’architecture multi thread de Mysql, on va devoir faire avec. En plus, depuis le rachat de Sun par Oracle et la politique mené par ce dernier, doublé du mouvement NoSQL, il n’est pas certain qu’on voit un jour cette version.

Pire, avec Oracle derrière, le principe de limitation de Mysql pourrait même faire les affaires du titan qui aurait un intérêt évident à ne pas corriger ce point afin de vendre de l’Oracle.

Alors il reste le moyen de chainer les serveurs à 4 cores… Master/Master/Master etc. Ou de séparer les Read et Write et on fait un Master / Slave. Mais rien de bien brillant pour des sites qui consomment de plus en plus de ressources.

La conception, encore et toujours

Shawan mon amour

On a eu un problème assez original il y a quelques semaines à NBS System. Un client a eu des soucis délirant de charge de sa base de données. Tout le monde s’est posé la question, Moooo gento ou problème plus technique ?

Une première réponse au problème a été une découverte (faite par la web agency), d’un soucis atypique… Quand on fait un mailing pour une vente privée ou des clients existants, il est possible de les authentifier automatiquement quand ils suivent le lien. C’est très confortable pour eux et plusieurs systèmes existent qui facilitent la vie des intégrateurs.

Oui mais…

Quand on fait ca sur une très large clientèle, selon la façon de le faire, cela peut avoir des incidences très sensibles. L’exemple ici c’est que la base de données se retrouvait à décoder des centaines de Shawan (Hash SHA1) à la secondes au moment du pic d’ouverture des mailings. Résultat, à chaque clic, la DB devait décoder le SHA1 et vérifier son authenticité et … ca la cassait en deux.

Ce travail doublé du travail normal de DB la mettait totalement à genoux. Une analyse des logs, des slow queries, des paramètres vitaux de serveurs et une collaboration entre l’infogérant (nous) et la web agency a permis de mettre un nom sur le problème et de le corriger. Vicieux celui-ci.

Conception de Home

Bien concevoir sa home reste une clef du succès d’un site. La charge imposé par la Home sur l’ensemble de la charge serveur dépasse souvent les 40%, il est donc important de concevoir de manière optimale  cette page qui est le premier accueil qu’un client reçoit.

Pleinnnnn de produits

Eh oui ma bonne dame, plus y’en a, mieux c’est.

Faux. Lisez ce qu’en penses mes amis les pros comme Capitaine Commerce, François Ziserman ou Catherine Barba, assommer les clients sous 200 produits en homepage, ca n’apporte rien sinon un client perdu. Et plus on charge de produits, plus on fait travailler la base de données et les CPU pour interpréter le PHP et plus… ca rame.

Donc on a des clients perdus sur un site qui rame. Êtes vous bien persuadé que c’est  ce que vous voulez ???
(Press Y to continue if you are sure)

Dynamique, non mieux, random !

Bien tiens… J’ai une ligne de conduite précise, je sais ce que je vend et à qui. Aucun doute à ce sujet, j’ai profiler ma clientèle alors pour optimiser mes ventes, je charge mes produits en random…

Alors je veux bien que dans certains cas cela puisse avoir, à l’occasion, du sens mais clairement pas en home et pas tout le temps. Amazon, notre maitre à tous, ils envoient pas des produits en random à leurs clients. Ce qui a boosté leurs ventes et surtout le panier moyen de chaque acheteurs, c’est tout l’inverse, c’est l’envoie de produits ciblés.

Alors charger dynamiquement oui, dans certain cas pour s’adapter au client mais en random… ?

Car oui, le random et le dynamique sont des ennemis des caches, ces fameux caches (reverse proxy, celui de votre system de e-commerce, memcached, le Full Page  Cache et dans une moindre mesure celui des processeurs et des opcode cache de PHP) sont assez allergiques au hasard.

Et le statique ?

Vous y avez pensé ? Une landing statique bien faite, qui a la calculer chaque nuit en Cron, ca peut faire la différence. Sincèrement, afficher moins et mieux pour fournir à tout le monde une expérience utilisateur plus fluide, efficace et rapide, c’est une stratégie payante.

Plus votre site est véloce, plus et mieux il vend, c’est plus que démontré.

Inline URI

Alors celui-ci de tricks, il est soooo sexy.

Il faudrait tester en live la chose et étudier si c’est rentable mais le principe est marrant. En gros, dans votre CSS, plutot que de mettre la référence à une image externe, vous allez mettre en place une  chaine de caractère encodée en base64 :

url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7)

Ca donne un texte certe un peu chargé mais… Le Gzip est là pour nous aider. En gros le CSS va grossir, certes mais en contrepartie on peut le compresser en mod_gzip ou mod_deflate et finalement on n’a qu’une légère augmentation. Par contre, on économise autant de GET HTTP, ce qui n’est pas négligeable.

A vue de nez, je pense qu’il est valable de le faire pour les petites images, icones ou petits thumbnails. Il est possible aussi de faire un Sprite bien sûr, mais cette  technique alternative peut aussi avoir ses cotés sympas. Je dois avouer que c’est tout neuf pour moi alors je n’ai pas penssé à tous les points qui pourraient profiter des ces Data URIs.

(Beaucoup) plus d’infos sur cette technique ici : http://css-tricks.com/data-uris/

écrit par Philippe Humeau \\ tags: , , , , ,

avr 19

Quelques études


En premier lieu, voici encore deux études qui nous montre tout l’intérêt d’optimiser son site et de charger toujours plus vite. Après les déclarations de Google, les études d’Amazon et d’autres, ce sont maintenant des études beaucoup plus directement orientées ROI qui voient le jour.

Une première étude de TRAC (reporté par alerte site) avec un business case « avant optimisation » et « après optimisation » montre des résultats spectaculaires sur le site de Supreme School Supply. Vous pourrez retrouver l’intégralité de l’article ici et les slides ici.

En passant le temps de chargement des pages de 4,5 secondes en moyenne à 2,5, les résultats ont été fulgurants :

  • 46 % de pages vues en plus
  • 40 % de temps passé en plus sur le site
  • 12 % de diminution du taux de rebond
  • 74% d’augmentation du panier moyen
  • 219% d’augmentation du CA

Encore plus complète, l’étude suivante est aussi très suprenante. (Vous pourrez la retrouver ici)

L’étude est basée sur des chiffre provenant de Google analytics et Sitecatalyst. Au final cela donne des chiffres très pertinents, l’un m’a marqué :

  • Les 42,6% des visites qui ont été servies le plus rapidement ont réalisées 75% des ventes

Sur l’autre analyse menée avec Google Analytics et des custom variables, ils ont pu mettre en parallèle la latence (le temps de chargement) et la quantité de business généré. Dans cette seconde étude, ils remarquent que 70% des revenus sont réalisés par les pages chargeant entre 0 et 3 secondes en moyenne.

Le défaut de l’étude est sa faible profondeur en terme de nombre de visiteurs / tests mais le principe de fond est bon, il serait très intéressant de pousser l’expérience sur un grand site, sur le long terme pour avoir une étude très complète.

Donc plus que les résultats qui peuvent être imprécis sur une faible volumétrie, c’est la méthode qui me semble excellente.

écrit par Philippe Humeau \\ tags: , ,

avr 14


teaser_bargento_v2_CS3 par nbs-system

écrit par Philippe Humeau \\ tags: , ,

avr 12

Bon, après maintes tentatives de faire des gros articles de synthèse, j’ai 20 brouillons et ca fait deux mois que je n’ai pas publié. Du coup, retour aux sources et aux bonnes pratiques, un petit article simple pour se remettre en jambes.

Firefox, on l’aime ou pas, mais on ne peut pas le quitter


Et personnellement, je suis de ceux qui n’aime pas. J’ai toujours trouvé ce browser lent, insupportable dans sa méthode de mise à jour et blindé de memory leaks. Bon après, il ya une position de principe et au bureau, on lance pas un troll par ci par là, on en a un élevage.

Alors forcément, les browsers et leurs capacités, c’est un sujet récurrent. J’utilise Opera comme navigateur pour certains aspects comme la légèreté, le groupement de tab, le cache hyper efficace, même en cas de restart du browser et les back qui évite de perdre un post au complet.

Chrome à la maison car il est rapide et agréable, simple comme on aime. et … Firefox, car je n’ai pas le choix. Le nombre et la qualité des extensions font de ce browser une plateforme professionnelle incontournable.

Depuis la version 4, c’est  un peu différent. Le navigateur s’est beaucoup amélioré, notamment en performances, ca devient presque un plaisir de bosser avec.

Les extensions, la force incontournable de Firefox


Et c’est bien le sujet de ce post. La capacité incroyable de Firefox de s’étendre. Alors maintenant qu’on vit de nouveau ensemble avec ce navigateur, parlons de ses extensions incontournables, selon moi.

SENSEO

Surveiller sa SEO dans une page précise en tapant une expression directement, c’est possible. Ca s’appelle SenSEO et c’est juste incontournable. Simple, efficace, on en rêvait, sensationnal SEO l’a fait.

Il analyse et fournit les conseil en une fois, c’est tellement beau…

FIREBUG

Forcément, si je n’avais droit qu’à une extension, je prendrai celle-ci. It’s the mother of all extensions ;) Ca permet de vérifier tout ce qui touche à une page web ou presque, des composants chargés aux timings, du javascript au contenu du DOM, tout sur tout ou presque et en plus de nombreuses autres extensions s’appuient dessus. Indispensable, légendaire, une partie du succès de Firefox repose sur ce seul plugin qui a su se rendre indispensable aux développeurs.

YSLOW & Pagespeed

Yslow et Google page speed reviennent souvent dans mes articles. GTmetrix.com permet d’avoir les deux en ligne, se sauver et comparer les résultats mais la version extension est pratique aussi. Pagespeed.googlelabs.com permet aussi de faire l’analyse en ligne avec les liens vers la DB de connaissance Google Labs, toujours utile.

Bref, les deux plugins analysent vos pages à la recherche d’axes d’amélioration et croyez moi, avant d’obtenir le saint Graal (100%/100%) vous avez quelques nuits blanches en vue. Mais les deux fournissent une tripotée d’informations utiles en terme d’optimisation.

WAPPALYZER

Alors ? En un coup d’oeil, c’est un magento ou un prestashop ? Derrière c’est un Nginx ou un Apache ? Tout ca et plus en survolant le plugin de votre souris, c’est possible. Wappalyzer vous donne toutes ces indications car il monitore vos pages chargées et analyse le contenu et les réponses du serveur pour déterminer tout cela pour vous. Simple mais dramatiquement utile.

Et hop, je vois que mon site est servit par un Apache, utilise Jquery a le tag Google Analytics et tourne sous WordPress. La classe ! (bon pour le cas de mon site, je le savais déjà :) )

NAGIOS CHECKER

Sur l’exemple du dessus, vous voyez un N noir avec NBS 47 en Jaune et NBS 3 en rouge. Ce sont les alertes Nagios de nos sondes de supervsions. L’avantage c’est qu’on a pas à être en permanence sur la page Nagios, on peut juste avoir le plugin et en passant la souris au dessus, voir ce qui se passe en alerte et en informations :

PS : 3 services en erreur et 47 en warning, ca peut paraitre beaucoup mais sur 650 sites, ce n’est pas énorme en fait. En l’occurence 2 sites ont dépassés 90% de disques alloués et 1 est en charge critique sur son Mysql. Les autres ont des warning divers, charge CPU/RAM etc.

Bar WEB DEVELOPPER

C’est un outil utile. Nettoyage des cookies pour un site ou pour tous, entourer les frames ou les titres H1/H2, détailler les scripts, forms, images, CSS, tout y est. C’est une formidable toolbox, très légère et très très complète. Must have si vous développez, tout aussi indispensable que Firebug, c’est dire !

GOOGLE TOOLBAR

Nous voila au dernier mais il est toujours aussi utile et appréciable, ne serait-ce que pour les raccourcis vers les services Google ou encore le PageRank. La vieille bar est toujours aussi agréable et discrète, utile et configurable.

Pour les alergiques à Firefox


Beaucoup de Bookmarklet (petit Javascript que vous cliquez quand vous êtes sur une page Web pour lancer une autre page ou un autre service) font un bon boulot. Les Yslow et Pagespeed peuvent s’utiliser depuis le Web.

Les bookmarklet, c’est tout simplement génial. Le site ici en référence un paquet, parmis lesquels j’ai fais un raccourcis sur : URL shorten, Download as PDF,  German to English, GTMetrix test, etc…

écrit par Philippe Humeau \\ tags: , , , ,