Facebook, Twitter, Google Plus One – our favorite ways to spread the word about our blog posts. But, at what cost? How many people out there have noticed that the any one of this plugins can occasionally add several seconds to your page load time?
The reason, of course, is your are loading JavaScript files which are hosted on other servers. You're page load time is largely dependent on their server response time. Unless you are willing to host these files locally (on your server), there are a few things you can do to reduce page load time without affecting the functionality of your social buttons:
- Make sure all <script> tags are included only once on the page. This is probably the most common mistake that many beginner bloggers make. They want to put the social buttons beneath each post on their blog home page, so they simply copy/paste the appropriate code from the Social network's site.
Be sure to read the documentation on multiple buttons. In most cases, they tell you to only include the Javascript once. See Twitter's documentation as an example.
- Place the JavaScript includes in the "footer" of your site. That is, just before the last body tag. Generally speaking, this should go for all of your JavaScript includes, not just social. Browsers load page elements in the order they appear in the HTML source. JavaScript is usually our heaviest load, so by placing the <script> tags last in line, it allows the rest of your page to render before loading the JavaScript.
- Use asynchronous JavaScript whenever it's offered. Google Plus One recently added this option, which is enabled by default. Without asynchronous loading, each <script> element is loaded in sequence. So, if one of your social network's servers is a little slow today, the other <script> elements will be waiting in line of the server to response. That is, unless you employ asynchronous loading.
Again, this is a good practice for all JavaScript, when available. Google Analytics also offers an asynchronous option.