Gone are the days when websites are text-based and static. Today, websites are dynamic and are heavy on multimedia – and users love it. However, with this transformation, one web page may take a long while before it is cached because it has less text but carry multiple videos and images. This results to poor user experience not unless it’s used with front end performance enhancing technique like pre-browsing.
Prebrowsing (or predictive browsing), a term coined by Steve Souders. It is like giving in to the requests of users even before they are actually asking for it. It’s like anticipating what they need and then making preparations to give them sooner than the usual. It includes methods like resource prefetching, DNS prefetching, pre-connect, and pre-rendering.
Resource prefetching is a technique used to reduce the time a page or pages load on your site. While users are busy reading or working on the current page, the content of the next page is being downloaded in advance – with the assumption that it is the link the user is expected to click next.
While the users are busy with another website, search engines like Firefox, Chrome and others collect the content in the search engine results page so it is instantly available when they click on the links. Because of this, the page will be delivered immediately.
A very basic example of prefetching is when you are checking on an image in an interactive photo album. The site is guessing that you are likely to look at the next photo that it already starts downloading it before you even ‘say’ so. Sometimes, it even caches other images that you may not be interested in looking at but it’s just fine as this method can make the rest of the images display sooner.
Resource prefetching is like giving instruction to the browser to obtain data or images in advance and the ‘instruction’ goes like this:
<link rel=”prefetch” href=”//example.com/next-page.html” as=”html” crossorigin=”use-credentials”>
Resource Prefetching offers advantages to site owners and some of them are:
DNS prefetching tries to resolve domain names even before a user makes an effort to tag on the link. This does not require connection from a search engine; this is performed via the standard DNS resolution mechanism from the computer. Once resolved and the user follows that domain, delay will not occur because of the DNS resolution time.
DNS prefetching works when a user is considering a page with various links to several domains. The best example for this is the search engine results page.
When we come across hyperlinks in pages, we try to take out the domain name from each of these and to resolve every domain to an IP address. This method makes use of network resources and minimum CPU. Soon as the user clicks on these domain names, they will be able to save around 200 milliseconds in their navigation. More important, user will not go through delays for DNS resolution.
<link rel=”dns-prefetch” href=”http://www.abcde.com/”>
Preconnect, as the term suggests, is connecting to a site before an HTTP request is submitted to the server. These connections include TLS negotiation, TCP Handshake, and DNS Lookup. This is one technique used to improve front end performance and helps get rid of roundtrip latency and lets users save time. With preconnect, modern browsers are provided with better idea on the type of connections that should be established prior to request.
W3C Resource Hints cited an example of preconnect:
<link rel=”preconnect” href=”//example.com”>
The same website also stated that to initiate preconnect, user agents should take these steps:
Using preconnect, particularly with recent browsers, can definitely improve the performance of the website. It will also prevent websites from underutilizing resources.
Prerendering expands the idea of prefetching. Rather than downloading just the resource, it does its task of collecting the entire page for the user but without actually showing it – at least not yet until the user do the clicks. Medium.com writes that this is the formula behind the instant pages attribute of Google. As of this time, it works on Chrome only.
<link rel=”prerender” href=”http://sample.com/index.html”>
Soon as Chrome comes across the <link> attribute, it will begin its work of prerendering the linked page. Because of this the page loads a lot faster than the usual.
Delays in page loads are a true disaster – particularly in business websites. Users tend to leave the page instead of waiting for it to appear on the screen. They then lose the chance to drive traffic, retain visitors and to convert them into customers. With the use of front end high performing techniques, such as the ones mentioned above, websites’ performance and user.
Choosing your domain name. What’s good for your...
Search engine optimization, also known as SEO is...
Voice search is rapidly gaining more and more recognition,...
A good copywriter is like the heart in our body. It...