If you’ve created or maintained a website before, chances are you’re aware how challenging optimizing page load speed is. The job increases in difficulty especially if you’re using WordPress and dealing with plugins that add their own files.
Caching is one of the many effective ways to speed up your website: you can install caching plugins like WP Rocket or W3 Total Cache. While those do the job well, there’s a relatively new method of further speeding up your site – we like to call this method “next page caching”.
It isn’t just caching; It’s next page caching
The concept of next page caching works differently from regular web page caching. Next page caching concentrates on speeding up the transition to the next predicted page your site visitors will be navigating to.
How does this work?
You can cache the next page by utilizing a relatively new feature of browsers called Resource Hints.
Basically, Resource Hints give us with a few methods to prompt the browser to do some special things. When these methods are used together, we can prompt the loading of the next page (and its succeeding pages) to load faster.
Preload prioritizes loading files that are on the current page. You can use this to prompt the browser to load files that are crucial, like an article’s featured image or theme styles.
Prefetch fetches files when the browser has finished loading the current web page. You can use this to load the the critical scripts and styles of the next page. This way, the content of the next page load will start to load while the user is still busy reading or scrolling through the current page.
This preemptively connects to a domain to speed up future loading of files that originate from it. You can use this to preconnect to a domain if your page uses multiple files from it. Use this for CDN domains or Google Fonts.
Introducing: The Next Page Caching Plugin
With this concept in mind, we’ve created a plugin that bears the same name: Next Page Caching. By using the three Resource Hints above, you can probably expect a loading time decrease to the next page anywhere from 100ms to 500ms depending on the situation.
Technically, the plugin doesn’t exactly lessen the loading time. Instead, it works with page interactivity time, making the next page feel faster since the critical parts prioritized during loading and the visitor can interact with the page sooner.
This is opposed to the visitor waiting on a white screen while waiting for the page, featured image, or Google Fonts to finish loading.
Here are the kinds of caching that the Next Page Caching plugin can do:
- The plugin prefetches the main HTML of the chosen next page, as well as the critical files specified.
- Prefetches the first post when viewing a blog list or archive page.
- Preloads the post’s chosen critical files to prioritize them.
- Preloads the theme stylesheet so that it gets loaded first.
- Preloads the featured image of a blog post or page when needed (and if it’s large) so that it shows up faster.
- Preconnects to the Google Fonts domain for faster font downloading when needed.
Since next page caching essentially loads parts of the next page WHILE you browse the current page, normal speed testing tools like YSlow, Pingdom Tools or GTMetrix will not show much difference – those only test the speed of the current page you’re at. What you need is to test the speed from transitioning between one page to the next.
You can open an incognito window, disable caching and check the network tab while navigating through your site.
The Next Page Caching plugin is available for free in the WordPress Plugin Directory.