Improving WordPress Site Performance With Prefetching and Prerendering

The never ending quest to improve the performance of our WordPress sites requires a wide arsenal of tricks, not just caching. Two important and related tools, are telling the browser which domains to be prepared to load, and which pages to start loading in the background. This way the browser is able to load links the user is likely to click on almost instantaneously.

While this may seem tricky for you, it’s not actually that complicated. In fact, there is a cool plugin, which I will discuss in a bit, that can configure most, if not all of this for you, using a simple interface. For more custom cases that plugin can’t cover, I’m going to be showing you some very simple code you can use.

What Is DNS Prefetching?

Domain Name Servers (DNS) are the network of servers that your browsers use to find the server that hosts the website you asked it to show you. This means that before the browser can start loading, and then rendering the site, they have to find it.

But, if your browser already had resolved the DNS server, it can skip this part of the process, making the time to page load that much faster. This process is called DNS prefetching, because when a link is clicked, or entered into the address bar, the DNS server has been prefetched.

This technique, which modern browsers do a lot of in the background. For example, generally browsers will prefetching the DNS records for the top search results on a search results page. You can also manually specify the domains to prefetch, which I will cover later in this article.

Each domain that prefetching is implemented for adds a small amount of bandwidth to the request, but in general it’s worth the trade-off.

What Is Prerendering?

DNS prefetching just shortens the latency before starting to load a site. Your browser still has to load the site for a link that you have done DNS prefetching for. prerendering on the other hand actually starts the process of rendering specific sites, after the current page has finished loading, but before a link to the pre-rendered site has been clicked.

Prerendering is more resource intensive than DNS prefetching. On the other hand, when a prerendered link is clicked, the benefit is greater.

Like DNS prefetching, many browsers dynamically select content to pre-render, but you can also manually specify pages to prerender. Prerendering, also has more limited support than prefetching, but is still fairly well adopted.

Meet WordPress Instant Articles

WordPress Instant Articles is a relatively new, free plugin that manages prerendering and prefetching for you. It provides you with two very useful implementations of these two technologies.

This cool plugin implements prerendering in two ways. The first place it implements  prerendering i is for previous and next links on single post views. This is a really useful feature for reducing the load time of what is often the most clicked links on a post. It gets your users to the next post they want faster. The other situation where this plugin implements prerendering the first two posts in your blog index.

This may not seem like a lot, but it is important not to go overboard with your prerendering as the extra bandwidth required to do so can quickly outweigh any benefits of doing so.

WordPress Instant Articles also lets you specify specific domains to prefetch the DNS lookups for. THey recommend not adding more than 5 sites for prerendering, which is good advice.

There are two main categories of domains you would want to prefetch. One is domains you are using for content delivery — IE any CDN used on your site — or for external APIs, like the Twitter API if you have a click to Tweet button. The other important use case is the domain for a third party site that you are trying to drive traffic to. For example, if your site is an affiliate marketing site, the speed at which the site you are trying to drive traffic to is a factor in your conversions and is therefore very important to you.

Doing Your Own Prerender

For many of you, this plugin may cover every situation you need. But if you need to prerender specific posts, then you will need to write a little bit of custom PHP. For example, if on your front page you have three links to posts (or pages) that you want to prerender, you could add the prerender tag to the header.

To do so, you will need to use a function hooked to wp_head. Inside, create an array with the IDs of the posts, and then loop through the markup for a prerender tag. The prerender tag uses a link element, like a stylesheet link, but for its rel attribute uses the value “prerender.” Here is an example of how to do it:

add_action( 'wp_head', function() {
  if ( is_front_page() ) {
     $posts = array( 1,2,3);
     foreach($posts as $post) {
        $url = get_permalink( $post );
        printf( '', esc_url( $url ) );
     }
  }
});

Of course, you might also want to choose your posts dynamically, for example, based on a custom field. In this next example, which runs in the main post index, posts are queried for based on the “prefetch_on_home” meta field. If any posts are found with those links, then prerender tags are outputted:

add_action( 'wp_head', function() {
  if ( is_home() ) {
     $args = array(
        'meta_key' => 'prefetch_on_home',
        'meta_value' => true
     );
     $query = new WP_Query( $args );
     if ( $query->have_posts() ) {
        foreach( $query->posts  as $post ) {
           $url = get_permalink( $post->ID );
           printf( '', esc_url( $url ) );
        }
       
     }
    
  }
});

Go Forth & Optimize

I hope that this article has provided you with a new insight on how you can improve the performance of your sites. Combined with a static HTML cache, where appropriate, you can use this simple technology to provide really impressive load times with a minimal increase in consumed bandwidth, which I think is an awesome win all around.