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>
</html>
it should become this when using Rocket Loader:
<!DOCTYPE html>
<html>
<head>
<script src="/example.js" type="rl-text/javascript"></script>
</head>
...
<script src="/rocket-loader.js" setting="rl-|49" defer></script>
</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 ๐
This site uses Rocket Loader. You can get rocket-loader.js
from here.
For more information, see this post in Cloudflare’s blog.