Visualizing the Social Media Overhead - by Benjamin Spiegel

Posted: February 22nd, 2012 by Benjamin Spiegel

We all know how important site performance is for Organic Rankings as well as the impact it has on paid spend and Quality Score. We have spend a large amount of time over the  past few months working with our brands and their agencies to optimize their sites performance. A primary Quality Indicator we use is the Google Page Speed Tool.

So as an example i will use this site as a benchmark. I follow all the Tips and hints google gives you and archived a Score of 95 Points. This included a lot of Server Side Modifications, moving my media to Amazon AWS, my database to RDS and compressed all my HTML, CSS & JS. I also created some odd Slices and and codes. But hey i got a higher score now. So how do i get the remaining 5 Points, by looking at the Errors i see:

As you can see above, all my “negative” page speed scores are from Social media, the funny part is that google says you should do XYZ and google themselves is not doing it….

For example:
The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources: And whats the first thing that shows up: http://apis.google.com/js/plusone.js
So google, please change your own code, so you give me a higher score, so i rank better so i pay less on a CPC base….

As you cant see the reaming errors are all offsite at the API’s and Social Media Sites themselves.. Twitter Images to large. Google JS not minified…. Google serving same content form separate URLs….

So all this social icons and share things are creating a huge overhead in external calls, media to be loaded, queries to be run. I mean, don’t forget when you open a URL on my site, it goes and asks Google, Twitter, Facebook etc how many times this page has been rated shared etc… Lots of overhead.

So everybody likes and loves Charts, so i tried to come up with a Way to visualize this, and the best one i have found so far is a new Feature in Firefox 12:

Firefox 12 3D Code Inspector


What is this? This 3D Visualization shows the depth of page elements, basically how many items are they wrapped in. Back in the day we switched from Tables to CSS to avoid having code this badly/deeply nested. But it seems we are moving back to it.
Based on the Image above, you can clearly see that the biggest overhead is from Facebook, then Google, then Twitter and oddly LinkedIn is the most optimized.
Just for kicks, below is the same Visualization from our own site:

Soo what?
It seems that we try to optimize, clean and sharpen our code/designs and content on a Daily base to please Search Engines and other algorithms, in order to archive better rankings, higher social indicators and an overall better user experience. BUt in order to stay on top of social trends we load ourselves up with sharing icons and social widgets.
I think with such a wide use of sharing tools & Widgets we need to ask social network companies to optimize their code and offer solutions with a smaller overhead!

UPDATE:
just one more, this could become an art ;)

No Comments »

Leave a Reply