L’optimisation des performances d’un site Web

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.

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:

 

Comment prouver que vous êtes le propriétaire d’un site web ?

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://

Ces blogs américains que je lis

Depuis des années maintenant, je lis régulièrement quelques blogs américains. Je dois même avouer qu’en définitive, j’ai dà» plus passer mon temps sur des sites en anglais qu’en français. Bon, il faut quand même reconnaitre que l’offre française s’est quand même bien étoffée maintenant et qu’il y en a pour tous les goà»ts et que l’on peut désormais discuter plus sereinement des choses qui ont tendance à  fâcher mes compatriotes (l’argent, le blackhat, etc.)

J’entends souvent dire que peu de choses peuvent être transférées du Web US vers le Web Français. Je ne suis pas d’accord avec cela: il y a également beaucoup de possibilités sur le marché Français mais qui ne pèsent pas grand chose à  côté du gigantesque marché US. Et puis, il faut bien reconnaitre que la relation qu’ont les Français avec l’argent est souvent un frein au développement du e-commerce. J’estime aussi que l’affiliation est insuffisamment développée   en France: sur le marché US, j’ai rarement vu un petit e-commerce sans affiliation. Ce qui est loin d’être le cas dans notre pays, c’est fort dommage car c’est un levier puissant pour faire des affaires. J’ajoute aussi, que notre pays est de moins en moins « business-friendly » et qu’objectivement parlant, cela ne date pas d’hier.

A ce sujet, lorsqu’un américain démarre une affaire, sa première question est « Combien vais-je gagner ? » L’entrepreneur Français exprime toute sa différence par un glacial « Combien vais-je être taxé ?« .

Il n’en demeure pas moins que j’ai toujours continué à  suivre quelques blogueurs américains que j’apprécie particulièrement. Je vous les livre ci-dessous avec quelques commentaires.

Shoemoney « Des compétences pour payer les factures »

Cela fait des années que je lis le blog de Jérémy et malgré le temps qui passe, il arrive encore à  m’étonner. Il faut quand même avouer que son parcours a tout du rêve américain: un type gras, qui fume comme un pompier, éternel looser (c’est lui même qui le dit), malade de surcroit et qui en quelques années, devient un as du marketing à  la tête d’une société qui pèse plusieurs dizaines de millions. Jérémy parle souvent de l’affiliation, du e-commerce, et parfois même un peu de SEO. Globalement, il exprime de bonnes idées et a des réflexions assez juste sur le Web en général. Il propose parfois quelques produits et je me suis même laissé tenter par certains d’entre eux.

John Chow « Je gagne de l’argent en expliquant aux autres comment je gagne de l’argent »


John Chow est un très ancien blogueur Canadien que je suis depuis des années. Très actif sur le marché du MMO (Make Money Online), il reprend généralement les mêmes concepts marketing que Shoemoney. Mais pour ma part, son niveau est assez en dessous de celui de Shoemoney. Leur pseudo rivalité fait d’ailleurs souvent l’objet de concours entre eux, parfois délirants (Course de voitures, etc.). John Chow est à  l’origine de plusieurs idées intéressantes: un Google Bombing sur son site qui a prouvé que Google pratiquait les pénalités en manuel et aussi la parution mensuelle des revenus de son blog, une idée qui attire un nombre toujours plus important de lecteurs au fil des mois. Cette idée a été par la suite reprise par un certain nombre de blogueurs y compris francophones. Après quelques années de lecture, ce blog a quelque peu perdu en qualité. On voit nettement que l’inspiration commence à  manquer mais John a trouvé un bon petit filon pour y palier: il va régulièrement au restaurant pour y prendre des photos de ses repas. A partir de cela, il dispose d’une source quasi infinie de nouveaux articles.

Pat Flynn « Des revenus passifs élégants »


Pat Flynn est un blogueur Californien extrêmement productif. Son blog très agréable à  lire est assez complet, avec de nombreux podcasts et vidéos à  l’appui. Il nous parle bien évidement de l’affiliation, du e-commerce, de ses réussites et échecs et toutes ses choses agréables qui impliquent que l’on peut arriver à  gagner de l’argent même en dormant. Pat nous explique aussi comment il crée ses backlinks au travers d’articles bien écrits et très documentés. C’est quelqu’un qui est resté assez technique dans ces propos mais qui arrive à  prendre suffisamment de recul pour intéresser un public assez large. Comme John Chow, il est très transparent sur les revenus de tout son business qu’il publie une fois par mois.

Dejan Seo « Référencement avancé »


En fait Dejan Seo n’est pas Américain mais Australien. il s’agit d’une vénérable société de référencement possédant plusieurs bureaux en Australie. Et c’est pour ma part une étoile montante du SEO mondial. Leur blog est une collection d’articles essentiellement techniques qui valent leur pesant d’or. Le côté intéressant de leur démarche est qu’ils sont souvent dans l’expérimentation qu’ils nous livrent au fur et à  mesure des jours. Ils sont notamment à  l’origine du détournement SEO du blog de Rand Fishkin. Ce blog s’adresse avant tout à  un public de spécialistes.

Get Rich Slowly « La finance personnelle qui vous fait gagner des centimes »


GRS, comme l’abrège souvent son auteur, J.D. Roth est un blog de finances personnelles. A l’origine, J.D. Roth était un homme criblé de dettes qui, en 2006, a décidé de se reprendre en main. A force d’efforts, d’économie et de saine gestion qu’il raconte longuement sur son blog, il a fini par s’en sortir. Il a ce point réussi qu’il a pu quitter son travail et vivre complétement de son blog, à  son plus grand étonnement. GRS est très loin de tout ce que l’on peut trouver sur les blogs parlant d’argent: c’est une expérience très « père de famille » qui consiste à  expliquer que ce sont les petits ruisseaux qui font les grandes rivières; les centimes économisés deviennent des dollars qui deviennent des dizaines de dollars, et ainsi de suite. Le blog explique longuement toutes les possibilités d’épargne, de capitalisation et aussi comment se désendetter et se préparer une retraite. Même si l’audience est essentiellement américaine, j’y ai souvent trouvé de bonnes idées et des pistes de réflexion. Dernièrement, le blog a accueilli de plus en plus de blogueurs invités, mais qui n’enlèvent rien à  l’esprit très familial de cette très sympathique histoire.

Megaupload a été fermé par la justice fédérale

Le site bien connu de partage des fichiers vient d’être fermé par la justice fédérale de l’à‰tat de Virginie.

La société et ses fondateurs sont accusés d’avoir violé les lois sur les droits d’auteur. Le préjudice porterait sur plus de 500 millions de dollars. La coupure est intervenue après que le site ait participé à  la journée d’action contre la loi américaine SOPA.

Dirigé par Kim Dotcom, Megaupload était connu comme le 13eme site le plus visité au monde.

Infolinks: une alternative à  Adsense

Cela fait désormais plusieurs années que j’utilise la régie Infolinks et j’en profite pour vous donner mon point de vue.
Initialement, cette régie ne fonctionnait que sur quelques-uns des blogs US que je possède ainsi que sur un forum. J’ai été contacté un jour par une personne de chez eux me proposant de l’installer sur Pagasa pour essayer des annonces en Français. Ce que j’ai fait.

La publicité In-Text

Infolinks est un fournisseurs de solutions de publicité In-Text. Ce type de publicité consiste à  insérer un lien publicitaire hypertexte directement dans le contenu du site. Par exemple, Infolinks récupère le mot clé « rencontre » dans un article et lorsque je survole le lien, une petite fenêtre s’ouvre laissant apparaitre une publicité. Si je clique sur l’encart, je suis redirigé vers le site de l’annonceur, et l’éditeur est alors commissionné.

Riche en texte, un blog est particulièrement intéressant pour Infolinks; il en est de même pour les forums qui présentent un vaste de choix de possibilités de mots-clés. Contrairement au pop-up et autre soucoupes volantes publicitaires, les publicités ne sont guères intrusives: on ouvre l’encart uniquement si l’on survole le lien. Personnellement, je trouve que c’est une solution qui s’intègre assez bien au contenu d’un site, car elle reste assez discrète, surtout si vous apportez du soin à  son intégration.

L’intégration d’Infolinks

Elle se fait très simplement en plaçant un bout de code Java juste avant votre final. Sur du WordPress, ceci se fait très facilement en modifiant votre footer.php, dans l’éditeur d’apparence, juste après la fonction wp-footer(). A noter également que des plugins spécialisés sont disponibles sous WordPress, Joomla et Drupal.

Vous pouvez aisément modifier la façon dont les liens apparaissent; je vous le conseille vivement d’ailleurs car je trouve que la présentation par défaut n’est pas spécialement performante. Commencez par fondre la couleur des liens In-Text avec les liens de votre propre site. Dans son interface d’administration, Infolinks vous propose une matrice de couleurs. Pour utiliser le même code couleur, il vous suffit d’aller le chercher dans votre propre CSS (Cherchez a, a:link, a:visited, etc.)

Modifiez ensuite le style de soulignement du lien. Personnellement, je prends le style pointillé, beaucoup plus discret que le double soulignement: celui-ci est beaucoup trop voyant, et on se rend immédiatement compte que l’on a affaire à  un lien publicitaire. Laisser le nombre maximal de liens à  12. De toutes les manières, c’est le maximum que vous pouvez afficher.

Quant à  la catégorie, généralement, je n’en met pas, du moins sur les sites en Français. Finalement, vous avez la possibilité d’utiliser des tags supplémentaires un peu à  la manière d’Adsense. Ceux-ci reprennent les thématiques trouvées sur votre site et les affiche en fin de page. Ces tags sont censés améliorer la productivités des clics, mais personnellement je n’ai pas trouvé beaucoup de changement.

Les performances et le paiement

La chose vitale qu’il faut savoir est qu’en matière de PPC, il est très difficile de trouver mieux qu’Adsense; hormis peut-être quelques niches chez Peakclick, les concurrents ne battrons jamais le Big G. Mais il est regrettable de ne pas s’intéresser à  ce type de régie secondaire: mieux vaut tout de même avoir de temps à  autre un virement Paypal, plutôt que strictement rien, surtout si cela ne vous coutera pratiquement aucun effort. Et puis on dit toujours que les petits ruisseaux font les grandes rivières.

Infolinks vous paiera dès $50 par Paypal ou Payoneer, ainsi que par virement bancaire, à  partir de $400.

En conclusion

J’ai aimé l’interface intuitive, l’ergonomie (la belle couleur bleue, très jolie :) et aussi la présence d’un account manager.
Je regrette un peu la relative pauvreté des annonces en Français, espérons que cela ira en s’arrangeant. Je ne peux que vous engagez à  vous inscrire chez Infolinks: simple, sérieux et des revenus passifs, ce qui n’est pas pour déplaire.