More on edge async rendering: unveiling new deco.cx capabilities
Introduction: Elevating web performance with edge async rendering
Over the past few months, we've been working on improving the performance of web pages with our async render paradigm. This approach aimed to reduce latency issues associated with traditional rendering methods, providing faster page responses and a smoother user experience. Today, we're introducing a new milestone in this journey: the "Stale Edge Cache."
Why edge async rendering matters
At deco.cx, we understand that performance is crucial. Faster-loading websites lead to better user engagement, higher conversion rates, and improved SEO rankings. Our edge async rendering technique ensures that users experience quick load times, even when third-party APIs are slow or unresponsive. This translates to a smoother, more enjoyable browsing experience for your visitors.
The Stale Edge Cache: a game changer
The Stale Edge Cache is designed to enable stale caching for lazy-loaded sections from async render, significantly reducing response times and enhancing load times for a better user experience.
Simplified workflow with edge caching
Before the introduction of edge caching, a user's request for an async-rendered section followed a complex path:
- The browser sends a request to the CDN.
- The CDN forwards the request to the origin server.
- The origin server processes the request, renders the section, and sends the output back.
- This process repeats for every request, resulting in multiple latency points.
With the Stale Edge Cache, the first server reply of the section is cached in the CDN. Subsequent requests are answered with this cached reply, dramatically reducing the total response time to just the latency between the browser and the CDN plus the content download time.
The new default: async render with Stale Edge Cache
We are thrilled to announce that async render with stale edge cache will now be the default setting for all sections. This means that once your site is updated, all newly added sections will automatically benefit from async rendering and edge caching. Each section will have a new "optimization" setting in the form, which is enabled by default but can be disabled if needed.
Minimizing Content Layout Shifts (CLS)
To ensure a smooth user experience, we highly recommend implementing the LoadingFallback component in all sections of your site. This component provides a custom loading state during the async render process, minimizing potential content layout shifts and enhancing visual stability.
FAQ: Enabling and managing async render with Stale Edge Cache
Q: What do I need to enable this feature?
A: Simply update the version of deco and apps dependencies on your site.
Q: What will happen to my current sections on the pages?
A: Nothing will change automatically, but you can enable async rendering for these sections in the admin panel.
Q: Can I disable the async render?
A: Yes, you can turn off the async render by disabling the optimization setting in the admin panel.
Conclusion
Our continuous efforts in edge async rendering are aimed at providing you with the best tools to create high-performance websites. The introduction of the Stale Edge Cache marks a significant step forward in this journey, ensuring faster load times and an improved user experience. Update your site today and experience the transformative impact of async render with edge caching.
Contribute to this topic in this github issue.
For more details, visit our documentation and explore how these new capabilities can benefit your projects.