Chargement du script — performance

Charger le widget Ekoo dans le <head> pour un démarrage plus rapide

Par défaut, beaucoup d'intégrations placent le script Ekoo en fin de <body>. C'est sûr mais sous-optimal : le navigateur attend la fin du parsing HTML pour commencer le téléchargement. Le déplacer dans le <head> avec defer permet au navigateur de télécharger le script en parallèle du HTML, ce qui réduit le temps avant l'apparition du widget et améliore votre LCP.

✅

C'est sûr

Le widget Ekoo s'auto-initialise sur l'événement window.load. Le placer dans le <head> avec defer n'introduit aucune race condition : le script attendra que le DOM (et donc vos balises <ekoo-widget>) soient prêts avant de monter quoi que ce soit.

Pattern recommandé

Script dans le <head> avec defer
html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8" />
5  <title>My product page</title>
6
7  <!-- Ekoo widget — loaded as early as possible, executed after the HTML is parsed -->
8  <script src="https://app.ekoo.co/widgets/widget-4.0.0-standalone.js" defer></script>
9</head>
10<body>
11  <ekoo-widget
12    data-ekoo="YOUR_WEBSITE_ID"
13    data-ekoo-product-id="MY_PRODUCT_ID"
14    data-ekoo-locale="fr"
15  ></ekoo-widget>
16</body>
17</html>

defer vs async vs sans attribut

AttributTéléchargementExécutionPour Ekoo
deferParallèle au HTMLAprès le parsing du HTML, dans l'ordre du documentRecommandé
asyncParallèle au HTMLDès que le téléchargement finit (ordre non garanti)OK techniquement, mais risque si vous utilisez window.ekooOptions
(aucun)Bloque le parsing HTMLImmédiateÀ éviter dans le <head>
⚠️

N'utilisez pas async avec window.ekooOptions

Si vous configurez le widget via window.ekooOptions (plutôt que via les attributs data-ekoo-*), restez sur defer. Avec async, le script peut s'exécuter avant votre déclaration de ekooOptions, ce qui produit une initialisation vide.

Aller plus loin : preconnect + preload

Pour un gain supplémentaire (utile si votre LCP est tendu), vous pouvez ajouter deux resource hints avant la balise <script> :

  • preconnect — ouvre la connexion TCP/TLS vers app.ekoo.co avant même la requête.
  • preload — signale au navigateur que ce script est critique et doit être téléchargé en haute priorité.
Preconnect + Preload + Script (combo optimal)
html
1<head>
2  <!-- 1. Open the TCP / TLS connection to app.ekoo.co as soon as possible -->
3  <link rel="preconnect" href="https://app.ekoo.co" crossorigin />
4
5  <!-- 2. Tell the browser to fetch the script with high priority -->
6  <link
7    rel="preload"
8    as="script"
9    href="https://app.ekoo.co/widgets/widget-4.0.0-standalone.js"
10    crossorigin
11  />
12
13  <!-- 3. Actually load the script (defer = parsed after the HTML) -->
14  <script src="https://app.ekoo.co/widgets/widget-4.0.0-standalone.js" defer></script>
15</head>

Variantes par stack

Google Tag Manager / Commanders Act

Créez un tag Custom HTML dédié, déclencheur All Pages (ou Consent Initialization — All Pages si vous gérez le consentement). Ce tag charge uniquement le script — l'insertion du conteneur <ekoo-widget> reste dans votre tag par page produit.

GTM / Commanders Act — précharge dans le <head>
html
1<script>
2(function () {
3  if (window.__ekooStandaloneLoaded) return;
4  window.__ekooStandaloneLoaded = true;
5
6  var s = document.createElement('script');
7  s.src = 'https://app.ekoo.co/widgets/widget-4.0.0-standalone.js';
8  s.defer = true;
9  document.head.appendChild(s);
10})();
11</script>
ℹ️

Note

Le garde-fou window.__ekooStandaloneLoaded évite tout double chargement si le tag se déclenche plusieurs fois (navigation virtuelle, déclencheurs cumulés).

Shopify

Ajoutez la balise dans layout/theme.liquid à l'intérieur du <head> :

Shopify — theme.liquid (head)
liquid
1{% comment %} layout/theme.liquid — inside <head> {% endcomment %}
2<link rel="preconnect" href="https://app.ekoo.co" crossorigin>
3<script src="https://app.ekoo.co/widgets/widget-4.0.0-standalone.js" defer></script>

WordPress

Utilisez wp_enqueue_script avec in_footer => false et strategy => 'defer' :

WordPress — functions.php
php
1function ekoo_enqueue_widget_script_in_head() {
2    wp_enqueue_script(
3        'ekoo-widget',
4        'https://app.ekoo.co/widgets/widget-4.0.0-standalone.js',
5        array(),
6        '4.0.0',
7        array(
8            'strategy'  => 'defer', // executed after HTML is parsed
9            'in_footer' => false,   // → printed inside <head>
10        )
11    );
12}
13add_action( 'wp_enqueue_scripts', 'ekoo_enqueue_widget_script_in_head' );

Next.js (App Router)

Next.js — app/layout.tsx
tsx
1// app/layout.tsx — Next.js App Router
2import Script from 'next/script'
3
4export default function RootLayout({ children }: { children: React.ReactNode }) {
5  return (
6    <html>
7      <head>
8        <link rel="preconnect" href="https://app.ekoo.co" crossOrigin="anonymous" />
9      </head>
10      <body>
11        {children}
12
13        {/* beforeInteractive = injected in <head> at build time, blocks hydration */}
14        {/* Use 'afterInteractive' if you don't need the script before React hydrates */}
15        <Script
16          src="https://app.ekoo.co/widgets/widget-4.0.0-standalone.js"
17          strategy="beforeInteractive"
18        />
19      </body>
20    </html>
21  )
22}

Mesurer le gain

  1. Mesurez d'abord avant avec Chrome DevTools → Lighthouse (Mobile, Performance) — relevez le LCP et le « Time to Interactive ».
  2. Déplacez le script vers le <head> avec defer.
  3. Re-mesurez. Vous devriez voir le téléchargement du script Ekoo commencer immédiatement (timeline « Network »).
  4. Si le LCP est critique, ajoutez preconnect puis preload.

Pièges courants

  • Oublier defer — sans cet attribut, un <script> dans le <head> bloque le parsing HTML — vous gagnez sur le téléchargement mais perdez sur le rendu.
  • Charger le script sur toutes les pages sans conteneur — c'est OK (le script ne fait rien sans <ekoo-widget>), mais ~30 KB transférés inutilement. Filtrez par type de page si possible.
  • Double chargement — si vous chargez le script à la fois dans le <head> et via un autre tag (GTM, plugin), utilisez le garde window.__ekooStandaloneLoaded.
  • CSP — ajoutez app.ekoo.co à script-src et connect-src.
ℹ️

Note

Voir aussi Cycle de vie du widget pour comprendre comment window.ekooLoad / ekooReload / ekooUnload interagissent avec le chargement.

Chargement du script — Documentation — Ekoo