Installing Speed Layer on Motive Websites

Purpose

Install Speed Layer correctly on Motive sites.

Because Motive is built on Next.js, the install should use the Next.js Script component with strategy="beforeInteractive" so the script is loaded as early as possible.

Get your script

Auto Genius customer support provides your Speed Layer script URL. The Nano ID is domain and hostname specific.

Script snippet


<!-- Start Auto Genius Layer script -->
<!-- DO NOT add defer or async -->
<script src="https://exo.autogenius.io/{nanoId}"></script>
<!-- End Auto Genius Layer script -->

Placement requirements

Place the script inside the head
Place it as early as possible (immediately after the title tag when feasible)
Avoid async and defer

Next.js required setup (beforeInteractive)

Use next/script and load Speed Layer with strategy="beforeInteractive".

Pages Router example (pages/_document.js):


import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
  return (
    <Html>
      <Head>
        <Script
          src="https://exo.autogenius.io/{nanoId}"
          strategy="beforeInteractive"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

App Router note:

beforeInteractive must be added in app/layout.tsx.

Next.js references:

Verify after install

Deploy the change
Confirm Speed Layer is active
Validate homepage, SRP, and VDP