How to Use W3 Total Cache Pro Preload Requests Feature

Enabling Preload Requests
Configuring Preload Requests

Welcome to the W3 Total Cache Pro Preload Requests feature guide. This feature helps improve your website’s performance by adding browser “hint” link tags to the HTML head for dns-prefetch, preconnect, and preload. Below is a brief explanation of each.

DNS Prefetching:
- What it is: DNS prefetching is a technique that resolves domain names (like example.com) into IP addresses before the user clicks a link, speeding up the process of loading a page.
- Code Modification: It adds a tag to the HTML head, specifying the domains to prefetch.
```
<link rel="dns-prefetch" href="https://example.com">
```
Preconnecting:
- What it is: Preconnecting establishes a connection to a server before a resource is needed, reducing latency when the resource is actually requested.
- Code Modification: It adds a tag to the HTML head, specifying the server’s URL to preconnect to.
```
<link rel="preconnect" href="https://example.com">
```
Preloading:
- What it is: Preloading instructs the browser to fetch and cache a resource (like an image or script) in the background, so it’s readily available when needed.
- Code Modification: It adds a tag to the HTML head, specifying the resource’s URL to preload.
```
<link rel="preload" href="https://example.com/.../image.jpg" as="image">
```

In this guide, we’ll walk you through how to use Preload Requests effectively for optimizing your website’s performance. Let’s dive into the details and get started.

Speed Up Your WordPress Website.

Unlock the ability to Preload Requests by upgrading to W3TC Pro.

View Plans

Enabling Preload Requests

The first step to using the Preload Requests feature is to enable the feature by navigating in your WordPress admin to Performance > General Settings and then clicking on the sub-nav User Experience. Once there, click on the Preload Requests checkbox to enable it and then click on Save Settings.

Configuring Preload Requests

The next step is to configure the feature by navigating to Performance > User Experience. There will be a new section titled Preload Requests towards the bottom of the page.

The DNS Prefetch Domains textarea allows users to input a list of domains that browsers will use to resolve domain names to IP addresses in advance. It resolves DNS queries before they are needed, anticipating the need for future requests to specific domains. This helps in reducing DNS resolution time when actual requests are made, improving the perceived website load time.

The Preconnect Domains textarea allows users to input a list of domains that should be preconnected by the browser. Preconnect goes beyond DNS prefetching. It not only resolves the DNS but also initiates a connection to the server and performs the necessary handshake (e.g., TCP handshake, TLS negotiation). It establishes a complete network connection to the specified domain, enabling the browser to fetch resources more quickly when requested, as it has already set up the necessary network infrastructure.

Note: Preconnecting to an excessive number of domains can overwhelm browsers and actually hinder overall performance, as each connection consumes resources. It’s crucial for web developers to analyze and prioritize which third-party domains should be preconnected in order to maximize efficiency of website loading.

The Preload textareas allow users to specify various file URLs that should be preloaded in the browser’s cache before the page is rendered, thereby improving the page’s load performance and rendering speed for subsequent requests. There are separate textareas for CSS, JavaScript, fonts, images, videos, audio, and documents.