ApéroGento à Aix-en-Provence iCal Import

L’ApéroGento Aix-en-Provence est l’occasion de rencontrer les spécialistes Magento en région Provence-Alpes-Côte d’Azur, dans une ambiance décontractée et conviviale.

Pour cette 1ère édition de l’ApéroGento Aix-en-Provence, c’est un cadre provençal de la région d’Aix-en-Provence qui a été choisi. Le choix s’est porté sur un restaurant classé : La table de Beaurecueil, au pied de la montagne Sainte-Victoire.

Les inscriptions pour l’ApéroGento Aix-en-Provence sont actuellement ouvertes.

Les frais d’inscription de 39 €, intégralement reversés au restaurateur, couvrent l’apéritif, le repas, le vin et le dessert.

Comment s’inscrire ?

Rendez-vous sur la page d’inscription à l’événement.

» Inscrivez-vous

Dans le formulaire d’inscription :

• choisissez le nombre de places à réserver et cliquez sur « Suite »
• remplissez les champs du formulaire et cliquez sur « Suite »

Vous serez dirigé vers une interface de paiement totalement sécurisée.

Pour tout renseignement, contactez les organisateurs de l’ApéroGento Aix-en-Provence en utilisant le formulaire de contact.

Les inscriptions pour l’ApéroGento Aix-en-Provence sont actuellement ouvertes dans la limite de 50 personnes pour l’événement, afin de conserver l’ambiance conviviale et propice aux échanges.

Attention donc : une fois les 50 places réservées, nous ne pourrons pas accepter les personnes qui souhaiteraient y participer au dernier moment.

Le programme de l’ApéroGento Aix-en-Provence

Le programme de l’ApéroGento Aix-en-Provence
11H00 : Accueil autour d’un apéro
12h00 : Repas
14H00 : Ateliers
17h00 : Clôture

Contenu des Ateliers

Les ateliers ont été conçus pour accueillir tous types de participants, des e-commercants désireux d’en savoir plus sur la technologie à ceux qui ont déja un site sous Magento, sans oublier les prestataires Magento ou plus généralement E-Commerce.

A ce titre, l’organisation vous proposera 4 ateliers :
- Découverte de Magento :  ses fonctionnalités, ses avantages. Retours d’expériences
- Créer son site sous Magento : échangez avec des spécialistes de la technologie,  qui vous expliqueront les pré requis pour créer ou migrer son site vers Magento;
- Magento et les extensions : découverte d’une des grandes forces de Magento, dont la modularité permet l’ajout de fonctionnalités en utilisant des « extensions ».
- Espace business : dédié aux professionnels Magento, l’objectif est de vous mettre en relation dans un cadre convivial et décontracté.

Ces ateliers seront tous animés par des experts de la technologie Magento, mais c’est avant tout VOUS qui serez moteurs grâce à vos questions.

L’ApéroGento Aix-en-Provence est un événement organisé par l’agence Profileo, Boutik Circus, la Maison du Logiciel, Pyksel et pour parrain organisateur Nbs system.

Avec Magento et d’autres frameworks, il devient possible de faire exécuter au site une commande à heure/date/jour fixe par le mécanisme de Cron table. Ce mécanisme, très vieux (au moins 25 ans) et très stable est connu de tous les administrateurs systèmes et réseau, ses excès et débordements occasionnels (si l’on ne fait pas attention au contenu) aussi.

Sauf que quand les développeurs ont mis la mains sur ce petit outil d’automatisation, une nouvelle frontière s’est ouverte en terme de possibilité. Application d’un traitement sur tout le catalogue de nuit, système de calcul des réapprovisionnements, gestions de commandes ou des réductions etc…

Well, le principe est bon alors le partager doit être bon quelque part ?

Mais cela fait maintenant un moment qu’avec l’apparition de PHP, cette question revient :

“Vous pourriez passer la memory limit à 1, 2, 4 Go ?”
Non.

“Mais j’en ai besoin pour mes traitements”
Non.

“Non quoi ?”
Non je ne passerai pas la memory limit à 1,5 Go car vous n’en avez pas besoin.

Pourquoi ?

Déjà parce que l’on a pas besoin de 1 ou 2 ou 4 Go pour effectuer un traitement, aussi volumineux soit-il. Il est *presque* toujours possible de fragmenter le traitement en sous lots plus petits, d’allouer et désallouer sa RAM plus subtilement et d’une manière générale privilégier une méthode de travail moins RAM intensive. (écriture et stockage de résultats partiels, tableaux indexés, traitement par plus petit lots, utilisation de la gestion de mémoire du Zend framework etc…)

Que personne ne tente de s’abriter derrière le *presque*, le nombre des algorithmes complexes non factorisables ou fractionnables est connu et, dans leur très grande majorité, ils touchent aux traitements mathématiques, à la cryptographie ou aux problèmes dits “NP-complets”. Donc NON, il n’est pas impossible de programmer différemment un traitement PHP sur une collection de données, fussent elle grande.

D’ailleurs, la preuve, au final, le développeur contourne le problème et arrive à utiliser une memory limit raisonnable tout en résolvant son problème.

Et pourtant, elle tournait !

Ensuite 1 Go de RAM, c’est beaucoup. Au sens propre.

C’est à dire qu’à une époque pas si lointaine, on chargeait et traitait des collection de données 2 fois moins grandes mais également avec 10 fois moins de RAM. Le catalogue d’une société il y a 10 ans était peut être deux fois moins gros mais peut importe le système utilisé à l’époque, ca tournait et la RAM, à l’époque, il y en avait 10 fois moins et pourtant, ca tournait.

Le coté orgiaque de la progression du matériel et de ses coûts fausse le sens des réalités. Oui un cycle processeur ca compte. Oui une boucle mal optimisée ca joue, surtout multipliée par des milliers de visites. Oui 1 Go de RAM ce n’est pas rien. Selon la configuration de la machine, cela peut même représenter le quart de ses ressources mémoire…

De plus, la memory limit est posée pour tous les processus PHP, pas pour un en particulier. Résultat il est possible qu’un seul script soit gourmand mais rien ne nous certifie que cela ne sera pas le cas d’un autre. Et si 5 ou 6 processus PHP se mettent à consommer 1 Go de RAM, on arrive vite à des sommes qui peuvent mettre des serveurs à mal.

A une époque pas si lointaine sur Amiga et Atari ST, on optimisait jusqu’au moindre octet maintenant c’est une culture perdue, qu’on considère comme dépassée mais sincèrement, cet esprit était le bon. La société de l’hyper consommation nous pousse à manger plus, dépenser plus, imprimer plus et allouer plus de RAM. Ça va avec, le gâchis est devenu une culture. Pourquoi écrire 10 lignes de plus pour avoir une gestion plus rationnelle alors que comme cela ca marche ?

Sans compter que bon nombre de script n’exit jamais et reste en mémoire sans savoir quoi faire, à part bloquer 1 Go de RAM, pour rien.

Quelques bribes de solutions :

Fragmenter le traitement est le plus important, soit dans l’algorithme de traitement, soit dans la gestion de la mémoire.

Quand vous lisez un bouquin, vous le faite page après page et pas les 500 d’un coup, envisageons la même chose pour un serveur.

1. Prenez la taille de votre traitement, diviser le par 64 ou 128 Mo et vous saurez le nombre de blocs à traiter, le nombre de processus qui devront s’exécuter à la suite pour venir à bout de la tâche. Une fois les résultats calculés, assemblez les au besoins.
2. Traitez des tableaux ou des indexes qui référencent les données plutôt que toute la donnée en elle même, quand cela est possible.
3. Utilisez des algorithmes et des clefs de hash pour sotcker et retrouver vos données.
4. Traitez les données avec le langage le plus adapté. N’oubliez pas que PHP est 10 fois plus lent (au bas mot) que le C pour venir à bout d’un traitement. Sa gestion de la RAM est également moins efficace.
5. Quand cela est possible, préférez un script SQL à un PHP qui fait du SQL, ca sera considérablement plus rapide et économe en ressources.
6. Si vous continuer à faire vos Cron en PHP, utilisez Zend_Memory :
   Le composant Zend_Memory est destiné à gérer des données dans un environnement où la mémoire est limitée.
   Les objets mémoire (conteneurs de mémoire) sont produits par le manager de mémoire sur demande et mis en cache/chargés d’une manière transparente quand c’est nécessaire.
   (tiré de la doc ici : http://framework.zend.com/manual/fr/zend.memory.overview.html)
   ah… voila une solution élégante. J’utilise et si je dépasse la RAM allouer, ca swap sur le disque mes résultats intermédiaire.
   (Merci à Samuel Verdier de m’avoir soufflé la solution, il interviendra peut être prochainement sur ce blog pour nous donner des exemples concrets).

Dans le cadre d’un benchmark de site Web, de test de charge pour être plus précis, que faut il prendre en compte et pourquoi ? Que ce soit un benchmark de Magento  ou de tout autre Framework / site, il faut le bon outil et surtout la bonne échelle.

Mesurer c’est une chose, mesurer utile ou interprétable, s’en est une autre. La seule mesure qui compte au final, c’est la satisfaction de l’utilisateur qui surf sur le site concerné.

En l’occurrence une échelle de cette satisfaction existe, l’APDEX.

Le but de cet indice est de mesurer, dans un temps donné, combien d’utilisateurs ont eu un temps de réponse satisfaisant. Dans cette chaine, tout est compté, la charge que le site impose au serveur, le temps d’acheminement des paquets, l’affichage de la page etc.

Autrement dit, si je fixe à 2,5 secondes le temps d’affichage optimal pour un site, combien d’utilisateurs vont pouvoir surfer en même temps sur la machine avant que 1 d’entre eux ait un temps supérieur à 2,5 secondes ? Combien vais-je en accueillir avant que 5% d’entre eux ait une page en plus de 2,5s ?

l’APDEX comprend 4 niveaux :

• satisfied
• tolerating
• frustrated
• inacceptable

c’est donc bien une échelle “user centric”. Le but est de satisfaire l’utilisateur ou tout au moins de ne pas l’irrité. Si l’on fixe la zone de satisfied à moins de 2,5 secondes, la zone de tolérance va de 2,5s, la zone de frustration sera à 10s (4 fois le temps de tolérance) et au delà on est dans l’inacceptable.

Formule de l’APDEX

APDEX = ((nombre de satisfaits) + 0,5*(nombre des tolérants)) / total

(avec le nombre de frustrés = 0)

Si on reprend nos hypothèse et qu’on prend un groupe de 100 tests, mettons que 80 sont sous la barre des 2,5s, 20 sont entre 2,5 et 10 et 0 sont au delà de 10, le coefficient APDEX est de :

(80+20/2)/100=0,9

Se placer sur l’échelle

A 1, tout le monde est satisfait, entre 0,94 et 1, vous êtes dans l’excellence, de 0,85 à 0,94, vous êtes bon, de 0,7 à 0,85 vous êtes honnêtes. de 0,5 à 0,7 c’est mauvais, en dessous de 0,5 c’est la zone de l’inacceptable.

Dans notre exemple au dessus, un APDEX à 0,9 nous donnait 80% d’utilisateurs en zone de satisfaction, 20% en zone de tolérance.

Mesurer cet indice

L’outil Funkload, en dernièreversion utilise cette classification Apdex pour donner des rapports de tests de charge très complet. Une fois que vous avez préparé vos scénarii, il s’occupe de charger la machine jusqu’à ce que l’indice APDEX passe sous une certaine valeur. Une fois cette valeur atteinte, vous avez un nombre d’utilisateur simultanés.

Vous pourrez ainsi facilement mesurer la rapidité de votre site mais en condition réelle. Avec un utilisateur simultané, vous aurez surement des temps de chargements sous la barre de la seconde mais un serveur et son site sont fait pour la vie réelle, pour accueillir des milliers de visiteurs par jour.

Il existe prêt de 30 outils différents à ce jour pour mesurer cet indice mais je vous recommande très fortement Funkload qui permet de faire cela en parallèle d’un test de charge avec des scenarii.

Ordre de grandeur pour Magento

Par exemple, sans Reverse Proxy (RP), avec un serveur de base (bi quadcore 5420 / 8 go), bien configuré et optimisé, sous Magento 1.4 CE, avec un site correct devrait vous amener entre 150 utilisateurs simultanés, tous sous la barre des 2,5 secondes, avec un APDEX à 0,95. (95% des utilisateurs en zone de satisfaction, 5% en zone de tolérance)

Toujours sans RP, un gros molosse (bi hexacore 5670 / 8 Go) devrait vous amener à ~250 utilisateurs sous la barre des 2,5 s avec un APDEX à 0,95. (95% des utilisateurs en zone de satisfaction, 5% en zone de tolérance)

Un mono Quad core AMD 2382 (toujours sans RP), vous amène à 4s pour 150 utilisateurs.

Seulement 100, 150, 200 ? Oui, mais simultanés et sans l’aide d’un rproxy ou du full page cache pour les versions Enterprise de Magento (EE) !

Funkload

Voici quelques captures d’écran de Funkload qui vont vous permettre de mieux comprendre le fonctionnement de l’utilitaire et ce qu’il produit comme rapport :

Sur cette capture, on voit, en haut, le nombre de SPPS (Successfull page per second) et l’échelle du nombre de CU (Concurrent Users), de visiteurs simultanés. Juste en dessous, le graphique suivant montre l’indice Apdex, la barre verte montre un apdex de 0,95 à 20 utilisateurs simultanés (hors cache, hors rproxy etc…)

Ici, le graph montre le nombre de CU et le temps d’attente de chacun. A 40 CU, on a un temps de génération des pages de 2,5 secondes au minimum, 3 pour 90% des visiteurs.

Vous pouvez trouver l’outil Funkload sur le site de son auteur M. Delbosc : http://funkload.nuxeo.org/

Un grand bravo à Nuxeo qui porte haut les couleurs de l’opensource et de la qualité dans ce domaine, une entreprise Française en plus !

Conclusion

Ce que nous cherchons tous à savoir c’est : combien d’utilisateurs puis-je accueillir dans des conditions optimales avec mes serveurs ? La réponse est maintenant à portée de main grâce à un indice représentatif de la qualité de la session de surf : l’APDEX et un outil de mesure et de test de charge : Funkload.

En général, on a deux mesures de ce que peut accueillir un serveur, une mesure en visiteurs uniques par jour et/ou l’autre en visiteurs connectés simultanément. Évidemment, vu le type de mesure Funkload, la deuxième est beaucoup plus réaliste.

Ceci étant, peut de personne peuvent exprimer leur besoin en visiteurs connectés simultanément alors que presque tout le monde sait dire combien il accueille de visites par jour. Du coup, la passerelle entre les deux n’est pas forcément aisée et elle est approximative.Les pics sont bien représenté dans les connexions simultanées mais pas dans un nombre de visiteurs unique par jour.

Disons si on devait donner un ordre d’idée, pour du Magento, le ratio entre les deux serait de 150 utilisateurs simultanés en moins de 2,5s avec un apdex de 0,9 correspond globalement à ~35 000 visiteurs uniques par jour.

Quand je suis client c’est, en général de sites B2B comme LDLC, Office easy, et autres fournisseurs. Toujours en général, les sites en question sont pros et propres, ils livrent dans les temps.

Mais alors pourquoi ce post ?

Parce que, sans vous révéler tout de ma vie privée, j’enménage dans un nouvel appartement et j’ai presque tout acheté sur le Web, en tant que client B2C “classique”. Des E-commerçants, ma société doit en héberger 250 alors forcément, je suis confiant dans le principe de fond

Eh bien let me say : “OMG” ! Quel parcours du combattant pour certains sites. Quel service déplorable pour d’autres, on est même parfois à la limite de l’honnêteté. Du coup, comme j’ai une petite tribune sur Internet (ce Blog) je vais vous parler d’eux, en tant que client.

Myfab

Le site est propre et bien conçu. La simplicité est souvent un gage de réussite en fait.

Là le ton est donné, c’est du design à faible cout, on commande et on reçoit quand c’est produit. Pas de surprise, le modèle se laisse 13 à 16 semaine de la production à la livraison, c’est assez normal quand on produit en Chine et qu’on rapatrie en France par bateau. Aucun soucis à signaler, j’ai apprécié que ce qui était disponible plus tôt me soit envoyer rapidement et attendant le reste. (C’est du Magento ceci dit en passant)

J’ai reçu mon pouf big XL (terrible en passant) en quelques jours, le reste est dans le bateau. A quand le suivi GPS pour pouvoir le suivre dans son périple !

Delamaison

Là on est sur un site qui est déjà moins moderne en terme de design. Des menus d’hier et des listes interminables d’avant hier, à la OS commerce grande époque. Cependant, comme le site était bien référencé sur ce que je cherchais, j’y suis allé. La présentation  des articles n’y est pas optimum, le cross selling très peu ergonomique mais la gamme est vaste, on finit par trouver ce que l’on cherche. C’est après que ca se gâte, et pas qu’un peu.

Commande payée par CB le 2/08.
Le 3/08 on me demande par mail des papiers qui prouvent que ce n’est pas un achat frauduleux. Dont un justificatif de domicile, toujours super pratique à fournir quand on vient d’enménager. Ce n’était pas préciser, mauvaise surprise.
Le 3/08 à 11h00, j’envoie les dits documents. Aucune nouvelle.
Le 10/08, on me dit (sur le site) documents reçus, commande lancé. 7 jours pour un fax dont j’ai eu confirmation de réception le 03/08…
Pendant ce temps là, aucune communication, pas de nouvelles. Je me renseigne, et je reçois un mail qui me dit qu’ils sont en rupture de stock. Rien de préciser sur le site lors de l’achat, je prends la commande et je vois plus tard… La classe. Le 13, j’envoie un mail pour expliquer que c’est assez inacceptable et si c’est pour être aussi lent, j’irai en magasin au lieu de commander sur le web.

On me retourne un copier/coller :

“Monsieur,
Nous vous informons que votre commande nécéssite un réaprovisionnement auprès de notre fournisseur,
Vous recevrez un message lors de l’expédition de votre commande,
Veuillez accepter nos excuses pour la gêne occasionnée.

Restant à votre service,”

3 lignes, 2 fautes d’orthographe et ca ne répond pas à ma question : “QUAND serai-je livré ?”
le 16, aujourd’hui, je réutilise leur système de support et repose la question en précisant qu’ils peuvent retarder ce qu’ils n’ont pas en stock et m’envoyer le reste. Même réponse copier/coller du support.

Ça m’énerve un peu je renvoie un mail pour mieux m’expliquer, visiblement, ils sont durs de la feuille. Je reprend la même réponse en copier/coller en retour.

Le 20/08 ils prennent en compte notre échange par mail du 13/08 et annule ce qu’ils n’ont pas en stock.
Le 24/08, toujours aucune nouvelle de la livraison…

C’est indigne d’un site Web de E-commerce. Site à l’ergonomie très archaïque, au support client inexistant, je prend la commande, la tune et … démerde toi, tu auras ta commande quand on aura le temps, tu as des questions, parle donc à mon robot qui répond la même chose en boucle.

Cher, inadapté au E-commerce, service client déplorable, site pénible, c’est le grand chelem, à éviter !

Update :

Livré le 26 aout !!! enfin.

Ils ont annulés 7 articles pour envoyer ce qu’ils avaient (bon je leur ai un peu soufflé la solution car d’eux mêmes, rien) et delamaison m’a envoyé une commande. Au final, il manque un article…  24 jours pour m’envoyer 14 articles sur 21, me rembourser de ceux non livrés (mais pas des frais de ports affiliés) et ils sont foutus d’oublier un article… Nul…

Quelqu’un a un bon site fiable pour les articles de maison, rideaux, assiettes, couverts et ce genre de chose à me conseiller ?

But

But c’est simple et rapide au niveau du site. Pas de fioriture mais c’est efficace. J’ai ouvert 15 onglets, ajouté des articles, enlevé, retrié etc… et tout s’est bien passé. C’est pas top design mais c’est efficace. Coté commande par contre, on est prévenu quand la pièce est en stock ou non, on peut choisir le magasin qui a les pièces les plus importantes de sa commande en stock pour tout prendre chez lui et être livré en deux fois si certains articles ne sont pas en stock. Pas mal…

Sauf que… Le site m’annonce une livraison le 12/08, je n’ai même pas eu un coup de fil. Le 14/08 je m’en inquiète, 4 coups de fils, le premier, “thierry est pas là, rappelez dans 30 min”, le deuxième, attente, transfert, raccrochage. J’adore. Le 3° pareil. Le 4°, au bout de 10 minutes, j’ai Thierry, pas trop au courant, “ah oui on est en retard, désolé, euhhhhh je vous propose de passer mardi prochain”. Bon au moins j’ai une date, le gars est ok pour m’appeler 10 min avant de livrer etc. C’est pas terrible au niveau professionnalisme sur la livraison Web, pas top du tout au standard, mais au final le monsieur me trouve des solutions.

L’un dans l’autre, plutôt une bonne expérience, le standard et le système de livraison Web pourrait progresser cependant, très bon tarifs.

Update :

Pour la deuxième partie de la livraison, j’attends toujours… La première partie, j’ai du appeler, je pense que la deuxième je devrais faire de même.

Darty

Darty, j’ai choisis de lire sur le site et de confirmer au téléphone avec un vendeur. L’expérience est mitigée sur ce point. 10 min d’attente (montre en main) et au final je discute avec un vendeur, ca coupe au milieu… Je rappelle, 15 min d’attente, j’ai le vendeur, je lui explique ma précédente expérience de coïtus electromenagus interruptis, il me demande mon numéro pour me rappeler directement si ca coupe. Bien vu.

On fait le tour, le conseiller connait ses produits, ses fiches techniques, ca va vite, le conseil est pertinent. Livraison impeccable par des gars super pros et gentils, ils mettent tout en place, m’explique comment faire les premiers pas avec mon électroménager, nickel. Sauf que… Les câbles de la machines à laver le linge et de la machine à laver la vaisselle devaient arriver avant le reste et c’est arrivé après…

J’ai donc du brancher ma gazinière moi même et le vendeur m’avait refourgué 2 tuyaux dont je n’avais pas besoin, deux tuyaux d’eau, déjà livrés avec les machines. Dernier petit glitch, ils avaient enlever les visses de blocage du tambour dans la machine à laver le ligne mais par leur support, ca a fait un peu de bruit avant que je comprenne le truc, rien de grave cependant.

L’un dans l’autre, très bien. Bon  service, pro, (très) rapide à la livraison, pro à l’installation, des prix de fou, le meilleur des 5.

Update :

Ils m’ont vendu 3 câbles en trop, mais l’un dans l’autre…

Alterego

Je voulais me commander une lampe big bow (entre autre). Pas envie d’attendre les 13 ) 16 semaines de myfab donc je chercher sur internet et je tombe sur alterego, un site Belge. Ils vendent une big bow et d’autres, je prends les lamps et deux tabourets de bar. Le site est moche mais fonctionnel, je trouve mon bonheur.

Sauf que la big bow, c’est une version naine et que les dimensions ne sont pas vraiment claires sur le site. Là où je m’attends à pouvoir passer dessous, elle m’arrive au niveau des pectoraux… Coté tabourets de bar, pas de soucis, ce qu’ils n’avaient pas en stock, ils le livreront plus tard, à leurs frais, ils m’en ont informé 48h après ma commande, pro donc.

Bon tarif, site pas terrible en terme de look mais avec du choix sur certains éléments, livraison pro.

Office Easy

Allez, je finis par un B2B, j’ai beaucoup apprécié Office Easy. Un site agréable et clair, une newsletter pertinente, des commandes livrées en 48h, c’est propre, c’est du E-commerce de pro alors ca mérite d’être signalé. Le catalogue est très complet.

D’une manière générale, j’ai eu beaucoup moins de soucis en B2B qu’en B2C en fait.

Et pour les sites qui souffrent de leur design, tunnels de conversion improbable ou IHM Des années 70, allez donc lire le blog de Capitaine Commerce ou celui de François Ziserman, ils donnent plein de conseils dans ce domaine qui est le leur, alors profitez en !

Optimisation dʼintégration par la technique de lʼamélioration progressive.

Si je vous parle dʼoptimisation web, vous me citerez très certainement les chargements parallèles, les CDN, les sélecteurs CSS efficaces, la réduction du poids des images, etc …

Lʼapproche est bonne, mais je répondrai ceci :
« Optimiser globalement son site cʼest bien, lʼoptimiser pour les différents navigateurs cʼest mieux»

Dans cette article, jʼexpliquerai une technique de conception de site web qui s’avère très efficace pour lʼoptimisation, la stabilité et la pérennité de votre site : cela se nomme lʼamélioration progressive.

Deux techniques de conception web

Il existe deux techniques pour la création de sites web optimisés :

La première sʼappelle « lʼamélioration progressive » et la seconde la « dégradation élégante ».

Elles cohabitent toutes les deux depuis longtemps et sont utilisées par la majorité des acteurs du web (agences web, free-lances, …), et ce, parfois sans même sʼen rendre compte.

Voici une brève définition :

• La dégradation élégante est le fait de construire dʼabord son site en fonction des navigateurs les plus performants, puis de se concentrer ensuite sur la compatibilité avec les anciens navigateurs.
• Lʼamélioration progressive cʼest lʼinverse. On se base dʼabord sur un ancien navigateur puis on rajoute des couches techniques successives plus poussées et plus abouties supportées par les navigateurs les plus récents.

Mais laquelle utiliser ?

La plupart privilégierons la dégradation élégante car cʼest à leurs sens la technique la plus simple à mettre en place et la plus utilisé. En effet, nous avons probablement tous déjà entendu un jour : « Les gars, jʼai fini dʼintégrer le site sur FireFox, jʼattaque maintenant le débug sur ce bon vieux IE6»

Cependant cette technique nʼoffre que très peu de souplesse, car il est nécessaire de partir de votre « bijoux » technique puis de le «démolir» petit à petit tout en corrigeant les différents bogues afin quʼil soit compatible avec les anciens navigateurs.

Petite métaphore pour appuyer mes propos

“Faut-il forcément sʼobliger à regarder une cassette VHS sur un écran Full HD sous prétexte quʼelle est compatible avec le magnétoscope de notre Mamie ?”

Nʼest il pas préférable de visualiser son film en Blu-Ray et se procurer une cassette VHS en parallèle pour que notre chère Mamie puisse regarder le film sur son magnétoscope auquel elle tient temps ?

Oui cela demande dʼavoir 2 versions du film, une en DVD Blu-Ray et lʼautre en VHS… et oui cela demande plus dʼinvestissement et plus de temps, mais il sʼagit du seul et unique moyen pour que personne ne soit exclu tout en ayant un média qui convient avec notre support.

Vous lʼaurez compris, je vous invite grandement à utiliser la technique de lʼamélioration progressive .

Pour en savoir plus sur ces techniques, je vous invite à lire ce très bon article.

Il date un peu mais reste dʼactualité : http://www.pompage.net/pompe/degradation-elegante-et-amelioration-progressive/

Exemple pratique

Voici la partie la plus intéressante, un exemple de la technique dʼamélioration progressive sur un bouton. Vous allez vous apercevoir que le gain de puissance est incroyable.

Voici notre bouton :

Première étape : Scindez les systèmes.

Ce bouton comporte des arrondis. Quels systèmes permettent de le faire de façon légère et optimisée ?

• FireFox 3, SAFARI 4, CHROME gèrent déjà les bordures arrondis et les ombres grâce à leur moteurs graphiques (webkit, moz, …)
• IE ne le gère pas. Surprenant non ?

Deuxième étape : Créer un code pour chaque système.

Pour les anciens navigateurs :

a.button {
background: transparent url('bg_button_a.gif') no-repeat scroll top right;
color: #444;
display: block;
float: left;
height: 24px;
padding-right: 18px;
text-decoration: none;
}

a.button span {
background: transparent url('bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}

Pour les nouveaux :

a.button {
background-color: #DDD;
border: 1px solid #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
color: #444;
display: block;
float: left;
height: 24px;
line-height:24px;
padding: 0 10px;
}

Troisième étapes : Constatez lʼoptimisation avec le même rendu sur les tous les navigateurs :

• Pour les anciens navigateurs, vous aurez un bouton construit à partir de 2 images de fond (2,3ko).
• Pour les navigateurs récents, vous nʼaurez juste que quelques lignes de codes (0,6ko).

Appliquez ce que nous venons dʼeffectuer avec ce bouton à lʼensemble de vos éléments web. Vous obtiendrez alors un site avec peu dʼimages, un poids pour chaque page très faible.

Conclusion

Maintenant, imaginez un site sans images, avec des templates web entièrement développés en code, facile à gérer, des pages ayant un poids ridicule, et ce, sans jamais perdre en qualité.

Ce monde est déjà à nos pieds avec lʼutilisation du CSS3 et du HTML5… Pour ce faire, il vous faudra ajouter de manière progressive une couche supplémentaire à vos sites et en apprécier le gain gagné sur votre dernier navigateur…
Par Aymeric Aitamer, Agence DnD.

Beaucoup de principes sont généraux à tous les frameworks, qu’ils s’agissent d’un site Magento, Prestashop, Wordpress, Drupal, etc… Certains Framework ou plugins de ces solutions vous aident nativement à le faire, d’autre n’ont pas cette possibilité ou cette richesse en stock.

J’ai récemment refais le site de NBS System (ma société) de A à Z avec nos amis de l’agence DnD et forcément, on s’est un peu intéressés à l’optimisation. C’est un chemin complexe mais passionnant alors autant vous faire partager quelques trouvailles dans le domaine.

Je ne reviens pas sur le pourquoi, optimiser c’est bien, améliorer l’expérience utilisateur c’est bien, avoir un meilleur référencement naturel car on charge vite, c’est bien. De toute façon vous surfez sur un Blog, il faudra bien justifier cela à votre boss un jour donc on va dire que c’est pour le bien d’Internet et la préservation de la bande passante.

Après en société, vous pourrez faire les malins et expliquer qu’en optimisant votre site, vous avez participer à éviter l’Exaflood, ca ne fait pas tomber les femmes mais coté entretient d’embauche, sur un malentendu, vous forcerez l’admiration.

Comment Analyser

Nos deux amis : Yslow et PageSpeed. Ces deux plugins fonctionnent sous Firefox et vous donnent un point de vu sur ce qui est propre, bien fait et ce qui ne l’est pas. Pagespeed, celui de Google, est plus nouveau et un poil plus complet, il tourne évidemment aussi sous Chrome. Yslow est celui fournit par Yahoo depuis des années, il est très intéressant également, personnellement, j’utilise les deux.

Je vous conseil aussi le site websiteoptimization qui vous donnera aussi de préciseuses infos. Evidemment, passer sans erreur le XHTML validator est important également, même si c’est pas toujours simple.

En complément, je me dois de citer l’excellent site www.gtmetrix.com. Pour ceux qui comme moi utilisent Opera ou qui ont un browser exotique et qui n’ont pas nativement ces plugins, c’est bien utile d’avoir à la fois Yslow et Pagespeed au même endroit, dans une même page.

Pagespeed :

Yslow :

GT Metrix :

Lire les résultats

Evidemment le but est atteindre le rating maximum, soit A/A ou 100%/100%.

C’est pour ainsi dire impossible donc si on peut aller à une note très intéressante, ca sera déjà pas mal. Ceci va en plus réduire le temps de chargement de la page et donc nous faire passer sous la barre d’1,5 seconde et donc améliorer la façon dont nous considère Google.

Dans l’immédiat, on voit que Pagespeed à un peu plus de critères mais on retrouve 70% de points communs soit une forme ou une autre alors je vais les grouper par types.

Pagespeed : “Parallelize downloads across hostnames”
Yslow : Use Cookie-free domains
Pagespeed : Serve static content from a cookieless domain

C’est quasi comparable, dans le principe il s’agit de permettre aux browsers qui viennent de télécharger vos contenus de sites depuis plusieurs serveurs distincts afin de leur permettre d’établir plus de connexions simultannées. En gros, pour ne pas saturer les serveurs, les browser ne s’authorise que 6 à 15 connexions vers un même serveur, c-a-d qu’ils ne téléchargent que 6 à 15 éléments simultanéments et attendent pour demande les suivants que des connexions se libèrent.

C’est paramétrable du coté du client, sur le navigateur mais on ne va pas demander à chacun de modifier son paramétrage de navigateur donc il vaut mieux utiliser plusieurs serveurs, quand cela est possible, pour servir le contenu, notamment static. Ici, seul le hostname compte, vous pouvez avec le même serveur physique derrère un www1, www2 etc…

Avoir 4 serveurs qui distribuent le contenu va permettre aux navigateurs d’aller beaucoup plus vite pour récupérer les contenus. Un petit regret ici, il aurait été plus simple d’intégrer un variable sur le nombre de thread concourrant accepté directement dans le handshake http 1.1. Ca aurait permis d’accélérer en basse charge et de diminuer pendant les pics. On peut aller plus loin aussi en servant depuis plusieurs endroits, sur un domaine différents “cookieless”.

Ce n’est pas très compliqué à faire en réalité. Le plus simple c’est d’enregistrer un nom domaine différent de celui du site, par exemple static-nbs-system.com et de mettre un CNAME dans la zone DNS qui pointe sur l’enregistrement A du site (en l’occurence nbs-system.com). Ensuite on configure le service web pour fournir les ressources statiques depuis ce nouveau domaine, on interdit de poser les cookies sur ce domaine et dans les pages web on appelle les ressources statiques sur ce domaine. On peut bien sûr reproduire le schéma avec n host sur ce nouveau domaine, static1.blablabla, static2.blablabla etc…

Ca à l’air bien sur le papier mais si le framework le gère pas, il va falloir éditer des fichiers de config, des fichiers php ou HTML ou encore jouer de la commande sed pour automatiser le remplacement de l’url. (pour sed, vous pouvez voir l’article ici)

Je ne sais pas si ca à une influence sur la SEO par contre. Vu que le nom et l’URL des ressources statiques participe à la SEO on m’a dit, je ne sais pas l’impacte.
Faible je suppose vu que ce sont des plugins de moteurs de recherche qui conseillent ce mouvement… Un pro de la SEO pour m’éclairer ?

Yslow : “Use a Content Delivery Network (CDN)”

L’idée est un peu la même mais à une petite nuance prêt. Yslow conseil l’usage d’un CDN de manière absolu, un qui soit connu pour le reprérer. Pagespeed lui conseille de multiplier les sources servant les fichiers. L’idée de fond reste proche, servir le plus vite possible les éléments, depuis des sources spécialisées. Soit vous prenez un CDN connu (Akamai, limewire etc…) soit votre prestataire à le sien, soit vous en prenez un gratuit.

Dans les deux derniers cas, Yslow ne connaitra probablement pas votre CDN et vous devrez malgré tout trainer une mauvaise note sur ce sujet… Ca n’empêche pas d’avoir un A cependant car pour Yslow, c’est un point moyennement important. Et puis soyons honnête, avoir un CDN (Content Delivery Network) ce n’est utile que pour des sites qui servent à destinations de plusieurs pays distants, dans la majorité des cas, un serveur de ressources statiques suffit.

Yslow : “Add Expire headers”,
Pagespeed : “Leverage Browser Caching”

Ca joue beaucoup, ca compte beaucoup et, bonne nouvelle : c’est facile à faire !

Avec Apache, un petit tour dans la configuration, on ajoute le mod Expire et le mode Etags et on met les lignes de configurations suivantes :

LoadModule expires_module /usr/lib/apache2/modules/mod_expires.so
ExpiresActive On

FileETag MTime Size

<IfModule mod_expires.c>
 ExpiresActive on
 ExpiresByType image/jpg "access plus 6 months"
 ExpiresByType image/jpeg "access plus 6 months"
 ExpiresByType image/gif "access plus 6 months"
 ExpiresByType image/png "access plus 6 months"
 ExpiresByType text/ico "access plus 6 months"
 ExpiresByType image/ico "access plus 6 months"
 ExpiresByType image/icon "access plus 6 months"
 ExpiresByType image/x-icon "access plus 6 months"
 ExpiresByType application/x-shockwave-flash "modification plus 6 months"
 ExpiresByType text/css "access plus 1 week"
 ExpiresByType text/javascript "access plus 1 week"
 ExpiresByType text/html "modification plus 1 week"
 ExpiresByType text/xml "modification plus 2 hours"
 ExpiresByType image/vnd.microsoft.icon "access plus 6 months"
 ExpiresDefault "access plus 1 week"
 #Header set Cache-Control "max-age=86400, public"
</IfModule>

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
 Header set Cache-Control "max-age=290304000, public"
</FilesMatch>

Voila, on a indiqué à Apache qu’on calculait la fraicheur d’une ressource en fonction de la date d’accès et de sa taille  (FilteEtag MTime  Size) et ensuite on lui a donné, par type de ressources, un temps d’expiration du cache. En résumé, quand votre navigateur récupère une donnée, il a le droit de la garder 6 mois si c’est un jpg par exemple, 1 semaine si c’est un javascript.

Evidemment, il faut le paramétrer en fonction de votre site et de la fréquence à laquelle vous mettez vos éléments à jour. Enfin, autre format, les 3 dernières lignes mettent une expiration à 480 semaines par défaut sur les ressources du type cité.

Si vous développez, il est fortement conseillé d’avoir une préproduction sur laquelle vous n’avez pas ces lignes, afin d’avoir le résultats de vos modifications instantanément et pas 480 semaines plus tard

Les deux plugins considèrent, à juste titre, que c’est un point important.

Yslow : Compress components with Gzip
Pagespeed : Enable Gzip compression

Il peut y avoir un peu débat sur celui-là, et encore. En gros le débat serait que sur un serveur dont le CPU est chargé, faire du Gzip en plus, ca aggrave le problème… Oui et non. Déjà, l’algorithme Zip est ultra rapide et optimisé, ca prends très peu de ressources à processeur moderne. En plus, servir plus vite c’est aussi diminuer sa charge de travail quelque part (on peut traiter plus de monde).

Coté débat, nous chez NBS, en matière de serveur E-commerce, on a tranché, c’est oui.

<IfModule mod_php5.c>
   php_flag zlib.output_compression on
</IfModule>

<IfModule mod_deflate.c>
 SetOutputFilter DEFLATE
 AddOutputFilterByType DEFLATE text/*
 DeflateFilterNote ratio
# Patch pour les navigateurs qui ne supportent pas
 BrowserMatch ^Mozilla/4 gzip-only-text/html
 BrowserMatch ^Mozilla/4\.0[678] no-gzip
 BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Humm compresser les images, ce n'est pas utile, loin de là
 SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
 SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
 SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary
</IfModule>

Bon, c’est assez simple et explicite, on compresse tout ce qui est textuel, on désactive pour les vieux Mozilla 4 et les IE, on ne compresse pas les images.

Ca réduit bien les transferts mine de rien :

Type Uncompressed Compressed Win doc / HTML 44,5 14,8 67% js 25,1 10,4 59% js 57,2 19,7 66% js 0,9 0,4 56% js 90,4 29,8 67% js 17,4 8,1 53% css 30,9 6 81% économie 177,2 Ko 33%

C’est tangible et appréciable, ca économise de la bande passante des deux cotés, c’est tout bon !

Yslow : Minify Javascript and CSS
Yslow : Remove duplicate Javascript and CSS
Pagespeed : Combine external JavaScript
Pagespeed : Minify Javascript
Pagespeed : Removed unused CSS
Pagespeed : Minify CSS
Pagespeed : Combine external CSS

Okay, ca fait beaucoup d’un coup mais c ‘est la même logique derrière.

Le principe de fond : on regroupe les CSS et les Javascript en deux fichiers au lieu de 15, on les nettoye des bouts de codes ou expressions non utilisées, on les “minify” (on les densifie, on enlève les espaces et les choses inutiles).

L’idée est bonne mais ca fait un code peu maintenable, alors le conseil du pro : on fait son site sur la préproduction et on se fait un script bash de mise en production qui fait le ménage et compacte  le tout au moment de la mise en production. Comme cela, on a une préproduction qui reste efficace à maintenir avec des fichiers lisibles et un production optimisée.

Pour réaliser ces optimisations, deux possibilités voir même beaucoup plus. Pagespeed à la gentillesse de fournir certains fichiers optimisés directement depuis le plugin. On le sauve, on le met sur la production et hop, c’est finit. Pour optimiser ses CSS on a aussi le site cssoptimiser ou le cssclean. Bref ce ne sont pas les outils qui manquent. Pour les combiner, ca dépend de la technologie, sous Magento on a Fooman speedster, sous Wordpress il y a CSS-JS-Booster de mémoire, parfois vous devrez tout simplement le faire à la main.

Evidemment enlever le code inutile des JS et/ou des CSS, c’est un impératif.

En réduisant le nombre de fichiers, on réduit le nombres de requêtes HTTP, on économise des transferts, de l’overhead, bref, là encore c’est du tout bon.

Personnellement, j’ai massivement utilisé les fichiers directement issus de Pagespeed quand il m’en proposait, c’est parfait.

La plupart du temps, ces modifications sont considéré comme importantes par les plugins.

Yslow : Avoid CSS expressions
Pagespeed : Use efficient CSS Selectors

J’ai regroupé ces deux là car ils touchent aux CSS et à leur optimisation. C’est un réel enjeu car les navigateurs se débrouillent plus ou moins bien avec les CSS et cela peut engendrer des délais du coté de l’utilisateur.

Yahoo Yslow nous dit d’éviter les expressions CSS, ce qui permet de changer dynamiquement un CSS si le browser est redimensionné par exemple. Le problème c’est que ces expressions sont appelées tout le temps, pendant la génération de l’affichage, au redimensionnement, parfois pendant le scrolling. Du coup ca charge un maximum le navigateur client. Ceci étant tous les frameworks ou presque évite ca comme la peste, vous ne devriez pas avoir de soucis avec. Sinon, il faut s’en passer et réécrire les portions du CSS qui utilisait ce système.

Google Pagespeed nous indique pour sa part qu’il est préférable d’utiliser des CSS selector efficaces. Ouiiiiiii, c’est à dire qu’on est pas contre, mais c’est quoi la différence entre un bon et un mauvais CSS selector ? C’est comme la chasse. Le bon chasseur, il voit… okay… on reprend.

Le but c’est d’éviter d’appliquer une clef de sélection peu efficace à un grand nombre d’éléments car cela pénalise les performances du navigateur. Mais cela va plus loin c’est plus une connaissance générale de la grammaire CSS qu’il faut avoir.

Par exemple, il vaut mieux :

• utiliser une classe pour appliquer un style à de nombreux élements
• privilégier le mécanisme d’héritage
• utiliser des règles spécifiques
• utiliser des class et ID plutot que des sélecteur de type Tag
• éviter les qualificateurs redondants (ex : ID selectors par class et class selectors qualifiés par un tag selector)
• éviter les sélecteurs descendants, surtout pour ceux qui pointe des ancêtres redondants (par exemple bidy ul li a {…} est un sélecteur redondant puisque tous les éléments sont des descendants de ce tag)
• utiliser des sélecteurs de class plutot que des sélecteurs descendants
• si vous devez utiliser un selecteur descendant, préférez un “child selector” qui nécessitera moins d’interprétation.
• dans le cas d’IE, évitez les :hover pour les éléments qui ne sont pas des liens
• si vous utilisez :hover sur des éléments qui ne sont pas des ancres, testez là sous IE 7 & 8 pour être sur que ca fonctionne.

Ok j’ai fais mon possible pour le traduire de l ‘anglais mais ce n’est pas mon domaine non plus alors si vous n’avez rien compris, allez à la source, ici. C’est un métier développeur Web, moi je vous le dis…

Yslow : Avoid HTTP 404 (Not Found) error
Yslow : Avoid URL redirects
Pagespeed : Avoid bad requests
Pagespeed : Minimize redirects

Ne riez pas et surtout vérifiez que vous n’en avez pas. Sur un site normal, en production normal, on ne doit pas tomber tous 3 objets sur un 404, ni même sur un 301 ou un 302. Qu’il y ait du rewriting temporairement pour maintenir une compatibilité, why not, que ce soit les 3/4 des URLs, encore plus vers un autre domaine, c’est  à proscrire.

Les 404, on s’en doute, c’est mal, d’autant plus que c’est surtout votre SEO qui va prendre. Mais les redirections prennent du RTT (pas des vacances, du Round Trip Time, des voyages allers/retours), ce qui ralentit l’ensemble.

Là aussi, c’est important, plus pour Pagespeed que pour Yslow qui tolère les 404 et dégrade moins la note.

Pour trouver vos 404, les google webmaster tools peuvent vous aider, les plugins, dont Firebug vous les donnent, des sites sont aussi disponibles pour vous aider à les trouver. Personnellement, j’utilise Firebug, ca me suffit. (oui ok, je n’utilise pas que Opera, c’est vrai)

Yslow : Do not scale images in HTML
Pagespeed : Specify image dimensions
Pagespeed : Optimize images
Pagespeed : served scaled images

Alors, là on est sur de la logique pure et dure…

Si je prend une image en 800×600, que je la pose sur le serveur et que je l’affice dans du 400×300, j’ai transféré une image 2 fois trop grosse pour rien (en fait 4 fois trop grosse, faite la multiplication). Donc je dois servir des images de la taille de ce qui va être affiché.

Je dois aussi spécifier les dimensions directement si possible (ca accélère le rendu des navigateurs) et bien sur, ne pas les redimensionner par du HTML, ce qui va à l’encontre de la précédente optimisation et aussi du fait qu’on a directement des images de la bonne taille.

Pour ce qui est d’optimiser les images sans pertes de qualité, le plugin fournit tout seul les versions optimisées… C’est pas le bonheur ca ?

Du bon sens on vous dit !

Yslow : Put CSS at the top
Pagespeed : Optimize the order of styles and scripts
Pagespeed : Put CSS in the document head

Le principe de fond c’est de charger les données dans l’ordre le plus efficient. Il faut que le début de la page puisse se charger le plus vite possible pour “visuellement occuper le terrain”. Si les images arrivent en dernier mais que tous les scripts sont chargés, le site est techniquement quasi fonctionnel mais inregardable.

Dans la première demi seconde, on doit donc passer les CSS pour “préparer le terrain”, formater la page et commencer à afficher du texte et des images puis faire passer les images nécessaires puis enfin le Javascript.

Une fois la page chargée, c’est rare qu’un utilisateur clic instantanément, il prend le temps de la lire un minimum avant de cliquer, le Javascript peut donc arriver un peu en retard, de même s’il se charge d’une animation, on peut patienter 1 seconde de plus, c’est moins génant qu’une page blanche.

Bon ca tient de la bonne parole inapplicable parfois. Par exemple Wordpress continue de charger les JS en début de page en version avant 3.0 (je n’ai pas vérifié sur la 3.0). Sous Magento, selon votre site, vous aurez peut être besoin de certains JS rapidement. Bref, ca se fait bien en général mais le cas particulier est légion.

Yslow : Reduce cookie size
Pagespeed : Minimize request size

Là encore, on essaye de réduire la données “inutilement” transférée.
L’idée c’est d’arrêter de transférer des cookies pour des ressources qui en ont aucun besoin, comme les images.

Chaque cookie par le navigateur transféré va consommer un peu de bande passante et de temps, pour rien et des millions de fois sur un an. Je n’ai pas compté combien cela peut faire en arbre sur un an mais le bilan carbon des cookies inutiles est lamentable. D’une manière générale, réduire la taille des requêtes, des cookies et leur nombre au minimum.

Alors Google et Yslow sont relativement d’accord, il faut servir les fichiers statiques depuis un domaines qui ne pose pas de cookies dans la transaction.

Yslow : Make fewer HTTP requests

Un croustillant celui-là. Ca à l’air anodin mais on pourrait faire un post rien que sur lui…

J’aurais bien fait mon lache et laissé ca de coté si ce n’était pas justifié mais là… On va devoir le traiter, c’est pas un détail.

Welcome to the CSS Sprites world !

Un sprite c’est quoi ? C’est globalement innofensif, c’est une image avec plein de morceau dans laquelle on découpe le bout dont on a besoin à un moment donné pour l’afficher. Oui, jusque là, ca à l’air innoffensif, attendez la suite.

Voici le CSS sprite du site NBS System, sur lequel Aymeric de l’agence Dnd (notre web agency) à sué sang et eau :

Si on résume la chose, c’est une image qui se comporte comme une carte. Quand on a besoin d’un bout de celle-ci, onva taper aux coordonnées X/Y qui vont bien et on on obtient ce que l’on a demandé. L’intérêt c’est qu’au lieu d’aller chercher 50 icones, on prend directement une grosse image, on fait donc 49 transferts http de moins avec toute l’économie d’overhead que ca représente.

Du coup dans son CSS on change son image par :

.blog .widget .header{height:42px;background:url(images/sprite.png) no-repeat 3px -258px;}

Ca n’occupe aussi qu’une socket du navigateur au lieu de 50, ce qui part groupe de 10 impose 5 volées de récupération des données. (voir le paragraphe précédent et le leverage browser cache).

Donc tout cela est merveilleux sauf que notre site, il vient rarement avec des sprites tout fait. Le graphiste lui, il fait des icones, il les fournit à l’intégration qui fait un CSS et du HTML et du coté sprites, il considère plus que c’est des boissons gazeuses.

Alors comment on génère ses sprites ? Deux cas pour démarrer. Soit vous êtes fort chanceux et vous avez évitez la problématique des dégradés et des ombres et ca va considérablement faciliter votre travail. Soit vous avez un beau site mais vous allez y passer du temps à vos sprites…

On peut le faire à la main, avec amour, mais ca prend un peu de temps… Quoiqu’il arrive, il faut passer par le stade préprod / prod, comme pour les compilations de JS /CSS sinon c’est pas facile à maintenir.

Bonne nouvelles : Il existe des générateurs.
Mauvaise nouvelle : Ca marche pas toujours et pas dans tous les cas.

Trois bonnes pistes sérieuses :

• Sprite me : Le plus atypique et très bien pensé. Il marche en bookmarklet, l’avantage c’est qu’il génère les différences à faire dans son CSS en live, c’est bien fait, assez efficace.
• un autre générateur en ligne, très simple mais moins complet aussi je trouve
• un des plus complets : spritegen

Il existe aussi un truc super bien je pense qu’à utilisé Aymeric pour mon site mais ce petit cachotier n’a pas voulu me dire son nom… Peut être une trouvaille ou un développement maison, je vais le cuisiner, n’hésitez pas à envoyer pleinnnnnnn de mails à l’agence DnD jusqu’à ce qu’ils lachent l’info !

En complément : un article assez complet traduit en Français ici. Sous Wordpress il y avait Csprite qui était pas mal mais qui n’est plus maintenu… Un autre article pas mal du tout ici.

Un moyen de générer vos CSS sprites avec Photoshop aussi ici.

A l’époque où je faisais une fixation sur les CSS sprites, j’avais trouvé un binaire opensource assez formidable qui permettait de commenter un CSS normal et de le compiler après coup en un CSS utilisant un Sprite, tout en générant le sprite au passage. Top. Mais j’ai perdu la bookmark pour le moment alors dès que je l’ai retrouvé, je corrige ce post, si vous voyez de quoi je parles, postez moi un petit commentaire.

Les derniers points

Yslow : Reduce the number of DOM elements

Les objets DOM (Document Object Model) nécessitent d’être tous chargés et parsés avant que les interprêtations Javascript (notamment) ne démarrent. Donc plus d’objets, plus de taille et donc de transfert, plus de mémoire utilisée, plus de temps de traitement, plus de délai avant que toute la page ne soit prête.

Réduite la taille du DOM est donc important dans une certaine mesure.

C’est d’autant plus vrai que les surfers ont de plus en plus de pages ouvertes en tabs, si tout le monde force en Javascript et pose des DOM énorment, les browsers se tapent des indigestions et … ca rame. C’est une question d’hygiène globale du browser quelque part

Yslow : Make favicon small & cacheable

Parfois, je n’aimerai pas être une mouche chez Yahoo. Celui qui a sortie celle-ci est légèrement “tatillon” quand même, voir dypterophile sodomite à tendance compulsive.

Bon la Favicon, en faire une petite, c’est pas trop dur. Optimisée non plus. Par contre, la rendre cachable, ca a été un poil énervant car Apache n’aimait pas le mime/type ico ou gif/jpg donc ca ne parait jamais dans le module mod_expire…

Très pénible jusqu’à ce que je trouve le type mime des favicons :

ExpiresByType image/vnd.microsoft.icon "access plus 6 months"

Et voila, c’est caché, d’un coup l’Internet va plus vite… ou pas.

Yslow :  Avoid AlphaImageLoader filter

Oui alors si certains sont encore assez téméraires pour tenter d’afficher des images transparentes, style png, dans un IE datant d’avant la version 7, je penses qu’il a d’autres priorité en terme d’optimisation que ce que je racontes là.  Les soins psychiatriques et une URL de download d’Opera, Firefox ou Chrome.

En gros si vous jouer avec de la gif / png transparente, IE ne gère pas ca très bien, au mieux ca le ralentit, parfois ca le fait planter, on a même vu des failles de sécurité grave sur ce sujet…

Donc forcément, il faut éviter de proposer une bouteille de vodka à un alchoolique, là c’est pareil, pas de png transparente pour IE.

Pagespeed : Minify HTML

Alors là, forcément, on s’affronte à un problème. Soit on a un framework (magento, drupal, wordpress etc…) qui fait ca tout seul, bref du php qui génère du HTML, soit on a fait le sien. La deuxième catégorie devient rare et dans la première, sans toucher au core, on a peut de moyen d’action en général.

La plupart des outils proposent un système de templates qu’on peut optimiser mais c’est parfois coton. A voir mais sur le site de NBS par exemple, pour 7,9 Ko à réduire, il me met un malus de 27% sur ce point et me dégrade la note à C… Abusif je trouve mais bon, soit.

Pagespeed : Specify a cache validator

L’idée c’est de donnée la méthode par laquelle on vérifie que la ressource est fraiche ou non. Sous Apache, ca se fait par l’intermédiaire du paramètre :

FileETag MTime Size

Là on précise à Apache qu’on décide que la ressource à changé si soit la date de modification à changée, soit la taille.

Pagespeed : Specify a Vary:Accept-Encoding header

Allez, devinez, c’est encore pour IE… Comme quoi on peut faire un produit ultra pourrit et l’imposer sur le marché. Ca on peut pas enlever ca à Microsoft. Je n’ai rien contre eux sur le fond mais sur le navigateur, ils ont vraiment pourrit le web.

Notre ami IE donc, ne support pas les Vary headers. Du coup, si il trouve dans le header d’une ressource autre chose que User-agent et Accept-encoding, il ne la cache pas… Dans le principe, totalement se passer du Vary header est le mieux.

Pagespeed : Specify a character set early

Dès qu’on précise le character set, le navigateur peut démarrer certaines interprêtation, dont Javascript. Avant il ne sait pas comment interpréter les données, il est donc conseillé de le faire vite. En fait rien ne s’oppose à le faire le plus tôt possible et tous les framework standard le font en général.

Yslow : Make JavaScript and CSS external

Avoir des fichiers séparés pour les CSS et les JS permet de les stocker en cache et de ne pas les transférer dans le HTML à chaque échange ou chaque page. Donc il vaut mieux ne pas mettre son JS et son CSS directement dans le code HTML et faire un include de fichiers externes, c’est beaucoup plus propre et simple.

Yslow : Make AJAX cacheable

En fait sur ce point, ce qu’il faut comprendre derrière le laconique “Make Ajax Cacheable” c’est “Make Ajax requests results cacheable”.

Faire un requête ajax en background pour fluidifier le trafic c’est top mais ne pas stocker la ressource récupérer en cache c’est gacher ce premier transfert, reconsommer de la bande passante, participer activement à la déforestation des ours en pologne, bref, c’est le mal.

Yslow : Use GET for AJAX requests

oUn Get est plus valable qu’un POST car avec un GET on transfert le headers et les données en même temps, ca évite un transfert inutile. Cependant, si vous avez des requêtes un peu longues, IE n’accepte pas les requêtes de plus de 2Ko. Qui a dit “encore IE” ? Pas de dénigrement, on est là pour progresser, tous ensemble, même les browsers qui partent avec de sérieux handicapes de conception.

Les vrais pervers tenteront donc de transférer en GET, des images PNG transparentes de plus de 2 Ko, en laissant le vary-header avec un IE. Là normalement, on a tout bon pour avoir un beau blue screen

Yslow : Reduce DNS lookups
Pagespeed : Minimize DNS lookups

Une résolution DNS prends entre 10 et 100 ms en gros. Pendant ce temps, le browser doit attendre que la résolution se fasse. Si on peut lui éviter d’avoir à résoudre beaucoup de noms et/ou hostnames différents, c’est plutot positif. Cela va aussi à l’encontre des multiplication hostname sur un domaine différents pour paralléliser les download quelque part.

Une fois résolu, la réponse reste en général dans un cache local, on peut donc décemment imaginer que multiplier les hostnames (par exemple 4 statics) est correctement rentable et n’impose pas trop de lookups.

Pagespeed : Remove query strings from static resources

Typiquement ca :

http://www.nbs-system.com/wp-includes/js/jquery/jquery.js?ver=1.3.2

La paramètre “?ver=1.3.2″ empèche certains proxys (dont Squid notamment) de cacher la ressource.

Pagespeed : Serve resources from a consistent URL

Pour les ressources partagées sur de multiples pages ou sites, il vaut mieux que la référence se fasse par rapport à une unique URL.
Cela permet notamment de ne pas renvoyer de fichier depuis plusieurs endroits différents, provocant des ns lookups d’ailleurs. L’exemple donné par Google c’est que si monsite.exemple.com et tonsite.exemple.com utilise le même JS, autant qu’il soit servit directement depuis un seul des deux sites, comme ca il sera déjà en cache dans le browser quand on ira de l’un à l’autre.

Autres optimisations

D’une manière général, il y a beaucoup d’autres optimisations, plus systèmes celles-ci, j’en parlerai prochainement, peut être directement sur le blog de NBS System. Les reverses proxy, les compilations de noyaux, les optimisations de .htaccess etc…

Mais bon, on a déjà de quoi s’amuser un peu là non ?

Je paye ma tournée au premier qui nous sort son site en A/A, ensuite celui qui nous passe un site Magento en A/A et pareil pour celui qui fait 100%/100% (sans tricher). Ca fera trois tournées mais elles seront largement méritées, chacunes d’elles !

PS : La doc de Google sur ces sujets est excellente, n’hésitez pas à la consulter.

Vous pouvez également lire l’article d’Arnaud ici : http://bit.ly/ban1Pm

Q : Pourquoi maitriser le shell ?

R : Parce que ca fait gagner un temps fou, que c’est propre, pêrmbeau, systématique, rapide et quasi illimité en terme de possibilités.

Merci à Adrien Urban de NBS System pour la création de ce support. Il vous sera peut être utile pour dédoubloner un fichier de clients ou de commandes, peut être pour faire certains tris dans vos bases ou fichiers. Les hébergeurs comme NBS System ou d’autres fournissent des accès shell limités, mais qui permettent d’utiliser ces outils (ou une partie d’entre eux).

Ces outils seront d’ailleurs principalement utiles aux développeurs.

UNIX & son copain Posix, leurs vies, leurs œuvres

Voici un cour de shell bash/unix pour les gens qui ne sont pas à l’aise avec, essentiellement les développeurs. Ca fait gagner un temps fou.

C’est volontairement simplifié, le but c’est pas de faire des DEV des SR, c’est juste un manuel de survie, donc les SRS qui balanceront des “ouais mais en fait c’est pas tout à fait ca” :

cat /dev/urandom > /dev/tty_du_srs_en_question 2>&1 &

Il est important de noter que la première partie part du principe de base que les noms/mots/autres sont sans espace ou autres caractères spéciaux. Cet aspect est présente après le reste.

Les concepts de base

Les flux particuliers :

stdin (entrée standard) : ce n’est pas une commande, c’est un FD, file desciptor, spécial qui est le flux d’entrée. C’est le fd 0.
stdout (sortie standard) : celle que l’on utilise 90% du temps, FD, en résumé ce qui s’affiche en retour d’une commande. c’est le fd 1.
stderr : sortie d’erreur c’est le fd 2.

on en reparle après.

Les redirections :

| : celui qu’on appel “pipe” le plus régulièrement, permet de joindre la sortie standard d’une command à l’entrée standard d’une autre.
< : prend son entrée standard à partir fichier
> : redirige la sortie standard vers autre chose, un fichier par exemple ou /dev/null (dans l’espace)
(on peut préciser par exemple 2>&1 qui redirige la sortie d’erreur (2) vers la sortie standard (1))
>> : redirige en mode append, on ajoute les données à la fin du fichiers existant.

Cas concrets :

ls > toto.txt : redirige le contenu de la sortie de ls (les fichiers listés) dans le fichiers toto.txt
ls >> toto.txt : idem sauf que ca ajoute à la fin du fichier. WARNING la première (ls>toto.txt) détruit toto.txt si il existe déjà.
ls > /dev/null : renvoi la liste des fichiers dans l’espace (/dev/null = grosse poubelle géante de taille infinie)
ls | more : liste les fichiers et envoi le résultat à la commande more qui affichera page par page.
less < toto.txt : éjectera toto.txt dans l’entrée standard de less qui sortira un résultat page par page. (ceci dit ca revient au meme que faire directement less toto.txt mais j’avais pas d’exemple en tete)

Wilcards :

Comme sous Windows, on peut utiliser des jokers ou wildcards :

ls * affiche tous les fichiers (ceci dit c’est le comportement par défaut)
ls t?t?.txt : listera titi.txt toto.txt et tutu.txt enfin remplacera ? à la position voulu par n’importe quel lettre.
ls t*.txt : affichera tous les fichiers commencant par t et finissant par .txt
ls tata[1-3].txt affichera tous les fichiers commencant par tata suivi du chiffre 1, 2 ou 3 puis finissant par .txt
ls t[a-i]* affichera tous les fichiers commencant par t, suivi d’une lettre entre a et i
bien sur on combien à l’infini : ls t[1-3]abc?zz.t?t est donc une commande recevable

WARNING : Unix est TOUJOURS “case sensitive”. a n’est pas égal à A.
WARNING : Contrairement a Windows, le remplacement des wildcards est traité directement par le shell, indépendamment du programme appelé. Le programme reçoit donc directement la liste des fichiers qui correspondent, même s’il s’attendait a recevoir une expression qui contenait ces caractères la.

ls T* et ls t* retourneront donc des résultats différents ! C’est une règle valable pour TOUTES les commandes.
INFO : TAB complète dans le shell quand c’est possible, sinon propose des possibilités.

Les amis (commandes) :

ls : liste les fichiers et répertoire

ls liste les fichiers du répertoire courant
ls -l la même chose en mode colonne.
ls -l –color colore les fichiers en fonction de leurs droits et types
-r : récursif

cat : équivalent de type sous windows

cat toto.txt, affiche le contenu de toto.txt
cat toto.txt titi.txt > tutu.txt, concatene toto et titi dans le fichier tutu.txt
cat toto.txt titi.txt >> tutu.txt, concatene toto et titi à la fin du fichier tutu.txt
cat * : affiche le contenu de tous les fichiers du répertoire courant. donc cat * > tutu.txt, copie tout dans tutu.txt

On peut aussi s’en service pour écrire dans un fichier :

cat > test.txt, redirigera donc l’entrée standard vers test.txt, on tape ce qu’on veut au clavier puis à la fin on tape CTRL+d ce qui interrompt la saisie et stock le contenu dans le fichier. Très pratique pour creer un fichier rapidement. Si on veut écrire à la fin d’un fichier existant : cat >> test.txt

cut : coupe ce que l’on récupère en fonction d’un délimiteur précis

imaginons que le fichier toto.txt contienne :
abc.def.ghi test 123
zzz.aaa:bbb_456

pour afficher uniquement un des blocs séparé par un des séparateurs (en l’occurence . ou ” ” ou _) : cat toto.txt | cut -f 1 -d “.”

donnera en sortie :
abc
zzz
-f c’est le champs (field) et -d le séparateur.

donc pour obtenir uniquement 456 :
cat toto.txt | cut -f 3 -d “_” par contre la ligne “abc.def.ghi test 123″ ne contenant pas d’underscore, n’a pas de troisièmes champs… et seule une ligne vide sera affiché, mais on verra plus loin comment éviter ca.

grep : affiche la pattern recherchée parmis des fichiers ou un flux

ls -l | grep toto.txt ne retournera que les lignes avec toto.txt parmis tout le résultat du ls.

cat toto.txt | grep “henri” n’affichera que les lignes du fichier toto.txt qui contiennent “henri”

cat toto.txt | grep “henri” | grep -v “IV” n’affichera que les lignes du fichier toto.txt qui contiennent “henri” mais pas celle contenant “IV”

le -v exclue le mot qui suit.
l’option -r fait un grep récursif,
l’option -i ignore la case (plus de distinction majuscule/minuscules),
l’option -n  affiche egalement les numeros des lignes : grep -nri henri . | grep -v “IV”

sortira tous henri de tous les fichiers du répertoire courant et des sous répertoire, peut importe que ce soit henri ou HENRI ou HeNrI, sauf les ligne contenant également “IV”. Chaque ligne aura le nom du fichier, le numero de la ligne, ainsi que le contenu de la ligne en question.

les options -A et -B sont pratique, c’est After et Before.

donc grep -A 2 -B 3 henri toto.txt sortira toutes lignes avec henri mais aussi les 3 lignes précédentes et les 2 lignes suivantes.

find : trouve des fichiers à partir d’un chemin précis et permet d’executer une commande dessus

find a plein plein d’options, je n’en montrerai ici que deux qui sont classiques et utiles
find . -name “*.txt” -print : trouvera récursivement tous les fichiers avec l’extension .txt à partir du répertoire courant “.”
find . -name “*.txt” -exec rm ‘{}’ \;

bon celle là elle est un peu funky en terme de synthaxe, mais :

le {} désign la liste de ce qui a été retourné par find et le -exec y applique une commande. En l’occurence rm qui efface les fichiers.

donc cette ligne de commande trouvera à partir du répertoire courant et dans tous les sous répertoire les fichiers avec extensions .txt, et les effacera.

find . -exec grep -q www.nbs.fr ‘{}’ \; -print

Afficher tous les fichiers contenant www.nbs.fr.On pourra ensuite y appliquer un autre traitement, par exemple avec sed pour remplacer www.nbs.fr automatiquement par www.nbs-system.com.

Note, il existe aussi l’option -iname qui fait comme -name, mais sans tenir compte de la case des noms de fichier.

locate : trouve des fichiers à partir d’une DB générée la nuit

le système linux, en général, fait tourner régulièrement un programme qui met à jour le contenu d’une base stockant tous les fichiers de toutes les partitions.

l’avantage par rapport à find c’est qu’au lieu de chercher en live, on a un “cache” donc ca va beaucoup plus vite.

locate *.txt donnera la localisation de tous les fichiers .txt partout sur le système instantannément sans faire la recherche. Le défaut c’est que si vous avez un nouveau fichier depuis le dernier uptade de la base, il ne sera pas montré. Pour forcer l’update de la base en live : updatedb

Note: afin d’eviter certain probleme de droits sur la base, il est conseille de ne pas lancer updatedb a la main directement. Le script (emplacement sous debian) /etc/cron.daily/find le lance avec les bons arguments.

sort : permet de trier un flux

Trie les lignes…

cat dictionnaire.txt | sort > dictionnaire_trié.txt
cela va trier par ordre alphabétique le dictionnaire “dictionnaire.txt” et écrire le résultat dans dictionnaire_trié.txt
-r ca le fera à l’envers (reverse), la commande est simple mais elle a pas mal d’options différentes à apprécier

uniq : permet de rendre unique les données qui sorte d’un flux

Supprime des lignes identiques qui se suivent…

cat fichier_plein_de_doublon.txt | sort |
uniq > fichier_dédoublonné_et_classé.txt

si le fichier contient :
titi
titi
toto
tutu
tata
tutu

ca donnera :
tata
titi
toto
tutu

sed : permet de remplacer des strings par d’autres dans un flux ou des fichiers

sed est un couteau suisse du traitement des flux. Il est capable de faire énormément de choses. Nous allons voir une toute petite partie de sed, la partie la plus utilisée.
sed permet surtout de remplacer une chaine par une autre
sed s/www.nbs.fr/www.nbs-system.com/g index.html

Affiche le contenu de index.html en remplacant toute les occurrence de www.nbs.fr par www.nbs-system.com

La syntaxe de base est s/chaine d’origine/chaine a mettre/options ou :
-        Le s au debut signifie substitution
-        Le / qui separe les differentes partie peux etre en fait n’importe quel caractere. Il faut le prefixer d’un backslash (\) si on souhaite utiliser le caractere en question ailleur.
-        La chaine d’origine est en fait une regex, tout comme les recherches avec grep.
-        Les options peuvent contenir:

o       g – remplace toutes les occurrences sur une meme ligne.
o       i -Cela permet de faire une recherché de chaine sans tenir compte de la case
o       p – affiche la ligne s’il y a eu une substitution

On a un code dans lequel il y a des requetes SQL qui n’ont pas tenu compte de la case des noms de tables ou de champs (mysql sous windows a tendance a s’en foutre de la case) et on veux le faire passer sous unix.

Dans un premier temps, on affiche uniquement les lignes qui changent (option -n pour ne pas afficher par defaut, et le p de la substitution), de facon a verifier que cela ne fait pas de betises :

sed -n ’s/MaJoLiE_tAbLe/majolie_table/igp’ fichier.php

Une fois que la substitution s’effectue correctement :

mv fichier.php fichier.php.old &&
sed ’s/MaJoLiE_tAbLe/majolie_table/ig’ fichier.php.old > fichier.php

A noter que l’on a plus ni le -n, li le p, de façon a bien afficher tout le fichier d’origine.

Les regex, explications complete :

• X                 un caractere de base correspond a lui-meme
• .                 le point correspond a n’importe quel caractere (comme ? en shell)
• ^                 S’il est place au debut correspond au debut de ligne.
• $                 s’il est place en fin, correspond a la fin de ligne
• [aoeuiA-Z]   Les classes de caracteres. N’importe quel caractere qui correspond (voyelle en misucule, ou une majuscule)
• [^0-9]         un caractere qui n’est PAS un chiffre
• [0-9]*         * correspond a 0-n fois ce qui precede. Ici, rien ou une suite de chiffres.
• S\?              \? Correspond a 0 ou une fois ce qui precede. Ici, rien ou un S.
• \(abc\)        Les \(…\) permettent simplement de faire un groupe.

Par exemple : \(ta\)\* correspond a rien, ou une suite de ta.
-        X\|Y            correspondra X ou Y. Attention, il faut utiliser des () pour limiter l’etendu.

Dans la chaine de remplacement, le caractere & sera remplace par l’ensemble de la chaine d’origine (pratique pour la conserver, mais la commenter). D’autre part, \n ou n est un chiffre sera remplace par le texte correspondant au neme groupe (les parentheses).

Des exemples concrets :

Afficher toute les lignes commençant par une lettre minuscule
grep ‘^[a-z]‘
Ajouter un premier argument a toute les appels d’une fonction : sed ’s/ma fonction(/&1, /g’

Commenter tous les appels a la fonction prettylog (ne doit pas avoir de () dans les arguments:
sed ’s#prettylog([^()]*)#/* & */#g’

remplacer les fonction log_database(, log_engine( par log(”database”,  ou log(”engine”, :
sed ’s/log_\(database\|engine\)(/log(”\1″, /g’

Bien evidement, on reste dans l’optique du : sed ’s/…/…/g’ fichier1 > fichier2

tail : permet de voir la fin d’un fichier

tail toto.txt, affiche (par défaut) les 10 dernières lignes du fichier toto.txt

si vous avez à faire à un fichier qui change et qui grossit (genre fichier de log) et que vous voulez le suivre en continu :

tail -f toto.log : la commande ne s’arretera pas et continuera à vous montrer le fichier au fur et à mesure qu’il grossit.

head : permet de voir le début d’un fichier

comme tail mais pour montrer les lignes du début du fichier. (pas la peine d’essayer head -f)

chmod : permet de changer les droits d’un fichier ou répertoire

les droits sont cumulables, il existe read, write, execute. On va simplifier tout ca, mais il existe trois groupes à qui appliquer ces droits : le propriétaire du fichier, le groupe du fichier (généralement le groupe auquel appartient le propriétaire du fichier (voir chown)) et le propriétaire du fichier en lui même.

read vaut 4
write vaut 2
execute vaut 1

• chmod 400 toto.txt donne les droits en lecture à root. chmod 444 toto.txt donne les droits en lecture à tout le monde.
• chmod 555 c’est chmod 444 + chmod 111 soit les droits en lecture et en éxecution à tout le monde.
• chmod 777 c’est lecture, écriture, exécution à tout le monde. (4+2+1 pour le propriétaire, le groupe et les autres).
• chmod 000 enlève tous les droits à un fichier (notez que root bypass de toute façon ces droits)

Droits généralement utilisé :

600 – fichier normal, en lecture/ecriture uniquement pour son proprietaire
644 – pareil, et lecture pour les autres
700 – executable, en lecture/ecriture/execution uniquement pour son proprietaire
755 – pareil, et lecture/execution pour les autres

Note : un repertoire doit etre executable pour pouvoir aller dedans

Les droits peuvent egalement etre donner sous forme de modifications.

u – user
g – group
o – other
a – all

r – read
w – write
x – execute
X – execute si déjà present quelque part

chmod u+rw,go-w+rX

Ajoute les droits de lecture ecriture au proprietaire, enleve les droits d’ecriture au groupe et aux autres, leur donne le droit de lecture, ainsi que le droit d’execution si c’est un executable.

chown : permet de changer le proriétaire d’un fichier ou répertoire

Pour changer le proprietaire d’un fichier, il est necessaire d’etre root.

chown philippe:www-data toto.txt donne la propriété du fichier à philippe et l’affilie au groupe www-data.
chown xxx:yyy fichiers : xxx = user, yyy = groupe.

Donc si je veux donner la propriété et les droits à philippe et à tous les membres du groupe admin :
chown philippe:admin toto.txt

et avec un chmod 640 toto.txt je donne tous les droits de lecture/ecriture à philippe, la lecture au groupe admin, et aucun droits aux autres.

WARNING : un fichier en 777 est dangereux, tout le monde peut y écrire, a éviter en Web.
le truc classique en web qui passe (presque) dans tous les cas :
chown -R www-data.www-data *
chmod -R go-w+rX *

le -R dans ces commandes les rends récursives sur tous les fichiers et sous répertoires.

touch

touch crée un fichier vide s’il n’exite pas et change la date / heure à l’heure actuel si il existe.
touch toto.txt crée un fichier de toto.txt de 0 octets s’il n’existe pas et lui donne date/heure
au moment auquel commande est lancé s’il existe. Il existe d’autres options pour fixer une
date/heure précise entre autre.

mv / rm :

mv : c’est move.
mv toto.txt titi.txt renome toto.txt en titi.txt (attention, l’écrase s’il existe)

Note : mv permet egalement de renomer un repertoire, ou de deplacer plusieurs fichiers/repertoire vers un repertoire de destination.

rm toto.txt : efface le fichier toto.txt.
rm -r le fait récursivement. rm -f force l’effacement sans poser de question…

comme dans la plupart des commandes, on peut cumuler les switchs :

rm -rf * : efface récursivement tous les fichiers et répertoires situé sous le répertoire courant sans poser de question.

WARNING : guess why…

Lorsque vous utilisez mv ou rm de facon interactive, et que vous n’etes pas certain a 200% de votre ligne de commande (par exemple si c’est un via des variables, ou de l’expansion, …), utilisez l’options -i. Elle vous demandera confirmation avant d’écraser de façon irrémédiable des informations.

less / more :

Comme le dit régulièrement notre directeur technique, less can more. Donc less peut faire tout ce que fait more et plus.

Techniquement c’est bien aussi de connaitre more qui est en général plus utilisé dans les scripts ou les unix plus anciens (la ou il n’y a pas less)

less toto.txt va afficher le contenu (si il est en ascii, sinon en binaire il met un warning) du fichier toto.txt et bien sur ca se pipe :

grep henri toto.txt | less

pendant l’execution de more ou less vous pouvez appuyez sur / vous allez pouvoir rechercher dans le texte le mot qui vous intéresse.

echo :

echo affiche ce qui est en paramètre. echo est utile pour signaler quelque chose à l’utilisateur dans un script par exemple

(echo “Hello World”). echo peut aussi afficher le contenu d’une variable par exemple : echo $a ou encore se substituer à un ls en faisant echo * ou même à écrire dans un fichier echo YO > toto.txt.

la commande accepte beaucoup de switch, voir le manuel. (man echo)

man : les manuels des commandes

man ls
man awk (il fait mal à la tête celui la)

etc…

souvent sont aussi donné des références à d’autre man en pied de page du man.

par ailleurs man -k keyword recherche les pages de manuel qui parle de “keyword”.

Il existe plusieurs catégorie de man (1 à de mémoire qui sont plus ou moins spécialisés. Généralement les commandes sont en man 1 (ce qui est le mode par défaut).

si vous voulez le man plus orienté programmation C d’une chose précise : man 3 sigpause man 2 c’est plus orienté sur les syscall. Bref vous c’est plutot le 1 donc man [commande].

Par défaut man vous affiche son contenu avec un pager (less), pendant l’exécution de man, vous pouvez donc appuyez sur / vous allez pouvoir rechercher dans le texte le mot qui vous intéresse également.

sudo / su : des commandes qui permettent de passer ou de lancer des commande en tant que Super Utilisateur (root quoi)

Arreter apache… : sudo apachectl stop

va prendre les droits root temporairement pour stopper apache, si vous êtes habitilité par le fichier sudoers à la lancer cette commande.

si c’est le cas, il vous suffit de retaper le mot de passe de votre utilisateurs sur le système pour lancer la commande.
su : permet de passer root en tapant le mot de passe du compte root de la machine.
sudo -s : permet de passer root, sans connaitre le mot de passe de root, si on y est autorisé par le fichier sudoers.

WARNING : root à TOUS les droits sans aucune limite de portée. Si vous demander au système d’écrire de la merde dans la ram, il le fera sans broncher, tout comme si vous lui demander de s’effacer lui même.

wc : compte les caractères, lignes ou les mots

wc -l toto.txt compte le nombre de ligne du fichier toto.txt
cat toto.txt | wc -l ca revient au même.
-m ou -c pour les charactères
-w pour les mots

awk : permet d’appliquer un traitement avancé de formatage à un flux ou d’un fichier

awk est un langage avec un synthaxe à part entière, pas simple de surcroit. C’est très puissant et très pénible. Personnellement je m’en sers que pour une chose, reformater une sortie standard.

Pour l’exemple, un fichier contenant :

tcpmux         1/tcp # TCP port service multiplexer
echo           7/tcp
echo           7/udp

les séparateurs de colonnes sont des tabulations (il y en a 2)… La joie…

Je veux afficher la colonne 1 et la colonne 3 en admettant que mes séparateurs sont des tabulations :

cat toto.txt | awk -F “\t” ‘{ print $1 $3 }’

le -F “\t” c’est pour dire que tabulation est le séparateur de champs. print $1 $3 affiche la premiere valeur et la 3°, selon ce séparateur.

bon le résultat est que j’ai :
tcpmux1/tcp
echo7/tcp
echo7/udp

si je veux y ajouter des espaces pour rendre ca lisible :

cat toto.txt | awk -F “\t” ‘{ print $1 “     ” $3 }’

Évidemment, ca peut se séparer selon un autre séparateur, par exemple le “/” :

cat toto.txt | awk -F “/” ‘{ print $1 “    ” $2 }’

retour de la commande :

tcpmux         1    tcp    # TCP port service multiplexer
echo           7    tcp
echo           7    udp

il a enlevé le séparateur au passage et l’a remplacé par 4 espaces.

Pour le moment c’est flou mais le jour où vous en aurez besoin, awk vous sauvera la vie

Dans le doute, man [nom de la commande]. Tous les admins lisent les mans, meme les SR/CQ expérimentés. Ca sert à rien de connaitre par coeur tous les switchs (options) d’une commande, le man est donc une référence régulièrement utilisée par tous.

Bash – gestion des commandes :

& : laisse un processus s’executer en tache de fond, et vous permet de continuer a travailler sur le shell

Genre find ca peut être long, donc mettre un find qui redirige son résultat dans un fichier et le laisser en tache de fond c’est parfois une bonne idée :

find /var/www -name ‘*.php’ > ~/find.log 2> ~/find.err &
fg / bg : met un processus en foreground (fg) ou background (bg).
fg %n : n étant le numéro du job si vous avez mis plusieurs jobs en background.
jobs : liste les jobs (en background ou suspendu)

Lorsque vous etes en train d’executer une commande, Contrôle-Z la suspend.
Foreground – repasse une commande suspendu ou en background au premier plan
Background – pareil que de l’avoir lancee avec &, la tache continue en fond.

ps aux : liste tous les processus

Une commande a un code de sortie. Ce code est presque toujours correspondant a la facon dont le processus c’est termine. Si ca c’est bien passé c’est 0 sinon c’est autre chose.

&& : permet de linker deux commandes, et de n’exécuter la deuxième que si la première a échouée.

rm toto.txt && echo “ok fichier effacé”

“ok fichier effacé” s’affichera que si le fichier toto.txt a été effacé.

|| : Inversement, ||  permet de n’executer la deuxieme partie que si la premiere n’a pas fonctionner.

rm toto.txt || echo “Erreur lors de la supression du fichier”

; : le point virgule est un délimiteur permettant d’enchainer les commandes mais sans vérifier que le retour de la précédente s’est bien passé. ls *; echo titi > toto.txt; cat toto.txt enchaine les 3 commandes.

export : plusieurs fonction, mais on va surtout utiliser export pour exporter une variable. (La rendre visible pour des programmes que vous lanceriez apres)

export a=”toto” (stock toto dans a, et exporte a)
ou export a=’ls’   (stock le retour stdout de la commande ls dans a et exporte a)

‘commande’ : c’est la quote (’) inverse (alt-gr 7 sur un azerty, la touche au dessus de tab sur un qwerty). backquoté une commande ou expression force son évaluation, et utilise sa sortie standard a l’endroit de la commande.

a=ls stock ls dans a. Si on veut stocker le résultat d’une commande ls dans a :
a=’ls’

Quoting

\ : n’interprête pas le caractère suivant le backslash. utile pour plein de truc.

exemple : “cd mon truc” ne marche pas. Il faut taper “cd mon\ truc” pour que l’espace entre mon et truc ne soit pas perçu par la commande comme étant deux paramètre distincts.

Il est également possible d’utiliser, de façon complètement équivalente :

cd mon\ truc
cd mon” “truc
cd “mon truc”
cd ‘mon truc’
cd mon’ truc’”

“ : double quotes. Entre double quotes, il n’y a pas de separation de mot, les variables ($a), double quotes, backquotes et backslash sont interprété. A utiliser de facon generale lorsque l’on utilise des variables, et que l’on ne veux pas avoir de separation de mot, ou de risque d’expansion. Essayez les commandes suivantes :

a=*
echo $a
echo “$a”

‘ : simple quotes. Entre simple quotes RIEN n’est interprete. Un autre simple quote met fin a la sequence sequence. Il n’y a AUCUN moyen de backslashe un simple quote dedans. Tres pratique quand on veux une chaine avec plein de double quotes, $ et autre qui reste exactement tel quel.

for : super important. Un exemple concret vaut mieux qu’un long discour. Je veux appliquer un traitement à tous les fichiers .txt du répertoire courant pour les renommer en .old :

for i in *.txt ; do mv -i “$i” “$i.old” ; done

on prend une variable i pour faire une boucle sur les mots que represente * (l’ensemble des fichiers du repertoire), ensuite on applique (do) avec $i qui est en fait une des valeurs de *, et on finit par done.

TRESSSS pratique…

Autre cas, d’utilisation : for ((i=0 ; i < 10 ; ++i)) ; { echo $i ; }

Affiche les chiffres.

Generalites

/etc/init.d/ :

c’est ici qu’on stock les scripts lançant ou stoppant les démons du système.

Par exemple sur apache :
/etc/init.d/apache start
/etc/init.d/apache stop
/etc/init.d/apache restart

pareil pour mysql et plein d’autres démons, la plupart accept stop, start, restart.

généralités :

–help donne de l’aide sur une commande
-v : en général rend la commande “verbose” (affiche plus d’info sur son execution)
-q : en général rend la commande quiet

C’est quasi toujours vrai pour –help pour -v et -q c’est fréquent mais pas systématique.

faire un script :

un script bash commence toujours par (sur sa premiere ligne) :

#! /bin/bash

C’est ce qui permet au système de savoir qu’il faut utiliser bash pour interpreter ce script.

un script de base :

cat > script_de_base.sh (on met “.sh” à la fin en général pour savoir que c’est un script bash mais c’est pas obligatoire)

#!/bin/bash

echo $1

(Contrôle-D pour finir)

ensuite on le rend exécutable: chmod +x script_de_base.sh
puis pour le lancer : ./script_de_base.sh toto

vous noterez le “./” au début c’est pour signaler qu’on lance le fichier depuis le répertoire courant “.” puisque, par sécurité, le répertoire courant n’est pas intégré à la variable PATH.

ca affichera $1 qui vaut en l’occurrence toto puisque $1 $2 $3 $4 etc… sont les paramètres dans l’ordre sur la ligne de commande, $0 étant le nom du programme en lui même, ici : ./script_de_base.sh

pour se faciliter la vie on met en général le path standard des binaires utiles dans le début du script :

PATH=/bin:/usr/bin:/sbin:/usr/sbin

et puis un commentaire sur ce qu’il fait le machin, c’est mieux pour les copains et les lendemains de cuites.

Quelques exemple de synthaxes un peu évoluées et utiles :

grep die *.php | grep -v “//” | grep -v “/\*” | grep -v “\*/”

ca devrait vous retourner le nom des fichier php, avec le contenu après un : qui contienne un die mais qui n’est pas commenté (sur la ligne elle-meme).

si vous voulez tous les effacer :

Pour ne garder que les fichiers qui correspondent

grep die *.php | grep -v “//” | grep -v “/*” | grep -v “*/” |
cut -f 1 -d “:”

donc si on assigne le contenu de cette commande à une variable et qu’on fait une boucle dessus :

a=’grep die *.php | grep die | grep -v “//” | grep -v “/*” | grep -v “*/” |
cut -f 1 -d “:”‘

On commence par verifier qu’on a le bon resultat escompter avec un echo, histoire de ne pas effacer n’importe quoi : for i in $a; do echo $i; done

une fois que c’est bon : for i in $a; do rm -f $i; done

sinon ca passait bien aussi avec un find

Allez, une autre, on reformat un CSV :

le contenu original du fichier ORIGINAL.CSV :

toto:1:2222:toto is a star:20
titi:2:2222:bruno en str:4
tititt:2:2222:bruno en str:4
tutu:3:1122:denis b:8
tata:4:1112:thibault loves printers:12
tata2:4:1112:thibault loves printers:12
tata42:4:1112:thibault loves printers:12

on veut le sortir avec des séparateur qui soit des ; et pas des : et seuls les champs 1 et 5 nous intéressent et seul les tata* et titi* nous sont utiles :

Avec awk :
cat ORIGINAL.CSV | awk -F “:” ‘{ print $1 “;”  $5 }’ | grep t[ai]t[ai] > FINAL.CSV

Pareil, mais avec cut :
cat ORIGINAL.CSV | cut -d: -f 1,5 –output-delimiter “;” | grep t[ai]t[ai] > FINAL.CSV

Redémarrer apache et mysql en une ligne en ignorant l’affichage normal et d’erreur (pas conseillé), mais au moins en ne démarrant mysql que si apache s’est bien lancé :

{ /etc/init.d/apache restart && /etc/init.d/mysql restart ; } > /dev/null 2>&1

Partager cet article :

]]> http://www.wikigento.com/general/manuel-de-survie-unix-linux-2%c2%b0-partie/feed/ 2 http://www.wikigento.com/latence/seo-vitesse-de-chargement/ http://www.wikigento.com/latence/seo-vitesse-de-chargement/#comments Thu, 03 Jun 2010 11:49:44 +0000 Philippe Humeau http://www.wikigento.com/?p=1494 Pourquoi un site de E-commerce se doit de charger en moins d’1,5 seconde ?

Tout simplement parce que Google possède plus de 90% de part de marché et que ses dirigeants ont décidé d’inclure la vitesse de chargement parmi plus de 200 facteurs pris en compte dans le référencement naturel.

Certes, ce nouveau facteur ne sera pas plus important que la pertinence du contenu, mais il va petit à petit monter en puissance.

Cette transformation est logique, nos environnements de travail et personnels sont de plus en plus connectés, toutes les générations travaillent maintenant sur Internet, pourquoi devrions nous attendre, dans une société où l’instantané à pris le pouvoir ?

Depuis que l’homme est équipé de pouces opposables, d’une connexion ADSL et d’une culture Internet, il est impatient.

Pourquoi cette limite d’1,5 seconde ?

Quand votre site charge en moins de 1,5 seconde, il est plus rapide que 90% des autres sites actuellement connus de Google. Il est donc difficile à ce jour d’infliger une lourde pénalité à ceux chargeant en plus d’une seconde et demi.

Par contre, si vos pages charge en moins d’1,5 seconde, il peut vous favoriser, de la même façon que si votre site est très propre en terme de HTML ou bien conçu en terme de mots clefs. A l’avenir, ce facteur va se renforcer puisque les sites vont en tenir compte et charger plus vite.

1,5 seconde, c’est le temps que Google a choisi comme référence.

Dans les graphiques mis à disposition par Google, la délimitation est claire :

À moins d’1,5 seconde, vous êtes dans la zone verte, vous êtes rapide. Au-dessus d’1,5 seconde, vous êtes dans l’équipe rouge, vous êtes lent. Nous vous y trompez pas, aucun mot, aucun chiffre chez Google n’est utilisé par hasard. Le temps d’1,5 seconde découle de plusieurs études précises, parmi lesquelles nous pouvons déjà citer celle-ci ou celle-ci.

Et quand le mot « Lent » est choisi par Google, il a un sens fort.

Que perd-on précisément ?

De très nombreuses autres  études ont été menées et elles sont toutes formelles, être lent, c’est vendre moins, décourager l’utilisateur, freiner son business.

Les études donnent parfois des résultats différents. Certaines annoncent 2,8% de perte de chiffre d’affaire pour 1 seconde de plus de chargement, -4,3% de CA pour 2 secondes.

Amazon avait déjà fait le constat auparavant : 0,1s de plus de temps de chargement en plus leur coutait 1% de chiffre d’affaire.

Eric Schuman (Microsoft) et Jake Brutlag (Google), ont réalisé une étude et fait une conférence à ce sujet également. Il en ressort le même principe de fond mais certaines subtilités supplémentaires apparaissent. Entre une page qui charge en 50 ms et un autre en 2 secondes, le revenu par clic baisse de 4,3%, la satisfaction baisse de 3,8% et le temps avant le clic suivant augmente de 3,1s.

Les dirigeants de Google ont d’ailleurs la volonté   exprimée de faire passer l’internaute de la page   de recherche au site de destination de la manière  la plus fluide possible. Le chargement, le  changement de monde, doit être le plus  imperceptible possible, « comme si l’on  tournait la page d’un livre ».

La publicité en ligne (SEM) et notamment les adwords sont également moins efficaces lorsque le site est lent, comme vous pouvez le lire dans l’aide de Google ici.

Phil Dixon de Shopzilla a pour sa part constaté, en passant le temps de chargement de son site de 7s à 2s :

• 25% de pages vues en plus
• 7 à 12% de ventes en plus

A l’inverse, quand le temps augmente, l’image de marque se dégrade elle aussi car les utilisateurs se plaignent et parlent entre eux, d’autant plus depuis l’avènement des réseaux sociaux.

Pourquoi ces pertes ?

Le cerveau humain a plusieurs « rythmes ».

• De un à cinq dixième(s) seconde : C’est la limite à laquelle nous estimons inconsciemment avoir une action immédiate sur ce que l’on manipule. Word, MacOS ou Windows ou encore l’interface d’un téléphone doivent réagir dans cette zone pour être apprécié. Le cerveau interprète, commande, reçoit, comme si l’outil utilisé était un prolongement du corps qu’il contrôle directement.

• De cinq dixièmes à 1 seconde : La perception se modifie, nous n’avons plus l’impression de contrôler « directement ». Le cerveau assimile l’information et n’a plus l’illusion de pouvoir contrôler l’interface comme il contrôlerait un membre du corps.

• De 1 à 5 secondes : C’est le temps habituel de chargement des sites. L’internaute l’accepte en générale relativement bien. Si un chargement doit durer plus de 5 secondes, il est intéressant d’occuper l’espace visuel de l’internaute pour garder son attention (une petite hélice, une barre de chargement, un pourcentage). Garder l’attention plus de 10 secondes sans occuper un des sens est illusoire.

• À partir de 10 secondes : Le cerveau n’attend plus la réponse et vagabonde. Le site visité n’a plus l’exclusivité de l’attention de l’internaute. Celui-ci se demande s’il ne va pas aller sur un autre site concurrent, s’il a payé ses impôts, si le webmaster lui envoie les pages par la poste ou à dos de hamster, bref, la vente ne se fera probablement pas.

L’âge de l’internaute et sa culture internet changent la donne.

Les adolescents qui n’ont jamais réellement connus l’attente avant d’avoir un résultat, tout au moins sur l’informatique. Le temps à laquelle la réponse est reçue, après que la demande ait été envoyé, est d’une importance colossale mais il doit être d’autant plus réduit que le potentiel acheteur est jeune.

Une grand mère attendra 20 secondes la page Web du site avec les gentils dauphins pour réserver ses vacances. Hugo, du haut de ses douze ans, au delà de la deuxième seconde, il se demande si les pages du site lui sont acheminé par pigeons voyageurs ou à dos de hamster.

Comment mesurer le temps de chargement ?

Vous pouvez mesurer la rapidité de chargement de votre site avec ces deux extensions Firefox :

• Google Pagespeed (dont le mode d’emploi se trouve ici)
• Yahoo Yslow

Ou avec ce site

Il est également possible de suivre l’évolution de la vitesse de chargement de son site dans les outils Google appelé « Webmaster tools ». Si vous n’avez pas de compte, créez en un et si vous en possédez déjà un, allez dans l’onglet Labo puis dans « Performances du site ».

Pourquoi les sites ne chargent pas plus vite ?

Avec le matériel toujours plus puissant et les connexions toujours plus rapides, la question se pose en effet.

Les sites qui ont vus le jour il y a dix ou quinze ans chargeraient très rapidement aujourd’hui, bien plus rapidement qu’à l’époque. Les connexions vont plus vite, nous sommes passés à l’ADSL du coté de clients et aux connexions très haut débit du côté des serveurs.

Alors avec de tels progrès, pourquoi un site prend-t-il toujours 4 à 20 secondes pour charger ?

Les machines ont évolué des deux coté également. Les ordinateurs sont plus puissants et les serveurs ont vus leurs capacités de traitement multiplié par plus de 1000. Par contre, la vitesse de la lumière n’a pas progressé. Elle met toujours plusieurs dizaines de milliseconde à traverser l’atlantique, de même, les connexions internet ont aussi une limite de progrès, tout comme les protocoles qui soutiennent internet. Tous ces facteurs font que l’ensemble a progressé de manière non homogène.

Un serveur 1000 fois plus rapide de nos jours est également 100 fois plus sollicité qu’avant. 3000 visites par jours il y a 15 ans, c’était un “grand site”, aujourd’hui, c’est un trafic modeste.

Composition du temps de chargement d’une page

Le temps de chargement d’une page est composé de plusieurs facteurs :

• L’initialisation de la connexion et la résolution du nom de domaine
• Le temps d’interprétation des scripts php / asp
• Le temps de chargement des éléments par le réseau
• La recherche des informations en bases de données
• Le formatage d’une sortie en HTML
• Le délai d’interprétation et d’affichage du navigateur

C’est un résumé puisque le temps est en fait découpé en plus de sous sections mais nous entrerions dans trop de détails.

Il y a quelques années, j’avais proposé le schéma suivant, résumé lui aussi :

Les performances des connexions et du matériel ont donc évolué mais au final, les programmes aussi. Les sites web modernes n’ont plus rien à voir avec ceux d’il y a quinze ans et ils ont apportés une souplesse sans égale au E-commerçant.

Gestion de catalogue avancée, page dynamique et agréable à regarder, outils d’administration poussés, les sites modernes sont définitivement plus efficaces. Cette efficacité a été apportée, notamment, par des langages de programmation plus évolués dont PHP et par l’usage de base de données, dont Mysql.

De plus les langages ont évolué vers de l’objet ce qui les a aidé à devenir plus flexibles et efficaces mais en contrepartie, toutes ces améliorations ont un coût en terme de performances.

Ces complexités et améliorations fonctionnelles additionnées nécessitent donc plus de puissance. Les graphismes et photos plus lourds ont, eux, demandé plus de vélocité à nos connexions.

Il faut également prendre en compte que la qualité du code source généré est inégale. Deux sociétés peuvent réaliser le même site et l’un sera optimisé tandis que l’autre sera lent, c’est une question de capacité technique et d’expérience. De la même façon tous les sites ne sont pas à égalité devant le temps de chargement, de part leur conception ou même leur usage.

Sur un site comme Amazon, 90% du surf se fait depuis  le moteur de recherche et il se doit d’être rapide sur ce point. Sur un autre site ce sera la “vitrine” virtuelle et son agencement qui déclencheront les ventes et ces deux approchent n’ont pas le même coût en terme de temps de chargement.

La technologie également joue énormément et enfin la capacité de l’infogérant à optimiser votre infrastructure et son usage.

La vitesse n’est pas tout

La disponibilité du site et la réactivité de l’infogérant en cas de soucis sont également des facteurs majeurs de succès.

Bien que l’ingénierie informatique et la programmation Web ne soient plus des secrets maîtrisés par un très petit nombre, les sites sont devenus de plus en plus complexes et les accidents peuvent arriver.

Sur un serveur, un disque dur, une barrette mémoire ou un autre élément technique peut céder. Du côté du site web, un élément logiciel peu avoir un défaut ou engendrer une erreur. Dans les deux cas, un internaute peut accepter un court délai d’indisponibilité mais ceci ne doit pas se prolonger.

Une interruption de plusieurs heures pendant les soldes peut être problématique, les ventes de fin d’année ou une animation commerciale. La perte de chiffre d’affaire et d’image de marque peut devenir très sensible.

Un infogérant spécialisé dans le E-commerce et une Web Agency sont des alliés précieux dans l’exploitation d’un site commerçant.

En conclusion

La rapidité de chargement joue donc 3 fois :

• sur l’expérience utilisateur
• sur le référencement naturel
• sur l’efficacité de la SEM (mots clefs sponsorisé dans les moteurs de recherches)
• sur le chiffre d’affaire généré

Il est donc clair que ce facteur est critique pour un site de E-commerce.

Philippe Humeau, NBS System, hébergement et sécurité du E-commerce.

Voici bien longtemps que je n’ai pas eu le temps de poster quoique ce soit. Mes confrères bloggers me l’ont tous dit, “un blog, c’est une discipline, de la régularité, un contenu à date fixe”…

Oui mais voila j’ai eu le site de NBS System à refaire et Bargento 4 à organiser. Cependant, les excuses ne servent à rien, le mieux est d’aller de l’avant.

Alors voila un billet, en attendant de poster pas mal de “lourd” dans les semaines à venir.

Pour se remettre en selle, un petit “bestof” des meilleurs gags sous Magento auxquels nous avons dû faire face récemment ! Avec plus de 200 sites hébergés, on a eu quelques frayeurs et quelques moments de solitudes, je voulais vous faire profiter des intégrations les plus pénibles, des dialogues les plus sourds, des propositions les plus farfelues.

Bref, toute mon équipe se joint à moi pour vous faire part de nos tranches de vie d’hébergeurs.

Nous rions de bon cœur, jamais méchamment car chaque travail a ses difficultés et l’anodin devient le calvaire des autres sans que ce soit fait exprès (c’est réciproque d’ailleurs) !

Voici le palmarès :

Idée la plus folle en intégration, le SDLM (”Le Slider De La Mort”)

Le concept est brillant, simple, élégant. Une interface Web, 5 curseurs à déplacer sur des positions.

Un pour le produit, un pour la couleur, un pour la taille, un pour la forme etc… Quand un internaute déplace un des curseurs, on charge les produits qui vont bien en fonction de la position des différents curseurs, par exemple pantalon, 60, noir, jean, femme, etc.

15 produits * 6 tailles * 12 couleurs * 6 formes * 6 typologies (femme – homme – enfant H/F – adolescent H/F)  = 38 880 requêtes en base de données à chaque déplacement d’un curseur… Bien sur on pourrait optimiser et stocker un résultat de requête, générer un cache ou autre mais le développeur n’avait pas vu les choses sous cet angle… Tout cela part avec une requête Ajax et on attend la réponse pour peupler la page.

Maintenant, on prend sa souris et on bouge son curseur de gauche à droite bien rapidement. Et hop, un dénis de service à coup de millions de requêtes SQL dans la base de données.

Et paf le serveur.

La surenchère au SDLM : l’OMODLM (”on mouse over de la mort”)

Ils ont eu l’idée après ceux du slider de la mort alors le résultat est plus fort mais moins de mérite sur le concept original

Bonne note cependant car la version est très évoluée, on a plus besoin de cliquer ou de drag & droper un curseur, passer au dessus des catégories de produit suffit à créer une charge relativement indécente de travail pour les serveurs.

Un confort d’utilisation indéniable somme toute ! Avec le OMODLM (On Mouse Over De La Mort), le déni de service est au bout de votre pointeur, 10 allers-retours bien rapide sur les catégories produit et hop, 200 produits chargé par catégories, 10 catégories, 10 allers-retours du mulot et… et… ben des requêtes javascript en chaine qui font 20 000 requêtes de produits soit en requêtes SQL, facilement le triple.

Et paf le serveur.

La grande méchante Cron : 2 Go c’est trop peu !

Ah les crons, un grand plaisir régulier, qui ne cesse de nous faire trembler.

La plupart du temps ce sont des imports automatiques de produits ou ce type de traitements. Les scripts consomment de plus en plus de RAM, ne trouve jamais leur conditions de sortie et on se retrouve avec un bon gros PH qui pèse 1 ou 2 Go en mémoire et qui continu à manger des ressources sans jamais sortir.

Que du bonheur…

Alors l’idée c’est qu’on a un nombre de tickets impressionnants qui demandent à passer la PHP memory limit à 2 Go voir plus, juste pour laisser la Cron_qui_tue en PHP finir son travail. Cette limite étant appliquée à tous les processus PHP, ca peut très vite, très très vite, dégénérer.

Alors non, on ne passe pas à la limite à 2 Go, on optimise son code ou on gère différemment.

L’auto dérision est un sport, alors nous aussi témoignons !

On est pas plus parfait que les autres alors évidemment on en fait une ou deux.

On utilise Sysfence pour vérifier si certains processus ne deviennent trop gourmands, risquant ainsi de tuer la machine. Ce sysfence vérifie si la machine Swap (et donc manque de RAM) et si c’est le cas, il redémarre le service consommateur.

Sauf que le service en question (apache en l’occurrence) quand on le redémarre, cela ne libère instantanément les ressources allouée, donc le Swap est toujours utilisé et sysfence redémarre le service, et encore, et encore et encore.

Et le site Web, il clignote. (Une temporisation avant de relancer le démon, le temps de laisser le swap se vider, à résolu le problème)

My Java is beautiful

Alors ce n’est pas directement du Magento mais un service connexe de catalogue (comme un catalogue papier dont on tourne les pages). Le moteur de catalogue est assez évolué et permet des trucs totalement inutiles, comme par exemple tourner le catalogue de 3° vers la gauche…

Enfin passons. Il a “l’avantage” de resizer les images à l’affichage donc si on a du 800*600 c’est à la bonne taille et si on est en 1200*1024 etc. Sauf que plutot que de contraindre les images par le CSS ou même de stocker 3/4 versions de tailles différentes, il resize à chaque fois, pour chaque visiteurs et stock tout dans la JVM (oui c’est du Java, c’est plus drôle).

Résultat, au bout de 12H d’utilisation à 10 000 visiteurs, 16 Go de RAM consommés et 86 Go de Swap…

Alors on force la désalocation, le garbage collecting avec des paramètres passé à la JVM mais rien y fait. Alors on tue le démon à intervalle régulier, histoire de pas saturer les deux serveurs de catalogues.

Le superviseur

C’est l’histoire d’un programmeur qui veut faire un outil de supervision de la charge des deux serveurs frontaux de son client. Nos serveurs se portent bien mais il souhaite pouvoir vérifier si un de ses scripts exécuter régulièrement ne prend pas trop de CPU / RAM et sinon le killer.

Bon le script en question consomme effectivement pas mal de ressource alors il code un démon en PHP pour vérifier la charge des serveurs afin de tuer le script si besoin. Seul soucis, il exécute la routine de vérification de la charge avec du PHP, connu pour sa légèreté (5 Mo en RAM pour vérifier la charge alors qu’un démon en C prend 5 Ko). Enfin seul soucis pas vraiment, dans le but de bien faire et d’être réactif, il lance son check toutes les 35 millisecondes… Un script PHP qui a lui seul met plus de 35 ms à s’exécuter.

Et paf le serveur…

My slave is beautiful

Allo ? Mme ……. de la société …… (grand compte).

Oui bonjour, que puis-je pour vous ?

[...] je souhaiterai savoir à quelle date vous pourriez intervenir pour venir configurer nos serveurs ? [...]

Ah, nous ne faisons pas ce type de prestation madame, nous optimisons les serveurs de nos clients et les nôtres mais pas ceux de votre infogérant actuel. (qui ne travail pas avec/sur Magento)

Ah mais attendez, on vous paye. 450 €, par jour ! Par contre il faut être là dès demain matin et les 5 prochains jours d’affilé.

Je me suis mal fait comprendre, cela ne fait pas partie de nos prestations madame.

De plus un expert Magento, peut importe qu’il soit développeur ou infogérant, ca ne coûte pas ce tarif là. Même si nous faisions cela, on a déjà pas mal de travail on ne peut pas se libérer 5 jours d’affilé du jour au lendemain.

Écoutez, je vois que vous ne faites aucun effort, je pense que nous n’allons pas travailler ensemble…

…

Je vous poste mon site ?

Alors c’est l’histoire d’un mec, il veut mettre son site Magento en ligne. Jusqu’ici, rien d’original. Au bout de 4H, il appel le support et annonce :

Votre système plante au bout de 5 Mo de transfert, je n’arrive pas à mettre le site de mon client en ligne.

Vous utilisez quel protocole ? FTP, SFTP, SCP ou SVN pour faire cette mise en ligne ?

Écoutez, je vous dis que ca plante au bout de 5 Mo, ce n’est pas une question de protocole.

Ca pourrait nous aider à trouver le soucis, sait-on jamais. Quel protocole utilisez-vous ?

J’utilise OTRS.

Notre interface de déclaration de tickets pour le support niveau 1 ?

Oui.

Mais monsieur, le champ upload d’OTRS sert a nous envoyer une copie d’écran, pas le site, il faut utiliser les accès que l’on vous a envoyé SFTP ou SVN par exemple.

Les accès quoi ?

Mention spéciale du jury : Je SVN, tu SVN, il flingue le site…

C’est l’histoire d’une marque qui lance des ventes privées. Un jour, elle appelle sont intégrateur à J-20. “Tu peux me faire une ou deux modifs ?” , “pas de problème je te fais ca”. Les modifications sont mises en ligne, tout fonctionne. Le jour J c’est le drame.

• 500 visiteurs simultanés, tout va bien
• 1 000 visiteurs simultanés, tout va … curieusement… La charge monte… un peu trop vite
• 1 500 visiteurs simultanés tout va plus du tout, serveurs couchés, médore tourne à un load de 70… Soit une surcharge colossale !

On cherche, on cherche, on cherche… Rien à faire les serveurs sont en débandade complète. Mais que se passe t’il ? Eh bien la Web Agency avait écrasé le fichier /var/www/eu/app/etc/use_cache.ser avec son propre fichier… Oui mais un développeur, lui, il coupe les caches pour voir ses modifications instantanément. Quand il publie son fichier use_cache.ser avec 6 cache sur 8 de désactivés, les serveurs sautent.

Ma page d’accueil est lente…

Alors, voyons voir, je prends mes 6000 produits, je code ma boucle, et pour chaque produit sur ma home, je lance ma fonction qui cherche dans les 6000 produits.

Mince, ça rame… Je ne comprends pas ?

En premier lieu, je suis très heureux de vous annoncer que la FEVAD (Fédération du E-commerce et de la vente à distance) soutient Bargento 4 ! Cette fédération est l’une des plus influente sur Internet en ce qui concerne le E-commerce et son aide aux marchands est tout aussi précieuses que ses statistiques annuelles, sur laquelle de nombreux professionnels (dont moi), basent leurs projection.

Un chaleureux “Welcome” à eux !

Traduction simultanée

Bargento 4 tourne international et cela change la donne !

4 traducteurs simultané pour les conférences, 1 traducteur dans l’international Lounge de Zend et un en déplacement dans le Bargento, chacun va pouvoir parler facilement sa langue sans entrave. Durant les conférences, la traduction sera envoyée simultanément par infrarouge dans des casques. Sympa non ?

Ça tombe bien, l’international progresse car on a déjà : des russes, des espagnoles, des anglais, des belges, et des suisses.

Les renforts !

Il est temps pour Gabriel et moi même d’intégrer de nouveaux membres dans le Staff de Bargento pour nous soutenir.. Deux personnes pour tenir la majorité de cet évènement, c’est trop peu. Chacun de nous y consacre ~20 jour/homme et, quand bien même nous aimons nous impliquer dans la communauté, ca représente 15% d’une année de travail pour monter 2 Bargento par an. Cette fois ci, nous allons devoir faire face à 500+ personnes, plus de 20 speakers, 18 stands, et probablement une centaine de choses inattendues !

De plus les Apérogentos arrivent en régions et je compte bien aider les volontaires à réussir leur paris, de l’aide sera, là encore, la bienvenue.

Afin de faire les choses le mieux possible, nous en appelons donc à la communauté :

Voici les profils que nous recherchons :

• Un Web designer pour aider Gabriel à gérer les sites (membre permanent), bienvenue à Xavier Bonnaud
• Une personne pour m’aider (Philippe) à la communication et l’animation du réseau, ainsi que pour les Apérogento (membre permanent), bienvenue à Nicolas Trossat
• 4 to 6 personnes le jour J, pour aider partout où cela sera nécessaire. (un régisseur général pour fluidifier l’organisation, deux personnes pour la zone des exposants, une pour la zone international Lounge, 2 pompiers volants pour les imprévus par exemple)

Nous souhaitons trouver des personnes qui veulent s’engager à nos cotés durablement, qui sont (ou souhaite devenir) impliquées. Les seules choses que vous allez gagner en retour : de la visibilité dans la communauté (votre nom en lettre d’or dans pleinnnn d’endroits) et un tee shirt “Bargento Staff Member” !

C’est pas une offre fantastique ca ?

Papiers officiels et invitations (pour nos amis Russes ou votre Boss)

En Russie, tout doit être mis sur papier d’une façon ou d’une autre. Si vous avez l’impression qu’on st accroc aux formulaires en France, un stage de 2H en Russie devrait vous faire changer d’avis. Donc pour nos amis qui viennent de la confédération Russe, Gabriel et moi signons les invitations officielles nécessaires à l’obtention d’un Visa, n’hésitez donc pas à nous en demander.

De même, si votre Boss craint que vous montiez à Paris plus pour le Moulin Rouge que pour participer à un meeting professionnel, nous avons les papiers qui vont bien, là aussi, n’hésitez pas.

De nouvelles animations au menu de Bargento 4 !

On y travaille et il y en aura d’autres mais voici déjà deux ou trois animations qui auront lieu lors de Bargento 4 :

Les Web Sites Doctors: Olivier Sauvage (capitaine Commerce), François Ziserman (Araok) et Olivier Levy (Blog E-commerce) vous feront une critique (gratuite) de votre site. J’aurais pu dire “diagnostique” mais ces trois là, très professionnels, sont connus pour leur franc parlé. Comme on est pas contre un peu d’animation et qu’il vaut mieux un avis franc et clair qu’un compliment cachant un défaut, ca va défriser ! Pas d’inquiétude cependant, vous repartirez les poches pleines de bons conseils et riche d’une partie de leur savoir, ce qui ne peut que faire du bien à vos ventes ! Olivier S et François sont des pros du design, des tunnels de ventes, de la double captivité du prospect à infratension renversée et Olivier L est lui un poil branché SEO, à vous de voir mais les gens payent cher d’habitude pour se payer leurs conseils. Alors ? On va voir le toubib ?

Job board: Vous cherchez un boulot ? Un développeur ? Vous fournissez de la main d’oeuvre Offshore ? Le Job Board est fait pour vous. C’est un moyen simple de se donner rendez vous dans Bargento, nous mettons à votre disposition un tableau permettant de faciliter les rencontres et vous pourrez vous rejoindre entre les conférences. Un prénom, ou un pseudo, une heure, un sujet et hop, le tour est peut être joué, simple et efficace, comme on aime !

Meeting privé: Les habitués connaissent le principe, tout le monde veut des clients et les clients ne veulent pas forcément se faire harceler. Le stand c’est idéal mais il est aussi possible de trouver ceux que l’on cherche en envoyant un mail aux organisateurs (contact@bargento.fr) et nous pourrons vous mettre en contact avant ou après le Bargento ou même organiser une rencontre sur place. Attention, ce service n’est que pour les clients finaux, possesseurs de sites. Inutile de demander la liste  des clients finaux aux organisateurs, nous ne la donnons pas, à vous de les trouver.

Comme lors de Bargento 3, vous pourrez avoir accès à une salle de négociation pour discuter en privé ou signer des contrats.

Nouveaux amis et membres de la famille Bargento

Hitomi Studio, Stéphane & Romain. Pas vraiment nouveaux puisqu’ils sont là depuis le premier mais ils nous aident en diffusant l’information sur leur excellent blog www.simpleentrepreneur.com, un grand merci à eux, pour la qualité des billets et pour le coup de main.

Xavier de Profileo nous aide sur le design du site Bargento.fr et pas que là puisqu’il est de longue date aussi impliqué. Merci à lui.

Petite modification du programme des conférences

La conférence de Smile (par Frédéric de Gombert) sera intitulée “Il parait que Magento …”
Ça portera sur les pièges et fausses idées que l’on rencontre souvent à propos de Magento.La dernière conférence sera connue bientôt puisque Gabriel finalise ce point.

Attention pour les places !

1. Notre communication internationale débute, ca va attirer du monde
2. Varien, enfin Magento INC, va lancer un post sur son blog US et un mailing vers 150 000 aficionados de Magento dans le monde…
3. Gabriel et moi allons diffuser l’info (flyer) lors du Developer Paradise, ce qui va attirer des développeurs internationaux
4. Plusieurs mailings vont partir de différents sites/sources/amis de Bargento

Ceci implique qu’il est fortement conseillé de prendre vos places rapidement puisque, comme d’habitude, nous n’en vendrons pas sur place.

De plus, nous avons besoin d’avoir les tickets des présents 3 semaines avant Bargento (donc début mai pour celui-ci) afin de pouvoir faire imprimer des badges nominatifs, avec un QR code (le mobile Tag) qui permet de télécharger les cartes de visites des présents (si Nicolas Trossat s’en tire, merci à lui).

Autant de raison pour ne pas oublier de prendre sa place sur la billetterie de Bargento 4.
(pour mémoire, Bargento 2 et 3 se sont tenus à guichet fermés)

Ils nous rejoignent dans la danse pour Bargento 4

• IM Boutique qui monte en puissance !
• PayPal, je suppose que vous connaissez ! En plus de leur conférence, vous pourrez les rejoindre sur leur stand
• SQLI, j’avais oublié de les ajouter au panneau de sponsors, c’est maintenant choses faite
• Nessby, un petit nouveau, qui va nous montrer ce qu’il sait faire !

Voici donc le nouveau panneau des sponsors, merci à eux tous :