The web should be fast… Derrière ce leitmotiv de Google se cache un véritable casse-tête pour nous autres blogueurs. Si bien que ce sujet est revenu me préoccuper depuis une dizaine de jours, et après quelques nouvelles recherches, j’ai décidé de me lancer dans la grande aventure du CDN, le Content Delivery Network.

On le sait désormais, les temps de chargement d’un site sont primordiaux, à la fois pour les visiteurs, mais aussi pour les moteurs de recherche, puisque Google a récemment intégré ce critère dans son algorithme de résultats. Pour rappel, un temps de chargement supérieur à 4 secondes pour une page devient critique, car au delà un nombre non négligeable de visiteurs renoncent et se dirigent vers un autre site. Mais si cet ordre de grandeur de 4 secondes constitue un cap essentiel pour éviter l’hémorragie, optimiser un temps déjà inférieur à 4 secondes permet à l’inverse de gagner des visiteurs supplémentaires.

Sauf que pour le simple blogueur amateur que je suis, cette optimisation relève d’un véritable défi. Le simple fait d’être sur un hébergement mutualisé ne va pas déjà forcément dans le bon sens. Sauf que comme de nombreux blogueurs, les autres solutions d’hébergement restent hors de portée. Il y a quelques temps je m’étais déjà penché sur la question et j’avais réussi à gagner quelques demi-secondes loin d’être négligeables en optimisant l’utilisation du cache. Mais depuis une dizaine de jours j’ai décidé de me réattaquer à ce sujet. J’ai trouvé quelques pistes intéressantes, et notamment les CDN (Content Delivery Network), qui consistent à mettre à disposition les fichiers statiques de votre blog (images, scripts, …) sur différents serveurs de par le monde entier. Et après quelques recherches, j’ai opté hier pour le service -plus qu’abordable- proposé par Amazon Web Services: CloudFront.

Le système est en test depuis ce wek-end, et si le résultat est concluant, je vous ferai un petit tuto détaillé pour vous expliquer tout ça. J’ai quand même galéré un peu mais maintenant ça a l’air de marcher correctement! (ce qui explique d’ailleurs le manque d’articles depuis 2 semaines, entre ça et le boulot et le froid de canard, pas facile…). En attendant n’hésitez pas à me signaler ce qui vous paraîtrait bizarre sur le blog, et si vous avez constaté une différence

Crédit photo

On connaît l’importance sur un blog de proposer à la fin d’un billet une liste d’articles similaires afin d’encourager le lecteur à rester sur notre site. J’ai longtemps recherché un moyen simple d’afficher ces articles similaires avec une image miniature. Ne cherchez plus: le plugin nrelate pour WordPress devrait parfaitement répondre à vos attentes.

Ah, les articles similaires en fin de post… Pas si évident que ça à implémenter, car l’enjeu est double, il faut à la fois que les articles proposés soient:

• pertinents par rapport au contenu de la page en cours de visualisation
• présentés de façon attractive sinon ils passeront complètement inaperçus pour le visiteur, et pour ce dernier point, l’usage d’une image miniature (thumbnail) pour illustrer chacun des articles similaires proposés est indispensable

Partant de ce postulat, il n’y a pas beaucoup de solutions. Soit vous utilisez un plugin d’articles similaires qui implémente déjà des fonctionnalités d’images miniatures, et là vous ouvrez grand les portes à une liste d’articles similaires sans cohérence en termes de contenu, et à une éventuelle faille de sécurité via le script timthumb si le plugin n’a pas été remis à jour depuis…

Soit vous optez pour un plugin vraiment performant en termes d’identification de contenu similaire (tel YARPP – Yet Another Related Posts Plugin). Avec ce type de plugin, vous obtiendrez à coup sûr une liste d’articles vraiment cohérente. Ne reste plus qu’à mettre les mains dans le cambouis et dans le css pour les afficher sous forme d’image miniature… C’est ce que j’ai fait, avec un résultat tout à fait satisfaisant et laissé pas mal de temps sur ce blog.

Une autre solution peut-être? Un plugin qui combine les deux et d’une simplicité déconcertante pour l’implémenter sur son blog! Il s’agit du plugin nrelate Related Content que j’ai découvert il y a quelques mois:

• installez le plugin (téléchargement ici) et activez-le
• allez dans les options pour régler les quelques paramètres comme par exemple: la mise en page souhaitée (le plugin propose de base plusieurs styles tout à fait sympas et au rendu très classe), ou l’horizon de temps sur lequel le plugin peut aller rechercher des articles similaires
• patientez une heure ou deux que le plugin s’affiche sur votre site (en fait, ce sont les serveurs de nrelate qui scanne votre site pour envoyer au plugin à chaque affichage une série d’articles similaires)
• et un petit détail, si vous n’êtes pas convaincu par la pertinence des résultats renvoyés, attendez quelques jours / semaines avant de désinstaller le plugin, j’ai noté une très grande amélioration des articles similaires proposés les premiers temps après installation

Finalement, nrelate Related Content s’apparente à la solution LinkWithin (peut-être un peu plus connue en France), mais sans ses inconvénients : rien de compliquer pour obtenir le plugin, et surtout la possibilité dans les options de ne pas afficher le logo sur son blog…

Comme je vous le disais dans ce précédent post, j’ai récemment changé l’extension du nom de domaine du blog. Chose promise, chose due, voici les explications en 10 étapes pour changer le nom de domaine de son blog WordPress, tout en limitant l’impact sur le référencement et l’expérience de vos visiteurs.

Dans la suite, nous allons considérer que le blog actuel est www.monanciensite.fr et que nous souhaitions passer en www.monnouveausite.org (vous pouvez changer le nom de domaine, l’extension, ou les 2)

Préparation du nouvel hébergement

Pour plus de sérénité et mieux gérer les redirections que l’on va mettre en place par la suite, nous allons prendre un nouvel hébergement dédié.

• Etape 1 : prenez le nouveau nom de domaine monnouveausite.org et un nouvel hébergement (préférentiellement sur le même hébergeur que votre ancien) : si le nom de domaine est pris chez un registrar différent de votre hébergeur (recommandé pour plus d’indépendance), il vous faudra renseigner les adresses des DNS de votre hébergeur sur votre compte du registrar
• Etape 2 : si vous tenez votre WordPress à jour, vous pouvez éventuellement installer WordPress sur le nouvel hébergement sans rien ajouter (assurez vous d’installer la même version que votre blog monanciensite.fr actuellement en service)
• Etape 3 : transférez l’ensemble de vos fichiers de votre ancien FTP vers votre nouveau (si vous installez WordPress à l’étape précédente sur votre nouveau FTP, le dossier wp-content (thèmes, plugins, médias, …) peut éventuellement suffire si vous n’avez pas apporté de modifications aux fichiers de WordPress)

Migration de la base de données

• Etape 4 : depuis votre ancien hébergement, exporter la base de données de votre blog (par exemple depuis phpMyAdmin, vous trouverez certainement la marche à suivre dans la documentation ou aide en ligne de votre hébergeur)
• Etape 5 : installez grepWin sur votre ordi (c’est un utilitaire de recherche d’expression régulière) et lancez le  :
  • recherchez dans votre fichier de base de données le texte « monanciensite.fr ». grepWin vous donne le nombre d’occurrences trouvées. (si aucun résultat n’est trouvé, cochez l’option « include binary files » et relancez la recherche)
  • faites maintenant remplacer « monanciensite.fr » par « monnouveausite.org » (vous pouvez cocher « create backup files » pour enregistrer les modifications dans un nouveau fichier)
  • dans le cas d’un hébergement mutualisé, certains plugins peuvent enregistrer un chemin d’adresse avec le nom du serveur de votre hébergeur. Il y a de forte chance que votre nouvel hébergement ne possède pas le même nom de serveur, il vous faudra de la même façon le remplacer (par exemple, chez OVH, il s’agit de « homez/numeroserveur », vous pouvez trouver le numéro de serveur dans la fiche synthèse de votre hébergement sur le manager)
• Etape 6 : sur votre nouvel hébergement, importez la base de données ainsi modifiée (vous trouverez également la marche à suivre dans la documentation de votre hébergeur)

Continuité de l’ancien nom de domaine et du nouveau

• Etape 7 : assurez vous que tout fonctionne correctement sur monnouveausite.org
• Etape 8 : il vous reste à créer une redirection permanente 301 entre l’ancien site et le nouveau, afin de rediriger automatiquement toutes les anciennes url vers les nouvelles. Sur le ftp de monanciensite.fr, ajoutez les lignes suivantes dans le fichier .htaccess après « RewriteEngine On Rewrite Base / »

RewriteCond %{HTTP_HOST} ^(www\.)?monanciensite\.fr
RewriteRule (.*) http://www.monnouveausite.org/$1 [R=301,L]

• Etape 9 : prévenez Google du changement sur Google Webmaster Tools et déclarez-y monnouveausite.org (si vous n’avez pas de compte, avant même de commencer l’étape 1, créez en un déclarez-y monanciensite.fr). Google recommande de conserver l’ancien site actif pendant au moins une demie-année.
• Etape 10 : re-générez manuellement votre sitemap(si vous utilisez un plugin, via réglages > xml-sitemap> reconstruire le sitemap manuellement)

Et enfin, pensez aux dernières corrections : essayez de corriger vos backlinks (annuaires, …), vérifiez vos flux rss, etc. Par la suite, surveillez les erreurs d’exploration de monnouveausite.org sur votre compte Google Webmaster Tools…  Ayant fait ce changement récemment, je n’ai pas encore assez de recul pour vous faire part de l’impact sur le référencement : je pense qu’on peut s’attendre à une baisse de trafic pendant quelques mois, mais limitée car la redirection 301 correspond aux règles de l’art.

Sources et ressources complémentaires : wordpress-fr.net et sugi.fr

Crédit photo

Notre nouvel épisode du tour du web, avec les coups de coeur du net et de la blogosphère de ces dernières semaines.

Primorskiy Park, une belle leçon d’architecture [Fubiz]

Le plus dur à gérer pour un pdg? Sa propre psychologie [Techcrunch France]

Hybrid Motoryacht Design Powered By Diesel And Electric Jet Skis [Techcrunch GreenTech]

Plus grand aéroport miniature du monde à Wunderland Hamburg [Vincent Abry]

Xbox 720 et PlayStation 4 : pas avant 2014 ? [Fredzone]

2012 Audi A7 Papercraft [YouTube]

The Royal Wedding [The Big Picture - Boston]

Iceland Landscapes [Fubiz]

J’ai passé ces derniers jours à apporter quelques modifications techniques sur le blog, notamment sur les temps de chargement. Voilà qui devrait améliorer votre confort de surf sur le blog !

Pour ce faire j’ai suivi cet excellent article de la Fredzone, en installant simplement des plugins permettant de mettre en place un système de cache ainsi que d’optimiser la base de données. J’ai opté pour les plugins conseillés dans l’article : Hyper Cache, DB Cache Reloaded, et WP-DBManager (vous trouverez tous les liens sur le blog de Fred avec une vue d’ensemble sur l’optimisation des temps de chargement). En revanche j’ai laissé de coté pour le moment la solution complémentaire visant à utiliser dropbox comme cdn, je verrai à l’avenir.

A noter, j’ai rajouté également dans la sidebar de droite un lien vers les dernières actus publiées sur les pages Facebook et Twitter du blog.

N’hésitez pas à me faire part de vos remarques et impressions!

Crédit photo

La suite de notre tour du web, avec comme toujours une petite revue de presse du web et de la blogosphère de ces derniers temps.

Nasa pleïades : à la découverte de l’un des plus puissants ordinateurs du monde ! [PCWorld]

Coca-Cola Daft Punk Edition [Fubiz]

3 objectifs Nikon f/1,4 en édition limitée [Tendance High-Tech]

Comment faire des avions en papier (12 plans) [Ikonal]

Oscars 2011 : les affiches des nominés façon Lego [Fredzone]

Vos amis Facebook sur un poster, c’est possible [Emilie Ogez]

Des photographies de paysages par Mikko Lagerstedt [Fubiz]

10 vérités SEO et leurs contraires [Blog Axe-Net]

Flashmob Saint-Patrick à la gare de Sydney [Vincent Abry]

WordPress : 4 plugins de sécurité et antivirus [Vincent Abry]

25 exemples de Light Graffiti Art [Smash Hub]

Crédit photo

Une sélection du web et de la blogosphère du mois de janvier, à voir ou à revoir avec plaisir à travers cette troisième escale de notre tour du web !

Benoit Descary nous propose une petite sélection d’outils particulièrement utiles pour blogger (descary.com)

Bloguer, c’est une communauté, une passion. Une série de photos originales et très réussies de blogueurs devant leurs écrans dans la vie de tous les jours (Fubiz)

Et on revient dans les outils pour blogueur, avec cette fois les conseils de Cédric pour rechercher des sujets d’articles à rédiger (Autour du Web)

Amis geeks, vous allez enfin pouvoir placarder la carte de la galaxie Starwars toute entière sur un mur de votre bureau (Fredzone)

Des photos de paysage urbain, le tout à Tokyo et en HDR (Tout le Japon)

De magnifiques spots pour les stages linguistiques EF, à voir en vidéo (Fubiz)

Crédit photo

Liens masqués, liens visibles inchangeables, portions de code douteuses… c’est ce que peuvent cacher certains thèmes WordPress gratuits dès qu’ils proviennent d’autres sites que l’officiel WordPress.org. Quelques exemples mis en évidence récemment par le blog wpmu.org.

WordPress est probablement la plateforme de blog la plus importante ; de dimension internationale, les thèmes graphiques sont devenus nombreux et fleurissent un peu partout sur le net. Problème : en dehors de thèmes récupérés sur le site officiel, certains thèmes peuvent cacher bien des surprises… Le blog wpmu.org nous en fait la démo.

A la requête « free wordpress themes », Google renvoie pas moins de 5 sites web classés avant WordPress.org. L’auteur de l’article a donc fait un petit échantillonnage de quelques thèmes trouvés sur ces sites, pour découvrir quelques éléments un peu surprenant:

• des portions de code encodés en Base64 situés dans les pieds de page, pointant vers des antivirus gratuits ou autres…
• des liens statiques dissimulés dans les feuilles de style, invisibles pour le visiteur mais permettant d’améliorer le référencement de sites sans aucun rapport avec votre blog
• d’autres liens codés en Base64, avec cette fois une particularité: en cas de modification du code du thème, un message s’affiche sur le site comme quoi le thème est gratuit et que les liens du footer doivent rester intacts…
• accessoirement, des thèmes non à jour pour fonctionner avec Worpress 3, alors que les originaux de ces thèmes sont up-to-date.

Pour ma part, je me rappelle être tombé une fois sur un thème dont le champ recherche avait été remplacé par une recherche via Adsense…

Pour voir l’article complet sur wpmu, c’est ici (si vous voulez faire des tests, l’auteur vous recommande d’ailleurs de tester les thèmes en local et non en les uploadant sur votre site…). L’auteur nous propose également une vidéo réalisée par ThemeLab pour visualiser des exemples de code en Base64 dans les fichiers .php:

Via Clubic

Crédit photo

Comme tous les mois (oui je sais, depuis 2 mois seulement…), les escales du tour du web vous présentent une petite sélection de mes coups de coeur trouvés sur le web et la blogosphère du mois passé.

Une belle sélection des photos de l’agence Reuters retraçant les évènements marquants de l’année 2010. A voir absolument! (Fubiz)

La vidéo d’une caméra embarquée sur un avion d’aéromodélisme survolant Ney-York: vraiment impressionnant! Et félicitations au « pilote »! (Youtube)

L’évènement marquant des dernières semaines, c’est évidemment la neige! Et certains ont vite compris que Paris était devenu l’une des stations de ski les plus prisées du moment, avec cette descente historique de Montmartre en snowboard (Youtube)

On a vu pas mal de hacks de Kinect depuis la sortie de cette « manette nouvelle génération », en voilà un qui devrait en intéresser plus d’un: jouer à World of Warcraft avec le Kinect! Démontration en vidéo! Avec ça je pense que y a moyen de casser du hordeux… (Fredzone)

Comment utiliser la nouvelle mise en page du profil Facebook pour afficher de façon originale sa photo de profil (TechCrunch)

Le best-of 2010 de Fubiz, en 120 articles (Fubiz)

Crédit photo

Vous avez un blog et vous aussi ils vous arrivent de faire des revues de web ou de présenter certains services ou sites? Alors Thumbalizr devrait vous être utile!

Ce site vous permet en effet de faire rapidement et gratuitement (et sans inscription) une capture d’écran d’un site web. Pour ce faire, rien de plus simple:

• allez sur www.thumbalizr.com
• entrez l’url dont vous voulez récupérer la capture d’écran (choisissez si vous voulez une capture d’écran présentant la page complète ou uniquement une vue « écran »)
• cliquez sur « thumb it »
• patientez quelques secondes
• il ne vous reste plus qu’à choisir la résolution, et vous pouvez télécharger l’image au format .png

Très utile, par exemple pour illustrer ce type d’articles ou encore une revue de web!