Archives pour l'étiquette Voici.fr

L’internet bug a Prisma Presse

Je ne suis pas le seul à partir. 24 des 26 personnes composants la DSI Internet de Prisma Presse partent également. En effet la quasi totalité des personnes assurant l’activité technique de l’internet dans cette entreprise ont souscrit au plan de départ volontaire ouvert dans le cadre d’un plan de sauvegarde de l’emplois.

Développeur, Administrateur système et réseau, Architecte Web, Chef de Projet, Expert SEO, Assistante, Responsable d’application, Chef de Projet Technique et même le Responsable de service on adhéré à ce plan. Cette unanimité a souhaiter partir de la part de personne au cœur d’une activité d’avenir pour l’entreprise soulève forcément beaucoup de question. Il ne m’appartiens pas d’expliquer comme la direction de Prisma Presse à laisser ceci ce produire. Un professeur d’HEC écrira peut être un mémoire de management sur ce plan ou alors un sociologue étudiera cette dynamique de groupe qui conduit tout un service à préférer partir. Mais force est de constater que cette situation n’a jamais été désirée ou voulue de la part de l’entreprise. A mon humble avis la situation ainsi générée devrait induire au moins 20% de coût supplémentaire pour Prisma Presse dans son activité Internet et lui couter quelque point d’audience.

Cafe.com : Is cool !

De Responsable Web Hosting pour Prisma Presse

Je ne suis plus responsable des architectures d’hébergement web du Groupe Prisma Presse depuis le vendredi 20 novembre 2009.

Bilan de trois années d’hébergement

Les trois années au sein de cette entreprise ont été d’une extrème richesse. J’ai eu la chance de participer a la conception et au lancement de Gala.fr, Voici.fr, Geo.fr, Femmes.com, Cuisine-et-recette.fr ainsi que a la refonte de Capital.fr et Tele-loisirs. J’ai également assumé la production de caminteresse.fr, femmeactuelle.fr, tele-2-Semaines.fr, tv-grandes-chaines.fr, VSD.fr; PrismaPub.com, Prisma-Presse.com.

prisma_titres1.jpeg

En près de trois ans de WebHosting à Prisma Presse, Kathryl et moi même avons :

  • Conçus une plate-forme de virtualisation / cloud computing qui héberge l’ensemble du SI du service Internet. De 4 serveurs physiques pour un projet en 2007 sous terminons avec 2 serveurs physiques, 23 serveurs virtuels, 500Go de donnée et 20 sites web maintenues en parallèle.
  • Conçus et / ou gérer 8 plate-formes distinctes de productions pour un total supérieur à 2,5 milliards de pages vue en 3 ans.
  • Réduit la facture mensuelle d’hébergement de Prisma Presse de 40% par rapport à son point le plus haut.
  • Stabilisé le coût d’hébergement annuel. L’année 2009 ayant couté 3% de moins que l’année 2008 ceci alors que l’audience explose.
  • Assuré une monter de l’audience de 66 Millions de page en octobre 2007 à 145 Million en octobre 2009. une progression de + 120% en deux ans.[1]

Merci aux développeurs pour la qualité de leur code, moins de 10 requêtes sql par template eZ c’est un rêve pour bien des acteurs du monde de la presse sur internet[2]. Merci aux chef de projet d’avoir fait accepter un peu de contraintes techniques à nos clients et d’avoir prêché encore et encore pour l’application de nos préconisations. Merci aux SEO d’avoir assuré avec brio la popularité des sites web et d’avoir su avoir un pied dans le marketing et un pied dans la technique.

A Responsable d’exploitation web pour Cafe.com

IsCool

J’ai débuté comme responsable d’exploitation, toujours dans et pour le web, chez Cafe.com un éditeur de jeux online. Je suis très heureux et emballé d’intégrer une entreprise aux nombreux projets et qui à déjà démontré ses qualités avec le succès du jeu Is cool sur facebook. Is cool qui compte déjà 120 000 fan officiel pour presque 3 millions d’utilisateur actif selon AppData.com.

Is.cool.AppData.png

Le portefeuille projet de Cafe.com est impressionnant et comportant j’espère de nouveau blockbuster comme is cool dont j’aurais la responsabilité de la production.

Mais pas d’emballement et je plan sur la comète. Je suis pour le moment en pleine phase d’intégration. Les choix technologie de Cafe.com sont fort et volontaire et je vais devoir rester concentré pour assimiler au plus vite les fondamentaux et travailler avec une équipe d’un très très haut niveau :

  • LAMP / Ubuntu
  • Memcache / Tokyo Cabinet
  • Puppet / Capistrano
  • Amazon Elastic Compute Cloud (Amazon EC2)
  • Amazon Simple Storage Service (Amazon S3)
  • Amazon Elastic Block Store
  • Elastic Load Balancing
  • Amazon Virtual Private Cloud

Cafe.com

Notes

[1] Pas de cout chiffré, juste des pourcentages, confidentialité oblige. L’audience est public grace à l’OJD

[2] Une pensé pour les collègues de Lagardère

Voici.fr résultat d’optimisation des images

Pour illustré mes recommandations sur l’optimisation des images pour l’accélération d’un site web je me suis amusé à optimisé le contenue du storage eZ publish de voici.fr. Le storage qui est basé sur eZFS qui permet de stocker les binaires sur disque (donc les images) et de les partager via NFS je n’ai donc eu aucun mal à accéder au image et à pratiquer un test.

Etat initial

J’ai recopier le répertoire /var/www/voici.fr/var/siteaccess/storage sur une machine virtuel de notre architecture de développement et j’ai ensuite fais l’inventaire de cette arborescence.

  • 9,9 Go
  • 207075 fichiers
  • 326 fichiers png
  • 5 fichiers jpeg
  • 195883 fichiers jpg

Nettoyage jpegtran

J’ai lancer un nettoyage des fichiers jpg avec jpegtran, celui ci à duré 5 heures mais j’avais à ma disposition que 1 core de Xeon et 1Go de Ram.

real    320m39.499s user    37m44.520s sys     227m19.910s

Au final j’obtient une taille total de 9,3Go pour /var/www/voici.fr/var/siteaccess/storage. J’espérais un gain supérieur mais en même temps cela indique que les images uploader répondre déjà à un charte précise et sont normées.

Analyse du gain

Le gain de 300 Mo peux sembler totalement inutile à l’heure des disques SATA à 1To si seul le stockage était jeu. Or l’important est de gagner quelque point sur la diffusions. Dans la cas présent tout les 10Go nous gagnons 300Mo. Si je spécule sur le volume total de donnée transférer par mois pour voici.fr c’est près de 100Go de donnée en moins que nous avons à diffuser chaque mois. Reporté à l’année c’est 1,2To de donnée qui ne passerons pas dans les tuyaux.

Sur une autre plate-forme nous avons utilisé un CDN pour prendre un charge la diffusion des images. Le service de CDN nous facture environs 25ct d’euro le Go transporté. On peux donc spéculé que un gain de 1,2To représente donc 300€.

Je rappel que ceci est totalement spéculatif et sur les seules donnée de voici.fr, attention.

Bad User Karma

Je viens de prendre conscience que j’avais saturé mon filesystem et que en conséquence le storage de voici.fr fait plus de 9,9 Go.

L’exorciste reste valide, mais partiel.

Voici.fr preuve par l’image de l’intérêt de l’optimisation web cache et des performance des reverses proxys

Suite à mes articles sur la configuration eZ publish pour l’utilisation des caches web, sur l’optimisation des reverse proxy squid j’ai tenté de faire la démonstration de l’intérêt de l’ optimisation web cache et des performance des reverses proxys. Je vais apporter quelques preuve de plus dans cet article.

Tenir les versions des logiciels à jours

L’optimisation de ces web cache et la performance des reverses proxys passe tout simplement pas la mise à jour régulière du système et des logiciels. Dans l’exemple ci dessous le gains de performance est flagrant entre une configuration Debian Sarge avec Squid 2.5 et une configuration Debian Etch avec Squid 2.6. Au mois d’octobre 2008 le taux d’utilisation du cpu par le système à chuté, un goulot d’étranglement à été supprimé.

Squid de Sarge a Etch

Soigner la configuration eZ et apache pour squid

Suite à la mort de Michael Jackson Gala.fr et principalement Voici.fr ont connu un très fort pic de charge. Durant cette épisode d’audience intense nous avons poussé en production différente optimisation que nous avions précédemment préparé. Ces optimisations porte sur la configuration de eZ Publish 4 et de Apache pour l’utilisation des caches web. L’effet principale étant obtenue en allongeant le temps de rétentions des images et en instaurant la compression pour les fichiers css et javascript.

Squid Modif conf

Affiner la configuration système des serveurs squid

Une configuration optimum des squid passe également par une adaptation du système à leur mission de reverse proxy tel que nous l’avons réalisé récemment. Le résultat est la et guère discutable pour un charge CPU légèrement supérieur nous desservons plus de client et stockons plus d’objet ce qui conduit à une plus faible sollicitation des frontaux.

Squid.Cpu.Utilisation.png
Squid.Number.Of.Client.png
Squid.Nombre.Objet.Cache.png

Optimisation des images pour l’accélération d’un site web

En prenant comme exemple le travail réalisé pour voici.fr j’ai expliqué comment optimiser un site eZ Publish 4 pour l’utilisation des caches web, comment optimiser les performances de reverses proxy SQUID en amont de vos frontaux php, puis comment purger un élément de vos reverse proxy cache SQUID et au final démontré l’intérêt de ces optimisations avec le cas d’un pic d’audience du à l’action conjugué de Google Actu et Yahoo Actualité toujours sur Voici.fr

Maintenant je penche sur l’optimisation des images pour en accélérer le chargement afin de rendre plus véloce et rapide l’affichage des pages d’un site web.

 

Résolution et format mais la compression ?

Les images généré par les APN[1] sont d’une taille énorme et dépasse maintenant le millier de pixel de coté. Le contributeur à un site web à conscience de cela et s’efforce d’en réduire la résolution en général aidé en cela par une charte fournit par l’équipe technique en charge de la gestion du site web. Parfois un outils avec la procédure associée est fournit. Le plus les développeurs ont prévu des routines de vérification de la taille de l’image envoyé, parfois qui impose un format et ajoute une vérification du type mime.

Je me suis attaché à trouver une solution d’optimisation quelque soit la résolution en me concentrant sur le format jpg et png[2]. L’idée étant que le téléchargement d’une image de résolution raisonnable et d’un format précis ayant été acquit par le travail de vérification des routines mise en place par l’équipe de développement il me semblais nécessaire de revoir la compression et le nettoyage après la mise en ligne, ceci de façon automatique, massive et automatisable, bref à grand coup de script et cron.

 

Compression et nettoyage !

Les deux s’imposent de plus en plus avec l’utilisation massive d’APN et de logiciel de retouche d’image. Le premier comprime de moins en moins les images pour favorisé leur retouche ultérieurs. Un APN de type réflex propose d’ailleurs le format RAW ou TIFF qui ne comporte pas de compression. Mais en plus tout les types d’appareil, qui soit amateur ou professionnel ajoute tout un tas d’information dans le fichier en plus de l’image elle même:

  • Un court fichier d’en-tête pour organisation des bits, l’identification du fichier et l’emplacement des données.
  • Les métadonnées du capteur photographique ( la taille du capteur, filtre couleur et le profil couleur )
  • Les réglages d’exposition, le modèle d’appareil, la date voir la position GPS
  • section normalisée de métadonnées au format EXIF.
  • Parfois une vignette de l’image au format JPEG une prévisualisation rapide
  • etc.

Des informations très pertinente pour la retouche d’image ultérieur, le classement et l’archivage voir la gestion de droit mais totalement inutile pour l’utilisation sur le web. En plus de façon quasi systématique tout logiciel utilisé ultérieurement pour manipuler l’image ajoutera des informations semblable. Donc une nettoyage s’impose pour accélérer leur affichage.

 

Nettoyage et optimisation des JPG

Utilisation de jpegtran

Pour nettoyer les jpg j’ai utilisé jpegtran présent dans le paquet libjpeg-progs sous debian lenny. Mais d’autre solution existe vous pouvez en trouver une liste sur performance.survol.fr.

apt-get install libjpeg-progs

J’utilise les options suivante :

  • -copy none qui supprime tout le blabla enregistré par l’APN ou le logiciel de retouche
  • -optimize pour optimiser l’encodage en organisant les informations (sic)
  • -perfect impose que les deux précédentes option soient parfaitement réalisé ou pas du tout pour évité les situations partielles et instables.

Voici une ligne de commande pour traiter tout les jpg d’une arborescence. Noter que dans le bout de script suivant j’exclus les fichiers jpg ayant un espace dans leur nom ou dans le nom du répertoire de stockage.

for I in `find ./ -type f -name "*.jpg" | grep -v [[:space:]]`;  do jpegtran -copy none -optimize -perfect $I > /tmp/optimized.jpg; mv /tmp/optimized.jpg $I; done

Efficacité de jpegtran

Résultat un répertoire de 532 Fichiers qui pesait 53Mo est descendu à 50 Mo après optimisation avec jpegtran

 

Nettoyage et optimisation des PNG

Utilisation de pngcrush

Pour optimiser les png j’ai fais le choix de pngcrush présent sous debian lenny. La également d’autre solution existe entre autre optipng que linuxandfriends.com à testé.

J’utilise un option unique :

  • -brute teste 114 filtres de compression et ne retient que celui qui donne le meilleur résultat pour l’images traité.

Attention cela prend un temps énorme de réalisé 114 fois la compression d’une image pour au final n’en retenir qu’un résultat sur ce nombre. Mais, en contre partie, le filtre est toujours le plus pertinent pour l’image traité et résultat vraiment performant.

Voici une ligne de commande pour traiter tout les png d’une arborescence. Noter que dans le bout de script suivant j’exclus les fichiers png ayant un espace dans leur nom ou dans le nom du répertoire de stockage.

for I in `find ./ -type f -name "*.png" | grep -v [[:space:]]`;    do pngcrush -brute $I  /tmp/optimized.png; mv /tmp/optimized.png $I; done

Si vous souhaiter traiter uniquement les fichiers png du répertoire courant en changeant leur extension en .crush.png c’est plus simple :

pngcrush -brute -e ".crush.png" *.png

Les pgn de capture d’écran sous Mac OS X

Les capture d’écran sous Mas OS X avec la séquence de touche Pomme+shift+4 génère un fichier png par défaut. Personnellement j’utilise beaucoup cette fonction pour créé les images illustrant mes articles. La méthode / filtre la plus efficace de pngcrush pour ces png est la 113. Voici la syntaxe de son utilisation :

pngcrush -m 113 -e ".crush.png" *.png

Efficacité de pngcrush

Sur un répertoire contenant à l’origine les trois images png suivante.

-rwxr-xr-x 1 www-data www-data 365K Oct 13 16:00 Header.home.Voici.fr.png -rwxr-xr-x 1 www-data www-data 268K Oct 13 16:00 Hearder.Logo.Voici.fr.png -rwxr-xr-x 1 www-data www-data 284K Oct 13 16:03 Taille.Element.Voici.fr.png

Nous arrivons au résultat suivant

-rw-r--r-- 1 root     root     238K Oct 13 16:00 Header.home.Voici.fr.crush.png -rw-r--r-- 1 root     root     173K Oct 13 16:00 Hearder.Logo.Voici.fr.crush.png -rw-r--r-- 1 root     root     189K Oct 13 16:03 Taille.Element.Voici.fr.crush.png

Avant nous avions 900K d’image png, maintenant nous avons 600K. Sur cet exemple, limité, le poids des images à été réduit d’un tiers.

Notes

[1] appareil photo numérique

[2] Gif is dead