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

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

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

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

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

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

Les extensions, la force incontournable de Firefox

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

SENSEO

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

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

FIREBUG

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

YSLOW & Pagespeed

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

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

WAPPALYZER

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

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

NAGIOS CHECKER

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

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

Bar WEB DEVELOPPER

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

GOOGLE TOOLBAR

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

Pour les alergiques à Firefox

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

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

écrit par Philippe Humeau \\ tags: firebug, pagespeed, senseo, wappalyzer, yslow

Ce qui est intéressant quand on fait des tutoriels c’est qu’on s’aperçoit que l’on a soit même mal appliqué les astuces que l’on va énoncer.

Je voulais vous faire un petit tutorial sur comment optimiser un peu les pages en elles-mêmes, et finalement on va commencer par quelque chose de plus basique la compression des pages.

La première étape que je vous propose, c’est de télécharger pour ceux qui ne le connaissent pas encore un plugin pour firefox nommé Yslow qui nous donne de nombreuses informations sur l’optimisation de votre site. Ce plugin développé par Yahoo fait parti d’un ensemble de bonnes pratiques pour optimiser le temps de chargement de vos pages. Vous pouvez en retrouver la liste (en anglais) ici : http://developer.yahoo.com/performance/rules.html#cdn

Et en complément quelques idées supplémentaires sur leur blog de développement:
http://developer.yahoo.net/blog/archives/2008/03/yahoos_latest_p.html

Le premier onglet de ce plugin « Performance » nous donne des indications sur le respect de votre site de ces bonnes pratiques. Chaque élément est noté entre A et F et nous donne une idée des points que l’on a pu oublier, comme par exemple activer la compression gzip sur le serveur (bien que la note totale -souvent F- ne présente pas beaucoup d’intérêt car certaines règles sont difficiles à mettre en pratique).

On observe d’ailleurs que Magento respecte naturellement nombres de ces règles (une bien connue maintenant étant la minification des js).

Ce qui nous amène au deuxième onglet, l’onglet « Stats », celui-ci permet d’obtenir le poids total de votre page, ainsi que la répartition du poids entre les différents éléments (images, css, flash, html) ainsi que le poids de votre page une fois que les éléments ont été chargé une première fois et sont dans le cache du navigateur.

On voit ainsi dans cet exemple la différence de poids que l’on peut avoir entre une page d’accueil avec ou sans la compression gzip. Je pense que je n’ai pas besoin de vous expliquer l’intérêt d’économiser 200Ko de trafic pour chaque internaute qui chargera votre page d’accueil.

Enfin l’onglet « Components » nous permet d’avoir le détail pour chaque élément son poids (avant et après compression gzip), comme l’onglet Net (Réseau en français) du plugin Firebug, on peut voir en rouge les éléments qui n’ont pas été chargés ainsi que le temps de chargement de chaque élément. Cet onglet est intéressant puisqu’on peut classer les éléments par poids. On peut ainsi s’apercevoir qu’on a des images qui mériteraient une compression jpg plus forte, ou qu’un flash mériterait d’être optimisé (voir déplacé ou remplacé par quelque chose de plus léger si par exemple il est sur une la page d’accueil d’un site à fort trafic).

J’arrive à mon deuxième point, la compression gzip. En complément du plugin Yslow ce lien http://www.whatsmyip.org/mod_gzip_test/ permet de vérifier immédiatement que la compression est bien activée pour une url donnée.

Pour activer la compression gzip cela suppose que le module apache adéquat soit chargé (mod_gzip qui se nomme maintenant mod_deflate), je vous laisse vous tourner vers votre hébergeur ou google pour vérifier que ce module est chargé.

Ensuite quand le module est chargé, il faut également que les règles apache correspondantes aient été chargées, chose qui n’aura pas toujours été faite quand on vous livre un serveur. On a alors toutes les règles nécessaires dans le fichier .htaccess de notre bon vieux magento qu’il suffit de décommenter :

############################################
## enable resulting html compression

php_flag zlib.output_compression on

############################################
## enable apache served files compression
## http://developer.yahoo.com/performance/rules.html#gzip

# Insert filter
SetOutputFilter DEFLATE

# Netscape 4.x has some problems…
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Don’t compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

# Make sure proxies don’t deliver the wrong content
Header append Vary User-Agent env=!dont-vary

(On peut évidemment appliquer directement ces règles dans le httpd.conf d’apache quand on sait ce que l’on fait).

Attention, si l’on transfert du Zip, le « php_flag zlib.output_compression on » va poser problème me remonte un lecteur !

écrit par Olivier \\ tags: compression, gzip, yslow