Accelerate Site Loading With Rocket Loader

2022/06/19

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: block JS scripts until all other assets (e.g. CSS) are 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).

For more information, see this post in Cloudflare's blog.