My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
How I made WordPress Faster with 1KB JavaScript

How I made WordPress Faster with 1KB JavaScript

Gijo Varghese's photo
Gijo Varghese
·Nov 28, 2019

Clickbait title right? 😉

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

<script src="flying-pages.min.js"></script>
<script>
  flyingPages({
      delay: 0,
      ignoreKeywords: [],
      maxRPS: 3,
      hoverDelay: 50
  });
</script>

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 preloads them so that browser doesn't have to wait while navigating through pages.

The preloading is done using the preload tag:

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

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

  • Limits the number of preloads 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 preloads per second (3 req/sec by default) using an in-built queue.

  • Stops preloading if the server is busy – In case the server starts to respond slowly or return errors, preloading 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 preload anything in this case.

Demo

WordPress Plugin

Preloading 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 preloading
  • 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