Skip to main content

Smart FAQ Optimizing

Objective​

The Google SEO algorithm depends on your Smart FAQ performances and to optimize it, we provide some advises you can implement to increase user experience. It will also improve your position in Google search results.

CLS​

What is CLS ?​

CLS is a metric calculated by summing all layout shifts that are not triggered by an user interaction. The lower your score, the more stable your layout is.

Since June 2021, Google announced that the CLS score will start affecting your SEO.

Here is how Google measures the CLS score :

  • Below 0.1 : Good
  • Between 0.1 and 0.25 : Need improvements
  • Above 0.25 : Bad

How to improve CLS ?​

In our Smart FAQ, we recommend to add a CSS property called min-height to the st-faq div.

During the page load, you need to reserve the space where your Smart FAQ will be displayed. So to do it, your can add a min-height like this :

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

We already add this property to our default style but it will not be applied instantly because of the loading of our style assets. This is why we recommend to add it by yourself.

FCP​

What is FCP ?​

FCP stands for "First Contentful Paint." It is a web performance metric that measures the time elapsed from when a user starts loading a page to when any content on the page is displayed on the screen. This includes text, images, SVGs, etc. FCP is important because it provides an indication of how quickly a page begins to be useful to the user.

How to improve FCP ?​

In order to improve it, we encourage you to preload a maximum of ressources and then optimise loading time.

  1. Use the <link> tag in the <head> section of your HTML to preload resources like fonts, scripts, or stylesheets.
  2. Set the rel attribute to preload and specify the href attribute with the URL of the resource.
  3. Define the as attribute to indicate the type of resource being preloaded (e.g., as="script" for JavaScript files).

Example

<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>

So for the case of a FAQ you can preload these following :

  • Polyfills (used for old web browsers compatibility)
<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"
/>

  • Main JS and CSS files

    Where "_account_" is your account name used in main script

    Where "_widget_" is your widget type (FAQ, PUSH, etc)

    where "_buidName_" is the name of your build (default is lowercase of widget name, but can be customized)

<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"
/>

  • All the assets used in your CSS

    All the assets (fonts, images, css) that you use, should be present in link preload in order to optimise loading

    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__" />