Menu
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
416
A preconnect can be added directly to a link tag as an attribute in the HTML. It can also be delivered through the Link HTTP header or can be invoked by JavaScript based on user activity.
The preconnect keyword for the rel attribute of the <link> element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively initiating a connection to that origin.
Adding rel=preconnect to a <link> informs the browser that your page intends to establish a connection to another domain, and that you'd like the process to start as soon as possible. Resources will load more quickly because the setup process has already been completed by the time the browser requests them.
<link rel="preconnect"> informs the browser that your page intends to establish a connection to another origin, and that you'd like the process to start as soon as possible.
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".
60
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
