One of the things I always run into are clients that want their site to be faster. Often times, I’m told that it is the server or MySQL slowing their site down. Today, I had a conversation with a site owner that was talking about how slow their site was.
“The site loads the first post and sits there for five seconds, then the rest of the page comes in.”
Immediately, I think, <script src=” is likely the problem.
Load the page, yes, pauses… right where the social media buttons are loaded.
There is a difference between the page being slow and the page rendering slowly. The latter is what most people will see and make a judgement that the site is slow. So, the first thing we need to do is move things to async. As an example, the social media buttons on this site are loaded by my cd34-social plugin.
But, the meat of the conversion to async is here:
What this code does is load https://apis.google.com/js/plusone.js, http://platform.twitter.com/widgets.js and http://connect.facebook.net/en_US/all.js#xfbml=1 after the page has loaded, and inserts it before itself.
This will make the social buttons load after the page has loaded, but, won’t hold up the page rendering.
However, this isn’t the only issue we’ve run into. The plugin they used, includes its own social media buttons. The plugin should use CSS sprites which are large images that contain a bar or matrix of icons where you use CSS positioning to move that image around and display only a portion of it. This way, you fetch one image rather than the 16 social media buttons and the 16 social media button hover images, and use CSS to move that image around and display the right icon out of the graphic.
Here are a collection of those sprites as used by Google, Facebook, Twitter and Twitter’s Bootstrap template:
With these sprites, you save the overhead of multiple fetches for each icon, and, present a much quicker overall experience for the surfer.
Not everything can be solved with low latency webservers, some performance problems are on the browser/rendering side.