How to Preload a Resource in WordPress | PageSpeed

The preload a resource in WordPress is a value of the <link> element rel attribute that allows you to declare fetch requests in the HTML’s <head>, identifying resources that your page will need very soon, which you must start loading before in the page lifecycle, before browsers’ main rendering machinery spices in.

Having a quicker website can help to boost your blog traffic by improving your WordPress SEO. When your internal pages are preloaded, your visitors are more likely to stay on your website longer and view more pages.

Preload a Resource in WordPress

The only thing is, you’ll require to make sure you set up preloading the proper way and not make the common errors. For example, if your settings are too forceful and all your internal links are preloaded, then it could have the opposite result and even crack your server altogether.

Read Also: Remove Unused CSS & JavaScript In WordPress

The most comfortable way to preload links is by using the Flying Pages plugin. It simply adds smart preloading to make sure preloading won’t crack your website or even slow it down.

The first thing you need to do is install and activate the mentioned plugin. Upon activation, navigate to Settings » Flying Pages in your WordPress admin panel to configure the plugin settings. 

Then, you must set the Delay to start preloading time in the drop-down. This is the delay to start preloading links if your user’s mouse isn’t moving in the browser window.

You can change this, but we’ll keep the default suggested setting of ‘0 seconds’.

Delay to start preloading

Next, you can change the Max requests per second. The lower you set this number, the less impact it will have on your server. 

We’ll keep the default setting of 3 requests which should work for most WordPress hosting environments.

Delay to start preloading

After that, you can check the box to Preload only on mouse hover. This will only preload links if a user hovers over it and will preload the page just before they click.

This technology makes the perceived load time nearly instant because there’s a 400ms delay between when the user brings their mouse over a link and clicking it.

You can also set the Mouse hover delay. This is the time that will pass after a user hovers over a link before preloading starts. 

Below that, there’s a list of keywords that the plugin will ignore for preloading. These are standard login pages and image files. You can leave the list as it is or add more keywords if you like.

Delay to start preloading

The final option is to disable preloading for admins.

Overall, this will help to improve your website server load. If you want to only preload for website visitors who aren’t logged-in admins, then simply check the box. Once you’re finished, click the Save Changes button at the bottom of the page. That it, you’ve successfully enabled link preloading on your website.

Leave a Comment

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

Scroll to Top