Le guide du marketing sur le rendu côté serveur
Publié: 2021-07-26Le langage de programmation n'est pas un concept facile à saisir, surtout lorsque votre travail de référencement s'est principalement concentré sur le côté non technique. Mais voici la chose à propos du référencement technique : sa connaissance vous aide à comprendre les changements que votre site Web doit apporter pour un meilleur classement dans les moteurs de recherche.
Alors que Google a déployé Core Web Vitals en juin, qui fait partie de sa mise à jour Page Experience, tous les spécialistes du marketing qui n'ont pas examiné de plus près le référencement technique voudront le faire maintenant.
Et lorsque votre site Web est construit sur des frameworks JavaScript, une partie à creuser est le rendu côté serveur.
Qu'est-ce que le rendu côté serveur ?
Le rendu côté serveur correspond au processus de récupération d'une page Web, de saisie du code, d'affichage du contenu sur un écran - tout se passe sur le serveur.
En RSS :
- Le serveur envoie une réponse prête à être rendue au navigateur ;
- Le navigateur rend la page, la rendant prête à être visualisée, puis le navigateur télécharge le JavaScript ;
- Le navigateur exécute alors React lorsque la page est prête à être visualisée, et
- La page Web est alors prête pour l'interactivité.
La façon dont tout cela se passe en a fait une meilleure option par rapport à d'autres types de rendu : le rendu côté client (où le JavaScript est rendu par le navigateur, alias le client) et le rendu dynamique (où les utilisateurs obtiennent le contenu rendu client-serveur et les moteurs de recherche obtenir le contenu rendu côté serveur). Même Google encourage les développeurs Web à choisir le rendu côté serveur.
Pourquoi?
[Étude de cas] Gérer le bot crawling de Google
Lire l'étude de casLes avantages du RSS
- Il aide à charger une page Web lorsque la connexion Internet d'un utilisateur est lente
- Il permet un chargement rapide des pages, contribuant à une meilleure expérience utilisateur
- Il crée une page HTML complète, évitant le processus fastidieux de récupération des données
- Il permet aux pages de se charger, avec tous ses éléments, même lorsqu'un utilisateur a un appareil sous-alimenté, comme un smartphone d'ancienne génération
- Il contribue aux performances SEO car il permet aux moteurs de recherche d'explorer et d'indexer les pages avec précision ; les bots peuvent explorer les pages facilement puisqu'ils comprennent JS
Dans l'ensemble, SSR vous aide à mieux servir les clients en ligne, car les visiteurs de votre site n'attendront pas que les pages s'affichent sur leurs appareils. Des transitions de page rapides garantissent également que vos utilisateurs n'obtiennent jamais une page vierge, ce qui leur permet d'utiliser votre site immédiatement.
Étant donné que Google amplifie sa campagne pour fournir des résultats plus précis avec des améliorations d'algorithmes basées sur l'expérience utilisateur, SSR est meilleur pour vos performances SEO par rapport au rendu client-serveur.
Mais comme tout le reste dans le marketing numérique, une approche singulière fonctionne rarement pour tout le monde. Dans certains cas, le rendu côté serveur peut poser problème. Comme le dit Google, SSR "n'est pas une solution miracle".
Les inconvénients du RSS
- Cela implique beaucoup de travail car il s'agit de faire deux fois la même application : une fois sur le client et ensuite sur le serveur.
- Cela pourrait retarder le temps jusqu'au premier octet
- Cela pourrait affecter les liens internes ou la qualité de la page puisqu'il ne peut pas rendre le JS tiers (par exemple, le contenu généré par l'utilisateur, les avis sur les produits, etc.) ou tout contenu ne figurant pas dans votre code HTML statique ; les bots ne pourront pas les voir
- Les URL qui ne sont pas mises à jour peuvent signifier que les bots ne pourront pas voir les nouveaux articles, ce qui peut entraîner un trafic manqué
Un autre aspect clé du SSR est qu'il entraîne des coûts pour l'entreprise puisque le rendu se produit sur vos serveurs. Mais c'est un coût dans lequel vous voudrez peut-être investir car ce type de rendu pourrait contribuer à l'optimisation de Core Web Vitals.
Pourquoi la RSS est-elle pertinente pour CWV ?
Les développeurs Web et les référenceurs travaillent depuis des mois en prévision du déploiement de CWV. Environ 60% des agences de référencement interrogées ont été occupées à améliorer les scores CWV des clients. Si vous utilisez SSR, vous n'aurez peut-être pas à effectuer de travail substantiel pour répondre aux attentes.
Parce que SSR facilite la vitesse, votre site Web pourrait déjà bien fonctionner avec l'une des métriques : la plus grande peinture de contenu (LCP).
LCP se concentre sur l'expérience de chargement perçue. Il mesure le temps de chargement de la page lorsque la plus grande image ou le texte d'une page Web est visible dans la fenêtre d'affichage. Ce que vous voulez viser pour obtenir un bon score, c'est un chargement de page de 75 % à moins de 2,5 secondes.
Les principaux défis pour obtenir un bon LCP sont JS et CSS qui bloquent le rendu ; temps de chargement des ressources lents, réponse lente du serveur et rendu côté client.
Le passage à la SSR n'est qu'une des solutions pour améliorer le score LCP, car votre problème peut ne pas se limiter à la RSE. Vous voudrez travailler avec vos développeurs Web pour d'abord identifier ce qui cause le décalage de votre LCP.
Si la source de la page révèle un code qui n'a pas de sens (et votre développeur vous le dira), le problème peut être CSR. Si votre développeur découvre que le TTFB est médiocre, vous avez peut-être affaire à un temps de réponse lent du serveur.
Les autres métriques CWV sont :
- First Input Delay, qui met l'accent sur la réactivité, et
- Cumulative Layout Shift, qui met l'accent sur la stabilité visuelle.
Les deux ne sont pas pertinents pour SSR, il s'agit donc de mesures sur lesquelles vous voudrez peut-être consacrer plus d'efforts, car SSR s'occupe en partie du LCP.
Comment savoir si SSR rend les pages Web correctement
La meilleure façon de savoir si SSR rend vos pages correctement serait d'utiliser des outils. L'un d'eux est le Mobile Friendly Test. C'est un outil qui vous fournit un aperçu de la façon dont vos pages Web apparaîtraient aux Googlebots et vous montre les erreurs lors du rendu, le cas échéant.
Google Search Console dispose également d'un outil d'inspection d'URL qui vous permet de voir si le moteur de recherche affiche vos pages. Utilisez-le pour vérifier le contenu manquant ou toute erreur liée à JavaScript ou CSS bloqué.
Vous pouvez également accéder à View Render Source, qui est une extension Chrome gratuite. Il vous dira comment le navigateur rend une page de son code HTML d'origine vers un DOM fonctionnel. L'extension illustrera la différence entre une version brute et une version rendue, avec des faits saillants sur la façon dont les pages modifiées JS au moment du rendu.
Une autre extension Chrome à essayer est SiteCrawler. Le robot d'exploration compatible JS explore les plans de site, les liens et les images et compare les pages HTML uniquement et compatibles JS.
La conclusion
Une grande partie du travail de référencement implique l'optimisation des pages qui ont déjà été « livrées » au client ou au navigateur. Mais lorsque vous examinez comment ces pages "arrivent" au client et comment vous pouvez améliorer la façon dont cela se produit, les utilisateurs passent un meilleur moment sur votre site Web.
Les bots parcourent correctement vos pages. Vos pages sont indexées. Votre site a un meilleur classement dans les moteurs de recherche.
Les mises à jour des moteurs de recherche ainsi que les changements de comportement des consommateurs nécessitent également des modifications de votre site Web. Avec le déploiement prochain de CWV, ce serait le bon moment pour se pencher sur le SSR, un aspect technique qui affecterait vos efforts de référencement.