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.
Preconnect to Required Origins
What Does Preconnect to Required Origins Mean?
How to Use the Preconnect Tag
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.
Lighthouse is an open-source tool that is used to run an audit against your web pages and provides scores and suggestions for improving page performance, accessibility, SEO, and more.
PageSpeed Insights is a tool created by Google that reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.