This blog was originally published on Medium.com on August 10, 2023.
Delivering consistently fast page load times is critical for engaging users, driving conversions, and fueling revenue growth. However, as modern web applications become more interactive, achieving speedy first renders grows increasingly challenging.
In this article, we’ll examine various page rendering techniques, their pros and cons, and emerging page rendering techniques like selective on-demand edge side rendering that combines the best of prerendering and dynamic delivery for maximum business benefit.
The need for speed: why page rendering drives revenue
Numerous studies confirm the business impact of page load delays:
- 50% of visitors abandon a website if it takes more than 6 seconds to load (Digital.com Survey, 2022).
- Almost 70% of consumers indicate that page speed affects their likelihood to buy (Unbounce Study, 2018).
- A very slow load time can be a negative Google ranking factor. (Hobo, 2023, citing past quote from Google)
- 0.1s site speed improvement leads to 8.4% conversion rate increase, an increase in average order value of 9.2%. (Deloitte study, 2020).
To maximize revenue, delivering an instant visually complete initial render is essential. Prerendering pages emerges as a key strategy for achieving this. Beyond user experience, intelligent edge rendering also improves organic discoverability and traffic acquisition by properly rendering pages for search engine bots. When done well, this increases new visitors and qualified leads.
With faster-perceived performance and increased qualified traffic, sites leveraging edge-side rendering can expect the following:
- Higher user engagement and loyalty
- Greater qualified organic traffic from SEO
- More on-site searches and content views
- Stronger conversion rates across pages
Prerendering at the edge delivers a better user experience, unlocks site speed barriers, and drives higher conversions across channels — all leading to accelerated growth and profits.
Common page rendering approaches
Client-Side Rendering (CSR)
With CSR, the server provides minimal HTML, CSS and JS. The browser fetches JSON data, executes JS to render markup/CSS, and updates the DOM.
- Pros — Highly interactive and dynamic UIs. Faster initial document response.
- Cons — Slower TTI from JS execution. More layout reflows and shifts. Heavier processing on clients.
- When to use — Interactivity is the priority over first render speed.
Client-Side Rendering Diagram
Server-Side Rendering (SSR)
SSR generates full HTML markup on the server, sends it to the browser, then optionally infuses the page with JS to enable interactivity.
- Pros — Creates a great first impression, with immediate first paint and low time-to-interactivity. Great SEO as crawlers receive static HTML. Less device-dependent vs Client-Side Rendering.
- Cons — Added server load and application complexity.
When to use — When dynamic content needs to be accessible to search crawlers, but cannot be statically generated.
Server-Side Rendering Diagram
Static Site Generation (SSG)
With SSG, sites are prebuilt into static HTML pages at build time. Pages are pure HTML/CSS/JS assets.
- Pros — Excellent performance. Great for mostly static marketing content.
- Cons — No dynamic content changes. Full rebuilds are required for updates.
- When to use — Marketing sites, blogs, documentation.
Static Site Generation Diagram
Each approach involves tradeoffs. SSR and SSG offer the best TTI but lack flexibility. The optimal technique depends on app requirements and infrastructure.
Scaling challenges with Server-Side Rendering
SSR provides tangible loading speed gains by prerendering pages on the server. However, traditional SSR architectures can struggle to scale as traffic and pages grow.
Prerendering all possible pages is infeasible as combinations explode. Hundreds of variations arise from factors like:
- User inputs and request parameters
- Personalized/dynamic content
- State changes and interactivity
- Unbounded dynamic routes in single-page apps
Standard SSR must render the full app on each request, amplifying server load. Memory overhead also increases as generated HTML for every path is stored. Caching helps but is complex with dynamic content.
These challenges can cause SSR to hit scaling limits much sooner than client-side rendering. However, completely abandoning SSR means losing its SEO and performance benefits. A hybrid approach is needed.
Optimized prerendering with SSG and edge computing
Static Site Generation (SSG) prerenders HTML pages at build time. This eliminates rendering workload at runtime. However, lack of dynamic content updates limits use cases.
Edge computing addresses this by pushing processing to nodes located closer to users. Assets can be cached at edge locations while dynamic pages are rendered on-demand. Geo-distributed infrastructure scales seamlessly.
An optimal architecture combines SSG and edge rendering:
- SSG prerenders static pages at build time
- Edge servers cache prerendered assets
- Dynamic routes are rendered on-demand at the edge
- Fallback origin SSR for rare uncached pages
This efficiently utilizes prerendering while still supporting dynamic content through edge rendering. The edge layer absorbs most of the workload, only calling the origin SSR when required.
By minimizing repetitive SSR work, the scale increases dramatically.
The power of on-demand Edge Side Page Rendering
While a hybrid architecture with SSG and edge computing improves upon pure server-side rendering, on-demand intelligent edge-side rendering takes this to the next level for performance, scalability, and efficiency.
Macrometa’s PhotonIQ Prerendering integrates seamlessly with origin and CDNs. By leveraging techniques like lazy loading and partial rendering, only the pages and essential content needed for each specific request are rendered.
Rendering diagram
Lazy Loading
- Analyzes page structure and renders only above-the-fold content initially
- Remaining below-the-fold components are loaded after page delivery
- Avoids wasting resources rendering unused content
- Provides faster first render while minimizing edge usage
Partial Rendering
- Omits unused page regions like inactive components during render
- Skips fragments known to be unnecessary based on geo, user config, and so on.
- Results in smaller response payloads and reduced edge workload
- Combined with caching, critical for efficiency and scale
This Dynamic Prerendering provides several benefits compared to server-side rendering:
- Low latency — Pages render at the nearest edge server instead of being cached far away
- Dynamic personalization — Full app state available for customization
- Fine-grained caching — Granular fragments are cached minimizing renders
- Bot-only rendering — Only traffic from valid search crawlers triggers edge rendering
- Efficiency — Resources consumed on an as-needed basis only
Macrometa’s Prerendering leverages a massively distributed edge cloud spanning 100+ locations globally for low-latency worldwide delivery. Origin infrastructure is shielded from rendering workloads. Coupled with granular caching and bot targeting, Macrometa ensures rendering costs scale linearly with traffic growth rather than exponentially.
Conclusion
Prerendering pages at the edge, on-demand, combines performance with dynamic app flexibility.PhotonIQ simplifies leveraging intelligent edge-side rendering. You improve user experience, offload servers, achieve greater scale, and optimize costs — all through a fully-managed global edge service.
We’ve designed our prerendering solution for web apps that require faster rendering without compromising dynamism. Making pages fast is now imperative for revenue growth. Prerendering could be the breakthrough your business strategy demands. Learn more about PhotonIQ's eCommerce solutions, or chat with a solutions expert.
