Rocket Loader — Async JavaScript Loading in Cloudflare
In this tutorial, you'll learn about Rocket Loader. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.
Cloudflare Rocket Loader defers JavaScript execution until after the page content has rendered, eliminating render-blocking scripts and speeding up Time to Interactive across all browsers.
What You'll Learn
By the end of this tutorial, you will understand how Rocket Loader defers and loads scripts asynchronously, how it maintains correct execution order, and how to exclude scripts that should run synchronously.
Why It Matters
Render-blocking JavaScript is one of the largest contributors to poor Core Web Vitals scores. Cloudflare Rocket Loader solves this automatically at the edge without requiring changes to your application code.
Real-World Use
Doda Browser blocks third-party trackers by default, but many sites still rely on render-blocking analytics scripts. Rocket Loader ensures that marketing and analytics scripts load last, giving users a faster initial experience.
Your Learning Path
flowchart LR
A[Early Hints] --> B[Rocket Loader]
B --> C[HTTP/2 & HTTP/3]
C --> D[Signed Exchanges]
D --> E[Prefetch & Preload]
B --> F{You Are Here}
style F fill:#f90,color:#fff
How Rocket Loader Works
Rocket Loader intercepts all <script> tags in the HTML response and modifies them to load asynchronously. It sets type="text/<a href="/programming-languages/javascript/">JavaScript</a>" to type="rocketlazyloadscript" and injects a small loader JavaScript file that executes the scripts in order after the page's DOM content is fully painted.
Execution Flow
flowchart TD A[Browser requests page] --> B[Cloudflare intercepts HTML] B --> C[Rocket Loader rewrites script tags] C --> D[Browser renders HTML immediately] D --> E[DOMContentLoaded fires] E --> F[Rocket Loader executes scripts in order] F --> G[window.onload fires after all scripts] style C fill:#f90,color:#fff,stroke:#333
Enabling Rocket Loader
- Log in to the Cloudflare dashboard.
- Select your domain.
- Go to Speed > Optimization.
- Find the Rocket Loader card and toggle it on.
- Use the Rocket Loader exclusion list for scripts that must load synchronously.
Before and After Comparison
<!-- Before Rocket Loader: scripts block rendering -->
<!DOCTYPE html>
<html>
<head>
<script src="analytics.js"></script>
<script src="widget.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World</h1>
<!-- Browser waits for analytics.js and widget.js before rendering -->
</body>
</html>
<!-- After Rocket Loader: scripts are deferred -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<!-- CSS loads normally, scripts are deferred -->
</head>
<body>
<h1>Hello World</h1>
<!-- Page renders immediately -->
<script type="rocketlazyloadscript" data-cfasync="false" src="analytics.js"></script>
<script type="rocketlazyloadscript" data-cfasync="false" src="widget.js"></script>
</body>
</html>
Measuring the Improvement
// Use Performance API to measure Time to Interactive
// Run in browser console before and after enabling Rocket Loader
window.performance.mark('tti-start');
setTimeout(() => {
window.performance.mark('tti-end');
window.performance.measure('tti', 'tti-start', 'tti-end');
const measurements = performance.getEntriesByType('measure');
const tti = measurements.find(m => m.name === 'tti');
console.log('Time to Interactive:', tti.duration.toFixed(2), 'ms');
}, 0);
// Expected output (after Rocket Loader):
// Time to Interactive: 842.00 ms (lower than before)
Excluding Scripts from Rocket Loader
Some scripts must run synchronously. Add their URL patterns to the Rocket Loader exclusion list in the Cloudflare dashboard.
<!-- Scripts with data-cfasync="false" are never deferred -->
<script data-cfasync="false" src="critical.js"></script>
<!-- Inline scripts that modify DOM before paint -->
<script data-cfasync="false">
document.documentElement.classList.add('js-enabled');
</script>
Common Errors
Rocket Loader breaks jQuery-dependent code. jQuery expects the DOM to be ready before executing. If scripts depend on jQuery being loaded synchronously, exclude them.
Third-party widgets fail to render. Social media embeds and chat widgets often insert DOM elements immediately. Exclude their script URLs from Rocket Loader.
Ads not loading. Ad networks rely on synchronous loading for viewability measurement. Most ad scripts should be excluded.
Rocket Loader increases bounce rate. If critical UI functionality depends on JavaScript that is deferred, users may interact with a non-functional page. Always test with real user monitoring.
Script execution order violated. Rocket Loader preserves order within a page but may delay scripts that use document.write. Avoid document.write entirely.
Practice Questions
- How does Rocket Loader prevent render-blocking while preserving script execution order?
- What attribute can you add to a script tag to exclude it from Rocket Loader?
- Why might inline scripts break when Rocket Loader is enabled?
Challenge
Create a test page with five script tags that each log their order of execution. Enable Rocket Loader and verify the execution order is preserved despite the deferral.
Real-World Task
Audit your production site for render-blocking scripts using Lighthouse. Enable Rocket Loader for non-critical scripts and exclude any that break functionality. Measure the TTI improvement.
FAQ
Related Tutorials
- Auto Minify — Minify JavaScript before Rocket Loader defers it
- Early Hints — Preload critical assets while scripts are deferred
- Prefetch & Preload — Predictively load scripts before navigation
Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro — security-first tools for the modern web.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro