As a site owner, who doesn’t like to make every possible thing to load the webpage faster? Ensuring site loads faster consistently worldwide is challenging. There are several things you can do to load the site resources quickly, including enabling the following browser hints. They are also known as pre-browsing techniques. Note: browser hints techniques don’t help much when you access the website for the first time, but subsequent requests are faster.
Preload
You can use preload tag to tell the browser to fetch some of the static resources early. They can be an image, font, JavaScript, CSS, scripts, video, etc. It helps to prioritize the resource loading; hence, performance is improved. Preloading would be a good idea to implement if you expect your users to visit multiple pages subsequently. Like the eCommerce store where the user visits the product page and then check the information, compare with other product, add to cart, pay, etc. You can use the following plugins to set up the Preload feature. Better resource hints – a free plugin to configure CSS and JS files. WP Rocket – a premium plugin to supercharge the website performance with many essential techniques, including preloading caching and sitemap. How do you know if preload is enabled? The quickest way to find out is by viewing the page source. You should see something like below. Not all browsers support Preload while writing. So, check out the compatibility matrix before the implementation.
Preconnect
Do you load resources from other domains? Maybe CDN? If not, and every resource is getting loaded from your single domain, then this may not be helpful. Preconnecting hints browser to establish a connection to other domains in the background to save time for DNS lookup, redirection, TCP handshake, TLS negotiation, etc. The idea is to lower the latency to provide fast resource loading from another domain. Again, you can use the above mentioned better resource hints plugin or the premium one like perfmatters. Once configured the required resources, you should see them in the page source like below. Note: if you are loading the resources from a domain which require CORS then you need to specify that as crossorigin and output should look like. Preconnect is compatible with the latest version of Chrome, Edge, Firefox, Safari.
Prefetch
Let the browser fetch the next page, which you think will be needed when the user navigates around. Prefetch will download the necessary resources and store them in the local cache and serve them quickly when needed. There are two types of prefetch. DNS prefetch – explained below Link prefetch – configured using <link url ..>. Used to prefetch the HTML or static resources. You can prefetch resources using as an attribute.
as attribute supports various resources like audio, video, script, track, style, font, object, document, etc. Link prefetching can be configured with the help of Pre Party Resource Hints plugin.DNS Prefetch
Loading resources from many domains and want to resolve them in the background? This quick setup can help to resolve all the potential domains earlier so when resources are requested, it loads faster. This helps to lower the overall latency. Let’s say you are loading resources from 3 domains, and each domain takes around 100ms to perform DNS lookup then you will be saving 300ms latency. Isn’t it cool? You can implement by either using perfmatters plugin or add the following in functions.php file of your theme if you are comfortable in editing the theme files. You can read more at Mozilla web docs.
Prerender
Do you expect your site users to navigate the potential page? Prerender can help to load those assets in the background, and when user click on it, they get it very quickly. You can achieve this with the Pre Party Resource Hints plugin. Prerendering is suitable for a light-weight page or asset, but be careful with the entire site or large resources as it may increase the CPU utilization and bandwidth and slow down the site. So, try with the smaller resource and test it to ensure it doesn’t have side-effects. As you can see, there are four main plugins involved to implement browser hints in WordPress. Choose the one you like and fit the requirement. Pre Party Resource Hints plugin – a free plugin offers DNS-prefetch, link prefetch, prerender, preconnect, and preload. Better resource hints – an alternative to the above one. The free plugin is good as long as it is maintained and supported. Unfortunately, this doesn’t happen for many plugins, and that’s why sometimes it’s better to go for the paid version. Commercial version plugins are supported professionally and up-to-date with WordPress standard & security fixes. If you are willing to spend a few dollars on optimizing your site performance, then you may check out the following ones. WP Rocket – well reputed, trusted by more than 800,000 sites. It cost $49 for one website. Perfmatters – a light-weight with easy to follow cost $24.95 for one site. As I write, it offers the following features. That’s a lot of optimization.
Conclusion
WordPress core is a light-weight, but it becomes bulky depends on what theme and plugins you use. And, it is essential to optimize performance your site for better search ranking and conversion. The above techniques are easy to follow, but you shouldn’t stop there. You should also consider using a CDN to cache and deliver content faster to your users, globally. There are many, but I would recommend trying SUCURI who offers CDN and security, both.
