{"id":5435,"date":"2020-10-20T13:21:49","date_gmt":"2020-10-20T13:21:49","guid":{"rendered":"https:\/\/shortpixel.com/blog\/?p=5435"},"modified":"2020-12-14T14:06:57","modified_gmt":"2020-12-14T14:06:57","slug":"what-is-preconnect-and-why-you-should-implement-it-on-your-website","status":"publish","type":"post","link":"https:\/\/shortpixel.com\/blog\/what-is-preconnect-and-why-you-should-implement-it-on-your-website\/","title":{"rendered":"What is Preconnect and why you should implement it on your website"},"content":{"rendered":"\n

When we talk about improving your website’s performance, usually you read about minifying and combining CSS and JS files, or enabling compression<\/a>, or optimizing your images<\/a>.<\/p>\n\n\n\n

However, there are many little things you can do in addition to those. One of them is implementing preconnect <\/strong>on your site.<\/p>\n\n\n\n\n\n\n\n

What is preconnect?<\/h2>\n\n\n\n

Preconnect tells the browser to establish an early connection to external domains<\/strong>, which includes the DNS lookup, TCP handshake, and optional TLS negotiation. This is time you will save when loading a page. To illustrate this, let’s do a simple test.<\/p>\n\n\n\n

The following screenshot shows a regular website making three calls to m.stripe.com<\/code>, fonts.googleapis.com<\/code> and fonts.gstatic.com<\/code>. As you can see, the DNS lookup, initial connection and SSL negotation is done when the resource needs to be loaded, which is late in the loading process.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Now, if we preconnect to those external resources, we get the following:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The difference is clear, preconnect allows to do the DNS lookup, initial connection and SSL negotation in the background when the page is loading, so later in the loading process those 3 tasks will be already done, and the only thing the page will need to do is to load the actual content.<\/p>\n\n\n\n

The result is a better loading time, or in other words, you will improve your site performance<\/strong>.<\/p>\n\n\n\n

Do not preconnect everything!<\/h3>\n\n\n\n

You should not <\/strong>preconnect to all your external domains. <\/p>\n\n\n\n

It might be contradictory, considering that we just proved that preconnecting improves the loading speed. However, you should know that\u00a0<\/p>\n\n\n\n

  1. browsers close any connection that isn’t used within a few seconds<\/a>. <\/li>
  2. there\u2019s a limit on the number of simultaneous connections<\/a> in browsers.<\/li><\/ol>\n\n\n\n

    Therefore, as a rule of thumb you should only preconnect to the 3 or 4 most important external domains<\/strong>. Preconnecting to everything may actually slow down your website.<\/p>\n\n\n\n

    How to implement it?<\/h2>\n\n\n\n

    Following the previous example, the goal is to enter the following lines between the tags <head><\/code> and <\/head><\/code><\/strong> of your site.<\/p>\n\n\n\n

    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"anonymous\">\n<link rel=\"preconnect\" href=\"https:\/\/m.stripe.com\"><\/code><\/pre>\n\n\n\n
    You should add a line for each external call. In our case, we implemented preconnect to 3 external domains.<\/p>\n\n\n\n
    If you pay attention to the middle line, you’ll see the attribute crossorigin<\/code>. When to add it? When the resources on the connection are downloaded using CORS<\/a><\/strong>. If the assets use CORS, crossorigin<\/code> is needed. If CORS won’t be used, crossorigin <\/code>should be omitted. If you are not sure, you can try with and without, and check which one works \ud83d\ude09<\/p>\n\n\n\n
    To add those lines, we have two methods.<\/p>\n\n\n\n
    1 – Use a plugin<\/strong> like Insert Headers and Footers<\/a>. Install, activate it, go to Settings and add the code in the first box.
    \"\"<\/p>\n\n\n\n
    2 – The recommended method, but for advanced users: Edit the functions.php file<\/strong> of your child theme and add the following piece of code.<\/p>\n\n\n\n
    function shortpixel_preconnect() {\necho '<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"anonymous\">\n<link rel=\"preconnect\" href=\"https:\/\/m.stripe.com\">';\n}\nadd_action('wp_head', 'shortpixel_preconnect', 0);<\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    Is your website still slow? Find out here why.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    When we talk about improving your website’s performance, usually you read about minifying and combining CSS and JS files, or enabling compression, or optimizing your images. However, there are many little things you can do in addition to those. One of them is implementing preconnect on your site.<\/p>\n","protected":false},"author":9,"featured_media":5460,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-5435","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-performance"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/5435","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/comments?post=5435"}],"version-history":[{"count":8,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/5435\/revisions"}],"predecessor-version":[{"id":5613,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/5435\/revisions\/5613"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media\/5460"}],"wp:attachment":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media?parent=5435"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/categories?post=5435"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/tags?post=5435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}