Facebook 버튼을 비동기식으로 로드하는 방법은 무엇입니까?
거의 모든 블로그, 웹사이트에는 Facebook 좋아요, 공유 또는 팔로우 버튼이 있습니다.
아시다시피 기본 Facebook 소셜 공유 코드는 웹 페이지 리소스와 함께 동시에 로드됩니다.
이렇게 하면 웹사이트 로드 시간이 늘어나고 SEO 점수가 손상됩니다. 그것은 SEO가 아니라 사용자 경험을 망칩니다.
나는 Facebook 소셜 공유 버튼이 필수적이지만 먼저 표시할 실제 코드가 아니라고 확신합니다. 기본 Facebook 코드로 인해 페이지 로드 시간이 더 긴 블로그나 웹사이트가 많습니다.
Facebook 코드를 비동기식으로 사용하면 웹 페이지를 0.5~1.5초 더 빠르게 로드할 수 있습니다. Facebook 좋아요, 공유 또는 팔로우 버튼을 더 빠르게 로드해야 하는 것입니다.
다음은 내가 얻은 코드입니다. 페이스북 개발자 koreantech.org.com에 좋아요 및 공유
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=xxxxxxxxxx&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
이제 추가해야 할 것은 버튼을 더 빨리 로드하는 데 도움이 되는 코드의 한 줄을 따르는 것입니다.
js.async=true;
따라서 수정된 코드는 다음과 같습니다.
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.async=true;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=xxxxxxxxxx&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
쉽지 않니?
업데이트: Facebook에서 제공하는 새로운 코드 스니펫은 이미 아래에서 볼 수 있는 스크립트 비동기를 포함하므로 위의 내용이 필요하지 않습니다.
<div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v7.0" nonce="JekfmCeX"></script>
워드프레스를 사용하시나요? 플러그인 없이 성능을 최적화하는 방법을 설명하는 이 게시물을 확인하십시오. 그리고 속도가 느려지지 않는 소셜 미디어 플러그인을 찾고 있다면 적극 추천합니다. 노바쉐어.
귀하의 웹 페이지가 더 빨리 로드되기를 원하신다고 확신하며 이것이 귀하에게 도움이 되기를 바랍니다.
기사를 재미있게 읽으셨나요? 세계와 공유하는 것은 어떻습니까?