페이스북 버튼 비동기 로딩 방법
대부분의 블로그나 웹사이트에는 페이스북 좋아요, 공유, 팔로우 버튼이 흔히 사용됩니다.
기본적으로 페이스북 소셜 공유 코드는 웹페이지 리소스와 동시에 로드되어 페이지 로딩 시간을 증가시키고 SEO 순위를 저해하는 요인이 될 수 있습니다. 이는 사용자 경험에도 부정적인 영향을 미칩니다.
페이스북 소셜 공유 버튼은 웹사이트에 필수적인 요소이지만, 페이지 로딩 시 가장 먼저 처리해야 할 코드는 아니라고 생각합니다. 많은 블로그나 웹사이트에서 페이스북 기본 코드로 인해 페이지 로딩 시간이 길어지는 현상을 볼 수 있습니다.
페이스북 코드를 비동기적으로 로드하면 웹페이지 로딩 속도를 0.5초에서 1.5초 정도 단축할 수 있습니다. 즉, 페이스북 좋아요, 공유, 팔로우 버튼을 더 빠르게 표시할 수 있게 됩니다.
다음은 제가 페이스북 개발자 페이지에서 얻은 코드를 기반으로 한 개선된 방법입니다. 페이스북 개발자 페이지에서 좋아요 및 공유 기능에 대한 자세한 정보를 확인할 수 있습니다.
<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>
정말 간단하지 않나요?
업데이트: 페이스북에서 제공하는 새로운 코드 스니펫에는 이미 스크립트 비동기 설정이 포함되어 있어 위에서 설명한 과정이 필요하지 않습니다. 최신 코드는 다음과 같습니다.
<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>
워드프레스를 사용하고 계신가요? 플러그인 없이 성능을 최적화하는 방법에 대한 글을 참고하시거나, 속도 저하 없이 사용할 수 있는 소셜 미디어 플러그인을 찾고 있다면 노바쉐어를 추천합니다.
웹페이지 로딩 속도 개선에 이 정보가 도움이 되기를 바랍니다.
재미있게 읽으셨다면, 다른 사람들과 이 정보를 공유해 보시는 건 어떠세요?