Aller au contenu principal

Optimisation de Smart FAQ

Objectif​

L'algorithme SEO de Google dépend des performances de votre Smart FAQ et pour optimiser ça, nous fournissons quelques conseils que vous pouvez implémenter pour améliorer l'expérience utilisateur. Ceci va également augmenter votre position dans les résultats de recherche Google.

CLS​

Qu'est-ce que le CLS ?​

Le CLS est une valeur calculée en ajoutant tous les décalages des éléments de la page qui ne sont pas déclenchés par une interaction utilisateur. Plus le score est bas, plus les éléments de votre page sont stables.

Depuis Juin 2021, Google a annoncé que le score CLS va affecter votre SEO.

Voici comment Google mesure le score CLS :

  • En dessous de 0.1 : Bon
  • Entre 0.1 et 0.25 : A améliorer
  • Au dessus de 0.25 : Mauvais

Comment l'améliorer ?​

Dans votre Smart FAQ, nous recommandons d'ajouter une propriété CSS appelée min-height à la div st-faq.

Pendant le chargement de la page, il faudra réserver un espace où votre Smart FAQ sera affichée. Pour ce faire, vous pouvez ajouter une min-height comme ceci :

<div id="st-faq" style="min-height:100vh"></div>

Nous ajoutons déjà cette propriété à notre style par défaut mais il ne va pas s'appliquer instantanément à cause du chargement des ressources de style. C'est pour cela que nous recommandons que vous l'ajoutiez par vous-même.

FCP​

Qu'est-ce que le FCP ?​

FCP signifie "First Contentful Paint" (premier affichage de contenu). C'est une métrique de performance web qui mesure le temps écoulé entre le moment où un utilisateur commence à charger une page et le moment où n'importe quel contenu de la page est affiché à l'écran. Cela inclut du texte, des images, des SVG, etc. FCP est important car il donne une indication de la rapidité avec laquelle une page commence à être utile pour l'utilisateur.

Comment l'améliorer ?​

Pour l'améliorer, nous vous encourageons à précharger un maximum de ressources et à optimiser le temps de chargement.

  1. Utilisez la balise <link> dans la section <head> de votre HTML pour précharger des ressources comme des polices, des scripts ou des feuilles de style.
  2. Définissez l'attribut rel à preload et spécifiez l'attribut href avec l'URL de la ressource.
  3. Définissez l'attribut as pour indiquer le type de ressource à précharger (par exemple, as="script" pour les fichiers JavaScript).

Exemple

<head>
  <link rel="preload" href="styles.css" as="style" />
  <link rel="preload" href="script.js" as="script" />
  <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
</head>

Donc, dans le cas d'une FAQ, vous pouvez précharger les éléments suivants :

  • Polyfills (utilisé pour la compatibilité avec les anciens browsers)
<link
  rel="preload"
  as="script"
  type="text/javascript"
  href="https://polyfill-fastly.io/v3/polyfill.min.js?version=3.42.0&features=Object.values,String.prototype.startsWith,URL,URLSearchParams&flags=gated"
/>
<link
  rel="preload"
  as="script"
  type="text/javascript"
  href="https://polyfill-fastly.io/v3/polyfill.min.js?version=3.42.0&features=fetch,Promise,Array.prototype.find,Array.prototype.includes,URL,navigator.sendBeacon,Object.assign,Array.from,Array.prototype.fill,Element.prototype.scrollIntoView,String.prototype.startsWith,Intl.~locale.en,Intl.~locale.ar,Intl.~locale.bg,Intl.~locale.ca,Intl.~locale.cs,Intl.~locale.da,Intl.~locale.de,Intl.~locale.el,Intl.~locale.es,Intl.~locale.et,Intl.~locale.fi,Intl.~locale.fr,Intl.~locale.he,Intl.~locale.hr,Intl.~locale.hu,Intl.~locale.it,Intl.~locale.ja,Intl.~locale.ko,Intl.~locale.lt,Intl.~locale.lv,Intl.~locale.nl,Intl.~locale.no,Intl.~locale.pl,Intl.~locale.pt,Intl.~locale.ro,Intl.~locale.ru,Intl.~locale.sk,Intl.~locale.sl,Intl.~locale.sr,Intl.~locale.sv,Intl.~locale.th,Intl.~locale.tr,Intl.~locale.vi,Intl.~locale.zh,Intl.DisplayNames.~locale.en,Intl.DisplayNames.~locale.ar,Intl.DisplayNames.~locale.bg,Intl.DisplayNames.~locale.ca,Intl.DisplayNames.~locale.cs,Intl.DisplayNames.~locale.da,Intl.DisplayNames.~locale.de,Intl.DisplayNames.~locale.el,Intl.DisplayNames.~locale.es,Intl.DisplayNames.~locale.et,Intl.DisplayNames.~locale.fi,Intl.DisplayNames.~locale.fr,Intl.DisplayNames.~locale.he,Intl.DisplayNames.~locale.hr,Intl.DisplayNames.~locale.hu,Intl.DisplayNames.~locale.it,Intl.DisplayNames.~locale.ja,Intl.DisplayNames.~locale.ko,Intl.DisplayNames.~locale.lt,Intl.DisplayNames.~locale.lv,Intl.DisplayNames.~locale.nl,Intl.DisplayNames.~locale.no,Intl.DisplayNames.~locale.pl,Intl.DisplayNames.~locale.pt,Intl.DisplayNames.~locale.ro,Intl.DisplayNames.~locale.ru,Intl.DisplayNames.~locale.sk,Intl.DisplayNames.~locale.sl,Intl.DisplayNames.~locale.sr,Intl.DisplayNames.~locale.sv,Intl.DisplayNames.~locale.th,Intl.DisplayNames.~locale.tr,Intl.DisplayNames.~locale.vi,Intl.DisplayNames.~locale.zh,Map,CustomEvent,Event,Element.prototype.remove&flags=gated"
/>

  • Fichiers JS et CSS principaux

    Où "_account_" est votre account name utilisé dans le script principal

    Où "_widget_" est votre type de widget (FAQ, PUSH, etc)

    Où "_buidName_" ets le nom de votre build (Par défault le type de widget en lowercase, mais peut être personnalisé)

<link
  rel="preload"
  as="style"
  type="text/css"
  href="https://assets.app.smart-tribune.com/__account__/__widget__/__buidName__.css"
/>
<link
  rel="preload"
  as="script"
  type="text/javascript"
  href="https://assets.app.smart-tribune.com/__account__/__widget__/__buildName__.js"
/>

  • Tous les assets utilisés dans votre CSS

    Tous les assets (fonts, images, css) que vous utilisez doivent être présents dans le HEAD sous forme de Link preload dans le but d'optimiser le chargement de votre widget.

    Fonts

    <link rel="preload" as="font" type="font/woff2" href="__fontUrl__" crossorigin="anonymous" />

    Images

    <link rel="preload" as="image" href="__imageUrl__" />

    CSS

    <link rel="preload" as="style" type="text/css" href="__cssUrl__" />