Thoughts on Instant Loading in WordPress

If you are familiar with the instant loading concept, you’ll know it’s about faster subsequent page loads by prefetching hovered links.

There are several solutions – both libraries and custom code – helping to achieve this, but they all have their downsides.

Note: Instant Loading has been implemented in WordPress Lightouse plugin 3.3.

Libraries

Google’s Quicklink
Link

As their description says “a drop-in solution for sites to prefetch links based on what is in the user’s viewport”, imagine this library running on a photo gallery site, where users scroll and hover the images but don’t click. It’s a lot of wasted bandwidth and server resources.

instant.page
Link

This script works by prefetching the page before a user clicks on a link. When a user has hovered for 65 ms there is one chance out of two that they will click on that link, so instant.page starts preloading at this moment, leaving on average over 300 ms for the page to preload.

This is a good library, but you’ll have to host it yourself and configure the data attributes. Speed improvements will be observed over time, so make sure you track and measure your pagespeed in Google Analytics or SpeedFactor.

There’s more libraries out there, all variations of the libraries above, some of them using modern techniques, IntesectionObserver, polyfills, different delays and implementations.

All of these scripts, provided either as a WordPress plugin or as custom code, load the library from a CDN. Lots of privacy extensions (Chrome or Firefox) treat these scripts as privacy-invasive and they block the script, so your speed improvements are back to square one.

Custom Code

Here are some custom code solutions to implement in your WordPress theme or plugin. Note that some of them are outdated or don’t use best practices or modern code, but they provide a very good starting point.

Custom Code #1

This one is using jQuery, but it can be converted to vanilla JavaScript to avoid loading an extra library.

(function($) {
    // Which links should we prefetch?
    var $linkElements = $('a');

    $linkElements.on('hover', function() {
        var link = $(this).attr('href'),
            prerenderLink = $('#prerenderLink');
        if (prerenderLink.length) {
            if (prerenderLink.attr('href') === link) return;
            prerenderLink.attr('href', link);
        } else {
            $('<link id="prerenderLink" rel="prefetch prerender" href="' + link + '">').appendTo('body');
        }
    });
})(jQuery);

Custom Code #2

This one is also using jQuery, but it can be converted to vanilla JavaScript to avoid loading an extra library. This one uses a slight delay for prefetching the links, which is better from a bandwidth point of view and saves server resources.

$(function() {
    var prefetched = [];
    var prefetch_timer = null;
    $('div.navbar, div.content').on('mouseover', 'a', function(e) {
        var value = e.target.attributes.href.value;
        if (value.indexOf('/') === 0) {
            if (prefetched.indexOf(value) === -1) {
                if (prefetch_timer) {
                    clearTimeout(prefetch_timer);
                }
                prefetch_timer = setTimeout(function() {
                    $.get(value, function() {
                        // Necessary for $.ajax to start the request
                    });
                    prefetched.push(value);
                }, 200);
            }
        }
    }).on('mouseout', 'a', function(e) {
        if (prefetch_timer) {
            clearTimeout(prefetch_timer);
        }
    });
});

Source

Custom Code #3

This one is a really simple one, using vanilla JavaScript, but no throttle/delay. Also, it only prerenders resources.

var links = document.querySelectorAll('a');

[].forEach.call(links, function(link) {
    link.addEventListener("mouseenter", function() {
        var newPreLoadLink = document.createElement("link");
        newPreLoadLink.rel = "prerender";
        newPreLoadLink.href = link.href;

        document.head.appendChild(newPreLoadLink);
    })
});

Source

Custom Code #4

Check the source on this as there’s more interesting reading and options.

document.querySelectorAll('a').forEach(link => {    
    link.addEventListener('mouseover', (e) => {
        let href = link.getAttribute('href');
        let prerenderLink = document.createElement("link");
        prerenderLink.setAttribute("rel", "prerender");
        prerenderLink.setAttribute("rel", "prefetch");
        prerenderLink.setAttribute("href", href);

        document.head.appendChild(prerenderLink);
    });
});

Source

Find more JavaScript tutorials, code snippets and samples here or more jQuery tutorials, code snippets and samples here.

πŸ‘‹ Added by Ciprian on Tuesday, January 19, 2021 in Blog, JavaScript. Last modified on Tuesday, January 19, 2021.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Privacy Policy