Fast loading (rendering) of a Web page is a must in today’s age. Most websites perform a basic checklist to make your website faster. There are tools such as Google’s Page Speed Insights, GTMetrix or Webpagetest that will check your website and suggest what can be improved so that it displays faster.
When it comes to page speed, the main things most developers do are reduce (minify) files, gzip files and compress images.
At a more advanced level, there are steps such as caching, using a CDN to distribute resources (which is recommended if you have visitors from abroad), code splitting, eliminating JavaScript blocks, etc.
But there are other techniques that most people don’t talk about when they talk about making your web page faster. These performance improvement techniques are commonly known as Resource Hints (prefetching techniques). It’s a simple way to tell the browser – Hello browser, I will definitely need resources A, B and C at some point. So pick that up now so we can serve it quickly later when requested.
The execution takes place in the idle time of the browser, which is the time when the browser has already loaded the page and thus is not doing anything. This means that when a visitor is reading your page or blog post, his browser loads another page in the background and calculates its display. This way, the page is displayed faster once the corresponding link for it is clicked. In other words, pre-fetch and pre-render, pre-fetching and rendering.
If you use Google Analytics, you can find out how visitors navigate through your website to make the best use of these techniques.
The following Resource Hints can be used: dns-prefetch, prefetch, pre-connect and pre-render.
DNS-Prefetch
A dns-prefetch tells the browser that we need a few sources of a particular URL so that the browser can start DNS handling as quickly as possible.
<link rel=”dns-prefetch” href=”//een-website.nl”>Suppose at some point within the website we are redirected to a-website.co.uk. We can add the above line in the head of the website. After the browser parses the document, it begins DNS handling for a-website.co.uk. This will make further requests for a-website.co.uk a little faster.
Using DNS prefetch can save a lot of time with redirects and on mobile devices or locations where Internet speed is slower.
Link Prefetch
A prefetch is used when we are sure that a particular resource will be used by the visitor at some point. Do not confuse dns-prefetch and prefetch, as both are used for different reasons. A common use case is the advance retrieval of images that can be requested at a particular time. Once the page is loaded, the browser begins to retrieve the image at, for example: example.co.uk/images/logo.jpg
A prefetch looks like this:
<link rel=”prefetch” href=”http://voorbeeld.nl/afbeeldingen/logo.jpg">When this line occurs, the browser requests the image from the specified URL, downloads it and stores it in the browser cache.
Be careful not to prefetch too many or too large sources, your browser may then give you the following error message:
Failed to load resource: net::ERR_CACHE_WRITE_FAILUREThis means that the resource we tried to retrieve beforehand is too large to write to the browser cache. Use prefetch only if you are absolutely certain that the resource will be used at some point.
Pre-connect
For a browser, actions such as DNS handling (translating ip addresses to domain names), TCP (Transmission Control Protocol) handshake and TLS (Transport layer security) handling are relatively black tasks.
Pre-connect is similar to a DNS prefetch, but also optionally performs the TCP handshake and TLS handoffs. This saves user time by eliminating these actions.
By including the following code in the main body of your website, you can connect a web page in advance.
Pre-render
Pre-render is the supreme boss of all prefetching techniques and should be used carefully. Pre-render instructs the browser to pre-render all the resources of a given page with the code below:
<link rel=”prerender” href=”https://voorbeeld.nl/bepaalde-pagina">In fact, at https://voorbeeld.nl/bepaalde-pagina, the page is invisibly loaded and saved by the browser. When the visitor navigates to this page then the browser can easily load the pre-rendered page, creating a better user experience.
Here, it is important that you do not apply this unnecessarily because it is more likely to cause problems (unnecessary resources) than a faster page.
How do I apply this?
Are you using our Managed WordPress package? Then you don’t have to do this yourself, we take all the worry out of your hands.
Website remains slow?
It is not said that only these techniques make the website lightning fast, of course it is important that the basis (the web hosting) of your website is good. Not yet hosting with WP Provider? contact us to discuss options.
