Performance web: compression des frontaux JS/CSS

Articles, JavaScript, JavaScript EN, Performances Web, Performances Web EN
Lire Plus

Comme par enchantement, une illumination à touché il y a quelques mois Google : plus un site web va vite, mieux il se charge, plus les utilisateurs sont contents et trouvent ce qu’il cherchent. La vitesse d’un site est donc devenu l’un des facteurs de l’équation complexe que Google applique pour classer les sites dans ses résultats de recherche. Ça, c’est un fait.

Alors concrètement, pour améliorer les performance de vos sites, il n’existe pas de formule magique; beaucoup d’huile de coudes, quelques tuyaux venant des pros (Yahoo! et Google en tête) et du temps. Alors, lorsque comme moi vous êtes confrontés à des problemes de performance sur des applications assez massives, il faut s’armer des bons outils et des bonnes techniques pour perdre le moins de temps possible et rendre vos améliorations pérennes.

Travaillant sur OSX, je ne m’attarderai pas sur les solutions software que je ne peux/veux pas tester (mes VM XP et Seven ne sont pas là pour ça).

UglifyJS, rend votre js plus laid, certes …

Sous un nom un peu étrange, ce cache le poids lourds de la compression JS. UglifyJS compresse mieux que Google Closure Compiler ou YUI compressor, et plus vite:

LibraryOrig. sizeUglifyJSYUIGCL
DynarchLIB636896241441246452 (+5011)240439 (-1002) (buggy)
jQuery1638557200679702 (+7696)71858 (-148)

UglifyJS est est un paquet node.js. Son installation requiert donc un minimum de savoir faire en CLI

Mais les résultats sont impressionnants. Si aucune version GUI pour votre os préféré n’existe, vous pouvez toutefois vous rabattre sur la version web, afin d’avoir un apercu des qualités de ce compresseur. Un regret toutefois : vous serez obligé de passer par une seconde solution pour vos CSS.

Le repo Github d’UglifyJS est très documenté, et vous pouvez vous rendre sur le site de l’auteur pour tester cet incroyable compileur

Puisque UglifyJS est vraiment une solution très intéressante, vous serez peut etre ravis de savoir qu’un bundle Textmate existe également pour vous permettre d’en faire usage dans votre éditeur préféré. Cela ne vous empêchera pas de devoir installer node.js et le paquet néanmoins.

YUI Compressor, le doyen

Si, à la base, le YUI Compressor est l’une des applications les plus appréciées lorsqu’il s’agit de compresser les fichiers JS et CSS, il est parfois ennuyeux de devoir passer par la CLI pour lui faire faire ses petites affaires. Parmi les solutions les plus sexy pour utiliser le YUI compressor sans une ligne de commande, j’ai retenu:

Smaller, de Chen Luo

Simple, profitant de ce look and feel Mac, Smaller est une petite application payante qu’il serait dommage de ne pas tester si vous souhaitez compresser CSS et JS en une seule passe, tout en gardant la main sur le résultat  obtenir.

Ainsi, un simple glisser-déposer de fichier(s) ou de dossier(s), et le tour est joué. La rédaction de cet article m’a permis d’obtenir une license gratuite, mais sachez toutefois que Smaller vous coutera 20$. Ce qui me semble un peu excessif pour une GUI.

Toutefois, les résultats sont là. Pour de petits projets, ou la concaténation de fichiers n’est pas requise, c’est un bel outil. Il ne fait pas le café, ni la vaisselle, il fait ce qu’on lui demande. Point.

http://smallerapp.com/

YUI Compressor Texmate bundle

Mac + développement web = Textmate (ce n’est pas mon cas, mais bien une généralité basée sur mes rencontres et expériences). Aussi, quelle meilleure idée que de pouvoir lancer la compression des assets d’un projet directement dans son éditeur préféré, via un simple raccourci clavier ? C’est ce que ce bundle gratuit et open source offre comme possibilité.

Moins ‘straight forward’ que Smaller (qui est une application a part entière), vous allez devoir perdre … 15 secondes pour configurer le bundle ;) Et, à la différence de smaller, vous pourrez vous même mettre à jour le YUI compressor le jour ou celui-ci évolue.

Disponible sur GitHub, ce bundle est un must have pour tous les textmate afficionados.

https://github.com/mattkirman/YUI-Compressor-tmbundle

Online JavaScript/CSS Compression Using YUI Compressor

Tout est dans le titre. Pour les gros gros gros fainéants, sans même installer de soft, de bundle, ou le YUI compressor lui même en local, vous pouvez passer directement par http://refresh-sf.com/yui

Avantage non négligeable, le site propose de concaténer différents fichiers en un seul.

PHP-YUI-Compressor

Le site cité précédemment est le résultat de l’utilisation d’une classe php toute bête, et disponible sur Github.

Cela permettra d’ajouter le YUI compressor directement dans votre application, pour une compression des assets lors d’un cache warmup par exemple, ou, pourquoi pas, à la volée (encore que je ne sois pas très sûre que cette dèrniere solution aille de paire avec la recherche de performances, mais bon …).

Vous devrez toutefois disposer du compressor en local pour faire tourner cette classe (logique me direz-vous).

https://github.com/gpbmike/PHP-YUI-Compressor

Delivery, drag, drop, fini…

Delivery est une alternative intéressante aux précédentes solutions mentionnées en ce sens qu’elle intègre le YUI compressor, certes, mais aussi Google Closure. Vous avez ainsi le choix des armes.

Et, détail agréable, si vous vous fichez du moteur du moment que les résultats sont là, vous avez la possibilité de laisser Delivery compresser avec les 2 moteurs, comparer le résultats (i.e la meilleure compression) et conserver le fichier créé le plus léger. Excellente idée.

Delivery est simplissime de fonctionnement : glissez-déposez les fichiers à compresser sur l’icone dans votre dock osx, et c’est fini.

Delivery est gratuit.

http://www.matmartinez.net/delivery/

Solution miracle ?

Non. Dans le cas de petites applications, les applications proposées ci-dessus conviendront parfaitement. Mais s’il s’agi d’industrialiser votre workflow, tout en gardant vos assets les plus petits possible, la solution idéale sera celle que vous déterminerez. Il y a autant de cas partuculiers que d’applications. Mais, si vous envisagez ou disposez déja d’une solution de déploiement automatisée, je ne peux que vous conseiller d’installer de ce pas UglifyJS et YUI Compressor, pour que votre deployer y passe vos assets avant déploiement.

Et vous, quelles solutions/techniques utilisez-vous pour rendre vos CSS et JS propres et dignes de vos visiteurs ?

Compte rendu de la soirée performances web

Articles, Performances Web, Performances Web EN
Lire Plus

La soirée organisée chez octo par Éric Daspet,  de part son organisation, et les sujets abordés, à permis de soulever de nombreux points intéressants, certains comme réponses à des problemes de perf web, d’autres comme hypotèses pures et dures.

Dans tous les cas, j’ai apprécié ce que j’ai entendu, de part la variété des contenus, des intervenants, et par l’ambiance très agréable de cette soirée.

Les intervenants de la soirée étaient Stoyan Stefanov (@stoyanstefanov), Anthony Ricaud (@rik24d), Éric Daspet (@edasfr) et JP Vincent (@theystolemynick).

Chacun à abordé la performance web selon un axe qui lui est propre avec la même passion, énergie, et expertise, ce qui est, ma foi, un gage de qualité et d’intéret pour un public de gros techos sans pitié (d’après le sondage de début de soirée, 90% de devs dans la salle).

Eric Daspet: Impacts des web perfs, rappels

Eric, initiateur de la soirée, à entamé la soirée en se présentant. Après un passage chez Yahoo!, il intégre SQLI comme consultant. Son mini-cv complet vous en dira plus à son sujet

Cette introduction se focalise ensuite sur des chiffres, des graphiques, et ressemblera finalement un peu à un discours ‘évangélisateur’ à l’égard de son auditoire, pourtant déja convaincu.

Son contenu, toutefois, met en avant l’intime rapport entre performance web et bénéfices (pas seulement financiers, mais aussi en termes d’image de marque, de fidélité…).

Stoyan Stefanov: progressive rendering and download

L’auteur de l’excellent “Object Oriented Javascript” attaque sa présentation en rappelant l’importance des performances web, leur impact, mais aussi, point intéressant, les facteurs qui font varier l’impression de performance. En particuliers, un point sur lequel on n’aura pas, en tant que webdev, la main : la psychologie. Je vous invite à lire cet article, mais en résumé, voici les points clefs de cet article:

  • Time is relative
  • Keep flow in mind
  • Consider the competition, the purpose of the page, the user expectations
  • Try to answer “what’s the user perceived load time?”
  • Provide feedback
  • Transitions
  • Progressive rendering
  • Strive to render something (part of the page) in a blink of eye

Bien que je n’ai pas réussi à mettre la main sur l’exacte présentation de cette soirée, la suivante reprend assez fidèlement les points abordés.

Voices that matter: High Performance Web Sites

Notez que M. Stefanov nous a fait une très brève présentation d’un nouvel outil destiné à vous faciliter la vie en vous garantissant de meilleures performances, le Yahoo User Desktop Compressor. Un simple drag-and-drop du repertoire de votre site vous compressera tout ce qu’il est possible de compresser : js, css, images…

Il nous à présenté ce projet comme étant “top secret”, mais nous savons bien que dans ces conditions… Bref, vous pouvez tester vous même cet outils pour Mac, *nux, Pc, sur son blog. ;-)

Anthony Ricaud: et les navigateurs web alors ?

Le porte parole des produits et de la philosophie Mozilla nous a fait la démonstration de ce que les browsers dedemain nous offriront. Rien de très neuf quand on fait de la veille, mais, malgré tout, que des petites fonctionnalités très sexy. Css 3, websockets, webGL… Bonheur.

Bien entendu, sous couvert de nous présenter le nouveau Firefox (ou serait-ce l’inverse ? …), on à le droit de réver que ces nouvelles fonctionnalités faciliteront le travail des mineurs du web tout en en simplifiant l’optimisation.

La présentation était piloté via iphone et websockets, c’est mignon ^^

Tiens au passage, y’a pas que vos sites web (et webdevs) qui essaient de travailler sur la performance percue… la preuve …

Inclure du javascript de manière performante, JP Vincent

L’inclusion de javascript. Derriere cet acte en apparence banal se cache un bouffe-ressources monstrueux. Jean Pierre Vincent nous fait donc part de ses recherches et expériences sur la question.

Sa présentation sera organisée selon les trois méthodes d’inclusion connues de tous :

  • Inclusion dans l’entête
  • Inclusion en bas de page
  • Inclusion dans le DOM

Aucune de ces solutions n’est miraculeuse est parfaite, mais toutes ont le mérite d’être non bloquante pour le chargement et donc la lecture/utilisation de la page, ce qui, vous en conviendrez, est l’objectif de cette soirée et de ces débats.

Je vous laisse consulter l’intégralité de la présentation, code et exemple à l’appui bien sûr !

http://280slides.com/Viewer/?user=44205&name=perfs%20%3A%20inclusion%20de%20javascript&fullscreen

Et si on passait à l’action ?

Au final, mises bout à bout, toutes ces présentations ont apporté plein de petites idées, techniques… Mais comment passer à l’action ? Il n’y à qu’un maitre mot : organisation ! Ca ne vous mènera nulle par de courir dans tous les sens en cherchant la micro-optim’ qui n’apportera rien.

Commencez par un bench, et, en fonctions des réulstats, organisez votre riposte.

Un exemple? Le compte rendu des actions mises en place pour Mappy par Vincent Voyer, papa de Zeroload.net. Que du bon à prendre, et que du parfait pour comprendre sur un cas concret.

Enfin, pour passer à l’action, quoi de mieux de se revoir ? Eric Daspet à en effet émis l’envie de créer un vrai groupe de travail autours des perf web. Wait and see ;-)

Ils parlent aussi de cette soirée :

http://zeroload.net/blog/reflexions%20et%20retour%20sur%20la%20soir%C3%A9e%20performance%20web/

http://blog.johanbleuzen.fr/retour-soiree-webperfs-paris-1

Webperf Contest, les performances web, ca fait gagner !

Articles, Evenement, Performances Web, Performances Web EN
Lire Plus

Les peformances sur le web sont essentielles à votre/vos site(s). Temps de réponse, légerté, rapidité, autant de facteurs déterminant pour que vos visiteurs apprécient leur visite, et que les crawlers fassent leur travail comme il convient.

Alors, quand zeroload.net , société de prestation en optimisation et performance web, et yottaa.com, outils d’analyse de performance web,  s’associent pour organiser un concours, ca donne le premier Webperf Contest 2010.

Nous organisons ce premier concours international de performances Web pour inciter de plus en plus de gens à saisir les opportunités offertes par des sites Web plus rapides.

Tant mieux !!

Pour gagner, rien de plus simple (enfin, presque…) : soumettez une page web, une vraie page, en production hein, et faites preuve d’ingéniosité pour que celle-ci soit la plus rapide, la moins gourmande en requetes, et qu’elle obtienne le meilleur score sur yottaa.com !

Intelligent, ingénieux, utile, ce concours vous permettra de gagner un ipad, un ipod, ou un livre dédicacé par Stoyan Stefanov !

Notez par ailleurs que les juges sont de vrais accrocs aux performances : Eric Daspet, Stoyan Stefanov,Jean-Pierre Vincent et Vincent Voyer ! Une belle brochette de doux-dingues de la performance et de l’optimisation, ce qui, je l’espère, vous convaincra de participer à l’évènement.

Les inscriptions au concours sont ouvertes depuis peu, alors, n’hésitez pas, votre participation n’en sera que bénéfique, soit vous gagnez, et à vous l’ipad, soit vous perdez, et votre site aura gagné en rapidité, et offrira donc une expérience utilisateur digne de ce nom !!

http://webperf-contest.com/

Compte rendu de la soirée performances web

Articles, Performances Web, Performances Web EN
Lire Plus

La soirée organisée chez octo par Éric Daspet,  de part son organisation, et les sujets abordés, à permis de soulever de nombreux points intéressants, certains comme réponses à des problemes de perf web, d’autres comme hypotèses pures et dures.

Dans tous les cas, j’ai apprécié ce que j’ai entendu, de part la variété des contenus, des intervenants, et par l’ambiance très agréable de cette soirée.

Les intervenants de la soirée étaient Stoyan Stefanov (@stoyanstefanov), Anthony Ricaud (@rik24d), Éric Daspet (@edasfr) et JP Vincent (@theystolemynick).

Chacun à abordé la performance web selon un axe qui lui est propre avec la même passion, énergie, et expertise, ce qui est, ma foi, un gage de qualité et d’intéret pour un public de gros techos sans pitié (d’après le sondage de début de soirée, 90% de devs dans la salle).

Eric Daspet: Impacts des web perfs, rappels

Eric, initiateur de la soirée, à entamé la soirée en se présentant. Après un passage chez Yahoo!, il intégre SQLI comme consultant. Son mini-cv complet vous en dira plus à son sujet

Cette introduction se focalise ensuite sur des chiffres, des graphiques, et ressemblera finalement un peu à un discours ‘évangélisateur’ à l’égard de son auditoire, pourtant déja convaincu.

Son contenu, toutefois, met en avant l’intime rapport entre performance web et bénéfices (pas seulement financiers, mais aussi en termes d’image de marque, de fidélité…).

Stoyan Stefanov: progressive rendering and download

L’auteur de l’excellent “Object Oriented Javascript” attaque sa présentation en rappelant l’importance des performances web, leur impact, mais aussi, point intéressant, les facteurs qui font varier l’impression de performance. En particuliers, un point sur lequel on n’aura pas, en tant que webdev, la main : la psychologie. Je vous invite à lire cet article, mais en résumé, voici les points clefs de cet article:

  • Time is relative
  • Keep flow in mind
  • Consider the competition, the purpose of the page, the user expectations
  • Try to answer “what’s the user perceived load time?”
  • Provide feedback
  • Transitions
  • Progressive rendering
  • Strive to render something (part of the page) in a blink of eye

Bien que je n’ai pas réussi à mettre la main sur l’exacte présentation de cette soirée, la suivante reprend assez fidèlement les points abordés.

Voices that matter: High Performance Web Sites

Notez que M. Stefanov nous a fait une très brève présentation d’un nouvel outil destiné à vous faciliter la vie en vous garantissant de meilleures performances, le Yahoo User Desktop Compressor. Un simple drag-and-drop du repertoire de votre site vous compressera tout ce qu’il est possible de compresser : js, css, images…

Il nous à présenté ce projet comme étant “top secret”, mais nous savons bien que dans ces conditions… Bref, vous pouvez tester vous même cet outils pour Mac, *nux, Pc, sur son blog. ;-)

Anthony Ricaud: et les navigateurs web alors ?

Le porte parole des produits et de la philosophie Mozilla nous a fait la démonstration de ce que les browsers dedemain nous offriront. Rien de très neuf quand on fait de la veille, mais, malgré tout, que des petites fonctionnalités très sexy. Css 3, websockets, webGL… Bonheur.

Bien entendu, sous couvert de nous présenter le nouveau Firefox (ou serait-ce l’inverse ? …), on à le droit de réver que ces nouvelles fonctionnalités faciliteront le travail des mineurs du web tout en en simplifiant l’optimisation.

La présentation était piloté via iphone et websockets, c’est mignon ^^

Tiens au passage, y’a pas que vos sites web (et webdevs) qui essaient de travailler sur la performance percue… la preuve …

Inclure du javascript de manière performante, JP Vincent

L’inclusion de javascript. Derriere cet acte en apparence banal se cache un bouffe-ressources monstrueux. Jean Pierre Vincent nous fait donc part de ses recherches et expériences sur la question.

Sa présentation sera organisée selon les trois méthodes d’inclusion connues de tous :

  • Inclusion dans l’entête
  • Inclusion en bas de page
  • Inclusion dans le DOM

Aucune de ces solutions n’est miraculeuse est parfaite, mais toutes ont le mérite d’être non bloquante pour le chargement et donc la lecture/utilisation de la page, ce qui, vous en conviendrez, est l’objectif de cette soirée et de ces débats.

Je vous laisse consulter l’intégralité de la présentation, code et exemple à l’appui bien sûr !

http://280slides.com/Viewer/?user=44205&name=perfs%20%3A%20inclusion%20de%20javascript&fullscreen

Et si on passait à l’action ?

Au final, mises bout à bout, toutes ces présentations ont apporté plein de petites idées, techniques… Mais comment passer à l’action ? Il n’y à qu’un maitre mot : organisation ! Ca ne vous mènera nulle par de courir dans tous les sens en cherchant la micro-optim’ qui n’apportera rien.

Commencez par un bench, et, en fonctions des réulstats, organisez votre riposte.

Un exemple? Le compte rendu des actions mises en place pour Mappy par Vincent Voyer, papa de Zeroload.net. Que du bon à prendre, et que du parfait pour comprendre sur un cas concret.

Enfin, pour passer à l’action, quoi de mieux de se revoir ? Eric Daspet à en effet émis l’envie de créer un vrai groupe de travail autours des perf web. Wait and see ;-)

Ils parlent aussi de cette soirée :

http://zeroload.net/blog/reflexions%20et%20retour%20sur%20la%20soir%C3%A9e%20performance%20web/

http://blog.johanbleuzen.fr/retour-soiree-webperfs-paris-1