ぷろめし|プログラミングよりも飯が好きHomeHomeFacebookフェイスブックの「いいねボタン」たったの1行で7倍速!遅いボタンを高速化する方法!フェイスブックの「いいね」ボタンが遅い。物凄くストレスだったので調べてみた。usersSNSのボタン読み込みを高速化する方法なら自作ボタンが一番速くなるhttp://www.promeshi.com/archives/2476Twitterやフェイスブック、ライン、はてぶなどのSNSの共有ボタンは、ブログやサイトにとって、今や無くてはならない要素の一つになりました。まとめ遅いフェイスブックのいいねボタンは7倍早くなる検索の評価にも直結するページの読込スピード。このスピードを遅くしている元凶「いいねボタン」。いいねボタンの読込が完了するまで他の要素を読み込まないため待ち時間が長く、途中離脱してしまうユーザーが現れないか心配。削除するには影響力が大きすぎるサービスなので何とか高速化する方法を模索します。外部ツールには同期・非同期があるいいねボタンなどの外部ツールには、同期・非同期という種類があります。それぞれメリットがあるのですがスピードを重要視するなら圧倒的に非同期通信がオススメです。非同期通信は、色々な処理を同時に行えるように配慮された方法なので「いいねボタン」の処理が遅くても他の処理を進める事ができるのです。具体的なソースソースに付け加える1行は下記です。これだけで7倍早くなります。true;加える位置はハイライト表示している6行目です。「async」は非同期という意味です。'facebook-jssdk'));</script>たったこれだけのソースで処理スピードが7倍早くなっています。確認してみたら早くなってるはずフェイスブックのいいねボタンの読込時間を確認してみたところ、コードの追加前と追加後では明らかに変化が出ています。ある一部分ですが読み込みスピードが7.5倍になっています!全体の読み込みスピードを計算しても5倍以上早くなっています。まとめ多少、煽ったタイトルですみません。5倍早くなるのは魅力的ですよね。検索対策も様々な要素を最適化しなければ上位表示されなくなってきた昨今、ページの読込スピードも重要な評価要素です。拡散ツールで足を引っ張られていては泣くに泣けません。真性のお家大好きフリーランスです。プログラムよりご飯の方が断然好き!博多出身のデブデザイナー。Cloudがそんなに良いのか?CCとCSの違い。迷っているなら買ってよし!フォトショップのドロップレットが通信できない。