How We Boosted Ad Page Load Speed by 55% with ISR, Lazy Loading, and Stream Rendering
This article details a comprehensive set of front‑end performance optimizations—including ISR, component lazy loading, image preloading, Lottie animation upgrades, low‑end device handling, and streaming rendering—that together increased ad page exposure by 10% and first‑screen instant load from 15% to 65%, dramatically improving user experience and conversion rates.
Background
In the internet era, website performance directly impacts user experience and conversion. For ad landing pages, improving load speed while preserving visual effects and functionality is a critical challenge.
Challenges & Benefits
Strict first‑screen instant‑load metric
First‑screen instant‑load rate measures the proportion of page loads where the first screen renders and becomes interactive within 1 second.
Complex deployment environment
Users access pages over various networks (4G/5G/Wi‑Fi, weak or unstable networks) and devices ranging from high‑end flagships to low‑end older phones, causing varied parsing and rendering capabilities.
Page revenue
After two quarters of targeted optimization, exposure increased ~10 % and first‑screen instant‑load rose from 15 % to about 65 %.
Rendering Strategy for Ad Pages
Most pages use ISR (Incremental Static Regeneration), which pre‑generates static HTML and revalidates it on the server after a set interval.
ISR workflow
When a user requests an expired page, ISR starts a background regeneration.
The server rebuilds the page and updates the cached HTML.
The next request receives the fresh page.
Example: a Next.js page with revalidate: 10 seconds generates static HTML at build time and refreshes it every 10 seconds.
Component Lazy Loading
Non‑first‑screen components (e.g., secondary pop‑ups) are dynamically imported with next/dynamic and SSR disabled, reducing the first‑screen bundle size.
const DyamicMarqueeTop = dynamic(() => import('./marqueTop'), {
ssr: false,
loading: () => <div></div>,
});
const DyamicDialog = dynamic(() => import('./dialog'), {
ssr: false,
loading: () => <div></div>,
});Image Preload Strategy
Critical large images are preloaded in the <head> using <link rel="preload"> to prioritize their download.
export const ScratchHead = () => {
const defaultUrl = 'xx';
const bg = scratchInfo?.props?.bgImg || defaultUrl;
return (
<>
<Head>
<link rel="preload" href={`${bg}?x-oss-process=image/format,webp/resize,w_750`} as="image" />
</Head>
</>
);
};Animation Upgrade
Switching from heavy APNG animations to Lottie reduced animation payloads from several megabytes to a few hundred kilobytes, cutting first‑screen load time from ~4.8 s to ~1.8 s and improving the instant‑load metric by ~16 percentage points.
Runtime size of Lottie was halved (≈80 KB → 40 KB) by splitting the library into SVG, HTML, and Canvas builds, yielding an additional ~100 ms gain.
Low‑End Device & Weak‑Network Optimization
Device classification uses navigator.deviceMemory, navigator.hardwareConcurrency, screen size, and other hints. Devices with ≤2 GB memory, <4 CPU cores, or screen width <600 px are treated as low‑end.
Network is considered weak when round‑trip time >150 ms. For such cases, animations are skipped or downgraded, and Swiper.js is replaced with CSS‑only carousels.
// Skip animation on low‑end or weak‑network devices
if (isLowEndDevice || isLowNetWork) {
// skip animation
} else {
// load animation
}Streaming Rendering Architecture Upgrade
Streaming rendering splits the page into fragments that are sent to the client incrementally, allowing the user to see and interact with critical content earlier. This reduces TTFB by 30‑50 % and improves Time‑to‑Interactive.
Historical traffic migration and APM script inline integration further boost performance, especially on weak networks.
Summary
By combining ISR, component lazy loading, image preloading, Lottie animation replacement, low‑end/weak‑network downgrade strategies, and a streaming rendering architecture, the ad landing pages achieved significant speed gains, higher exposure, and better conversion rates.
DeWu Technology
A platform for sharing and discussing tech knowledge, guiding you toward the cloud of technology.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.