Note that there are some explanatory texts on larger screens.

plurals
  1. POSpeed Up Facebook / Twitter / G+ Buttons By Defining Classes to Look In
    text
    copied!<p>It's taking forever for my social sharing links to load on my page (it's in my sandbox still, so I can't provide access). Looking through all three of the main players, they're all using <code>getElementsByTagName</code> and are searching through all the elements of the page. </p> <p>Since I'm already assigning classes to all social instances, couldn't I just tweak the function to only look through elements with the right classes? </p> <p>Maybe this isn't going to see massive speed improvements, but I'd like to squeeze out every millisecond of performance I can.</p> <p><strong>Facebook async JavaScript:</strong></p> <pre><code>&lt;script&gt; (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=356176301083466"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));&lt;/script&gt; &lt;/script&gt; </code></pre> <p><strong>Twitter async JavaScript:</strong></p> <pre><code>&lt;script&gt; !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id;js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js,fjs); } }(document,"script","twitter-wjs"); &lt;/script&gt; </code></pre> <p><strong>Google+ async JavaScript:</strong></p> <pre><code>&lt;script type="text/javascript"&gt; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); &lt;/script&gt;` </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload