• Categories
    • Tutorials
    • Beginners Guide
    • WordPress News
    • WordPress Security
    • Best WordPress Plugins
    • WordPress Themes
    • Product Reviews
    • WP Tips & Tricks
  • Guides
    • Start a Blog
    • Make a Website
    • WordPress Hosting
  • Themes
    • Elegant Themes
    • Thrive Themes
    • OptimizePress
  • Hosting Reviews
    • WPEngine
    • Bluehost
    • A2 Hosting
    • Kinsta
    • WPX
  • Coupons
    • WPEngine
    • Flywheel
    • HostGator
    • A2 Hosting
    • WPX Hosting
WordPress Tips & Tricks

Improving WordPress Site Performance With Prefetching and Prerendering

Last Updated on: August 3, 2015 Josh Pollock 1 Comment

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?

A picture of my dog after she fetched her bone.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

Screen-Shot-2015-07-13-at-3.13.08-PM

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.

+ Share
Disclosure

Josh Pollock

Josh, is the owner of CalderaWP makers of fine WordPress plugins including Caldera Forms, a drag and drop, responsive form builder. CalderaWP also offers custom WordPress plugin development services. He is also a weekly contributor to Torque Magazine, and a contributing developer for Pods.

Related Posts

Back to all articles
  • Top WordPress Support And Maintenance Services

    10 Best WordPress Maintenance and Support Services in 2021

  • ‘Your PHP Installation Appears to Be Missing the MySQL Extension Which Is Required by WordPress’: What It Is and How to Fix It

    ‘Your PHP Installation Appears to Be Missing the MySQL Extension Which Is Required by WordPress’: What It Is and How to Fix It

  • How to Add FAQ Schema in WordPress

    How To Add FAQ Schema In WordPress – Step-by-Step Guide

Coupons

View more deals
  • Imagely Coupon
    20% OFF

    Imagely Coupon

    Photographers and WordPress are a match made in heaven. The flexi
    Get This Deal
  • 20% OFF

    Flothemes Coupon

    As an experienced photographer, it’s not always easy to get the
    Get This Deal
  • Nexcess coupon code
    Save 40%

    Nexcess Coupon

    Looking to save money on managed hosting from Nexcess?
    Get This Deal
1 Comment Leave a Reply
  1. Jason Weber says

    December 14, 2015 at 9:52 am

    I just had a couple questions, as I know prerendering pages (aka PJAX) makes your page load times seem to be unbelievably fast, resulting in a great user experience.

    (1)
    Can you, for instance, prerender, say — URLs of your choice for a WordPress page that doesn’t involve a blog?

    (2)
    And if you choose to do so, would that delay the page load time of various pages (not posts), as it has to prerender up to 5 pages, so essentially it’s loading 6 pages?

    (3)
    Lastly, I have tried Instant Articles, and that — along with the 2 or 3 other things I’ve tried — always breaks any lightbox plugin I try to implement for images.

    Any guidance with regard to these concerns would be greatly appreciated, when you have the time.

    Thanks for the article, Josh!

    Reply

Leave a Reply Cancel reply

Full Disclosure This post may contain affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission (at no additional cost to you). All opinions are our own and we do not accept payments for positive reviews.

THE BEST OF WPKUBE

Some of the best content we have published so far.

BEGINNER GUIDES & REVIEWS

1How to Start a WordPress Blog (Step by Step Guide)
2How to Install WordPress - The Complete Guide
36 Best Options for Managed WordPress Hosting Compared
4The 6 Best WordPress Hosting Providers for 2021 Compared
5Top 9 Landing Page Plugins for WordPress (2021)
69 Best List Building Plugins for WordPress In 2021
7How to Fix the 500 Internal Server Error on Your WordPress Website
8Beaver Builder Review: Is it The Best Page Builder Plugin for WordPress (2021)?
9What is a Gravatar and Why You Should Get One
10Thrive Themes Review: A Look At The Full Membership
117 Best WordPress Migration Plugins Reviewed and Compared for 2021
12OptimizePress Review: Create Landing Pages with Ease
13How to Make a Website: Complete Beginner’s Guide
14WordPress.com vs WordPress.org: Which is Best for Me?
15Top 22 Best Free Stock Photo Resources For Your Site
1617 of the Best Google Fonts for 2021 (And How to Use Them in WordPress)
17LifterLMS Review: Is it The Ultimate WordPress LMS Plugin?
18How To Fix ‘503 Service Unavailable’ WordPress Error
1911 Best Contact Form Plugins for WordPress in 2021
20How to Use BackupBuddy – The Best Backup Solution for WP??
21How to Add a Custom Logo to Your WordPress Site
22Kinsta Review: Real Test Data + My Likes And Dislikes
23How to Fix Error Establishing a Database Connection in WordPress
24Thrive Architect Review – Best Landing Page Plugin for WordPress!

WPX Hosting: 50% OFF

Save 50% on WPX Hosting using our exclusive coupon code.

Get this Deal

Flywheel(our review)

Featured In Forbes Huffpost Entrepreneur SEJ

About WPKube

WPKube is an online WordPress resource which focuses on WordPress tutorials, How-to’s, guides, plugins, news, and more. We aim to provide the most comprehensive beginner’s guides to anything about WordPress — from installing plugins, themes, automated installs and setups, to creating and setting up pages for your website.

We have over 500+ tutorials, guides, product reviews, tips, and tricks about WordPress. Founded by Devesh Sharma, the main goal of this site is to provide useful information on anything and everything WordPress.

Twitter Facebook

Useful Links

  • Behind the Scenes
  • Beginner Guides
  • WordPress Hosting
  • WooCommerce Themes
  • MeridianThemes
  • Exclusive WordPress Deals
View All Guides »

Reviews

  • WPEngine 33% OFF
  • Thrive Leads
  • Flywheel 33% OFF
  • Divi Theme 20% OFF
  • Thrive Architect
  • Elegant Themes
Reviews »

Deals

  • InMotion Hosting
  • LifterLMS Coupon
  • LiquidWeb Coupon
  • WPEngine Coupon
  • A2 Hosting
  • FloThemes
More Deals »
© Copyright 2021 WPKube ® All Rights Reserved.
  • About
  • Contact
  • Site Terms
  • Disclosure
  • Privacy Policy