But there are other techniques that most people don’t talk about when they talk about making your Web page faster.\nThese performance enhancing techniques are commonly known as Resource Hints<\/a> (prefetching techniques).\nIt’s a simple way of telling the browser – Hello browser, I will definitely need resources A, B and C at some point.\nSo prefetch that now, so we can quickly serve it later when requested. <\/p>\n\n The execution takes place in the idle time<\/em> of the browser, which is the moment when the browser has already loaded the page and is doing nothing.\nThis means that when a visitor is reading your page or blog post, the browser loads another page in the background and calculates its display.\nThis way, the page is displayed faster as soon as the corresponding link is clicked.\nIn other words, pre-fetch and pre-render. <\/p>\n\n If you use Google Analytics, you can find out how visitors navigate through your website to make the best use of these techniques.<\/p>\n\n The following Resource Hints can be used: dns-prefetch, prefetch, pre-connect and pre-render.<\/p>\n\n 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.<\/p>\n\n Suppose at some point within the website we are redirected to a-website.co.uk.\nWe can add the above line in the head of the website.\nAfter the browser parses the document, it starts DNS handling for a-website.co.uk.\nThis will make the further requests for one-website.co.uk a little faster. <\/p>\n\n Using DNS prefetch can save a lot of time with redirects and on mobile devices or locations where Internet speed is slower.<\/p>\n\n A prefetch is used when we are sure that a particular resource will be used by the visitor at some point.\nDo not confuse dns-prefetch and prefetch, as both are used for different reasons.\nA common use case is to prefetch images that can be requested at a certain point.\nOnce the page is loaded, the browser begins fetching the image at, for example: example.com\/images\/logo.jpg <\/p>\n\n A prefetch looks like this:<\/p>\n\n When this line occurs, the browser requests the image from the specified URL, downloads it and stores it in the browser cache.<\/p>\n\n Be careful not to prefetch too many or too large sources, your browser may then give you the following error message:<\/p>\n\n This means that the resource we were trying to prefetch is too large to write to the browser cache.\nOnly use prefetch if you are absolutely sure that the resource will be used at some point. <\/p>\n\n 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.<\/p>\n\n Pre-connect is similar to a DNS prefetch, but also optionally performs the TCP handshake and TLS handoffs.\nThis saves user time by eliminating these actions. <\/p>\n\n By including the following code in the main body of your website, you can connect a web page in advance.<\/p>\n\n <\/p>\n\n Pre-render is the supreme boss of all prefetching techniques and should be used carefully.\nPre-render instructs the browser to prefetch all sources of a given page with the code below: <\/p>\n\n In fact, at https:\/\/voorbeeld.nl\/bepaalde-pagina the page is invisibly loaded and saved by the browser.\nWhen the visitor navigates to this page then the browser can easily load the pre-rendered page, providing a better user experience. <\/p>\n\n 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.<\/p>\n\n Are you using our Managed WordPress package<\/a>?\nThen you don’t have to do this yourself, we take care of all the worries for you. <\/p>\n\nDNS-Prefetch<\/h2>\n\n
<link rel=\u201ddns-prefetch\u201d href=\u201d\/\/een-website.nl\u201d><\/code><\/pre>\n\nLink Prefetch<\/h2>\n\n
<link rel=\u201dprefetch\u201d href=\u201dhttp:\/\/voorbeeld.nl\/afbeeldingen\/logo.jpg\"><\/code><\/pre>\n\nFailed to load resource: net::ERR_CACHE_WRITE_FAILURE<\/code><\/pre>\n\nPre-connect<\/h2>\n\n
![\"\"\/](\"https:\/\/nieuw.wpprovider.nl\/wp-content\/uploads\/Wat-is-Pre-connect.jpg.webp\")
\nPre-render<\/h2>\n\n
<link rel=\u201dprerender\u201d href=\u201dhttps:\/\/voorbeeld.nl\/bepaalde-pagina\"><\/code><\/pre>\n\nHow do I apply this?<\/h2>\n\n
Website remains slow?<\/h2>\n\n