Social Buttons Slowing You Down? Speed Load Times In GenesisIt happens all of the time: the client wants the social networking share buttons not only on the individual posts but the sidebar and/or the blog index page, also.
When that happens, the loop forces the social icons to load individually for each post, all the way down the page and the sidebar and anything after the content is forced to wait.
The site I was working on recently had just such a case. Facebook and Twitter sharing buttons were causing the home page to take approximately 28 seconds to load until the sidebar could appear.
How To Workaround This Page-Load Disaster In Genesis
With a little brainstorming, I came up with a solution by investigating the code for each button. In most cases the code was a pairing of visual text/CSS elements followed by a script. Here is an example using the “official” Twitter button:
The page doesn’t require that the script be buddies with the other part in order to render, so I posited that I could put the script at the end, just before the closing tag, which is ‘genesis_after_footer’ at the bottom of the Simple Hooks plugin.
For those not familiar with the Genesis Hooks or Child Themes take a look at How to Build a Genesis Child Theme.
I separated the scripts from the other code next, and discovered that, by doing so, I eliminated several requests to that script on the individual posts that requested the same scripts at the top and the bottom of the post as a nice side benefit.
This made the content in the post more efficient, especially on the sites where the client wants to list all of their Twitter IDs in the sidebar: you need only paste the display portions in the sidebar and call out the scripts once at the end of the pageload.
Pair This Code With Both The Twitter And Facebook Display Codes
Why You Should Wrap Your Buttons in DIVs
Note that I wrap my buttons in DIVs and the entire area in a div so I can move it around any way I want. Scroll down to ‘genesis_after_post_content’ in Simple Hooks and enter the following code into the box, whilst enabling Shortcodes and PHP in the hook to place the buttons immediately before the post meta info:
From there, it’s a simple effort to make the buttons appear in whatever alignment using CSS since it is well-tagged for CSS manipulation and you can change them around and also place a copy under the post title with a different appearance without sacrificing pageload times, since they all are coming from scripts in the footer.
This technique also works with the Twitter follow button because it uses the same .js file from Twitter. I was disappointed that this doesn’t work with StumbleUpon because that entire display is created with the script, however, that script loads so fast I don’t care.
It’s instantaneously there while the Twitter and Facebook buttons take an order of magnitude or more longer to display. The Google + code has recently split their render code from the script: http://www.google.com/webmasters/+1/button/
If It Works, Go With It
I’m sure this isn’t the only way and I’ve got a feeling that it may not be the best way to speed up the display of these social share buttons, but it’s what I’ve come up with and it’s getting the job done very nicely on every framework I’ve used it on to date.
If you want an in-dept review of Genesis, be sure to read: Genesis Theme Framework Review: Gorgeous, Flexible, and Insanely Powerful
Sign Up Now for Free Updates and Exclusive Content:
Learn how to write killer content, get more traffic, make money, and more by entering your email below: