{"id":27399,"date":"2020-02-05T11:59:00","date_gmt":"2020-02-05T09:59:00","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=27399"},"modified":"2023-03-26T12:34:23","modified_gmt":"2023-03-26T09:34:23","slug":"instant-page-wordpress","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/instant-page-wordpress\/","title":{"rendered":"How to Use Instant Page on WordPress to Preload Content"},"content":{"rendered":"\n

If you want to speed up your WordPress site, using Instant Page on WordPress is a lesser-known tactic that harnesses the power of “preloading”.<\/p>\n\n\n\n

\n
\n

Ultimately, website navigation is simple. You go to a page, find a link that interests you, click on it, and repeat the process. Behind the scenes, your browser loads each page after you click on a link. However, imagine if your browser loaded new pages before <\/em>that click. On the front end, the only difference would be the second page loading faster than usual.<\/p>\n<\/div>\n\n\n\n

\n\t\t
<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tinstant.page speeds up your load times with preloading \ud83c\udfce\ufe0f Here's how to use it on #WordPress<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n\n

That’s what preloading is \u2013 using code to tell visitors’ browsers to preload specific pages. As a result, users get to experience faster navigation, and if you implement it correctly, they’ll never notice there’s more data loading in the background.<\/p>\n\n\n\n

In this article, we’ll break down how preloading works, then teach you how to use the Instant Page<\/em><\/a> script to add the functionality to WordPress. We’ll also test how much of a difference preloading makes in real life. <\/p>\n\n\n\n

Let’s begin!<\/p>\n\n\n\n

An introduction to ‘just-in-time’ preloading<\/h2>\n\n\n\n

Preloading is a <link rel><\/code> tag that tells browsers they should load and cache a resource as soon as possible. You can, for example, use this code so the browser will fetch your style.css <\/em>file right after it loads your page:<\/p>\n\n\n\n

<link rel=\"preload\" href=\"\/style.css\" as=\"style\" \/><\/code><\/p>\n\n\n\n

Usually, you use preload tags to download stylesheets or scripts. However, just-in-time preloading goes a step further. It tells your browser to start loading another <\/em>page when you interact with a specific link.<\/p>\n\n\n\n

Your browser doesn’t do anything with the page it preloads, aside from caching it. This means when you click on a link, loading times should be faster than usual. However, bear in mind that just-in-time preloading only works for:<\/p>\n\n\n\n