• 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
  • WordPress Hosting
    • A2 Hosting
    • HostGator
    • Bluehost
    • Cloudways
  • Managed Hosting
    • WPEngine
    • Rocket.net
    • WPX
    • Kinsta
  • Coupons
    • WPEngine
    • Flywheel
    • Cloudways
    • 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
  • WordPress’ Settings: A New User’s Checklist

    WordPress’ Settings: A New User’s Checklist

  • Introducing The Wp-Config.Php File For WordPress

    The wp-config.php File: Why It’s the Most Important File For WordPress

  • Best Black Friday Deals

    Black Friday and Cyber Monday Deals, Coupons, & Discounts for 2021

Coupons

View more deals
  • Recipe Card Blocks Coupon
    15% OFF

    Recipe Card Blocks Coupon

    Running a cooking or food website can be fun (and tasty) – but
    Get This Deal
  • WP 2FA Coupon
    20% OFF

    WP 2FA Coupon

    Security should be at the forefront of all site owner’s min
    Get This Deal
  • Themskingdom Coupon
    20% OFF

    ThemesKingdom Coupon

    First impressions count. As such, you’ll want a WordPress t
    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

18 Best Cheap WordPress Hosting Providers in 2023 (From $1.99)
210 Best WordPress Hosting Options for 2023 (Pros & Cons)
38 Best Managed WordPress Hosting Providers for 2023 Compared
45 Best WooCommerce Hosting Providers Compared in 2023 (All Budgets)
5Top 9 Landing Page Plugins for WordPress (2023)
69 Best List Building Plugins for WordPress In 2023
7How to Fix the 500 Internal Server Error on Your WordPress Website
8Thrive Themes Review: A Look At The Full Membership
9Beaver Builder Review: Is it The Best Page Builder Plugin for WordPress (2023)?
10OptimizePress Review: Create Landing Pages with Ease
11How to Make a Website: Complete Beginner’s Guide
12Top 22 Best Free Stock Photo Resources For Your Site
1317 of the Best Google Fonts for 2023 (And How to Use Them in WordPress)
14How to Start a Blog in 2022 (Step by Step Guide)
15How To Fix ‘503 Service Unavailable’ WordPress Error
1611 Best Contact Form Plugins for WordPress in 2023
17How to Add a Custom Logo to Your WordPress Site
18How to Fix Error Establishing a Database Connection in WordPress

WPX Hosting: 50% OFF

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

Get this Deal

Flywheel(our review)

Our Newsletter

Get awesome content delivered straight to your inbox.

Thank you!

You have successfully joined our subscriber list.

.
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 2023 WPKube ® All Rights Reserved.
  • Contact
  • Site Terms
  • Disclosure
  • Privacy Policy