ø Les Carnets Web de Thibaut ø

Cela fait maintenant quelques années que j’ai changé ma stratégie en terme de référencement. J’ai finir par laisser tomber mes vieilles techniques Blackhat pour me consacrer à d’autres techniques plus pérennes, telle que celle de la longue traine ou encore la construction de liens via les réseaux sociaux. Les résultats de ce changement de direction sont visibles directement au travers de mon site qui marche. Au sujet de ce dernier, les résultats sont toujours croissants mais j’ai pu observer une très légère baisse de trafic sans doute suite à la dernière mise à jour de l’algorithme de Google. Mais globalement, la tendance reste bonne.

L’optimisation des performances du site web

Récemment, je me suis penché sur un autre aspect que j’avais jusqu’à lors assez négligé: l’optimisation des performances du site. Il est établi depuis déjà longtemps qu’un site qui réagit rapidement est plus apprécié par Google qu’un site qui se comporte en limace rhumatisante. D’après mes observations, cette caractéristique est bien souvent laissée de côté par la plupart des gens qui se focalisent beaucoup plus sur la promotion de leur site au travers de la construction de liens. C’est dommage, car un site bien optimisé, performant et qui se charge rapidement peut décoller et même gagner des places dans les SERPS.

Je me suis donc rendu sur la pléiade de sites qui vous propose un rapport sur les performances de votre propre site afin de pouvoir creuser cette idée et aussi bien entendu d’apporter les modifications nécessaire lorsque cela s’avère possible. En fait, ce n’est pas toujours évident car lorsque vous utilisez un CMS assez lourd comme par exemple WordPress, vous êtes tributaire d’un code tiers, de plugins mal codés, de thèmes mal optimisés, etc. Il faut parfois revoir totalement certaines choses carrément dans le code PHP pour arriver à une saine optimisation. A noter toutefois que pour WordPress, il existe des plugins qui peuvent vous aider dans ce genre de démarche.

Dans un premier temps, je me suis donc plutôt focalisé sur mon site qui marche car je suis complétement maitre de tout le code qu’il utilise. Suite à toutes ces optimisations, voici les résultats que me donnent Webpagetest.

Les premiers octets sont très importants

Le « First Byte Time » correspond au temps qu’il faut pour qu’un client obtienne d’un serveur son premier octet. Ce n’est pas forcément évident à optimiser car il existe une grande dépendance à la bande passante et c’est quelque chose que l’on ne maitrise absolument pas à moins d’y mettre le prix. Mais on peut travailler sur l’optimisation de la page principale afin de réduire au maximum son temps d’accès. Dans le cas du site qui marche, cette page est générée par un script PHP que j’ai modifié. D’abord en le réduisant à sa plus simple expression, en supprimant par exemple un maximum de lignes blanches, de commentaires et aussi en utilisant une indentation différente. J’ai aussi supprimé les include qui sont évidemment gourmands en entrée-sortie. Cela m’a obligé à utiliser des constantes directement dans le corps du programme, ce qui n’est bien évidemment pas des plus recommandés et franchement pas pratique. Après plusieurs tests, je me suis rendu compte que ces changements n’apportaient pas beaucoup d’améliorations dans la vitesse d’accès à la page. Les optimisations de type minification semblent beaucoup trop négligeables lorsqu’elles sont effectuées côté serveur.  Je pense qu’il vaut mieux essayer d’optimiser au mieux les accès goulus telles que ceux que l’on pratique en base de données, voir même de créer un système de cache maison. Je ferai cela à l’occasion dans le cadre de la refonte de mon code.

Activez les connexions persistantes

Le « Keep-alive Enabled » correspond à la mise en place d’une connexion socket dite persistante. Lorsque vous communiquez avec un serveur Web, vous établissez en fait une connexion TCP sur le port 80 (ou 443 si vous passez en SSL), vous envoyez la commande GET pour avoir votre page HTML, le serveur vous envoie les données et ferme la connexion. Si vous faites une autre demande, le serveur ouvrira une nouvelle connexion. Sur une connexion persistante, vous choisissez de ne pas fermer la connexion et de poursuivre le dialogue en vue d’obtenir d’autres éléments HTML, avec comme conséquence un gain non négligeable en performance. Ceci se fait très facilement sur Apache en insérant la directive keepalive dans la configuration de votre site web. Et pour votre culture, sachez que Sendmail fait cela également au travers d’un mécanisme appelé « cache de connexion ».

Compressez les données lors du transfert des pages

Le « Compress transfert » indique qu’une compression est utilisée lors du transfert de l’information depuis votre serveur vers votre navigateur. Bien entendu, celui-ci doit être capable de supporter les mécanismes de compression. Fort heureusement , la plupart des navigateurs le prenne en compte désormais. Néanmoins pour voir si votre navigateur est compatible avec la compression de transfert, il suffit de décoder le trafic Web avec par exemple le plugin Firefox Live HTTP Header et de voir sir votre navigateur envoie la directive suivante: Accept-Encoding: gzip, deflate. Du côté du serveur, pour activer la compression sous Apache, il suffit d’ajouter les directives suivantes dans votre .htaccess:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

La problématique des images

L’ensemble de la gestion des images est une problématique à elle toute seule tant il y a dire à ce sujet et les possibilités pour l’optimisation sont légion. La première chose à savoir est le bon choix du format de l’image. Dans mon cas particulier, c’est le format PNG qui donne les meilleurs résultats. En passant par exemple du GIF ou du JPEG vers ce format, j’ai pu réduire de 10% la taille des images avec la même qualité visible. On peut aussi gagner des précieux kilo-octets en réduisant le nombre de couleurs utilisées, ou en supprimant le blanc souvent utilisé comme délimiteur. Les sites d’optimisation recommandent également de bien préciser les dimensions des images afin que le navigateur n’ait pas à lui même refaire un formatage des données ou une nouvelle mise en page. Finalement, il est tout à fait envisageable de réduire drastiquement l’overhead du protocole HTTP utilisé lors de l’envoi des images. L’overhead est la quantité supplémentaire d’informations nécessaire au transport d’une seule information. Par exemple: dois-je nécessairement envoyer des cookies lors de l’affichage unique d’une image ? Dois-je préciser l’URL de provenance (referer) ? Dois-je afficher d’autres informations superflues ? La solution à cette problématique repose dans le déport de toutes mes images vers un site spécialisé. Je crée donc un sous domaine, par exemple images.pagasa.net, qui va se charger de l’affichage optimisé de mes images. Dedans, je piloterai l’envoi de mes images en évitant soigneusement tout overhead inutile.

La minification des données

Il s’agit ici sans doute de la partie la plus facile à réaliser dans l’immédiat. La minification consiste simplement à « compresser manuellement » toutes vos données, et ceci se fait de manière très aisée. Prenez une page Web, et observez son contenu. Vous allez vous rendre compte qu’il y a un très grand nombre d’informations que vous pouvez d’ores et déjà effacer. Par exemple, les lignes blanches, des espaces en veux-tu en voilà et un certain nombre d’autres choses qui n’affecte en rien l’affichage, comme les commentaires par exemple. Vous pouvez faire de même avec vos fichiers CSS ou votre code Java.

De mauvais résultats à cause des scripts extérieurs

Le mauvais résultat obtenu sur le cache statique provient des applets Java utilisés par des éditeurs extérieurs tels que Google pour Adsense et Analytic. Là encore une fois, il n’est pas possible d’y remédier: vous êtes entièrement tributaires de leur performance. On est tout de même en droit de se poser la question de leur légitimité finalement: pour avoir un site entièrement performant, il ne faut donc pas utiliser d’applets externes.

En conclusion, je suis assez bluffé de toutes les possibilités qui me sont offertes pour optimiser le site Web. Rappelez-vous que Google est très sensible à la rapidité de l’accès à votre site Web; donc ne négligez pas cet aspect. Pour terminer, voici une petite liste des sites que j’ai utilisé afin d’effectuer mes tests de performance:

• WebPageTest
• GTMetrix
• Pingdom
• Google Insights

 

Sujets traités par cet article: http://www.pagasa.net/, http://pagasa.net/

Je viens de mettre à jour le plugin vshop, un gros bug sur l’enregistrement rendait quasiment impossible son utilisation normale. J’en suis profondément désolé car ce plugin donne de très bon résultats, comme je l’ai déjà expliqué précédemment.

Outre la correction du bug, vous pouvez désormais placer le widget à l’endroit où vous voulez dans l’article. Pour ce faire, insérez tout simplement le tag ci-dessous directement dans l’onglet Texte de l’article:

<!-- vshop -->

Si vous omettez ce tag, le plugin affichera le widget comme à l’accoutumée au début de l’article.

Sinon, si vous n’avez défini aucun emplacement dans Vshop, un tracking est désormais incorporé automatiquement. Son format est très simple à comprendre: il comporte le nom simplifié du site web suivi de l’identificateur WordPress de l’article.

Par exemple http://www.pagasa.net/?p=2745 où 2745 est cet identificateur. Dans notre cas, il correspond à cet article précisément.

N’oubliez pas de modifier le widget par défaut avec votre propre widget.

N’hésitez pas à me remonter tout problème ou idée d’évolution. J’ai d’ailleurs déjà prévu une prochaine version d’ici quelques semaines avec les modifications qui m’ont été sollicitées.

Télécharger le plugin vshop

Sujets traités par cet article: http://www.pagasa.net/, http://pagasa.net/

Suite à la création de mon plugin destiné à mieux utiliser la régie Vshop.fr, je vous livre ci-dessous un rapport assez probant sur le taux de clics enregistré sur trois mois.

J’ai découvert cette régie un peu par hasard, courant février et l’ai rapidement mis en place dans la foulée sur un des nœuds de la Coop. On voit clairement que le mois de Mars a été plutôt morne, avec une utilisation toute basique de Vshop: je laissais le script gérer par lui même les annonces. Dans ce cas, le script va analyser la page visitée et y faire sa petite sauce, avec malheureusement pas forcément le succès escompté.

Par contre, dès la mise en place de mon plugin, les choses ont drastiquement changé avec un taux de clics qui explose. Ce qui est tout bonnement normal: les mots-clés tapés par l’internaute dans les moteurs de recherche (Google, Yahoo, Voila, Bing & Co) sont insérés dans le script de la régie, avec comme conséquence un affichage très précis d’une publicité choisie parmi 32 millions de produits (Dixit la régie). Je ne dis rien, ne tente pas de vous influencer mais les résultats sont là: les clics ont été multipliés par 20 entretemps.

Je pense aussi que l’affichage proposé par Vshop est particulièrement efficace: quelques images qui apparaissent pendant quelques secondes et qui défilent par la suite pour faire apparaitre d’autres produits en mettant bien en évidence le prix et éventuellement une bonne réduction. Depuis le temps que je pratique le PPC, il s’agit d’un des meilleurs visuels que je n’ai jamais eu à utiliser: relativement discret, il capte très facilement l’attention du visiteur qui se doit de cliquer dessus, surtout si ce qui lui est proposé correspond pile poil à la requête qu’il a proféré dans son moteur de recherche préféré.

Ci-dessous, un exemple de l’utilisation de Vshop avec les tee-shirts DIESEL.

D’ailleurs, d’autres régies, telles Le Guide utilisent ce type d’affichage; si seulement Google optait pour ce type d’affichage sur Adsense, tout le monde en serait très content :-)

Si vous n’êtes pas convaincu, je vous déconseille donc d’utiliser mon plugin Vshop, qui vous empêchera de gagner quelques Euros de ci de là, le tout sans effort de votre part, cela va de soit, vous commencez à connaitre ma paresse légendaire !

Pour faire suite à de nombreuses demandes et questions, je viens de me décider à mettre à jour le plugin XLT. Outre la correction de quelques bugs, voici les nouvelles fonctionnalités que j’ai développé.

Tout d’abord, j’ai ajouté plusieurs moteurs de recherche qui vont alimenter encore plus votre longue traîne. Parmi eux: Bing, Ask, Yahoo, Voila ainsi que d’autres un peu moins connus, comme babylon.com, delta-search.com et puis quelques toolbars comme conduit.com ou sweetim.com. Ceci devrait alléger la problématique posée par le not provided mis en place par Google et offrir un peu plus de pérennité à l’existence du plugin.
Ne soyez donc pas surpris si les statistiques sur vos mots-clés augmentent sensiblement; et quand je dis sensiblement, vous risquez d’avoir de très agréables surprises, en fonction de la thématique que vous proposez sur votre blog.

Ensuite, vous avez désormais la possibilité de choisir si vous voulez que vos requêtes apparaissent ou non dans les extraits. La version précédente du plugin affichait de manière inconditionnelle ces mots dans les extraits, ce qui selon certains commentaires « pouvait enlaidir » le blog. Décochez « Visible dans les extraits » pour désactiver la présence des mots-clés dans les extraits. Une petite note technique pour les personnes qui font du développement sous WordPress: cette option a été particulièrement difficile à réaliser car, XLT s’appuyant sur un filtre, il n’est pas possible d’enlever celui-ci par la fonction remove_filter() lorsqu’il a déjà été activé au moyen d’un add_filter(). J’ai donc dû chercher une alternative qui semble fonctionner mais je ne peux garantir que la méthode soit opérationnelle sur tous les thèmes WordPress existants. Si vous avez des soucis avec cette option, n’hésitez pas à me contacter.

Toujours en ce qui concerne l’affichage des mots-clés, vous pouvez maintenant choisir si ceux-ci doivent apparaitre sur la page principale. (Option « Afficher sur la page principale « )

Et pour en terminer avec ces fameux mots-clés, il est désormais possible de les dissimuler (option « Dissimuler« ). Certains utilisateurs sont très sensibles à l’esthétisme de leur blog et je les comprend. Il est tout de même dommage de se priver de cette option qui donne de très bons résultats sur la longue traîne. Utilisez donc cette option pour les camoufler aux yeux des utilisateurs. Afin d’éviter toute pénalité propre à cette petite technique, j’ai essayé d’être un peu plus subtil en évitant d’utiliser directement un vulgaire display: none. A noter que certains utilisateurs de XLT ont trouvé la parade en changeant tout simplement l’entête des mots-clés par quelque chose de plus esthétique que ce que je propose par défaut. Par exemple: « Sujets traités par cet article », « Exemple d’article », etc.

Finalement, l’affichage HTML du Widget est à présent complétement paramétrable: entrez les étiquettes dans l’entête, le pied et ce qui doit apparaitre avant et après l’affichage de chaque élément.

Ci-dessous, vous trouverez un historique des précédentes versions du plugin XLT avec mes remarques et les commentaires souvent bien constructifs de ses utilisateurs.

• Version 1.3
• Version 1.2
• Version 1.1
• La version originale

J’en profite aussi pour vous conseiller d’aller jeter un œil sur la page d’Eric de Faire-connaitre-mon-entreprise.fr qui parle longuement de l’utilisation qu’il fait de mon plugin. Vous trouverez aussi d’intéressantes discussions et remarques dans les commentaires.

N’hésitez pas à revenir vers moi pour toute demande de support, bugs, conseils, etc.

Télécharger la version 1.4 du plugin XLT

Je reçois de plus en plus souvent des demandes pour retirer des liens que j’ai fait sur certains de mes sites. Il n’est pas toujours évident de savoir s’il s’agit d’une démarche honnête ou bien d’un concurrent qui cherche tout simplement à nuire. Le petit script ci-dessous va permettre de prouver que la personne à l’origine du message est bien le propriétaire du site web en créant un certificat utilisable uniquement sur deux jours.

http://