Le débat sur l’industrialisation de la production de sites internet est souvent au coeur de nos
discussions chez Mydigicompany. Comment concevoir avec efficacité sans tomber dans la
répétition, l’automatisme qui annihile notre créativité ? Comment rester force de proposition
et souple quand on doit reproduire des processus récurrents communs aux différents projets
? Pourquoi ne pas sombrer dans les limbes de la facilité et du recyclage ? Parce que le
sacro-saint SEO (référencement naturel) et le non moins indispensable UX (experience
utilisateur) sont sacrifiés en chemin…
Le mode « tout manuel » est forcément incompatible avec un rapport qualité-prix compétitif et des délais de livraison raisonnables.
Ce sont souvent des problématiques qui se présentent alors que nous sommes en charge d’un projet de refonte d’un site internet produit par une agence à forte capacité de production, comme PagesJaunes ou Orange, par exemple.
Déjà, petite précision, on ne leur veut rien de mal 😉 ce sont surtout deux modèles, deux philosophies qui s’opposent.
Stéphane Le Roux, gérant de DiaDem Déménagements était à la veille de son
renouvellement lorsqu’il nous a confié son site internet.
Au rang de ses principaux griefs :
● Les difficultés à mettre à jour son site internet
● Un manque d’identité
● Un référencement naturel peu optimal
Après une rapide analyse, nous détections que son site est conçu avec Bootstrap, un
framework qui facilite et optimise l’intégration aux moyens de thèmes pré-conçus.
Un fonctionnement assez similaire aux bien connus CMS comme WordPress, Drupal, Joomla et consorts. Ne crachons pas dans la soupe, nous sommes les premiers à vanter les mérites de WordPress. Il faut garder en tête que ce ne sont que des outils, libres à leurs utilisateurs (les agences, les freelances, nous) d’en faire bon usage. Aujourd’hui, installer un thème et personnaliser les contenus rédactionnels de ce modèle ne prend que quelques petites heures. C’est tentant, forcément. Le bât blesse dès que la volonté de pousser un peu plus loin la personnalisation pointe le bout de son nez. Le cadre est finalement assez restreint. Le thème impose ses limites et il faut se plier à ces dernières. C’est ici que naissent les deux premières difficultés de DiaDem Déménagements : chaque demande de mise à jour devient un casse-tête et au final, le site de l’entreprise finit par ressembler à tant d’autres…
C’est plutôt cohérent. Les couleurs du logo sont reprises, les mots « déménagements » et « gardes meubles » sont mis en avant. Toutefois, cette image d’un Paris nocturne étonne un peu. S’agit-il d’une visite de la Tour Eiffel ou d’un tour en hélicoptère au dessus de la capitale ? Par ailleurs, toutes ces nuances de vert… A y regarder de plus près, cela fait un peu mal aux yeux. Logique, rien que dans cette capture, il y a quatre verts différents ! Et aussi, ne dit-on pas « Un vert, ça va. Deux verts, … ». Pour les fans de Pantone, #70b275, #1f8573, #37b6a0 et #5cb85c sont présents. Le logo de DiaDem, quant à lui, ne comporte qu’un seul de ces verts. L’ensemble donne un aspect assez amateur qui impacte directement l’image de Diadem Déménagements. Débarquez habillé avec autant de verts sur vous lors d’un premier rencard, vous verrez si la soirée prend une bonne tournure. Et l’idée n’est pas de faire concurrence à Cetelem…
Nous avons donc opté pour une démarche bien plus directe.
Les couleurs de Diadem sont plus assumées avec ce vert et ce orange très en avant. L’image du camion colle également à l’activité et renforce une sensation de mouvement et de professionnalisme.
Certaines pages de l’ancien site poussaient même à se demander si l’on était bien sur le site d’un déménageur.
Notre approche a été de saupoudrer, un peu partout sur le site, des éléments visuels rappelant l’univers de Diadem Déménagements.
Des cartons, un canapé qui a changé de lieu de vie et des camions bien rangés. C’est à la fois pragmatique et au coeur de la problématique du visiteur et futur client de DiaDem Déménagements. Plus qu’un Paris vu du ciel en noir et blanc…
La page Contact, elle aussi, a fait l’objet de quelques attentions pour rendre l’ensemble du parcours utilisateur cohérent et agréable.
A travers le parcours utilisateur, c’est le sérieux et le professionnalisme de DiaDem Déménagements qui doit transparaître. Il ne faut jamais oublier qu’un site internet est aujourd’hui une véritable vitrine, et souvent la porte d’entrée pour vos leads. Et comme on a qu’une fois l’impression de faire bonne impression…
Le secteur du déménagement est fortement concurrentiel. Internet devient la première ressource pour trouver l’entreprise à qui l’on va confier sa télé et ses slips. Il faut donc fournir à DiaDem Déménagements un site prêt à être très bien référencé sur Google et Bing. De prime abord, on peut penser que l’ancien site, si peu personnalisé, doit être un as sur le sujet. Son thème, ce squelette si contraignant, doit sans doute être d’une optimisation redoutable. Et bien, en réalité, ce n’est pas vraiment le cas. Car si l’ensemble des critères utilisés dans l’algorithme de Google pour effectuer son ranking (l’ordre d’affichage des réponses) restent secrets, nous avons en notre possession des outils pour contrôler la qualité des sites que nous allons soumettre aux bots de Google. Des outils qui se basent sur de nombreux critères et décortiquent les sites internet à la recherche de failles de vitesse, de conception ou encore de sécurité. L’un des plus efficaces d’entre eux est le « PageSpeed Score », qui mesure la rapidité de votre site à s’afficher aux yeux de vos visiteurs ébahis. Impatients aussi : Les internautes ne supportent plus d’attendre une seconde supplémentaire. Leboncoin, Wikipedia ou encore Amazon, avec leurs interfaces utilisateurs plutôt pauvres l’ont bien compris. Google aussi, est un modèle de sobriété graphique. CQFD, le DiaDem nouveau devra donc être plus rapide que l’ancien tout en étant plus riche visuellement.
En chiffres, le PageSpeed Score de l’ancien site n’était pas si mauvais avec une note à 75%, plutôt dans la moyenne des sites internet actuels.
On constate vite les mauvais points :
• Le code n’est pas optimisé
• Les images sont lourdes
Là encore, c’est le manque d’intervention humaine qui coince. Car fraîchement intégré, un site ne peut pas être miraculeusement optimisé. Il va falloir intervenir à différents endroits clés. Voici, sans trop dévoiler nos secrets les grandes étapes de notre optimisation technique :
- Optimisation du poids et des dimensions des photos pour les différents devices (photos responsives).
Ainsi, chaque appareil affiche une version optimale de chaque média. A petit téléphone, petite image ; à grand écran, grande image. - Gestion des redirections de l’ancien site internet vers les nouvelles pages.
Afin que votre SEO ne s’effondre pas lors de la refonte de votre site web, il est important de « dire » à google ce que deviennent les anciennes pages. La tâche, bien que simple peut être fastidieuse. Il faut en effet, récupérer toutes les URL (les adresses) des anciennes pages – qui vont donc disparaître – et indiquer la nouvelle URL de remplacement. Oui (et pourtant nous voulions éviter les blagues laborieuses liées au déménagement), c’est assez proche d’un renvoi de courrier postal. Mais pour les sites web, il faut imaginer que vous possédez un nombre conséquent de maisons à Toulouse et que vous les déménagez toutes à Reims. Le tout en faisant en sorte qu’aucun courrier ne se perde et finisse dans la bonne nouvelle maison. Vous allez en passer du temps au bureau de poste…
- Optimisation du poids et des dimensions des photos pour les différents devices (photos responsives).
- Mise en place du certificat SSL / HTTPS
Google est vigilant à un site internet sécurisé. E-commerce ou pas. - Intégration d’un CDN (Cloudflare)
Placez une multitude de serveurs entre vos visiteurs et l’espace d’hébergement de votre site internet. Chaque serveur contiendra une copie récente de votre site internet. Et c’est le serveur le plus disponible qui affichera le site internet à un visiteur. C’est comme transformer une seule caisse à la sortie d’un supermarché en un grand nombre de caisses. Un samedi après midi, c’est appréciable. Et Google aime ça, les caisses rapides.
Encore mieux, un CDN va vous assurer un niveau certain de protection contre de multiples attaques et vous permettre d’afficher un copie fonctionnelle en cas de plantage de votre hébergement. Et oui, nous incluons ça dans tous nos projets. - Intégration à Google Search console et Google Analytics
Deux outils indispensables pour s’assurer que tout va bien. - Mise en place de cache dynamique
Le cache est devenu inévitable pour éviter à vos visiteurs de recharger les mêmes éléments de votre site internet lors de deux visites ou plus. - Cache Leverage via Htaccess
Le but est de mieux gérer les délais de péremption de certains fichiers du cache. Ca devient technique, désolé 😉
- Mise en place du certificat SSL / HTTPS
- Automatisation des sauvegardes niveau serveur et niveau local (notre NAS chez nous)
Car on aurait pu rajouter un 4e « w » aux fameux « www » (pour World Wide Web = l’internet largement mondial) pour Wild (= sauvage). Les dangers sont un peu partout, sortons couverts. - Minification HTML / CSS / JS
Ce sont finalement les trois types de fichiers qui font tourner votre site internet. En fin de développement, nous les faisons passer au régime sec et les débarrassons de tout ce qui est superflu, inutile ou redondant. - Lazy Load (chargement différé des images)
Si un visiteur ne scrolle pas jusqu’en bas d’une page, pourquoi charger les éléments qu’il ne verra peut être même pas ? - Async JS (chargement différé du Javascript)
Vous ne voulez pas avoir un mal de tête, promis. Mais il existe des articles passionnants pour les plus téméraires (ou curieux).
- Automatisation des sauvegardes niveau serveur et niveau local (notre NAS chez nous)
- Hébergement local des google fonts et du script google Analytics Faire des appels vers des ressources de Google peut être coûteux en temps. C’est ainsi que fonctionnent nativement les (très) pratiques polices de caractères fournies par Google et son script permettant d’envoyer des données vers la plateforme Analytics. S’il vous manque du beurre pour faire un gâteau, aller en chercher chez le voisin n’est pas le plus efficace. Même si votre voisin est riche en beurre. Du coup, on a choisi de ramener le beurre de Google sur notre serveur et de regarder de temps en temps chez lui s’il a mis à jour sa baratte. Histoire d’avoir toujours la plaquette grasse la plus actuelle. Nous pensons que c’est la mort des métaphores…
- Génération du sitemap Les robots de Google sont parfois un peu feignants. Bien sûr, ils sont assez grands pour parcourir toutes les pages de votre site internet. Mais même si l’on peut visiter l’intégralité d’une maison, on aime bien en avoir un plan, non ? Voilà à quoi servent les sitemaps. Fournir un plan de la structure de votre site internet. Plus fort encore, on peut ainsi dire à Google quelles sont les pages les plus importantes du site internet. Histoire qu’il ne passe pas tout son temps dans les WC mais admire la déco de votre salon.
- Et du favicon C’est cette petite icône qui s’affiche dans les onglets de votre navigateur internet. C’est pas grand chose, mais souvenez-vous où se cache le diable…
Il y a fort à parier que l’ancienne agence qui avait produit le site internet de Diadem Déménagements n’avait pas respecté ces étapes. Voilà comment s’explique cette note de 75% en PageSpeed.
Au final, au delà de la note qui peut sembler peu concrète, la page d’accueil de l’ancien site (celle avec la tour Eiffel, oui) nécessitait 1,6 secondes à s’afficher. C’est peu, certes, mais pour une page aussi basique, c’est long.
Comparons avec les résultats que nous avons obtenus après les multiples tâches citées plus haut. Les efforts en valaient-ils la peine ?
La réponse est finalement sans appel avec un score parfait de 100% et un chargement de la page en 1 seconde tout pile. Le tout pour un site plus moderne, s’adaptant mieux au milieu, avec un parcours utilisateur plus fluide et une meilleure représentation de l’image de DiaDem Déménagements.
