Jak asynchronicznie załadować przycisk Facebooka?
Prawie każdy blog, strona internetowa ma przycisk polubienia, udostępnienia lub śledzenia na Facebooku.
Jak być może wiesz, domyślny kod udostępniania społecznościowego Facebooka jest ładowany synchronicznie wraz z zasobami Twojej strony internetowej.
Zwiększy to czas ładowania witryny i zaszkodzi wynikowi SEO. To po prostu nie jest SEO, ale także psuje wrażenia użytkownika.
Jestem pewien, że przycisk udostępniania społecznościowego na Facebooku jest niezbędny, ale nie jako rzeczywisty kod do wyświetlenia jako pierwszy. Istnieje wiele blogów lub witryn, które mają dłuższy czas ładowania strony ze względu na domyślny kod Facebooka.
Asynchroniczne użycie kodu Facebooka pomoże Ci załadować stronę internetową o 0,5 – 1,5 sekundy szybciej. To jest to, co musisz szybciej ładować przycisk polubienia, udostępniania lub śledzenia Facebooka.
Oto kod, który otrzymałem Programista Facebooka za polubienie i udostępnienie newsblog.pl.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>
Teraz wszystko, co muszę dodać, to podążanie za pojedynczą linią w moim kodzie, co pomoże szybciej ładować przyciski.
js.async=true;
Tak więc zmodyfikowany kod wyglądałby następująco:
<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>
Czy to nie jest łatwe?
Aktualizacja: nowe fragmenty kodu oferowane przez Facebook nie wymagają powyższego, ponieważ zawierają skrypt asynchroniczny, który już widać poniżej.
<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>
Używasz WordPressa? Sprawdź ten post, który wyjaśnia, jak zoptymalizować pod kątem wydajności bez wtyczki. A jeśli szukasz wtyczki do mediów społecznościowych, która nie zwalnia, to gorąco polecam Nowaszare.
Jestem pewien, że chcesz, aby Twoja strona ładowała się szybciej i mam nadzieję, że to ci pomoże.
Podobał Ci się artykuł? A co powiesz na dzielenie się ze światem?