What the snippet does on load

Once embedded in the HTML, the snippet performs three steps:

  1. Loads the main SDK — asynchronously fetching the platform’s JS file from a CDN.
  2. Initialises tracking — starting to collect behavioural events: views, clicks, add-to-cart
    events, purchases.
  3. Renders widgets — as soon as the DOM is ready, inserting recommendation blocks into their
    containers.
<!-- The structure of a personalization snippet -->
<script>
  (function(w, d, s, id) {
    if (w.__pf) return;
    var js = d.createElement(s);
    js.id = id;
    js.src = 'https://cdn.platform.ai/v2/init.js';
    js.async = true;
    d.head.appendChild(js);
    w.__pf = { q: [] };
  })(window, document, 'script', 'pf-init');
</script>

This pattern is the standard for most SaaS services — analytics, support, personalization.
Asynchronous loading means the browser does not wait for the script before continuing to parse HTML.

When a snippet is enough

Scenario Snippet Server-side Hybrid
A fast start (under a week) ✓ — —
Recommendations inside SEO content Partly ✓ ✓
Rendering with JavaScript disabled ✗ ✓ ✓
Personalization with no delay ✗ ✓ ✓
Headless or single-page app Needs adaptation ✓ ✓

Tip: for most online stores a JS snippet is the right starting point. Moving to a server-side
integration becomes worthwhile when the widget rendering delay is a visible problem, or when
recommendations need to sit in SEO-relevant positions.

The effect on Core Web Vitals

Badly placed snippets are a common cause of poor largest contentful paint and layout shift. The key
rules:

  • Async or defer for every snippet not critical to the first render
  • Reserved containers with a fixed height for widgets — otherwise the widget pushes content when
    it appears and damages layout stability
  • Preconnect to the platform’s CDN in the head — it shaves 50–150 ms off the connection
  • Load heavy resources such as fonts and widget images lazily