1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Social Buttons & Their Affect On Site Speed

Discussion in 'Social Networks' started by digitalpoint, Feb 20, 2014.

0
  1. #1
    The (original) problem

    It has always annoyed me how crappy the social buttons we use on this site look on retina screens (modern cell phones). Because they don't use retina resolution images for logos.

    Other (minor) problems

    The buttons are slow... as it turns out, the three buttons we use on this site (Facebook, Twitter and Google+) generate a total of 20 HTTP requests totaling ~116KB for each page view. Not a huge deal, except that some of the HTTP requests are very slow.

    Formatting of the buttons is non-existent. They are rendered inside IFRAMEs, which means you really can't do anything as far as manipulating CSS to make the buttons somewhat match each other or the look/feel of your site.

    It always annoyed me that social networks track users with cookies via the social buttons.

    The solution

    I decided to design my own replacement buttons for Facebook, Twitter & Google+...
    • Utilize vector-based SVG images for the logos so they scale infinitely.
    • The buttons are rendered into the page DOM (meaning you can manipulate them with CSS).
    • The "share" numbers for each network are consolidated into a single number, which allows us to reduce down the total screen real estate required.
    • The "share" numbers are fetched on our end vis API calls that are run in parallel (the total time it takes to get all the numbers is the time it takes the longest single API to respond).
    • The "share" numbers are cached on our end so we don't need to make a ton of API calls for every page view.
    • The rendering script (social.js) is cached in the end user's browser for 1 hour (browsers won't even bother checking if it's been updated, which would require an HTTP request that still included headers).
    • No tracking/cookies required to use.
    The results
    • A single HTTP request is required to render all buttons (1 vs. 20 with the default buttons).
    • The data transfer needed is ~2KB (compared to ~116KB for the default buttons).
    • Overall page load times are SIGNIFICANTLY reduced. For digitalpoint.com, the real-world page load times for users were reduced by 16.12%.
    • User engagement is up is 365% higher (users actually *using* the buttons). This has caused more users coming in to the site from the social networks.
    • The buttons look good on retina screens and can scale even larger if you needed to for whatever reason. An example of how they looked zoomed in:
    upload_2014-2-20_16-27-0.png
    • You can restyle/resize them completely with CSS if you wish. For example a little bit of CSS turns them into this (from http://www.shawnhogan.com):
    upload_2014-2-20_16-28-40.png

    Indirect results

    It's hard to say definitively how much of an affect it's had on some things, but here's some random stats since the new buttons were rolled out:
    • All pages load an average 1.52 seconds faster
    • 0.91% more visitors (works out to many thousands more)
    • 0.14% lower bounce rate

    I rolled out the JavaScript that we use to render the social buttons here so that anyone can use it on their own site... at the end of the day a faster website is always a better website in my opinion.

    https://tools.digitalpoint.com/social-buttons
     
    digitalpoint, Feb 20, 2014 IP
    ryan_uk, Sean101, webcosmo and 3 others like this.
  2. aidanriley629

    aidanriley629 Banned

    Messages:
    429
    Likes Received:
    23
    Best Answers:
    3
    Trophy Points:
    175
    #2
    :) Very nice, thanks.
     
    aidanriley629, Feb 20, 2014 IP
  3. sundaybrew

    sundaybrew Numerati

    Messages:
    7,294
    Likes Received:
    1,260
    Best Answers:
    0
    Trophy Points:
    560
    #3
    Cool - I hate how all the add-ons to a website take longer to load then the content,
     
    sundaybrew, Feb 20, 2014 IP
  4. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,334
    Likes Received:
    2,613
    Best Answers:
    462
    Trophy Points:
    710
    Digital Goods:
    29
    #4
    Me and you both... I like fast. :)
     
    digitalpoint, Feb 20, 2014 IP
    sundaybrew likes this.
  5. BoostSoftware

    BoostSoftware Active Member

    Messages:
    226
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    93
    #5
    I think most people find it annoying. It's good that "Digital Point" found mobile-optimized buttons. The other solution is also to find a platform such as Wordpress that has a plugin for automatically optimizing a site for mobile use.
     
    BoostSoftware, Feb 20, 2014 IP
  6. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #6
    Fast is good, i like fast :) Good job!
     
    webcosmo, Feb 21, 2014 IP
  7. shanker2020

    shanker2020 Well-Known Member

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    108
    #7
    Thanks for sharing
     
    shanker2020, Mar 7, 2014 IP
  8. averyz

    averyz Well-Known Member

    Messages:
    1,228
    Likes Received:
    167
    Best Answers:
    2
    Trophy Points:
    115
    #8
    This is kind of cool, I am going to have to play with the SVG format.

    I never put social media scripts in sites, I have just been making png buttons with a straight link to the social media page. The problem with that is the small buttons can look ragged due to pixels.

    Thanks for sharing Shaun.
     
    averyz, Mar 7, 2014 IP
  9. Lex350

    Lex350 Notable Member

    Messages:
    1,889
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    215
    #9
    IDK, I guess I'm getting old or something. I find all this social stuff a bunch of nonsense. Some websites have so many scripts running it kills the browsing experience.

    I'm going to just stick with plus, fb and twitter for now.
     
    Lex350, Mar 7, 2014 IP
  10. born_star16

    born_star16 Member

    Messages:
    297
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    36
    #10
    Its really hard to make social buttons totally right without affecting the design or page speed. If you use image, it will reduce page speed although only a little bit. As you know slow loading time increases bounce rate. Now you have to find a way out to use plugins without affecting the speed.
     
    born_star16, Mar 11, 2014 IP
  11. vbgamer45

    vbgamer45 Active Member

    Messages:
    85
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    98
    #11
    Neat idea trying the script on one of my sites. Any way to get reports on pages shared from a domain using social buttons
     
    vbgamer45, May 14, 2014 IP
  12. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,334
    Likes Received:
    2,613
    Best Answers:
    462
    Trophy Points:
    710
    Digital Goods:
    29
    #12
    It will automatically log it to your Google Analytics if you use it on the site.
     
    digitalpoint, May 14, 2014 IP