perf(ads): preconnect + preload Slise embed so banners render as the page loads#685
Closed
forge-welldone wants to merge 1 commit into
Closed
Conversation
…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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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'sonMounted, i.e. after the app bundle has downloaded, parsed, and mountedthe ad component — and it's requested over a cold connection with no resource
hints.
Measured on the live site (Performance API, homepage, fast connection):
embed.jsrequestedembed.jsfinished loadingPOST /target/v1/nativeSo 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 scriptThis starts the ~21 KB
embed.jsdownload in parallel with the app bundle(instead of ~1 s later) and warms DNS/TLS.
embed.jsis already allow-listedin the existing CSP, so no CSP change is needed. The component still executes
the script only when an
AdBannermounts — the preload just makes the bytesready 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 readyThe previous code did a one-shot
typeof window.adsbyslisesync === 'function'check immediately after appending the
asyncscript. On the first banner thefunction 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
loadevent, so thefirst banner fills the moment the script is ready rather than depending on
Slise's internal 1-second
locationpoll.Verification
Built this branch and served the static output; the preload takes effect:
embed.jsinitiatorTypeis nowlink(fetched by the preload, not thecomponent), 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) andvite buildboth pass. The diff is twofiles, no dependency or API changes.
Notes
Happy to also add a small loading skeleton inside the reserved ad box, or wire
distinct
data-ad-slotvalues per placement (today every placement uses thedefault
desktopslot, so co-located banners share one slot) if you'd like —kept this PR minimal and focused on the load-timing fix.