How to add rel="preconnect" to tags other than link?

I am using Chrome Dev Tools to audit my site's homepage. And it gives one of the opportunities "Preconnect to required origins" for the facebook, twitter and linkedin share button in my homepage.

I read the google article about preconnect and dns-prefetch at https://developers.google.com/web/fundamentals/performance/resource-prioritization , but find the syntax is only for link tag, as below:

But in my home page, the share buttons that will connect to the social sites are looks like this:

<div class="fb-like" data-href="https://www.facebook.com/xxxx" data- 
send="false" data-layout="button_count" data-width="90" data-show- 
faces="true"></div>

or this:

<a href="https://twitter.com/share" class="twitter-share-button" data- 
 count="none">Tweet</a>

or this:

<script src="https://platform.linkedin.com/in.js" type="text/javascript"> 
</script>
                        <script type="IN/Share"></script>

In such cases, how to add the preconnect or dns-prefetch hints to the html code? It seems that these hints are only valid for link tag?

Thanks

Solution

I'm assuming that you're auditing your page with the Audits panel and you're looking at the Preload key requests audit.

If you click the Preload key requests audit, you should see an expanded table with the exact URLs that it is suggesting you preload.

Take these URLs and add <link> tags to the <head> of your HTML that preload these requests.

<!doctype html>
<html>
  <head>
    <link rel="preload" as="script" href="facebook.js">
    <link rel="preload" as="script" href="linkedin.js">

You need to pay attention to the file types of each resource and update the as property accordingly. If the file is a stylesheet, you need to set as="style". If it's a script you need to set as="script".