WordPress et Vue.js
Vues.JS permet de créer des architectures front-end rapides et modernes. WordPress propose un back-office intuitif, sécurisé et simple à modifier. Réunir WordPress et Vue.js parait donc être le combo parfait pour la création d’un site Internet. Et c’est effectivement le cas.
Présentons-nous tout de même avant d’aller plus loin. Nous sommes l’agence 36 Pixels, experte en création de site Internet sous WordPress et aussi experte en Vue.js. Nous sommes un peu les pionnier du mariage entre Vue.js et WordPress en France. Nous vous présentons dans cet articles tous les avantages de cette solution. N’hésitez pas à nous contacter si cela vous intéresse !
La communication entre Vue.js et WordPress
Utiliser WordPress simplement pour son back office revient à transformer WordPress en un CMS headless.
Commençons par un petit peu de technique pour bien expliquer la structure d’un site WordPress utilisant Vue.js pour sa partie front. La première question à se poser pour utiliser ces deux technologies open-source, est la façon dont nous allons les faire communiquer.
WordPress est à la base développé en PHP et doit être hébergé sur un serveur de type Apache ou NGINX. Vue.js est un framework JS nécessitant un serveur Node pour son rendu coté serveur serveur. Nous avons donc 2 environnements distincts.
La meilleure solution pour communiquer avec WordPress est sa Rest API, lancée en 2015 et qui a totalement changé la donne. Vue.js comme tous les autres front-end JS peut donc aller récupérer très facilement le contenu de WordPress en allant faire des requêtes via sa Rest API. C’est cette solution naturelle que nous utilisons pour faire communiquer les deux environnements.
Il y a forcément quelques plugins à ajouter à WordPress pour intégrer l’ensemble du spectre des fonctionnalités de WordPress, comme un plugin pour associer les champs ACF au JSON de retour ou un plugin pour créer une route pour les menus de WordPress.
Vue.js, WordPress et l’hébergement.
Quand on utilise Vue.js, on est sans doute intéressé par son rendu coté serveur, son fameux SSR. Il faut alors Node.js sur le serveur. Pour WordPress, il faut un hébergement classique Apache/MySQL ou équivalent. Comme nous l’avons vu plus haut, Il faudra donc 2 architectures différentes et 2 hébergements.
Au sein de l’agence, nous hébergeons WordPress sur un hebergement pro chez OVH. Ce n’est peut pas ce qu’il y a de plus rapide. Mais nous avons mis en place un système de cache de la REST API.
Les résultats obtenus sont satisfaisants mais nous pourrions effectivement faire mieux. En terme de performance Web pour du WordPress, nous pourrions recommander Kinsta ainsi que SiteGround. Chacun des deux hébergeur a ses avantages propres, contactez-nous si cela vous intéresse.
Pour ce qui est de Vue.js, nous retenons la solution de Netlify qui présente quelques avantages, comme la simplicité d’utilisation ou le déploiement automatique via GIT.
La encore, nous pourrions peut être faire mieux en administrant nous même un serveur. Mais nous considérons cela comme un métier à part entière et donc des difficultés supplémentaires. Par ailleurs, encore une fois, nous sommes satisfait du résultat, donc nous n’avons pas forcément besoin de pousser beaucoup plus loin.
A noter concernant cet hébergement Vue.js avec Netlify, Il aurait aussi été possible de passer par Heroku qui propose à peu près des services équivalents. Nous n’avons pas fait de test de comparaison de performance web.
WordPress et Vue.js, une administration inchangée
Du côté du back-office, il n’y a pas de réel changement. Écrire un article ou une page web reste toujours aussi facile avec cette solution. Il n’y a aucune différence. Nous utilisons même l’interface Gutenberg de WordPress, apparue dans la dernière version majeure du CMS.
WordPress et Vue.js, le résultat côté front.
Le plus intéressant dans l’utilisation de WordPress couplé à Vue.js, c’est bien sur côté front. Nous sommes une agence web WordPress et Vue.js, donc il paraissait obligatoire d’utiliser ces technologies pour réaliser le site de notre agence.
Plus de liberté sur l’UX et UI
Vous avez donc le résultat de L’utilisation de WordPress avec Vue.js devant vos yeux. Une interface plutôt sympa, réactive, sans rafraîchissement de page. Au niveau UX et UI, on peut faire beaucoup plus de choses avec Vue.js qu’avec du développement classique.
Le serveur side rendering et le client side rendering
La, cela devient un tout petit peu plus technique. Commençons par expliquer un peu comment marche un site habituellement. Classiquement, une page web est généré sur un serveur distant, en allant chercher les informations dans la base de donnée, puis la page compilée est envoyée vers le navigateur. On appelle cela le serveur side rendering (SSR), le rendu côté serveur.
Il existe aussi le client side rendering (CSR). La première page chargée sur un site est alors récupérée via du SSR, mais avec en plus le code nécessaire pour générer la structure des pages suivantes. Lors de la navigation, il ne reste alors plus qu’à aller chercher les informations dans la base de donnée, pour générer directement les pages sur le navigateur. Si vous avez bien suivi, c’est notamment ici que l’on utilise la REST API de WordPress.
Le client side rendering améliore énormément le temps de chargement des pages, notamment en diminuant le poids des informations qui transitent sur le réseau.
Tout serait parfait si Google savait indexer correctement les pages générées en CSR. En attendant cela, c’est annoncé pour 2020, il faut donc faire à la fois du SSR et du CSR pour toutes les pages du site. Bonne nouvelle, Vue.js permet de le faire en une petite instruction sur le terminal.
Et les performances ?
C’est sans doute le point le plus intéressant dans l’utilisation de WordPress combiné à Vue.js : les performances Web. C’est d’ailleurs un sujet que nous affectionnons particulièrement au sein de l’agence.
Pour vous faire la démonstration de l’intérêt en matière de performance de cette solution, Le mieux est encore de vous présenter les résultats. Vous pouvez aller consulter nos résultats sur Google Page speed via ce lien. Vous y constaterez que nous obtenons de très bons résultats en mobile avec une note qui tourne autour de 90 sur 100. C’est un très très bon résultat.
Coté ordinateur, nous obtenons une note qui oscille entre 95 et 99/100, en étant pénalisé par l’indice de vitesse et le FID. Nous sommes presque parfait.
Que nous manque t’il alors pour atteindre la note de 100 sur Google PageSpeed ?
Nous avons fait des choix de design et d’animation qui nous font perdre le/les derniers points pour obtenir la note de 100 sur Google PageSpeed Insights.
Au niveau du design, sur la page d’accueil, au dessus de la ligne de flotaison, nous avons une petite animation qui fait apparaître le texte après le passage d’un bandeau bleu. Google aurait préféré que le texte apparaisse directement. Nous n’étions pas d’accord sur ce point.
Concernant les animations, nous avons été un peu capricieux. Nous avons mis en place des animations sur la souris, sur les images, sur les transitions de page… Notre navigateur doit interpréter quelques algorithmes avant de pouvoir afficher la page correctement. Google aurait préféré que l’on s’abstienne là dessus aussi.
A noter sur la performance web avec Vue.js et WordPress
L’utilisation seule de Vue.js et de WordPress n’est pas la seule raison de ces bons résultats, et nous avons bien sûr fait de nombreuses optimisations, aussi bien du coté de WordPress que de Vue.js. Nous maitrisons parfaitement l’ensemble des développements à mettre en place pour optimiser le temps de chargement d’un site Internet. Mais l’utilisation de Vue.js et de WordPress permet d’aller beaucoup plus loin.
A noter aussi que nous avons des marges de progression en nous intéressant à la partie hébergement web, comme vue plus haut dans l’article.
Vue.js, WordPress, et le SEO
Ok, c’est bien beau d’avoir un site rapide, mais qu’est-ce que cela apporte au niveau du SEO ?
Figurez-vous que Google s’intéresse particulièrement au ressenti des utilisateurs, et donc notamment au temps de chargement des sites Internet. C’est l’une des optimisations les plus dures à corriger et l’utilisation de WordPress et de Vue.js y répond parfaitement.
En conclusion sur le SEO, Google positionnera donc mieux un site rapide et donc mieux un site utilisant WordPress et Vue.js.
Vue.js, WordPress, et la conversion
Sur ce point là, nous avons aussi une multitude d’étude qui ont été faites. Voici quelques chiffres concernant l’optimisation du temps de chargement et la conversion :
- Sur Amazon, 1 seconde de temps de chargement supplémentaire couterait à l’entreprise 1,6 de dollar de perte chaque année.
- 53% des utilisateurs sur mobile quittent une page web si elle met plus de 3 secondes à s’afficher.
- Selon Shopify, 1 seconde de temps de chargement supplémentaire sur une page pourrait générer jusqu’à 10% de perte de chiffre d’affaire.
Vous l’aurez compris, les internautes sont de grands impatients et pour les satisfaire, WordPress et Vues.je semblent être la meilleure solution.
Pour conclure sur l’utilisation de WordPress avec Vue.js
L’utilisation de WordPress avec Vue.js nécessite un niveau de technicité en développement supérieur au développement d’un site classique. Au niveau de l’hébergement, cela s’avérera aussi un peu plus complexe à mettre en oeuvre. Mais ce sont les seuls points négatifs que nous pouvons trouver à l’utilisation combinée de Vue.js et de WordPress.
Au niveau des avantages, vous pourrez noter un temps de chargement accru pour faire diminuer le taux de rebond et optimiser le référencement, une navigation plus moderne avec des transitions de page et des animations, et des taux de conversion en hausse. Que demander de plus ?
Si vous êtes intéressés par cette solution, n’hésitez pas à nous contacter !