Page speed errors for Facebook and Twitter plugins

[castor_t]

I am trying to speed up my website and found that a lot of third-party plugins are slowing up my site. I use one for twitter, two for face book (share and like). Google Pagespeed throws up a bunch of errors related to these plugins like combine external css, javascript, minimize dns lookups, compression etc.

I don't want to stop using these plugins, as they are useful in getting traffic to my site. I also don't want these plugins to slow down my site. I believe many of the webmasters here use these third party plugins and I would like to know any tips that I can use to speed up my site. I already have two CDN's, one for my main content and one for my images (can't put all of them on one CDN for various reasons).

[tedster]

Those messages (combine external css, javascript, minimize dns lookups, etc) are triggered generically for any page that does those things and not for your specific usage. If you use a plug-in that calls out to a third party, then that is the trade-off you make.

I wouldn't do anything extreme about those plug-ins if I were in your place. Just make sure you do everything else that you can do practically, but keep the tools -- especially if you are able to measure a positive effect.

[castor_t]

I was a Google Webmaster video the other day, and they mentioned that they target for a 0.5 sec response time for their search queries. I am not sure even if it's possible to achieve such a kind of response time. I now have all Social Networking addons (Twitter, FB share, FB Like, Digg and Google Buzz) and it now takes 8 sec. for one of my page to get loaded (as per webmaster tools).

I also have Google JQuery api getting loaded. I know that to get a better response time, I need to reduce the load of these 3rd party addons, but I get good traffic from these social networking sites. I don't know what else to do to speed up my site. I am already on a CDN.

[pontifex]

castor: if you can sum all the external JS, iFrames and buttons in one block together:

do an empty DIV id="social-media"

and fill that div with ajax after the page is finished loading. maybe even with an external JS file and a small delay "on load"

P!

[castor_t]

I already have an external javascript file that I placed at the bottom of the page, just before the body tag. Well, I have multiple div's, and I am loading the code via javascript. I am using this technique to load all social media plugins, goog analytics and the search box on my page.

What I haven't tried is to use Ajax or the delay method. Will that help? I mean, I am already loading those plugins at the end of the html code via an external javascript. Do you think using Ajax is any better than this technique?

[pontifex]

well, if you wait until the "onload" event of the page, a decent toolbar (i just assume that the google plugins work that way, it has to be verified) will send page "page loading times" on exactly that event...

you can see that with firefox and firebug installed, if you look at the page loading speed.

there should be a RED vertical line that marks this "onload" end. for example: my ajax method takes an extra 200ms AFTER that line and the summary says:

1.65s total (onload: 1.45s)

so, in my theory - the toolbar should report back: loading speed = 1.45s

P!

[castor_t]

So, you are saying the time taken till the onload event is the time that is being reported to Google Webmaster tools?

In such a case, it is absolutely wise, to use Ajax technique to start loading these 3rd party plugins after a couple of seconds of delay.

[pontifex]

Update: out of interest I just installed a http monitor tool that is recording any activity on the network in the http protocol (there are some free trials out there, I used one called http debugger, giving you 14 days to check it out):

1st thing i noticed where the requests sent to google domains (in my case clients4.google.com) after a while:

doing a POST to an URL there called /firefox/metrics/collect

with binary data!

So google is recording the activity and THEN submitting it after a period of time... or activity, not clear just yet.

[FranticFish]

Pontifex, I've just been looking into Ajax for various SEO reasons and this strikes me as another good use of it on busy sites - show Google only load times that you're responsible for. I'm a complete novice with Javascript though.

If the function is just part of the onLoad event in the body tag is that enough? Or would you need to place it somewhere else? And why would delaying the onLoad event make any difference?

[pontifex]

after testing it out, there is NO way to be 100% sure, because google collects a bunch of data first and then submits it to the statistics server!

yet: "The onload event handler is used to call the execution of JavaScript after a page, frame or image has completely loaded."

so, if you have news ticker installed, your page would never end to load if they do it otherwise! I would bet on the "onload" event... makes the most sense in my book!

P!

[pontifex]

@franticfish:

on delaying the load of elements via AJAX, we talk about the

setTimeout()

function and I only am only wild guessing here. We do a few miliseconds delay of the AJAX call on our pages to give the toolbar time to collect a "finished loading" for the stats. But as I said: wild wild guessing!

P!

[castor_t]

1.

doing a POST to an URL there called /firefox/metrics/collect

This is an interesting point. I believe, Google is using this not only to find the load time, but also to find out if users are spending some time on the page reading the content. And, if they are doing this, I believe, they use this as one of their 200 signals in ranking a page.

2. I currently load 5 social plugins, which I believe must take at least 3-4 seconds to load for a new visitor. I can try loading these via ajax (delayed by a couple of seconds) to see if the load time reported by Goog Webmaster Tools is improved. I am new to Ajax, could you point to me to any resources that does this job for me?

[FranticFish]

Thanks, I'll read up on it.

[castor_t]

I managed to get the code working. I shall delay loading those plugins by 3 secs and will see if that makes a difference. Thanks @pontifex

[castor_t]

When I ran a test at webpagetest, I could see that the document is completed at 4.1 seconds, but the graph still shows up after a 3 sec break and the fully loaded time is 7.9 seconds.

Now, don't you think Goog toolbar will send the 7.9 seconds time instead of 4.1 seconds? and thinks my site is slow. I should wait up for a couple of days to see the actual results on Webmaster toolbox.

[pontifex]

i think it is worth a test... if G takes the SetTimeout into calculation, some newstickers or DHTML effects that spin or animate something would NEVER finish loading... IMHO!

P!

[BradleyT]

You might also want to test using JQuery and the document ready statement it provides.

But really you can't complain that plug-ins are "out of your control" because you're the one using them. When I go to your site and it takes 8 seconds for the tweeter box to load - that's my user experience, 8 seconds for your stupid widget to load. And many times these things lock up the browser which prevents any scrolling, typing, or clicking until they finish loading.

[castor_t]

I know that I made a choice of loading up the social plugins on the webpage. I know that loading these plugin eats up time. I am just trying to find out the best and optimal way to load these plugins. I am trying to escape any penalty that may be imposed by Goog for taking up too much time loading the page.

[tedster]

Do you have any reason to suspect such a penalty?

[castor_t]

Nope. In Webmaster Tools, it says that my site is slower than 70% of the sites and I am trying to improve it. So, I figured out it's better the less the page time load time Google sees. And since, most of the time is taken by these social plugins, I am trying to delay loading them.

[castor_t]

I just ran a test on webpagetest and found that Google Ads are taking almost 3 seconds.

[pontifex]

castor, where in the world are you and how are you connected... i am on a short holiday in a hotel in bavaria and still most of the pages are quick! wonder why you have such high loading times...
P!

[edited by: tedster at 2:36 pm (utc) on May 8, 2010]