You’ve probably already read a lot of blogs that wrote about the changes in SEO optimization because all these changes came into force during 2019. And, website performance was often mentioned in such articles.
When we mention the performance of a site, we usually mean the response of the page and its presentation at any time when the user wants to open the desired page of a given website. Many techniques are used when creating and developing sites, and some of them are minification, concatenation, and caching of JS scripts and CSS styles.
The use of these techniques has become standard practice in website design – and designing a website can be executed with no previous experience or technical skills – yet these standard techniques are often not sufficient to give satisfactory results when answering yourself a question of how to build a website. There are some other techniques, also called pre-browsing techniques, that further affect page performance. The goal of this blog is to give you a closer look at some of these techniques.
It should be noted that the presentation and the speed of opening the page affect how long the client will stay on your site. Not only do you need to have interesting and practical content, but the content also needs to be optimized according to the latest UX techniques and standards to be considered quality.
What’s Pre Browsing and What Is It For?
Pre-browsing is a set of techniques through which you improve the performance of your website. The function of pre-browsing techniques is to predict user behavior and send certain information to the browser in this regard. Pre-browsing techniques should indicate to the browser what users want on a particular page they are visiting or specifically on the entire site.
Today’s browsers support these techniques, while this isn’t the case with older browsers. This doesn’t mean that older browsers will crash due to the above techniques. This means that they won’t react to the optimization already set.
The techniques that browsers support are as follows:
- DNS-prefetch
- Preconnect
- Prefetch
- Preload
- Prerender
DNS-Prefetch
DNS-prefetch is a technique used to allow the browser to pre-perform a DNS lookup to websites from which some additional resources will be retrieved. DNS (Domain Name System) was created with the idea that people can’t remember long strings of numbers, as machines can.
When you type a site name, for example, www.somesite.com, the request to access this website is forwarded to DNS, which returns the appropriate IP address. The IP address is also used by other computers and routers to better respond to user requests. The result of this process is that users see the desired pages they wanted to visit.
When we use the DNS-prefetch technique, we actually assume that the user will need a specific JS file or perhaps an image on a page, so the browser is instructed to perform a DNS lookup or search immediately in order to use the IP address to retrieve the resource when it’s necessary.
This is accomplished by adding the following tag to the <head> tag:
<link rel=dns-prefetch” href=”//www.somesite.com”>
Preconnect Technique
With this technique, it’s important to get acquainted with a few concepts. First of all, the term TCP refers to The Transmission Control Protocol. This protocol was created in the initial implementation of the network during which it supplemented the IP (Internet Protocol). That’s why these two protocols are often used in the same name TCP/IP.
TCP enables reliable and orderly byte delivery among applications running on hosts (which communicate over an IP network). The World Wide Web (www), e-mail, and file transfers rely on TCP.
Applications that don’t require a trusted data service may use the Protocol User Datagram (UDP). TLS (Transport Layer Security) and its predecessor Secure Sockets Layer (SSL) are cryptographic protocols that enable secure communication over the Internet for things like Internet banking (via HTTP protocol), e-mail, Internet fax, instant messaging, and other methods of data transmission. There are slight differences between SSL and TLS, but basically, the protocol is the same.
What the preconnect technique does is open a TCP connection to the specified server, as well as prepare for TLS communication, if necessary. This creates a socket connection on the desired server in order to save time for setting up that connection later.
This is accomplished by adding the following tag to the <head> tag:
<link rel=”preconnect” href=“http://www.somesite.com”>
Prefetch Technique
The prefetch technique is used when we assume that a user will go from one page to another. For example, users are on one page from which they should go and look at an image or some other content. Through the prefetch technique, we remind the browser to retrieve this material and save it locally in the cache, for future user needs.
However, it may happen that the browser ignores this command because it’s already fetching a large amount of data or if it detects that the connection is very slow. Again, we can perform this technique in the following way, as well as the previous ones, only by changing the content of the tag.
In the <head> tag we enter:
<link rel=”prefetch” href=“http://www.somesite.com/image.png”>
Preload Technique
The preload technique is very similar to prefetch, except that preload is interpreted more as a command that the browser doesn’t reject regardless of whether the connection is slow or not and how much data it pulls. The browser with this technique certainly brings the desired resource regardless of the circumstances in which it’s located.
This is accomplished by adding the following tag to the <head> tag:
<link rel=”preload” href=“http://www.somesite.com/image.png”>
Prerender Technique
The prerender technique, like the previous ones, is used when predicting the user’s behavior and their movement on the site. However, one should be careful with this technique, because it draws a lot of resources and shouldn’t be used unless you’re really sure that the next step that the user will perform is the default page.
Through the prerender technique, we send information to the browser to drag an entire page with all the images, styles, scripts, which are further necessary on that page. What happens is that the browser in the background forms a page, creating a DOM (Document Object Model) and at the same time applying styles and executing certain scripts. This means that when users want to go to the next page (which we envisioned as the next step) they instantly see the styles and scripts that were behind the request itself.
The prerender technique shouldn’t be used too much, but only in cases when the website is of a simpler structure and when the next user’s request is known for sure.
An example of using the prerender technique can be represented by the <head> element as follows:
<link rel=”prerender” href = “http://www.somesite.com/someresource”>
Concluding Remarks
As can be seen, these are very powerful techniques that, in addition to the necessary knowledge, also require the experience of a developer who knows how to predict user’s behavior and their next steps. Many of these techniques are systemically very demanding, so it’s necessary to use them carefully and only when necessary.
Knowing the functions and ways of communication with the browser itself, one can raise the quality of the user experience with their site and thus contribute to the optimization and better traffic to the same website.
Recent Comments