Predicting pages: Using dns-prefetch, preconnect, prefetch, preload and prerender to improve page performance

Developers are constantly trying to improve the performance of the global network, starting with browsers that load pages in advance before the search criteria are entered, before prioritizing content on the visible part of the page. HTML has already taken a few steps towards simplifying this process with rel = "next" and rel = "previous" to create hints for the browser, which will be able to use it to hide pages in advance before any action is taken by the user.

Not so long ago, the W3C added several new features to the link as part of the Resource Hints specification, which provide a more reasonable preload of site content, potentially increasing the page loading speed on the sites where they are used.

Who is knocking at the door to me

DNS lookup — the process of finding a domain name on a network and translating it to an IP address — can take anywhere from tens to hundreds of milliseconds. If the user is already on your site, his browser already knows his position ... but if you download resources from other sites to your page, the browser needs time to process the DNS information for each of them, since it finds them in HTML. You can anticipate this process by placing dns-prefetch for external sites on your page.

Dns-prefetch usage example

One of the recognized external resources is the Google Analytics script, which is used to track the behavior of visitors on your site. Calling the script is usually placed at the very end of the page:
')

<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','http://google-analytics.com/analytics.js','ga'); ga('create', 'UA-9896842-2', 'auto'); ga('send', 'pageview'); </script> 

We see the script accessing google-analytics.com . Instead of trying to get this domain name at the time the script is detected, we can give the browser a hint that the URL will be used, and that it should check if it knows how to contact this site while the rest of the page is rendered. Add the following to your document:

 <link rel="dns-prefetch" href="//google-analytics.com/"> 

Note that the href value does not contain a protocol, i.e. it does not begin with http: or https :. This is a great option for our purpose. This value is effective in this case, as it provides maximum flexibility for accessing Google Analytics.

Potentially, this speeds up the page loading in parts for each URL specified in dns-prefetch, since the browser already “knows” where it needs to go in order to get the resource before the parser reaches it.

Open the door

preconnect helps move even further. It does all the same as dns-prefetch, but at the same time adds a few additional approvals for the Internet connection; if dns-prefetch “knocks” to check the location of the site, then preconnect opens the door.

Preconnect usage example

Articles on the original site sometimes use resources stored on the Amazon S3 server, called in situations where the CodePen demo is embedded in the page. To speed up the search for these files, preconnect is added to:

 <link rel="preconnect" href="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/"> 

Note that the code does not specify a specific file for preconnect, but instead tells you the location where you can find the resources that may be used on this page.

We implement the sample

Another step forward is the prefetch (prefetch), designed to load the resource, which will most likely be used in the next user navigation. As a rule, this is the page that the user is most likely to go to after the one he is currently looking at.

Prefetch usage example

prefetch is most similar to rel = "previous" and next, and in most cases will be used in the same way. In the case described in this article, the most likely goal for the user will be the previous page:

 <link rel="prefetch" href="/190/Using-link-rel-to-preload-web-content-and-aid-accessibility"> 

Do not forget to take into account the main page of your site as a potential goal of prefetching Web developers often subconsciously admit that visitors will always come through the home page of their site, but in the days of Google this is not always the case.

You may want to add every possible page as a prefetch. But try to remain a decent resident of the network and do not do this: the browser will most likely ignore you, or even worse - it will lead to poor performance if you flood it with too many requests for preliminary samples. Include only those pages that the user is likely to go to from a specific page.

The Resource Hints specification offers the option of adding the statistical probability that a user moves to a specific resource, allowing you to customize the prefetch behavior; as far as I know, at the moment no browser supports this feature.

Download without blocking

You can also launch a preliminary, high-priority, non-blocking selection of a resource that is used on the current page using the preload keyword.

Preload example

Web fonts are a good example of using preloads: as a rule, fonts are loaded only when they are defined in CSS, which often leads to a terrible “collection of content without design,” since the page is rendered first using standard font types, and only then When loading, redraws the page using a web font. To avoid this, we can specify that the font is loaded before we reach the CSS. In the case of this site, this will be the Libertad font used to style the body of the page:

 <link rel="preload" href="libertad.woff2" as="font"> 

Notice the optional as attribute, which tells the browser which type of resource is being loaded.

Drawing

And the last way is to request the browser to simultaneously find and completely render the page “behind the curtain”, making it available at the moment when the user clicks on the link linked to it. It is clear that this approach should be used extremely rarely. It may be suitable for the landing page, on which the button opens a full-screen experience that creates the full effect of presence.

Prerender usage example

One of the most obvious uses for this site are demos, such as for video on the background of the page in HTML5. On the article page we could add:

 <link rel="prerender" href="/samples/polina.html"> 

... to preload and render the demo as the user reads the article.

This kind of behavior is usually achieved through the use of JavaScript preloaders, and for complex sites you may still need JS code. But for simpler cases, the prerender will be quite effective.

Resource Tips as an Investment

It is extremely important to understand that all this is just a hint for the browser, and not exact instructions. The browser may or may not follow such prompts based on network bandwidth, memory usage, vendor support, and other factors. As such, they should be considered as an investment, and not as a guarantee of increased efficiency, and, of course, not as a "panacea" for all website problems or low page loading speed.

Given all this, there are several factors that can improve the page's behavior during the preloading process:

• Effective resource hints rely on attentively tracking page numbers. There is nothing wrong with guessing where users can go after visiting a page on your site, but the expectations are very different from the actual data. If you are launching a new or updated website, guesses will work well; but after a week or more of data collections, website analytics should be used to: (a) form user actions by changing the site design to direct visitors to where you want (and where your resource tips are sent) or (b) changes prompts so that they accurately reflect the behavior of the user.
• Not just for browsers. Together with <link rel = "next" ...> and rel = "previous", resource hints provide search engines with additional opportunities to evaluate and link content. For example, Google can use next and previous to help determine the organizational structure of the site and prioritize the results for the first page in related rows.

Conclusion

Being part of a constant strategic focus on site performance, resource tips can be quite effective techniques to increase page loading speed; for optimal results, they can be combined with a comprehensive professional content strategy that tells you what information and where in the site should be.

---