Where is all of this facebook code coming from? (SLOW SITE)

??? You installed a plugin that adds Facebook features did you not ???

I did indeed, but it shouldn’t be putting in so much code. Code is being duplicated.

I can’t tell you the problem exactly, without analyzing that plugin. I can tell you that I have analyzed several Facebook plugins, which I won’t name, and they have all been horrible– sloppy code, slow, throwing errors left and right. Even a vanilla “like” button written directly into the page (no plugin involved) more often than not adds what I consider a significant lag– not huge but definitely measurable. How and where you load it can effect how bad the lag ‘feels’ as well. Incorporating third party elements is a big headache no matter what you do.

Do you have any thoughts on how to clean up all this code? If you look at one of my single pages you’ll see I use the like button on the sharer that floats.

I also have another like button at the bottom of the content that shows faces of friends.

Then I have the like button for our site at the top of the side bar.

Then there is the like box (which is just code from facebook I paste in a text widget.)

Is there a way to use the facebook plug in like button in place of the digg digg one and make it look the same as if it was the digg digg one? Any other advice?

Without seeing the code for the plugin, not really so I am guessing, but it seems as if it is loading the Javascript and each time it creates a button instead of loading it once in the header or footer of the page. You really have no choice but to root out how it works and alter it. My experience is that it usually isn’t worth it. You can write your own plugin by the time reverse engineer somebody else’s logic and make it do what you want.

Facebook made that plugin right? I would of thought they would of used somethign like this to load the js

<script>(function(d, s) {
var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.src = url; js.id = id;
fjs.parentNode.insertBefore(js, fjs);
};
load(‘//connect.facebook.net/en_US/all.js#xfbml=1’, ‘fbjssdk’);
load(‘https://apis.google.com/js/plusone.js&#8217;, ‘gplus1js’);
load(‘//platform.twitter.com/widgets.js’, ‘tweetjs’);
load(‘//widgets.digg.com/buttons.js’, ‘digjs’);
}(document, ‘script’));</script>

But as always, they decide to bombard you with stupid ammounts of js. It would be better to implement the features you require yourself and that way you have more control over where these scripts load and can implement such a script like the one above.

Your sites loading issues are primarily js related.

858.6KiB of JavaScript is parsed during initial page load.

Which in my experience is like loading another website or two in some cases in javascript alone.

Page load time: 10.40s
Total page size: 1.62MB
Total number of requests: 183

Not being funny, but you could seriously do with a tune up.

<link rel=’stylesheet’ id=’tentblogger-rss-reminder-css’ href=’https://noahsdad.com/wp-content/plugins/tentblogger-rss-reminder/css/style.css?ver=3.4.1&#8242; type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’fb-css’ href=’https://noahsdad.com/wp-content/plugins/facebook/style/style.css?ver=1.0&#8242; type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’bootstrap-css’ href=’https://cdn.noahsdad.com/wp-content/themes/standard/css/lib/bootstrap.css?ver=3.4.1&#8242; type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’bootstrap-responsive-css’ href=’https://cdn.noahsdad.com/wp-content/themes/standard/css/lib/bootstrap-responsive.css?ver=3.4.1&#8242; type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’standard-css’ href=’https://cdn.noahsdad.com/wp-content/themes/eightbit-standard-child-theme-kit-23729a7/style.css?ver=3.4.1&#8242; type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’standard-videopress-css’ href=’https://cdn.noahsdad.com/wp-content/themes/eightbit-standard-child-theme-kit-23729a7/css/theme.videopress.css?ver=3.4.1&#8242; type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’standard-activity-tabs-css’ href=’https://cdn.noahsdad.com/wp-content/themes/standard/lib/activity/css/widget.css?ver=3.4.1&#8242; type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’gcse-widget-css’ href=’https://cdn.noahsdad.com/wp-content/themes/standard/lib/google-custom-search/css/widget.css?ver=3.4.1&#8242; type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’standard-ad-300×250-widget-css’ href=’https://cdn.noahsdad.com/wp-content/themes/standard/lib/ad-300×250/css/widget.css?ver=3.4.1&#8242; type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’standard-ad-125×125-widget-css’ href=’https://cdn.noahsdad.com/wp-content/themes/standard/lib/ad-125×125/css/widget.css?ver=3.4.1&#8242; type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’standard-ad-468×60-css’ href=’https://cdn.noahsdad.com/wp-content/themes/standard/lib/ad-468×60/css/widget.css?ver=3.4.1&#8242; type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’standard-personal-image-widget-css’ href=’https://cdn.noahsdad.com/wp-content/themes/standard/lib/personal-image/css/widget.css?ver=3.4.1&#8242; type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’standard-influence-css’ href=’https://cdn.noahsdad.com/wp-content/themes/standard/lib/influence/css/widget.css?ver=3.4.1&#8242; type=’text/css’ media=’all’ />

Those stylesheets could be combined and compressed.

Should move you google analytics and put it down near the bottom.

All you facebook scripts should be put right at the bottom.

For example the facebook like box.
https://developers.facebook.com/docs/reference/plugins/like-box/

When you create it you get two parts to it.

first like this:
<div id=”fb-root”></div>
<script>(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_GB/all.js#xfbml=1&appId=your app id”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

second like this :

<div class=”fb-like-box” data-href=”https://www.facebook.com/platform&#8221; data-width=”292″ data-show-faces=”true” data-stream=”true” data-header=”true”></div>

Put the first script which is js, right at the bottom, in your footer.php above the closing </body> tag.

Then place the second part where ever you want it to display. I.e in a widget.

Facebook is causing your site to load slowly
blocking of page rendering.

https://static.ak.fbcdn.net/rsrc.php/v2/yI/r/UtF7rMWT5EN.js (570.6KiB)
https://static.ak.fbcdn.net/rsrc.php/v2/yu/r/Cs62Mw2ydAh.js (96.0KiB)
https://static.ak.fbcdn.net/rsrc.php/v2/yH/r/8U6R6ANV56e.js (44.5KiB)
https://static.ak.fbcdn.net/rsrc.php/v2/yX/r/AhktXCJ4AD1.js (41.9KiB)
https://static.ak.fbcdn.net/rsrc.php/v2/yI/r/HyTVfOLb4v3.js (38.0KiB)
https://static.ak.fbcdn.net/rsrc.php/v2/yr/r/xH0QJQfsOa2.js (35.0KiB)
https://s-static.ak.facebook.com/connect/xd_arbiter.php?version=9 (20.8KiB of inline JavaScript)
https://static.ak.fbcdn.net/rsrc.php/v2/yF/r/A3_4Itx-5zc.js (4.7KiB)

So I would drop that plugin and manually add it.

Need help and I will be more than willing.
I do have a plugin for loading share button on posts, with defered js.
https://diywpblog.com/social-media-plugin-for-wordpress-with-defered-javascript/

Hope this helps

Facebook made that plugin right? I would of thought they would of used…

Where FaceBook is concerned, if it makes sense that is exactly what I don’t expect.

It would be better to implement the features you require yourself…

I completely agree. I have looked at a number of these ‘social’ plugins and they have been poorly done ( but haven’t yet looked at Matthew Horne’s plugin ?? )

Do what Matthew Horne said. If you have trouble with the details come back.

@matthew,

Thanks for taking time to take a look at things. I really appreciate it. That Facebook code is really slowing down my site

I like the pop up box that is in the facebook plug in that suggests to people stories and pops up at the bottom of the screen (do you know which one I’m talking about?)

That’s really the main reason I use that plug in. Everything else I think we can put in manually. Do you know if that suggest box can be put in without the plug in?

And yes, I need a huge tune up. My home page is almost 2 mb..I really want to get that down to a mb or under.

I’m sort of learning as I go so any help you could provide would be awesome. Do you skype by chance? May be easier.

Thanks again for the help.

My plugin might not be 100% right to some, but it works and does what I wanted it too, which was simply add share buttons below posts and defer the javascript. Im sure there is something that could be refined in the eyes of others, there usually is.

For the reccomendation bar

https://developers.facebook.com/docs/reference/plugins/recommendationsbar/

Use that, implement manually, place the java to the bottom. and the div id in the footer also. I havn’t tested it yet, but from reading the info on that page, it says its the pop up recommendation box, so should work.

As the other features of facebook all seem to use the same script, you should only need to implement the javascript once, and place it in footer.php or if your theme has somewhere to place java in the footer via the options panel, then do that.

Then for facebook like, simply add the div where ever you want other social features to appear such as the like box, ect in a widget.

Hope this helps

Thanks Matthew.

I like how the digg digg plug in I’m using uses the floating sharers. Do you know if there plug in is putting in the facebook javascript also? I can’t really tell.

Hi Matt, thanks for the contribution. I wanted to customise where the Like button appears on my product pages.

I tried using the generic fb html they provide on their dev site, but I’ve noticed your plugin shows both the proper product image and makes users comment on their ‘Like’.

For me it has now come down to either adding another Meta Data plugin to correctly parse the product images, or just change the location of where the like button from your plugin appears. I posted in this thread because I believe adding another independent plugin would slow down our web pages considerably. What does everyone else think?

Would would you recommend I do? I just wanted to put the Like button underneath the ‘Add to cart’ button in my wp e commerce checkout along side g+ and twitter buttons.

Any help would be greatly appreciated. Thanks.

I’ve not understand. How to defer parsing javascript of facebook??

T.y.

facebook i believe but i may be wrong uses the same peiece of js.

So try this script found here

Look near the bottom where it says for generic themes. The last peice of coding, remove the other social media links if you only intent to use facebook. Add it to your functions.php and that will load the facebook jsk.

Let me know if it helps.

Sorry i’ve not understand hot to do it. I’ve this problem:

Defer parsing of JavaScript

933.7KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.

https://static.ak.fbcdn.net/rsrc.php/v2/yo/r/ssI5dhaSfA6.js (569.2KiB)
https://static.ak.fbcdn.net/rsrc.php/v2/yd/r/0EzHlWYG2R-.js (96.0KiB)
https://w.sharethis.com/share4x/js/st.318bce8aee8cf5a4e4ca2924c68269a7.js (68.2KiB)
https://static.ak.fbcdn.net/rsrc.php/v2/yO/r/nOspxDYdyk_.js (44.3KiB)
https://static.ak.fbcdn.net/rsrc.php/v2/yX/r/AhktXCJ4AD1.js (41.9KiB)
https://static.ak.fbcdn.net/rsrc.php/v2/y7/r/bWt6G76Xdum.js (34.1KiB)
https://static.ak.fbcdn.net/rsrc.php/v2/yi/r/gkANllSOhvG.js (21.6KiB)
https://s-static.ak.facebook.com/connect/xd_arbiter.php?version=9 (20.8KiB of inline JavaScript)

With our script here can i resolve this “problem”?