Forums

WordPress › Support » Plugins and Hacks

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

  1. rick4him
    Member
    Posted 10 months ago #

    I am noticing a huge decrease in load time for my site and after running some speed tools I'm seeing a lot of Facebook code being put into my theme. I have no idea where all of this code is coming from, and if it's necessary. Can someone please help me figure out what's going on and how to fix it? Thanks.

    Here is some of the code i'm seeing:

    http://external.ak.fbcdn.net/safe_image.php?d=AQAelvALKbSNIBJe&url=http%3A%2F%2Fnoahsdad.com%2Fwp-content%2Fuploads%2…
    http://external.ak.fbcdn.net/safe_image.php?d=AQAjC1qOIUYa7hj_&url=http%3A%2F%2Fnoahsdad.com%2Fwp-content%2Fuploads%2…
    http://external.ak.fbcdn.net/safe_image.php?d=AQCsCeTaaDS3BBU7&url=http%3A%2F%2Fnoahsdad.com%2Fwp-content%2Fuploads%2…
    http://external.ak.fbcdn.net/safe_image.php?d=AQDTmgihhDc1PJpE&url=http%3A%2F%2Fnoahsdad.com%2Fwp-content%2Fuploads%2…
    http://connect.facebook.net/en_US/all.js
    https://s-static.ak.facebook.com/connect/xd_arbiter.php?version=9#channel=f23cfb1524&origin=http%3A%2F%2Fnoahsdad.com…
    http://www.facebook.com/dialog/oauth?api_key=225666717516269&app_id=225666717516269&channel_url=http%3A%2F%2Fstatic.a…
    http://static.ak.facebook.com/connect/xd_arbiter.php?version=9
    http://www.facebook.com/images/fb_logo_small.png
    http://external.ak.fbcdn.net/safe_image.php?d=AQAelvALKbSNIBJe&url=http%3A%2F%2Fnoahsdad.com%2Fwp-content%2Fuploads%2…
    http://external.ak.fbcdn.net/safe_image.php?d=AQAjC1qOIUYa7hj_&url=http%3A%2F%2Fnoahsdad.com%2Fwp-content%2Fuploads%2…
    http://external.ak.fbcdn.net/safe_image.php?d=AQCsCeTaaDS3BBU7&url=http%3A%2F%2Fnoahsdad.com%2Fwp-content%2Fuploads%2…
    http://external.ak.fbcdn.net/safe_image.php?d=AQDTmgihhDc1PJpE&url=http%3A%2F%2Fnoahsdad.com%2Fwp-content%2Fuploads%2…

    http://static.ak.facebook.com/connect/xd_arbiter.php?version=9#cb=f9c736324&origin=http%3A%2F%2Fnoahsdad.com%2Ff23cfb…
    http://static.ak.facebook.com/connect/xd_arbiter.php?version=9#channel=f23cfb1524&origin=http%3A%2F%2Fnoahsdad.com&ch…
    https://s-static.ak.facebook.com/connect/xd_arbiter.php?version=9#channel=f23cfb1524&origin=http%3A%2F%2Fnoahsdad.com…

    http://wordpress.org/extend/plugins/facebook/

  2. s_ha_dum
    Member
    Posted 10 months ago #

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

  3. rick4him
    Member
    Posted 10 months ago #

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

  4. s_ha_dum
    Member
    Posted 10 months ago #

    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.

  5. rick4him
    Member
    Posted 10 months ago #

    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?

  6. s_ha_dum
    Member
    Posted 10 months ago #

    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.

  7. Matthew Horne
    Member
    Posted 10 months ago #

    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', '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.

  8. Matthew Horne
    Member
    Posted 10 months ago #

    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='http://noahsdad.com/wp-content/plugins/tentblogger-rss-reminder/css/style.css?ver=3.4.1' type='text/css' media='all' />
    <link rel='stylesheet' id='fb-css' href='http://noahsdad.com/wp-content/plugins/facebook/style/style.css?ver=1.0' type='text/css' media='all' />
    <link rel='stylesheet' id='bootstrap-css' href='http://cdn.noahsdad.com/wp-content/themes/standard/css/lib/bootstrap.css?ver=3.4.1' type='text/css' media='all' />
    <link rel='stylesheet' id='bootstrap-responsive-css' href='http://cdn.noahsdad.com/wp-content/themes/standard/css/lib/bootstrap-responsive.css?ver=3.4.1' type='text/css' media='all' />
    <link rel='stylesheet' id='standard-css' href='http://cdn.noahsdad.com/wp-content/themes/eightbit-standard-child-theme-kit-23729a7/style.css?ver=3.4.1' type='text/css' media='all' />
    <link rel='stylesheet' id='standard-videopress-css' href='http://cdn.noahsdad.com/wp-content/themes/eightbit-standard-child-theme-kit-23729a7/css/theme.videopress.css?ver=3.4.1' type='text/css' media='all' />
    <link rel='stylesheet' id='standard-activity-tabs-css' href='http://cdn.noahsdad.com/wp-content/themes/standard/lib/activity/css/widget.css?ver=3.4.1' type='text/css' media='all' />
    <link rel='stylesheet' id='gcse-widget-css' href='http://cdn.noahsdad.com/wp-content/themes/standard/lib/google-custom-search/css/widget.css?ver=3.4.1' type='text/css' media='all' />
    <link rel='stylesheet' id='standard-ad-300x250-widget-css' href='http://cdn.noahsdad.com/wp-content/themes/standard/lib/ad-300x250/css/widget.css?ver=3.4.1' type='text/css' media='all' />
    <link rel='stylesheet' id='standard-ad-125x125-widget-css' href='http://cdn.noahsdad.com/wp-content/themes/standard/lib/ad-125x125/css/widget.css?ver=3.4.1' type='text/css' media='all' />
    <link rel='stylesheet' id='standard-ad-468x60-css' href='http://cdn.noahsdad.com/wp-content/themes/standard/lib/ad-468x60/css/widget.css?ver=3.4.1' type='text/css' media='all' />
    <link rel='stylesheet' id='standard-personal-image-widget-css' href='http://cdn.noahsdad.com/wp-content/themes/standard/lib/personal-image/css/widget.css?ver=3.4.1' type='text/css' media='all' />
    <link rel='stylesheet' id='standard-influence-css' href='http://cdn.noahsdad.com/wp-content/themes/standard/lib/influence/css/widget.css?ver=3.4.1' 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.
    http://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="http://www.facebook.com/platform" 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.

    http://static.ak.fbcdn.net/rsrc.php/v2/yI/r/UtF7rMWT5EN.js (570.6KiB)
    http://static.ak.fbcdn.net/rsrc.php/v2/yu/r/Cs62Mw2ydAh.js (96.0KiB)
    http://static.ak.fbcdn.net/rsrc.php/v2/yH/r/8U6R6ANV56e.js (44.5KiB)
    http://static.ak.fbcdn.net/rsrc.php/v2/yX/r/AhktXCJ4AD1.js (41.9KiB)
    http://static.ak.fbcdn.net/rsrc.php/v2/yI/r/HyTVfOLb4v3.js (38.0KiB)
    http://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)
    http://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.
    http://diywpblog.com/social-media-plugin-for-wordpress-with-defered-javascript/

    Hope this helps

  9. s_ha_dum
    Member
    Posted 10 months ago #

    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.

  10. rick4him
    Member
    Posted 10 months ago #

    @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.

  11. Matthew Horne
    Member
    Posted 10 months ago #

    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

  12. rick4him
    Member
    Posted 10 months ago #

    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.

  13. photographypool1
    Member
    Posted 10 months ago #

    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.

  14. Turismo in
    Member
    Posted 10 months ago #

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

    T.y.

  15. Matthew Horne
    Member
    Posted 10 months ago #

    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.

  16. Turismo in
    Member
    Posted 10 months ago #

    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.

http://static.ak.fbcdn.net/rsrc.php/v2/yo/r/ssI5dhaSfA6.js (569.2KiB)
http://static.ak.fbcdn.net/rsrc.php/v2/yd/r/0EzHlWYG2R-.js (96.0KiB)
http://w.sharethis.com/share4x/js/st.318bce8aee8cf5a4e4ca2924c68269a7.js (68.2KiB)
http://static.ak.fbcdn.net/rsrc.php/v2/yO/r/nOspxDYdyk_.js (44.3KiB)
http://static.ak.fbcdn.net/rsrc.php/v2/yX/r/AhktXCJ4AD1.js (41.9KiB)
http://static.ak.fbcdn.net/rsrc.php/v2/y7/r/bWt6G76Xdum.js (34.1KiB)
http://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"?

  17. Matthew Horne
    Member
    Posted 10 months ago #

    function java_to_bottom() {
    if (is_single(array())) { // Change the name to match the name(s) of the pages using the form ?>
    <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('//static.ak.fbcdn.net/rsrc.php/v2/yo/r/ssI5dhaSfA6.js', 'fbjs1');
    load('//static.ak.fbcdn.net/rsrc.php/v2/yd/r/0EzHlWYG2R-.js', 'fbjs2');
    load('//static.ak.fbcdn.net/rsrc.php/v2/yO/r/nOspxDYdyk_.js', 'fbjs3');
    load('//static.ak.fbcdn.net/rsrc.php/v2/yX/r/AhktXCJ4AD1.js', 'fbjs4');
    load('//static.ak.fbcdn.net/rsrc.php/v2/y7/r/bWt6G76Xdum.js', 'fbjs5');
    load('//static.ak.fbcdn.net/rsrc.php/v2/yi/r/gkANllSOhvG.js', 'fbjs6');
    load('https://s-static.ak.facebook.com/connect/xd_arbiter.php?version=9', 'fbjs7');
    load('//w.sharethis.com/share4x/js/st.318bce8aee8cf5a4e4ca2924c68269a7.js', 'shrthis');
    }(document, 'script'));</script>

    <?php } }
    add_action('wp_footer', 'java_to_bottom');

    im not gonna guarantee this will work, but that is how it would be done, then you need to prevent the other scripts loading in the head.

    but to make it clearer for me, can you turn off the minify on w3, it makes it hard to see your source code.

  18. TEST ACCOUNT
    Member
    Posted 6 months ago #

    Hmm.. Great informative discussion. I noticed the same today and it seems ~1MB of facebook code was loading from "s-static.ak.fbcdn.net/rsrc.php". With some debugging I found the cause. Fixed it with implementing HTML5 based like box widget.

    I've created informative post on my blog to get detailed steps: http://icrunched.co/defer-parsing-of-javascript-suggestion-stop-loading-s-static-ak-fbcdn-net-rsrc-php/

  19. Niall Kennedy
    Member
    Plugin Author
    Posted 6 months ago #

    version 1.1 of the Facebook plugin loads JavaScript asynchronously and interprets social plugin markup.

    Adding many mentions to your page will increase the number of required resources as an image is added to the page for each mention.

  20. Capum112
    Member
    Posted 3 months ago #

    estimated,
    How to remove the Social Sharing Buttons from the viewing page which I'm a visitor and it's obstructing the view of the page content.
    It's a floating pluging and it hasn't close or minimize option.
    Also, few ago, when visiting one site with the same issue, this time a blue twitter bird which kept flying over the page content. If I had a shotgun, I would extinguish my screen monitor.
    Thus, as a web guest, how to remove those insane plugins.
    farewell
    *1 Google all afternoon, can't find solution.
    *2 Bump old thread is a problem ?

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.