How we optimized the social button

No social network can do without social buttons to distribute content. By installing the social network buttons on the site, its owner receives new opportunities for distributing their content, and social networks - the activity they need within the network. And that is why the development of social buttons requires meticulousness - you need to make sure that the buttons will work flawlessly for website owners and users.

Under the cut - a list of problems that we identified during the work on our class button, as well as ways to solve them, which we checked on our own experience.


What for?
')
ComScore, in its study The Power of Like 2, says that it was only from November 2011 to March 2012 that the share of “social” (for example, endowed with calls to join the group on social networks) of Internet advertising in the United States increased from 8.2% to 15.2 % There is also mentioned a significant increase in coverage due to the fact that messages from brands that liked the user, see in the tape of events his friends.

But, in addition to the indisputable advantages, the installation of social buttons may entail certain risks associated with the stability of the site and its security. When connecting a button, the developer must be sure that the button code is safe for users, and that the method of connecting it does not block the rendering of the site on which this button is installed.

Classmates released their first Class button in 2010. Since then, she has gone through several stages of change.

What's up, Doc?

So, what problems have we identified for ourselves?

1. Existence in the wild of several unmanaged versions of the button. All previous implementations of the buttons did not allow us to automatically change the design and correct critical errors for those users who have already cached the button code in their browser.
2. Synchronous, blocking loading buttons. If there are problems on the service side, the websites that installed the button using the provided installation code could face extremely long loading of their pages.
3. The amount of code. Large, heavy buttons are loaded for a long time, in connection with which many regional sites copied the button code to themselves in order to optimize the load. This only aggravated the problem described in the first paragraph.
4. Low statistics collection. We actively use statistical systems (we have already talked about this here and here ) and, in particular, we collect statistics on how people use our site. The lack of good statistics in such an important component as the social button deprived us of the opportunity to qualitatively improve its effectiveness.
5. The tight connection between the code on the server and the main site code made independent button updates difficult.

What to do?

Realizing the existence of all these problems, we decided to change the situation by creating a new button. Although outwardly, it is not too different from the previous ones, but it works much better. What have we done?

1. We have developed a convenient designer that allows you to create a button with the look that best fits into the site design.
2. Made the button connection code asynchronous - it does not block the rendering of the site on which the new button is installed. Whatever happens to our servers, your site will work just as well as before.
3. Optimized the button code - it became smaller and much faster. The loading time of our button is several times less than that of other social buttons.
4. Introduced the possibility of easy updates. In case of problems, we can update the button for all users, regardless of whether they have cached our code before or not.
5. Added all the statistics we need to continue to work effectively on improving the button.
6. We created a separate infrastructure for the button, which later became a platform for other widgets, such as the groups widget. A list of available widgets can be found here .

Not to be unfounded, we want to present to your attention a small analysis of the work of social buttons, displayed in the infographic in Fig. one



Time rendering social buttons obtained using synthetic tests. Several empty HTML pages were created, for each button its own, the onload time of these pages was measured several times and the average time for each of them was calculated. Server rendering time obtained from public sources, so there is only VK , because for other social networks, no such information was found on the Internet.

In general, our team is very pleased with the result, and we can proudly say that our “Class” button is the fastest among all existing analogues. In the comments, we accept questions about social buttons, and we will be happy if someone shares their optimization experience.