Using Rocket Loader is a way to accelerate site loading and provide users with better experiences.
Advantage
Rocket Loader prioritizes your website's content (text, images, fonts etc) by deferring the loading of all of your JavaScript until after rendering.
On pages with JavaScript, this results in a much faster loading experience for your users and improves the following performance metrics:
- Time to First Paint (TTFP)
- Time to First Contentful Paint (TTFCP)
- Time to First Meaningful Paint (TTFMP)
- Document Load
From Cloudflare
Don't worry! Though Rocket Loader is developed by Cloudflare, it does not depend on Cloudflare. You can self-host it.
Usage
The main concept behind Rocket Loader is quite straightforward: execute blocking scripts after all other page assets have loaded.
For example, if raw HTML is like this:
<!DOCTYPE html>
<html>
<head>
...
<script src="/example.js"></script>
</head>
<body>
...
</body>
</html>
it should become this when using Rocket Loader:
<!DOCTYPE html>
<html>
<head>
...
<script src="/example.js" type="rl-text/javascript"></script>
</head>
<body>
...
<script src="/rocket-loader.js" setting="rl-|49" defer></script>
</body>
</html>
Note that rl-text/javascript
is unknown to browsers, so it will not be executed directly. When browser finishes executing rocket-loader.js
, it will believe that the loading process is finished, thus accelerating page loading (because scripts in fact are not loaded yet).
Example
Here are two pages. One is using Rocket Loader while the other not.
Use Rocket Loader: here
Not use Rocket Loader: here
Deploy
You can get rocket-loader.js
from here.
For more information, see this post in Cloudflare's blog.