Preconnect to Required Origins

Preconnecting refers to the process of hinting to a browser that it should proactively make a connection to a third-party resource the browser has not yet made. For example, if there are resources that you know that a visitor is going to eventually want, you can add the preconnect or dns-prefetch hints to connect to certain resources the user is going to need. Why is this important? This is important because the process of connecting to a third-party resource or domain can take several seconds. That is considered forever in terms of page load speed. This can be further impacted by CDNs, slow networks, redirects, servers, etc. Using preconnect or dns-prefetch makes the additional connections seem faster to the user without utilizing all the bandwidth.

Using preconnect is straightforward. Simply add the preconnect tag to the resource you intend to hint. However, it must be noted that there are some exceptions. For example, you cannot use this preconnect tag for all your third-party resources. You also cannot use it for resources hosted on your own servers. Also, preconnecting still utilizes CPU/ bandwidth, so decide carefully on the most critical resources and domains. You do not want to overdo it and cause slower performance. The dns-prefetch attribute can be used for all other third-party resources. Additionally, platforms like Drupal or Magento come pre-packaged with modules that can assist with preconnecting or establishing resource hints.