Means.Us.Com

Website DIY - tricks and solutions

WordPress speed: how to add prefetch and prerender tags to posts & pages

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.


3 Comments

  1. I can definitely vouch for the performance gains you see by prefetching (and preloading) assets. I built a plugin a little while ago that helps people easily set up prefetching, preloading, and preconnecting on their sites (https://wordpress.org/plugins/better-resource-hints), but I didn’t think of including prerender hints as a feature in there too. I see that browser support isn’t magnificent, but I don’t see the damage in including it.

  2. Nice article Is there no plugin to download for that code or just to add in funtion template

    • AW
      AW

      June 12, 2018 at 9:36 am

      I’ve not tried it, but you could try Alex’s plugin (earlier comment). However; (I think) it makes its own decision as to what to pre-fetch, so you won’t be able to specify what to fetch by specific page.

      I hope code in article is easy to install using the instructions under “Adding this code to your site” tab above; I didn’t think it merited time to make into a downloadable plugin on wordpress.org. Yes, you could copy and paste the code (less php open/close tags and plugin comment section) into your functions.php but it would then be lost if you switched theme/updated.

Leave a Reply

Your comment will appear after its approved; usually within 12 hours but can be up to a week.
Email is optional and never published. It will only be used to contact you if clarification of your comment is needed.

Copyright © 2018  Means.Us.Com
This site recommends and is hosted by: Kualo Web Hosting.    
Theme: hemingway
 

Blog home  |  ↑ Top of Page ↑