Accelerate Site Loading With Rocket Loader

ยท 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.