Have you ever visited a website and felt like it loaded almost instantly? The secret behind that experience is often a few simple technical tricks that tell a browser how to load a page more efficiently. Two of the most important of these tricks are preloading and prefetching.
These are both techniques that give a browser hints on how to prioritize and download your website’s files. The goal is to make a user’s experience as fast as possible, so they don’t have to wait for a slow page to load.
What Is the Difference?
Preloading and prefetching are similar, but they have one very important difference. Think of it like this:
- Preloading is for files you need right now. You are telling the browser to download a file as soon as possible because it’s required for the current page to display correctly.
- Prefetching is for files you might need later. You are telling the browser to download a file in the background, with a lower priority, because the user might need it on the next page they visit.
Preloading is used for critical resources that would otherwise be discovered late in the loading process, like a font file or a background image in a stylesheet. Prefetching is used for resources you think a user might click on next, like a product page in a list.
How They Help Your SEO
Preloading and prefetching are a key part of your technical SEO. They have a direct impact on your website’s pagespeed, which is a ranking factor. A faster website will rank higher than a slower one, and it will also provide a better user experience.
If your website loads faster, visitors are more likely to stay on your page, which can increase your time on page and lower your bounce rate. These are both signals to search engines that your website is high-quality.
The key to getting these right is to use them correctly. Using too many preloads or prefetching a file that a user never clicks on can waste a user’s bandwidth and even slow down your website. You need a platform that can help you understand your pagespeed metrics and provide a prioritized list of tasks to fix them. Clickrank can help you with this, giving you the insights you need to get your pagespeed just right.
How to Implement Preloading and Prefetching
Implementing preloading and prefetching is a technical task that is done by adding a few lines of code to your website’s header.
Preloading
You can preload a file by adding a line of code to the <head> section of your website. It looks something like this:
<link rel=”preload” href=”/fonts/myfont.woff2″ as=”font” type=”font/woff2″ crossorigin>
The rel=”preload” attribute tells the browser to download the file. The as=”font” attribute tells the browser what kind of file it is, so it can prioritize the request correctly. You should only preload files that are critical for the current page.
Prefetching
You can prefetch a file by adding a line of code to the <head> section of your website. It looks something like this:
<link rel=”prefetch” href=”/images/next-image.jpg”>
The rel=”prefetch” attribute tells the browser to download the file in the background. You should only prefetch files that a user is likely to need on the next page they visit.
Other Hints
There are also a couple of other helpful hints you can use:
- dns-prefetch: This tells a browser to resolve the domain name of a file before it is needed. This is useful for third-party resources, like Google Fonts.
- preconnect: This tells a browser to set up a connection to a third-party server before it is needed. This is useful for external resources that are critical for the page to display.
What is the difference between preloading and prefetching?
Preloading is for files you need right now on the current page. Prefetching is for files you might need later on a different page.
Do preloading and prefetching help SEO?
Yes, they do. Preloading and prefetching can help a website load faster, which is a ranking factor. They can also improve the user experience, which is a key signal for a high-quality website.
What is the best way to implement preloading and prefetching?
You should only preload files that are critical for the current page and prefetch files that a user is likely to need on the next page.
What are render-blocking resources?
Render-blocking resources are files like JavaScript and CSS that are required to load before a page can be properly displayed. Preloading can help to prevent this.
