How we optimized the social button

No social network can do without social buttons for distributing content. By setting the buttons of social networks on the site, its owner gets new opportunities for the distribution of his content, and social networks - the activity they need inside the network. And that is why the development of social buttons requires meticulousness - you need to make sure that both the site owners and users of the button will work flawlessly.

Under the cut is a list of problems that we identified during the work on our Class button, as well as ways to solve them, which we tested from our own experience.


What for?

ComScore, in its study The Power of Like 2, says that only from November 2011 to March 2012 did the share of “social” (for example, calls for joining the group in social networks) Internet advertising in the US increase from 8.2% to 15.2 % It also mentions a significant increase in coverage due to the fact that the messages of brands that the user liked are seen in the event stream by his friends.

But, in addition to the indisputable advantages, the installation of social buttons can 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 uncontrollable versions of a button. All previous button implementations 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 button loading. If there are problems on the side of the service, the sites that installed the button using the provided installation code could encounter extremely long loading of their pages.
3. The amount of code. Large, heavy buttons load for a long time, in connection with which many regional sites copied the button code to themselves in order to optimize the download. This only exacerbated the problem described in the first paragraph.
4. Low level of statistics collection. We actively use statistical systems (we already talked about this here and here ) and, in particular, 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 close connection of the code on the server with the main site code made it difficult to independently update the button.

What to do?

Realizing the presence 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 an order of magnitude better. What have we done?

1. We developed a convenient constructor that allows you to create a button with a look that fits best into the site design.
2. They made the button connection code asynchronous - it does not block rendering of the site on which the new button is installed. No matter what happens with our servers, your site will work just as well as before.
3. We 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 ability to easily upgrade. If problems arise, we can update the button for all users, regardless of whether they cached our code before or not.
5. We added all the statistics we need to continue to work effectively on improving the button.
6. They created a separate infrastructure for the button, which later became the platform for other widgets, such as the group widget. The list of available widgets can be found here .

In order not to be unfounded, we want to bring to your attention a small analysis of the operation of social buttons displayed in the infographic in Fig. 1



The rendering time of social buttons was obtained using synthetic tests. Several empty HTML pages were created, for each button its own, the onload time of these pages was repeatedly measured and the average time for each of them was calculated. Server-side rendering time was obtained from public sources, so there is only VK , because for other social networks, similar information was not 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 commentary, we accept questions about social buttons, and we will also be happy if someone shares their optimization experience.