Skip to content

perf(ads): preconnect + preload Slise embed so banners render as the page loads#685

Closed
forge-welldone wants to merge 1 commit into
ping-pub:masterfrom
forge-welldone:perf/slise-ad-preconnect-eager-load
Closed

perf(ads): preconnect + preload Slise embed so banners render as the page loads#685
forge-welldone wants to merge 1 commit into
ping-pub:masterfrom
forge-welldone:perf/slise-ad-preconnect-eager-load

Conversation

@forge-welldone

Copy link
Copy Markdown

Problem

The Slise ad banner is blank for roughly a second after the page loads. The
cause is that the Slise embed script is only injected inside AdBanner's
onMounted, i.e. after the app bundle has downloaded, parsed, and mounted
the ad component — and it's requested over a cold connection with no resource
hints.

Measured on the live site (Performance API, homepage, fast connection):

Event Time from navigation start
embed.js requested ~1013 ms
embed.js finished loading ~2022 ms
ad request POST /target/v1/native ~2078 ms
creative iframe painted ~2767 ms

So the ad script isn't even requested until ~1 s in, and nothing about the
ad load overlaps the app boot.

Changes

1. index.html — warm the Slise origin and preload the embed script

<link rel="preconnect" href="https://v1.slise.xyz" crossorigin />
<link rel="dns-prefetch" href="https://v1.slise.xyz" />
<link rel="preload" href="https://v1.slise.xyz/scripts/embed.js" as="script" />

This starts the ~21 KB embed.js download in parallel with the app bundle
(instead of ~1 s later) and warms DNS/TLS. embed.js is already allow-listed
in the existing CSP, so no CSP change is needed. The component still executes
the script only when an AdBanner mounts — the preload just makes the bytes
ready in advance, so no ad code runs on pages that don't render an ad.

2. AdBanner.vue — fill the slot as soon as the script is ready

The previous code did a one-shot typeof window.adsbyslisesync === 'function'
check immediately after appending the async script. On the first banner the
function isn't defined yet (the script is still loading), so the sync was
silently skipped and the first ad only filled once Slise's script finished and
ran its own auto-sync. This now waits for the script's load event, so the
first banner fills the moment the script is ready rather than depending on
Slise's internal 1-second location poll.

Verification

Built this branch and served the static output; the preload takes effect:

  • embed.js initiatorType is now link (fetched by the preload, not the
    component), and its request start moves from ~1013 ms → ~14 ms after
    navigation — it now loads in parallel with the app bundle.

Type-check (vue-tsc --noEmit) and vite build both pass. The diff is two
files, no dependency or API changes.

Notes

Happy to also add a small loading skeleton inside the reserved ad box, or wire
distinct data-ad-slot values per placement (today every placement uses the
default desktop slot, so co-located banners share one slot) if you'd like —
kept this PR minimal and focused on the load-timing fix.

…page loads

Banners were blank for ~1s after page load because the Slise embed script
was only injected inside AdBanner's onMounted (after the app bundle booted
and the component mounted) over a cold connection with no resource hints.

- index.html: preconnect/dns-prefetch the Slise origin and preload
  embed.js, so the ~21KB script downloads in parallel with the app bundle
  instead of ~1s later. Measured on a local build: embed.js request start
  moves from ~1013ms to ~14ms after navigation.
- AdBanner.vue: fill the slot on the script's `load` event instead of a
  one-shot `typeof adsbyslisesync === 'function'` check that silently
  skipped the first banner (the function isn't defined yet right after the
  async script is appended). The first ad now fills the moment the script
  is ready rather than waiting for Slise's internal 1s location poll.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@forge-welldone forge-welldone deleted the perf/slise-ad-preconnect-eager-load branch July 7, 2026 11:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant