カットの下-クラスボタンの作業中に特定した問題のリストと、それを解決する方法。これは、私たち自身の経験からテストしました。
なんで？
ComScoreの調査The Power of Like 2では、2011年11月から2012年3月までに「ソーシャル」のシェア（ソーシャルネットワークでのグループへの参加の呼びかけ）のみを行ったと述べています。 ％ また、ユーザーが気に入ったブランドのメッセージが友人によってイベントストリームに表示されるため、カバレッジが大幅に増加することにも言及しています。
しかし、議論の余地のない利点に加えて、ソーシャルボタンのインストールには、サイトとそのセキュリティの安定性に関連する特定のリスクが伴う可能性があります。 ボタンを接続する場合、開発者はボタンコードがユーザーにとって安全であり、接続方法がこのボタンがインストールされているサイトのレンダリングをブロックしないことを確認する必要があります。
クラスメートは2010年に最初のクラスボタンをリリースしました。 それ以来、彼女はいくつかの変化段階を経てきました。
元気？
それで、私たちは自分にとってどんな問題を特定しましたか？
- ボタンのいくつかの制御不可能なバージョンの野生の存在。 以前のすべてのボタン実装では、ブラウザのボタンコードを既にキャッシュしているユーザーの設計を自動的に変更し、重大なエラーを修正することはできませんでした。
- 同期、ブロッキングボタンの読み込み。 サービス側に問題がある場合、提供されたインストールコードを使用してボタンをインストールしたサイトでは、ページの読み込みが非常に長くなる可能性があります。
- コードの量。 ダウンロードを最適化するために、多くの地域サイトがボタンコードを自分自身にコピーしたことに関連して、大きくて重いボタンが長時間ロードされます。 これは、最初の段落で説明した問題を悪化させただけです。
- 低レベルの統計収集。 私たちは積極的に統計システムを使用しており（これについてはこことここですでに説明しました ）、特に、人々が私たちのサイトをどのように使用しているかに関する統計を収集します。 ソーシャルボタンなどの重要なコンポーネントに適切な統計情報がないため、質的にその有効性を向上させる機会が奪われました。
- サーバー上のコードとメインサイトコードの密接な接続により、ボタンを個別に更新することが困難になりました。
どうする
これらすべての問題の存在を認識して、新しいボタンを作成して状況を変えることにしました。 外見上は前のものとそれほど違いはありませんが、1桁上手く機能します。 私たちは何をしましたか？
- サイトデザインに最適な外観のボタンを作成できる便利なデザイナーを開発しました。
- 彼らはボタン接続コードを非同期にしました-新しいボタンがインストールされているサイトのレンダリングをブロックしません。 サーバーで何が起きても、サイトは以前と同じように機能します。
- ボタンコードを最適化しました-小さくなり、はるかに高速になりました。 ボタンの読み込み時間は、他のソーシャルボタンの読み込み時間の数倍です。
- 簡単にアップグレードする機能が導入されました。 問題が発生した場合、コードを以前にキャッシュしたかどうかに関係なく、すべてのユーザーのボタンを更新できます。
- ボタンの改善に効果的に取り組むために必要なすべての統計を追加しました。
- 彼らはボタン用の独立したインフラストラクチャを作成しました。これは後にグループウィジェットなどの他のウィジェットのプラットフォームになりました。 利用可能なウィジェットのリストはこちらにあります 。
根拠がないようにするために、図のインフォグラフィックに表示されるソーシャルボタンの操作の小さな分析に注意を向けたいと思います。 1
ソーシャルボタンのレンダリング時間は、合成テストを使用して取得されます。 いくつかの空のHTMLページが作成され、各ボタンごとに、これらのページのオンロード時間が繰り返し測定され、各ページの平均時間が計算されました。 サーバー側のレンダリング時間は公開ソースから取得されたため、 VKのみがあります。 他のソーシャルネットワークでは、インターネット上で同様の情報は見つかりませんでした。
一般的に、私たちのチームは結果に非常に満足しており、「クラス」ボタンは既存のすべてのアナログの中で最速であると誇らしげに言うことができます。 解説では、ソーシャルボタンに関する質問を受け付けています。また、誰かが最適化の経験を共有していただければ幸いです。