Geekflare is supported by our audience. We may earn affiliate commissions from buying links on this site.
In WordPress Last updated: May 5, 2022
Share on:
Invicti Web Application Security Scanner – the only solution that delivers automatic verification of vulnerabilities with Proof-Based Scanning™.

Take advantage of modern browser features such as preloading, prefetching, preconnect to make the WordPress website faster.

As a site owner, who doesn’t like to make every possible thing to load the webpage faster?

Ensuring site loads faster consistently worldwide is challenging. There are several things you can do to load the site resources quickly, including enabling the following browser hints. They are also known as pre-browsing techniques.

Note: browser hints techniques don’t help much when you access the website for the first time, but subsequent requests are faster.


You can use preload tag to tell the browser to fetch some of the static resources early. They can be an image, font, JavaScript, CSS, scripts, video, etc. It helps to prioritize the resource loading; hence, performance is improved.

Preloading would be a good idea to implement if you expect your users to visit multiple pages subsequently. Like the eCommerce store where the user visits the product page and then check the information, compare with other product, add to cart, pay, etc.

You can use the following plugins to set up the Preload feature.

Better resource hints –  a free plugin to configure CSS and JS files.

WP Rocket – a premium plugin to supercharge the website performance with many essential techniques, including preloading caching and sitemap.

How do you know if preload is enabled?

The quickest way to find out is by viewing the page source. You should see something like below.

<link rel="preload" as="style" href="IMPORTANT.css">
<link rel="preload" as="script" href="CRITICAL.js">

Not all browsers support Preload while writing. So, check out the compatibility matrix before the implementation.


Do you load resources from other domains? Maybe CDN?

If not, and every resource is getting loaded from your single domain, then this may not be helpful.

Preconnecting hints browser to establish a connection to other domains in the background to save time for DNS lookup, redirection, TCP handshake, TLS negotiation, etc. The idea is to lower the latency to provide fast resource loading from another domain.

Again, you can use the above mentioned better resource hints plugin or the premium one like perfmatters.

Once configured the required resources, you should see them in the page source like below.

<link rel="preconnect" href="">

Note: if you are loading the resources from a domain which require CORS then you need to specify that as crossorigin and output should look like.

<link rel="preconnect" href="" crossorigin>

Preconnect is compatible with the latest version of Chrome, Edge, Firefox, Safari.


Let the browser fetch the next page, which you think will be needed when the user navigates around. Prefetch will download the necessary resources and store them in the local cache and serve them quickly when needed. There are two types of prefetch.

DNS prefetch – explained below

Link prefetch – configured using <link url ..>. Used to prefetch the HTML or static resources. You can prefetch resources using as an attribute.

<link rel="prefetch" href="" as="document">

as attribute supports various resources like audio, video, script, track, style, font, object, document, etc. Link prefetching can be configured with the help of Pre Party Resource Hints plugin.

DNS Prefetch

Loading resources from many domains and want to resolve them in the background?

This quick setup can help to resolve all the potential domains earlier so when resources are requested, it loads faster. This helps to lower the overall latency.

Let’s say you are loading resources from 3 domains, and each domain takes around 100ms to perform DNS lookup then you will be saving 300ms latency.

Isn’t it cool?

You can implement by either using perfmatters plugin or add the following in functions.php file of your theme if you are comfortable in editing the theme files.

//* DNS Prefetching
function dns_prefetch() {
    echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="" />
<link rel="dns-prefetch" href="" />
<link rel="dns-prefetch" href="" />
add_action('wp_head', 'dns_prefetch', 0);

You can read more at Mozilla web docs.


Do you expect your site users to navigate the potential page?

Prerender can help to load those assets in the background, and when user click on it, they get it very quickly. You can achieve this with the Pre Party Resource Hints plugin.

Prerendering is suitable for a light-weight page or asset, but be careful with the entire site or large resources as it may increase the CPU utilization and bandwidth and slow down the site. So, try with the smaller resource and test it to ensure it doesn’t have side-effects.

As you can see, there are four main plugins involved to implement browser hints in WordPress. Choose the one you like and fit the requirement.

Pre Party Resource Hints plugin – a free plugin offers DNS-prefetch, link prefetch, prerender, preconnect, and preload.

Better resource hints – an alternative to the above one.

The free plugin is good as long as it is maintained and supported. Unfortunately, this doesn’t happen for many plugins, and that’s why sometimes it’s better to go for the paid version. Commercial version plugins are supported professionally and up-to-date with WordPress standard & security fixes. If you are willing to spend a few dollars on optimizing your site performance, then you may check out the following ones.

WP Rocket – well reputed, trusted by more than 800,000 sites. It cost $49 for one website.

Perfmatters – a light-weight with easy to follow cost $24.95 for one site. As I write, it offers the following features.

That’s a lot of optimization.


WordPress core is a light-weight, but it becomes bulky depends on what theme and plugins you use. And, it is essential to optimize performance your site for better search ranking and conversion. The above techniques are easy to follow, but you shouldn’t stop there.

You should also consider using a CDN to cache and deliver content faster to your users, globally. There are many, but I would recommend trying SUCURI who offers CDN and security, both.

  • Chandan Kumar
    As the founder of Geekflare, I’ve helped millions to excel in the digital realm. Passionate about technology, I’m on a mission to explore the world and amplify growth for professionals and businesses alike.
Thanks to our Sponsors
More great readings on WordPress
Power Your Business
Some of the tools and services to help your business grow.
  • Invicti uses the Proof-Based Scanning™ to automatically verify the identified vulnerabilities and generate actionable results within just hours.
    Try Invicti
  • Web scraping, residential proxy, proxy manager, web unlocker, search engine crawler, and all you need to collect web data.
    Try Brightdata
  • is an all-in-one work OS to help you manage projects, tasks, work, sales, CRM, operations, workflows, and more.
    Try Monday
  • Intruder is an online vulnerability scanner that finds cyber security weaknesses in your infrastructure, to avoid costly data breaches.
    Try Intruder