Voici donc aujourd’hui une extension pour Firefox, qui permet d’avoir tout un tas d’outils sous la main directement dans le navigateur : Colorzilla.

Photo de Richard0 depuis Flickr

Installation

Cette extension est disponible sur le site d’extensions de Firefox :

• Installer Colorzilla pour Firefox

Présentation

Colorzilla est un outil qui permet de zoomer sur la page pour sélectionner une couleur et la copie automatiquement dans le presse papier, vous n’avez plus qu’à la coller dans votre code ! Il extrait les couleur d’une page en s’appuyant sur leDOM. Vous pouvez même enregistrer des palettes de couleurs et les partager.

L’outil est léger et sait se faire oublier. Il est disponible en bas à gauche de votre navigateur ou via un clic droit.

Fonctionnalités principales

• Pipette pour sélectionner les couleurs de la page
• Palette de couleur (simples à enregistrer et partager)
• Analyseur des couleurs du DOM
• Zoom
• Copie automatique de la couleur dans le presse papier
• Gestion de formats de couleurs multiples (Hexadécimal, RVB, TSV…)

Un outil vraiment bien pensé et donc indispensable pour gérer ses couleurs web au quotidien qui mérite ses 5 étoiles.

Sur le même thème

• Les plugins Firefox : XRefresh
• Les plugins Firefox : TileTabs
• Les plugins Firefox : FoxyProxy
• Navigateur Web standard : Firefox
• Les plugins Firefox : Firebug

Je vous propose de découvrir Notepad++. Il ne fonctionne que sous Windows, mais apporte un véritable plus pour cette plateforme dont l’éditeur par défaut est vraiment trop simpliste.

C’est un logiciel gratuit sous licence GPL. Je le trouve idéal car très fonctionnel, simple à installer, rapide à lancer et extensible. Il est donc idéal quand on change souvent de poste et que l’on veut rapidement retrouver ses repères.

Photo de PSD depuis Flickr

Fonctionnalités

Notepad++ est un outil très complet, ces principales fonctionnalités sont :

• Coloration syntaxique (PHP, Java, SQL, CSS, HTML, Javascript, YAML…)
• Éditeur WYSIWYG
• Auto-complétion
• Affichage de fichier et édition multiple simultanée
• Fonction de recherche avec expressions régulières
• Auto détection de modifications de fichiers
• Gestion de macros
• Zoom
• Multilingue

Vous trouverez toute la liste des fonctionnalités de Notepad++ sur le site de l’éditeur.

Plugins

Cette liste n’est pas exhaustive car en plus Notepad++ est extensible avec une très belle liste de plugins dont voici les plus intéressants à mon goût :

• Éditeur hexadécimal
• Édition de fichier via un explorateur FTP
• Gestionnaire de tags HTML
• Correcteur orthographique
• Réducteur dans la barre de tâches
• Édition XML (multiples outils)
• Gestionnaire de plugins

Astuces

Cet outil s’intègre parfaitement à Windows, vous pourrez ainsi le mettre dans le menu contextuel de Windows et y accéder via le clic droit de votre souris ou tout simplement l’utiliser par défaut à la place du bloc-notes de Windows.

Ces astuces sont à voir sur la page de téléchargement de l’application.

Site de l’éditeur & téléchargement

Vous pouvez télécharger Notepad++ sur le site de l’éditeur :

• Site officiel de Notepad++

Aide, forum et wiki

Si vous avez besoin d’aide pour débuter avec Notepad++, des forums multilingues et un wiki en anglais répondront probablement à toutes vos questions.

• Forums
• Wiki

Mon avis

Personnellement, je l’utilise depuis des années sans aucun soucis. Son ergonomie est très bonne, et ses plugins très nombreux permettent de répondre à toutes les attentes. Il est simple mais fonctionnel, vous le trouverez bientôt indispensable.

Et n’oublier pas, Notepad++ est un outil gratuit, pensez à aider le projet en traduisant ou en apportant une contribution financière.

Sur le même thème

• Outils XML : Cooktop
• Les plugins Firefox : XRefresh
• Comparaison et fusion de fichiers et de dossiers
• Les plugins Firefox : Colorzilla
• MySQL GUI Tools

Il faut bien avoir en tête que ce sont les petits gains par ci par là qui feront la différence. Cela vous demandera finalement assez peu de travail pour les premiers résultats et beaucoup plus pour arriver à un résultat parfait. Mais même sans pousser la démarche jusqu’au bout, l’effet sera bénéfique en termes d’audience, et votre taux de transformation devrait augmenter lui aussi.

Voici donc quelques conseils, et quelques références afin de maîtriser le sujet

Photo de GemMoth depuis Flickr

L’optimisation c’est quoi ?

On peut voir dans un premier temps l’optimisation comme la mise en œuvre des moyens disponibles pour améliorer l’existant. Un second temps permet d’accentuer encore les performances en ajoutant de nouveaux moyens. Nous traiterons uniquement du premier point ici. Changer d’hébergeur ou de serveur pour augmenter vos performances est un solution, mais avant cela tout un panel de techniques permet de faire mieux avec les mêmes ressources.

Quelques statistiques

La taille des pages a plus que triplé en 5 ans, passant de 90Ko à 310Ko. Dans le même temps on a aussi doublé le nombre de composants externes par page (de 25 à 50)Une page web c’est en moyenne 500 mots et 600 balises HTML ! Si l’on ajoute a cela que le nombre de connexion RTC est encore non négligeable aux États-Unis par exemple.

Perdre 500ms c’est perdre 20% de trafic pour Google et réduire de 25% le poids de la page c’est gagner 25% d’utilisateurs à moyen terme pour Google. Augmenter la latence de 100ms c’est perdre 1% de ventes pour Amazon. Pour Yahoo! perdre 400ms c’est avoir 5 à 9% d’abandon en plus.

A partir de 4 secondes d’attente on perd massivement les visiteurs…

Que doit on améliorer ?

Les améliorations à prévoir sont au niveau du paramétrage du serveur, de la qualité du code, de choix techniques, de la gestion des composants web…

Des outils sont là pour vous aider à identifier les points importants parmi lesquels on trouve des plugins Firefox :

• Yslow
• Google Page Speed

Et des sites de mesure de performance :

• site-perf
• IBM Page Detailer
• Web Pagetest

Notez que ces derniers pourrons vous permettre de tester votre site depuis l’autre bout du monde et voir les impacts que cela a sur votre site.

Deux règles principales pour la performance des sites web sont de réduire le nombre de requêtes HTTP et de limiter la taille des données qu’on télécharge. Voyons cela plus en détail.

Optimisation de la configuration du serveur

La mise en cache

La mise en place d’un cache côté serveur est une bonne chose et permettra de fournir un contenu plus rapidement à l’internaute, mais le protocole HTTP permet lui aussi quelques prouesses. Il est efficace pour la moitié des utilisateurs qui affichent une première page de votre site. Soit parce qu’ils sont déjà venus auparavant ou parce que vous partagez des ressources avec d’autres sites via des CDN.
Dès la deuxième page de votre site il est bénéfique pour 80% des utilisateurs, les 20% restants ayant par exemple désactivé leur cache.

Configurez donc votre serveur pour qu’il envoie des indications de mise en cache au navigateur.

La compression des données

On peut gagner entre 50 et 90% du poids d’une page pour une occupation serveur de 5%. Si votre serveur le permet en terme de ressources, le bénéfice sera immédiat, et encore plus pour les connexions lentes.

• Tests de compression de pages web
• Visualiseur de ressources réseau

ETags

Désactivez les ETags si le site est en cluster. Leur performance est alors très aléatoire. Si vous n’avez pas de cluster, vous pouvez les laisser, même si YSlow vous fait la remarque.

Impacts de la latence réseau

Avec un temps de latence avec le serveur de 20ms, pour 25 requêtes externes on perd donc une demi seconde ! Et encore le temps de latence est plus souvent entre 30 et 60 ms. On peut cependant relativiser un peu car la parallélisation des téléchargements permet de limiter cet effet.

Il est donc important de limiter le nombre de composants à charger par page.

L’utilisation de connexions persistantes sur des serveurs statiques (CDN) paraît être un bon moyen de limiter les effets de la latence, mais son paramétrage peut être délicat et dépends de votre cas particulier. L’abus de cette techniques pourrait avoir l’effet inverse en engorgeant le serveur de connexions persistantes inutiles.

Pour la concaténation de vos fichiers, un module d’Apache permet de faire le travail côté serveur, je ne l’ai pas testé, mais j’attends vos retours sur le sujet dans les commentaires :

• Mod_concat

Optimisation du code source

HTML

Un code standard limite le travail de l’interpréteur HTML, par rapport à un code illisible que le navigateur devra corriger à la volée.
Limiter la profondeur du DOM pour limiter le reflow, c’est à dire la réorganisation de la page par le navigateur en cas de changements au niveau de la structure de la page. Pour les tableaux vous pouvez utiliser le mode de rendu fixe des tableaux HTML pour limiter le reflow.

Vous devez limiter les iframes qui sont coûteuses en termes de performances, même vides.

CSS

Pour les frameworks CSS, utiliser un cache central (google, yahoo…) permet de partager un cache avec tous les autres utilisateurs du CDN. Ainsi il y a de fortes chances pour que vos librairies soient déjà en cache dans le navigateur de votre visiteur.

Mettre les scripts en début de page pour que le navigateur puisse faire la mise en page le plus tôt possible.
L’utilisation conjointe de scripts externes minimisés, permet de gagner jusqu’à 25% du poids des feuilles de style.

Ne pas utiliser @import pour les CSS, moins performant et ne pas utiliser les filtres CSS, non standard et très coûteux en ressources. Si vous avez des modifications CSS à faire, faites les d’un seul coup pour éviter le reflow et non pas dans une boucle !

Javascript

Pour les bibliothèques génériques (jQuery, Dojo…) l’utilisation d’un cache central (google, yahoo…) permet comme pour les CSS de partager un cache avec tous les autres utilisateurs du CDN.

Pour optimiser encore mettez les scripts en fin de page. Le navigateur pourra afficher la page correctement avant de les charger, et l’utilisateur pourra naviguer avant la fin du chargement. Le temps qu’il interagisse avec la page, le Javascript sera chargé.

Comme pour les CCS, des scripts externes minimisés, permettent de gagner jusqu’à un tiers du poids des fichiers.

• CSSOptimiser
• CleanCSS

Et dans vos scripts utilisez des sélecteurs précis basés sur l’id et pas sur les classes css, l’identifiant étant unique la navigateur retrouve plus facilement la balise demandée; que si il doit analyser toutes celles de la page.

Ajax

Ajax permet d’améliorer le ressenti utilisateur en limitant le rechargement de la page au strict minimum. C’est donc une bonne piste d’optimisation, mais attention à le faire le mieux possible. Pour cela, envoyer les requêtes AJAX avec la méthode get et utiliser le cache de requête HTTP.
Pour le format de données vous pouvez utiliser JSON ou XML, les deux solutions ont leurs avantages et inconvénients, mais sont bien plus performantes que d’envoyer du code HTML pur !

Optimisation des images

Les formats d’image

En JPEG on peut gagner jusqu’à 90% du poids d’une image avec une perte acceptable (compression autour de 55, à tester car chaque logiciel implémente sa propre échelle de compression). Idéal pour les photos.

En PNG on peut gagner entre 75 et 90% du poids de l’image sans perte. Idéal pour des images avec du texte. Attention à prendre du PNG8 et non pas 24 !

Le GIF ne devrait jamais être utilisé, sauf éventuellement pour du GIF animé.

Sprites et métadatas

L’utilisation des sprites, permet de diminuer l’impact du temps de latence et le poids des images. Le poids du sprite généré est inférieur à la somme des images qui le composent !

• Sprites CSS : Meurs, découpe d’images, meurs !
• CSSSprites
• SpriteGen

La suppression des metadata des images avec Smushit, Optipng, Pngcrush ou PunyPng apporte un gain de 15% environ du poids des images en supprimant les données inutiles dans un contexte web des photos.

• PNGCrush
• OptiPNG
• PunyPNG

Favicon

Même si il n’est pas spécifié, les navigateurs le cherchent et chargent une page 404 si il n’est pas présent. Cela peut donc être très coûteux, surtout si votre page d’erreur personnalisée est lourde.

Ma référence pour avoir des information et des tests sur le traitement des images :

• CSS-IG : Optimisation Web, format PNG

D’autres pistes d’optimisation

Il faut à tout prix limiter les redirections sur la page d’accueil, cela augmente la latence et n’est souvent qu’un mauvais palliatif à une solution plus pérenne. Ce n’est d’ailleurs pas bon non plus pour votre référencement.

Les cookies

Un cookie est envoyé avec chaque requête http, il faut limiter strictement leur taille, un cookie de 1ko retarde la réponse de 16ms en moyenne, avec 50 composants dans la page, on gagne donc 0,8s ! Il faut donc si vous le pouvez limiter les cookies aux sous domaines afin qu’il s n’impactent pas le téléchargement des autres ressources. En utilisant un CDN ou un sous domaines pour les données statiques, vous règlerez le problème.

DNS

Le temps de résolution d’un domaine tourne autour de 30ms. Multiplier le nombre de domaine permet de paralléliser les téléchargements. Certains « vieux » navigateurs ne téléchargent que deux ressources simultanément, mais les plus récents en prennent 4 fois plus en moyenne. Limiter le nombre de domaines à 4 est un bon compromis.

Buffer

Il est important également d’envoyer votre buffer le plus rapidement possible. L’utilisateur verra sa page commencer à se charger plus rapidement. Son ressenti sera bien meilleur, surtout si les temps de génération de votre page sont longs.

Références utiles

Une des meilleures références sur le sujet est en français. Vous y trouverez beaucoup d’explications

• Le blog d’Éric Daspet sur les performances web

Les autres en anglais sont aussi de très bonne facture :

• Les bonnes pratiques par Yahoo
• Les bonnes pratiques par Google
• Le blog de Steve Souders

Conclusion

Une fois tous ces éléments mis en place, votre site doit avoir retrouvé de sa vigueur et si tout n’est pas encore parfait, il est peut être temps de passer à l’étape deux. Votre site à probablement besoins de moyens spécifiques, mais ces conseils lui sont déjà profitables et sont suffisants pour la plupart des projets web.

un livre sur le sujet devrait paraitre bientôt, je ne manquerai pas de vous tenir informé !

Merci à Eric Daspet de m’avoir ouvert les yeux sur ce sujet aussi utile que passionnant.

Sur le même thème

• Les générateurs de sprites CSS
• Bien utiliser les feuilles de style (CSS)
• Recette & environnements de test
• Utiliser Chrome et violer la neutralité ?
• Les plugins Firefox : Colorzilla

Il existe des logiciels simples pour faire ce travail de comparaison. Voici donc une présentation d’un outil libre et gratuit, Winmerge.

Photo de gomattolson depuis Flickr

Présentation de l’outil

WinMerge est un outil de comparaison et de fusion de fichier sous Windows. Grâce à la coloration syntaxique des fichiers vous visualisez instantanément les portions de codes qui diffèrent entre vos fichiers et vous pouvez copier les différences d’un fichier à l’autre d’un simple clic pour fusionner les documents.
Il supporte la comparaison de fichiers aux formats texte DOS, UNIX et MAC.

WinMerge propose de comparer des répertoires complets en filtrant éventuellement sur l’extension des fichiers à comparer.

Fonctionnalités annexes

Il s’intègre dans le menu contextuel et autorise la sélection de fichiers par glisser/déposer. Et si vous utilisez TortoiseSVN pour la gestion des version de fichier sur vos projets, vous pouvez intégrer WinMerge à la place de l’outil par défaut.

Téléchargement & installation

Installer Winmerge

Alternatives

Pour les utilisateurs d’environnement Linux il existe de multiples alternatives libres et gratuites qui devraient vous satisfaire :

• Meld
• Kompare

Si vous avez des astuces pour simplifier la comparaison et la fusion de fichiers, les commentaires sont là pour ça !

Sur le même thème

• Outils : Edition de fichiers avec Notepad++
• MySQL GUI Tools
• Les plugins Firefox : Colorzilla
• Outils XML : Cooktop
• Les plugins Firefox : XRefresh

Photo de Eduardo Amorim depuis Flickr

Présentation

La gestion de version de fichiers informatique permet de garder une trace de toutes les versions d’un fichier et de toutes les modifications qui y ont été apportées. Cela permet notamment de revenir en arrière en cas d’erreur.
Pour gérer efficacement ces différentes versions on s’appuie sur un protocole et un logiciel dédié à cette tâche.
Il en existe beaucoup, chacun avec ses avantages et ses inconvénients. Nous étudierons plus particulièrement Subversion, SVN en abrégé, qui est très bien adapté au développement web et l’un des plus utilisé dans le domaine. De plus il est gratuit et Open-Source.

Définition

• Système de gestion de version

Historique

Le projet Subversion a été lancé en février 2000 par CollabNet. Il a été conçu pour remplacer CVS. Ses auteurs s’appuient volontairement sur les mêmes concepts (notamment sur le principe du dépôt centralisé et unique) et considèrent que le modèle de CVS est le bon, et que seule son implémentation est en cause.
Ainsi Subversion apporte des nouveautés sur le renommage des fichiers, le versionnage des méta-données, et l’attribution d’un numéro de révision identique à l’ensemble du dépôt.

A quoi ca sert ?

Basiquement, cela permet de garder une trace des différentes versions de chaque fichier de votre site. A chaque fois que vous validez une modification, un nouveau numéro de révision est attribué à votre projet.
Les commentaires sur chaque action permettent de suivre l’évolution du projet. Vous pouvez ainsi visualiser les différences entre deux révisions du site. Vous gardez une trace de toutes les versions de votre site.
Vous pouvez travailler sur plusieurs versions de votre site grâce au concept de « branches ».

Mais cela ne s’arrête pas là ! En effet, toute personne ayant accès au serveur peut selon ses droits, récupérer ou modifier les fichiers. Vous pouvez ainsi travailler à plusieurs sur le même projet. Chacun fait ses propres modifications, un outil permet de « mixer » les modifications d’un même fichier au cas ou vous modifieriez les mêmes portions de code.
N’oubliez pas de mettre régulièrement votre projet à jour afin de bénéficier au plus tôt des modifications des autres membres du projet.

Comment apprendre ?

Le logiciel « TortoiseSVN » sous Windows existe en français, et il est assez intuitif, et vous comprendrez rapidement les principes de base. Mais pour une utilisation plus poussée, la documentation du site Internet de subversion et les deux livres suivants devraient vous aider.

Les auteurs de Subversion proposent un livre en anglais disponible. Un tutoriel sous forme de livre en français est également disponible. Il est intéressant de noter que ces deux ressources sont gratuites.

Vous trouverez un lien dans la section Bibliographie

La Foire Aux Questions répondra à la plupart de vos questions :

• FAQ de Subversion

Et bien sûr vous trouverez aussi beaucoup d’aide sur les communautés qui gravitent autour du projet Subversion :

• SVNForum – Une communauté pour échanger
• Subversionary – Un wiki orienté usage et bonnes pratiques
• Subversion Wiki – Un wiki orienté conseils, configuration et outils

Les bonnes pratiques

Pour bien vous y retrouver, pensez toujours à :

• Mettre des commentaires à chacune de vos actions (ajout, suppression…)
• Valider les modifications de façon atomique (une nouvelle révision pour chaque nouvelle fonctionnalité ou bug corrigé)
• Mettez à jour votre projet le plus régulièrement possible
• Éviter de travailler sur les mêmes portions de code, quand cela est possible
• Faire un tag de la révision courante quand une nouvelle version du site est mise en production de façon à garder une trace des modifications

Applications tierces

Les logiciels de gestion de version s’intègrent souvent facilement avec d’autre outils, pour la gestion de projet notamment, ou le suivi de bug, l’ajout de fonctionnalités…

Trac par exemple est un système Open Source de gestion complète de projet par Internet, développé en Python offre ainsi dans une interface web un wiki, un suivi des révisions, une gestion des bugs…

Via le service Beanstalk décrit ci-dessous, vous pouvez même tenir au courant toute l’équipe de développement via twitter. Ils proposent aussi des intégrations avec les outils suivants : Basecamp, Campfire, FogBugz, Lighthouse, Freckle et Harvest.

Serveurs

Pour la partie serveur, celle qui stockera effectivement les différentes versions, deux solutions s’offrent à vous. Héberger vous même votre serveur ou dédier cette tâches à un prestataire de service.

Solution locale

Si vous décidez d’héberger vous même votre serveur SVN et si vous partagez ce projet à plusieurs, cela implique que votre serveur reste accessible en permanence, si c’est pour un usage strictement personnel, vous pouvez l’avoir sur votre propre machine, mais attention, en cas de problème sur votre disque dur, vous perdrez tout.

Solution externalisées

Les offres que je vous présente ont l’avantage d’être gratuite, du moins pour l’offre de base.
Il faut noter que les deux premiers acceptent des projets non libres, alors que c’est une obligation pour les autres.
Notons aussi que Tux Family peut aussi vous proposer un hébergement pour votre projet.

• BeansTalk
• OpenSVN
• Google code
• Sourceforge
• Tux Family

Logiciels les plus utilisés

Ligne de commande

Subversion s’utilise très bien en ligne de commande, mais les néophytes de la console, préfèrerons probablement un environnement graphique.

Clients lourds

Il en existe pour tout type de plateforme, le plus abouti étant à mon avis TortoiseSVN qui s’intègre directement dans le gestionnaire de fichiers de Windows.

• TortoiseSVN (Windows)
• RapidSVN (Toutes plateformes)

Plugins pour Eclipse

Pour plus de souplesse lors de vos développements, des plugins existent pour la plupart des IDE du marché. Restons sur les logiciels libres et gratuits, puisque qu’Eclipse permet l’intégration de Subversion avec deux plugins au choix :

• Subversive
• Subclipse

Mais il en existe aussi pour plein d’autres logiciels d’édition.

Migration

Si votre dépôt de source utilise un autre protocole, vous pourrez toujours le convertir pour l’importer dans Subversion.

Bibliographie

• Version Control with Subversion
• Documentation en français de Julien Barnier
• Subversion, Pratique du développement collaboratif avec SVN chez Eyrolles

Voilà, j’espère que vous comprenez l’intérêt des logiciels de gestion de version, que vous avez trouvé tout ce dont vous avez besoin pour élargir vos connaissances, et aussi que vous allez pouvoir m’apprendre encore plus sur le sujet. J’attends vos commentaires.

Sur le même thème

• Comparaison et fusion de fichiers et de dossiers
• Développer sous Ubuntu
• Livre : Pro Git
• Développer en équipe
• Optimiser l’utilisation d’Eclipse