Introduction


You can speed up visitor navigation of your site by adding prefetch (most browsers) and prerender (Edge & IE11) tags to your HTML <head>.

<link rel="prefetch" href="//example.com/" /> <!--get homepage html in advance-->
 <link rel="prefetch" href="/js/other.js/" /><!--js for other pages on the site-->
 <link rel="prerender" href="/london/page2" /> <!--next page in current article-->

If the tagged resources aren’t already browser cached; then milliseconds after the current page has loaded, the browser will request and “cache” them ready for visitors next navigation. OK simplistic, for detailed explanations see: prefetch, and prerender and additional notes at end of this article.


Adding prefetch / prerender tags to your posts and pages


The code will enable you to:

  • insert tag(s) to pre-fetch the same item(s) on every post e.g. always prefetch homepage (if not cached)
  • insert different prefetch tags for different posts and pages. If you are editing “/rome/page2” you might add custom fields to prefetch “/rome/page1” and “/rome/page3“.
     

    Custom field settings


The code:

<?php
/*
Plugin Name: Browser Prefetch
Description: Inserts prefetch tags
Version: 1.0
*/
function add_browser_pre_caching() { ?>
  <!-- insert your prefetch link(s) that should be added to every page HERE-->
  <?php // pre-fetch pages identified from current post's custom field
  $fetch_pages = get_post_meta( get_queried_object_id(), 'browser_fetch');
  foreach ($fetch_pages as $url) {
    echo '<link rel="prefetch" href="' . sanitize_text_field($url) . '" />';
  }
}
add_action( 'wp_head', 'add_browser_pre_caching',2)
?>

See “Additional Notes on prerender and prefetch” below for an idea of what should and should not be fetched in advance.

Faulty plugins may break WordPress. Only install if know you can manually remove plugin outside WordPress e.g. via Cpanel or using FTP.

1. Copy above code into a a code/text editor.

2. If required, edit to customize (see How to Use tab)

3. Save as “browser-fetch.php”;

4. Compress into a Zip file (browser-fetch.zip)

5. Upload the zipped file via your WordPress Dashboard (plugins->add new->upload) and activate.


Specifying what to prefetch/prerender on your site.


Replace the line beginning with <!-- insert your prefetch link with your own code e.g.

<link rel="prefetch" href="//eg.com/" /><!--prefetch eg.com's homepage-->


Open the post in the WP editor and add one or more custom fields named “browser_fetch” and insert the required “link” in the value field.

Custom field settings

e.g. If you are editing “page2” (Category “rome”) and want the “previous” and “next” pages in the article prefetched, then add a new custom field named “browser_fetch” with a value of “/rome/page1” and then add another custom field (also named “browser_fetch”) with a value of “/rome/page3”.


At the top of the editor page is a drop down labelled “Screen Options” – click this and then click the “Custom Fields” check box; your Custom Fields box will now be visible lower down the page.


Note Chrome no longer supports “prerender”; it is only recognized by IE11 and Edge and they only “obey” ONE prerender tag.

If you want to use prerender then immediately above the line beginning $fetch_pages insert the following:


  $render_pages = get_post_meta( get_queried_object_id(), 'browser_render');
  foreach ($render_pages as $url) {
    echo '<link rel="prefetch" href="' . sanitize_text_field($url) . '" />';
  }

Then use Custom Field “browser_render” to specify url to pre-render for the post or page you are editing.

You can pre-fetch files from your own or other sites. Prefetch and prerender tags for your site’s resources will result in requests to your server by every visitor whose browser does not already have it cached.

Pre-fetch items for pages the visitor is highly likely to visit; and/or fonts, scripts etc on other servers e.g. Google CDN needed by other pages of your site.

Someone reading page 2 of an article is likely to visit page 3 (or page 1 if he first landed on page 2). So prefetch large files for page 3 and 1 e.g. images, or the pages themselves. The files won’t be re-requested (good) if the visitor has already viewed these pages.

You can only include ONE “prerender” request on any one page – the next page in an article is the ideal candidate.

If visitors commonly go to your home page or a category page after reading an article then these are also good prefetch candidates.

Don’t pre-fetch items requested and used by the current page e.g. jquery.js, theme styles, Google fonts; these will already be in browser cache. (this article assumes your web-server is configured for browser caching)

See: these articles: prefetch (David Walsh), and prerender (Microsoft).

Number of prerender tags to include in your HTML: ONE (only IE11/Edge recognise this tag and only prerender one page in advance).

Maximum number of prefetch tags: varies by Browser, safely assume 5.

Prefetch of pages (HTML): Specification and details on how particular browsers handle this are vague. Prefetch is intended to request SINGLE items such as scripts or images. You can specify prefetch of a page url (HTML); whether a particular browser will just fetch the HTML or whether (like prerender) it will also fetch associated files is unclear. This 2012 forum post/test indicates only HTML is requested; but other articles imply browser will/might fetch other resources needed by the page. If anyone has a definitive answer, then please let me know.

If you have any information on prerendering and prefetching that will be of use to readers of this article then please add as a comment below.