How I made WordPress Faster with 1KB JavaScript

gijovarghese

Gijo Varghese

Posted on November 28, 2019

How I made WordPress Faster with 1KB JavaScript

Clickbait title right? 😉

Released 4 months ago, the script is currently used by 4k WordPress sites.

GitHub logo gijo-varghese / flying-pages

Load inner pages instantly, intelligently

Flying Pages

Flying Pages prefetch pages before the user click on links, making them load instantly

Quick Links

Buy Me A Coffee

Usage

Quickstart:

<script src="flying-pages.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

With options:

<script>
  window.FPConfig = {
    delay: 0,
    ignoreKeywords: [],
    maxRPS: 3,
    hoverDelay: 50,
  };
</script>
<script defer src="flying-pages.min.js"></script>
Enter fullscreen mode Exit fullscreen mode
  • delay: Start prefetching after a delay (in seconds). Will be started when the browser becomes idle, using requestIdleCallback. Default to 0.
  • ignoreKeywords: An array of keywords to ignore from prefetching. Example ['/logout','/cart','about.html','sample.png','#'].
  • maxRPS: Maximum requests per second the queue should process. Set to 0…
<script src="flying-pages.min.js"></script>
<script>
  flyingPages({
      delay: 0,
      ignoreKeywords: [],
      maxRPS: 3,
      hoverDelay: 50
  });
</script>
Enter fullscreen mode Exit fullscreen mode

How it works?

Flying Pages injects a tiny JavaScript code (1KB gzipped) that waits until the browser becomes idle, detect links in the viewport (also on mouse hover) and prefetch them so that browser doesn't have to wait while navigating through pages.

The prefetching is done using the prefetch tag:

<link rel="prefetch" href="URL_TO_PAGE">
Enter fullscreen mode Exit fullscreen mode
  • Prefetch pages in the viewport – Detect links within the viewport (current viewing area) using ‘Intersection Observer’ and tells the browser to prefetch them using ‘prefetch’

  • Prefetch pages on mouse hover – On hovering links, if it’s not prefetched yet using above ‘viewport’, then Flying Pages will prefetch them instantly (similar to Instant.page).

  • Limits the number of prefetches per second – If your page has too many links, prefetching all at the same time will cause the server to crash or slow down the website to visitors. Flying Pages limits the number of prefetches per second (3 req/sec by default) using an in-built queue.

  • Stops prefetching if the server is busy – In case the server starts to respond slowly or return errors, prefetching will be stopped to reduce the server load.

  • Understands user’s connection and preferences – Checks if the user is on a slow connection like 2G or has enabled data-saver. Flying Pages won’t prefetch anything in this case.

Demo

WordPress Plugin

Prefetching links to logout, cart page etc can cause issues. So we need to exclude such links as well as few other options like:

  • Set maximum requests per second
  • Delay to start prefetching
  • Mouse hover delay
  • Disable for logged in admins

The Flying Pages WordPress plugin comes with a settings panel to configure all these:

WordPress Plugin Settins

Demo?

Check out my blog WP Speed Matters

💖 💪 🙅 🚩
gijovarghese
Gijo Varghese

Posted on November 28, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related