Boostez votre Inbound Marketing en basculant vers un site statique

ComExplorer quitte Wordpress qui sera remplacé dans les semaines qui viennent par un site statique. Quelles sont les raisons d’une telle migration ? Nous revenons avec Josselin Perrus, Coach en Product Management sur les gains présentés par un site statique pour votre Inbound marketing et sur les étapes à mettre en oeuvre pour que vous puissiez vous-aussi passer le pas.

Le temps de chargement de vos pages : un facteur clé

Le passage à un site statique permet de réduire significativement le temps de chargement des pages. Ce temps de chargement affecte votre business à de multiples niveaux :

• SEO
• Taux de rebond (bounce rate)
• Taux de conversion

Temps de chargement et SEO

Google accorde de l’importance à l’expérience des utilisateurs qu’il envoie sur votre site, donc à la vitesse de chargement de vos pages : Google va jusqu’à vous fournir des outils et des conseils pour vous aider à l’améliorer.

Il n’est donc pas étonnant que Google privilégie les bons élèves au détriment de ceux qui offrent une expérience dégradée. Et le problème est d’autant plus pris au sérieux avec un trafic sur le web mobile qui dépasse désormais celui du web fixe.

A défaut d’une communication officielle de Google sur le sujet, un faisceau d’observations conduit à établir le seuil de 500 ms comme le “sweet spot” à atteindre. Le graphique ci-dessous établit par exemple une correlation entre le nombre de pages crawlées par Google et le temps de chargement.

Et parmi d’autres, cette étude établit empiriquement une correlation entre le SERP (Search Engine Ranking Position) et le temps de chargement.

Temps de chargement et taux de rebond

Plus une page charge lentement plus le visiteur est susceptible de s’en aller. Aussi intuitif que ce soit ce résultat. De nombreuses études sont venues le confirmer.

Temps de chargement et taux de conversion

Une étude utilisateur Google établit que chaque milliseconde compte. Ils ont ainsi constaté qu’un écart de 250 ms avec un site concurrent pouvait donner un avantage décisif en terme de fidélisation.

Un temps de chargement plus court signifie une navigation plus rapide, et donc moins de freins cognitifs à la navigation, mais aussi à la conversion. Walmart qui était confronté au problème a étudié cette corrélation. Les résultats sont sans appel.

Qu’est-ce qu’un site statique ?

Wordpress, Drupal et autres Joomla sont dits “dynamiques” parce qu’à chaque fois qu’un visiteur charge une page de votre site, cette page est générée la demande par Wordpress.

Concrètement, à chaque requête Wordpress va chercher en base de données le contenu et l’insère dans votre template pour créer la page.

Les fichiers générés (HTML, CSS, JS) sont envoyés au navigateur du visiteur qui les affiche.

Contrairement à Wordpress, un site statique ne génère pas les fichiers au moment de la requête parce qu’ils sont déjà prêts.

Un site statique permet non seulement d’économiser le temps de génération d’une page, mais aussi de tirer pleinement parti (contrairement à Wordpress) de solutions telles que le cache ou les CDN qui permettent d’accélérer l’affichage des pages.

Si le web n’est pas déjà converti au statique aujourd’hui, c’est que la génération de site statique demandait il a peu encore l’intervention d’un développeur à chaque mise à jour du contenu.

Mais l’apparition de nouveaux outils vous permet aujourd’hui de gérer un site statique aussi simplement qu’un site Wordpress.

Voici maintenant en 7 étapes, comment passer vous aussi au statique.

Passer au statique, concrètement, en 6 étapes

Etape 1 : Créer son template

Vous pouvez trouver des template prêt à l’emploi (gratuits ou payants) sur le web, ou le créer vous mêmes.

Un service comme Webflow vous permet de créer un template véritablement responsive sans batailler avec les media queries et de créer des animations sans faire de javascript.

Coût : 16 $

Etape 2 : Configurer le website generator

Vous commencez par choisir un website generator (ils sont listés sur staticgen.com). Vous pouvez partir avec le plus connu, Jekyll, ou opter pour Gatsby si vous voulez faire partie des cool kids (Gatsby est basé sur React, librairie javascript à la mode).

Faites-vous accompagner d’un développeur pour le choix et la configuration de votre générateur si vous n’avez pas d’expérience du code.

Coût : pas plus cher que le setup d’un site Wordpress

Etape 3 : Héberger le code et le site

La solution par défaut pour héberger du code est Github. D’autres solutions existent. Votre développeur fera son choix.

Assurez-vous seulement que la solution propose des webhooks.

Pour l’hébergement du site, dirigez-vous vers Netlify, le pionnier sur le créneau de l’hébergement de sites statiques. Le plan gratuit vous permettra déjà d’aller loin.

N’oubliez pas de mettre en place les règles de redirection et de ré-écriture d’URL qui vous permettront de conserver votre référencement. Ces règles sont gratuites et illimitées sur Netlify. Votre développeur peut vous aider si vous n’êtes pas familier avec ces questions.

Coût : gratuit

Etape 4 : Récupérer votre contenu

Si vous avez déjà un site en exploitation, il vous faut migrer votre contenu depuis Wordpress vers le site statique (vos posts de blog, fiches produit,...).

Les static website generator reposent sur un format, Markdown, qui permet de séparer le contenu de sa mise en forme et évite de manipuler du HTML.

Si vous utilisez déjà un plugin Markdown dans Wordpress, il vous suffit d’exporter votre contenu. Si ce n’est pas le cas, vous allez devoir faire un export de la base de données de Wordpress et transformer son contenu au format Markdown.

Heureusement des scripts tels que celui-ci font cela pour vous. Cerise sur le gâteau : Markdown étant désormais un standard, si à l’avenir vous décider de changer de solution, vos contenus seront déjà dans un format exploitable.

Etape 5 : Héberger le contenu

Vous pouvez choisir d’héberger le contenu sur Github. Mais encore faut-il être familier avec Git.

Une solution plus user friendly est de recourir à un service tel que Contentful qui vous offre tout le confort d’une interface d’administration et des webhooks. Le plan gratuit vous permettra là-aussi d’aller loin.

Coût : gratuit

Etape 6 : Configurer les webhooks

Depuis Netlify vous créez 2 URL de webhooks : une pour Github, une pour Contentful. Ces deux services signaleront à Netlify sur ces URL lorsqu’un changement a lieu.

Vous ajoutez l’une des URL dans Contentful.

Vous ajoutez l’autre dans les paramètres de votre répertoire Github.

Etape 7 : Ajoutez des fonctionnalités

Prenez la main sur les contenus “froids”

Contentful est la solution pour gérer vos contenus “chauds”, qui sont modifiés régulièrement : articles, produits,...

Mais les contenus “froids” tels que les titres ou les textes sur votre home page sont généralement “en dur” dans le code. Et nécessitent donc une intervention de votre développeur pour être modifiés.

Faites la connaissance de Teletext.io : un bout de javascript et quelques tags dans le code plus tard et vous pouvez éditer votre contenu directement depuis votre site. Un must !

Coût : gratuit

Connectez vos formulaires

Netlify offre 100 soumissions de formulaires (contact ou autres) dans son plan gratuit. D’autres solutions existent sur le marché que vous pouvez ajouter sous forme de quelques lignes de javascript.

Si vous voulez envoyer ces données dans d’autres applications (CRM par exemple) utilisez Zapier.

Coût : gratuit

Optimisation des images

Contentful vous donne la possibilité d’héberger des images. Mais si vous utilisez les mêmes images à plusieurs définitions (thumbnail, taille moyenne, grande taille par exemple), plutôt que de n’héberger que la version de plus grande définition ou de vous embêter à charger chaque image à chacune des définitions, faites appel à imgix : ce service vous permettra de changer la définition de vos images en modifiant seulement leur URL. Idéal quand il s’agit de charger un site sur un mobile.

Coût : vraisemblablement inférieur à 5 $ (plus pour les sites à gros trafic)

De belles images, gratuites

Marre des stock photos éculées, et pas les moyens de payer pour vos images. Allez voir sur Unsplash : des images de grande qualité, complètement gratuites. Consultez aussi notre billet sur tous les autres sites d'images gratuites.

Coût : gratuit

Ajouter la recherche

Vous voulez donner à vos visiteurs la possibilité de chercher dans vos articles / produits /…? Intégrez Algolia.

Coût : gratuit

Echangez avec votre communauté

Les commentaires : voilà typiquement une fonctionnalité de site dynamique ! Pas nécessairement si vous intégrez un service tel que Disqus avec quelques lignes de javascript.

Coût : gratuit

Créez une boutique en ligne

Snipcart : il vous suffit d’ajoutez un bouton “Acheter” et quelques lignes de javascript pour disposer d’un site de vente en ligne.

Voici d’ailleurs un tutoriel  pour vous aider à intégrer Contentful et Snipcart pour créer un site eCommerce statique.

Coût : 2 % de vos revenus

Vendez et facturez sous forme d’abonnement

Recurly : si vous vendez non pas des produits mais des abonnements à un service Recurly vous offre de nombreux paramétrages sur la manière de facturer vos clients.

Coût :  1,25 % de vos revenus + 0,10 $ par transaction

Conclusion

Les sites statiques sont la prochaine étape de l’évolution du web. Ils permettent d’accélérer sensiblement l’affichage des sites. Mais ce n’est pas tout :

• Ils sont beaucoup plus sûrs que des sites dynamiques (plus de 70% des installations Worpress sont vulnérables à des attaques connues)
• Vos réduisez vos coûts de maintenance puisqu’il n’y a aucune mise à jour de sécurité nécessaire comme sur Wordpress
• Si votre site génère un trafic important, un site statique représente des coûts d’hébergement divisés par un facteur… élevé.

Des sites très grand public tels que Vox Media et Wikia (3 milliards de pages vues / mois) ont déjà franchi le pas. Et l’agence Carrot (groupe Vice) en a fait sa solution par défaut.

A quand votre tour ?

Josselin Perrus

Product Manager et Product Coach qui a publié une Introduction au Product Management sur les concepts et méthodologies Produit (Design Produit, Acquisition et Rétention de clients, Roadmap et priorisation). Il réalise actuellement une étude sur les pratiques Produit au sein des sociétés digitales françaises. N'hésitez pas à le contacter par email (josselin[at]meaningfool.net), sur Twitter, ou LinkedIn.