Accelerate Site Loading With Rocket Loader

Jun 19, 2022 · 243 words · 2 minute read

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.

cloudflare rocket loader