Jakým způsobem lze zrychlit načítání Facebookového tlačítka?
Prakticky každý blog nebo webová stránka obsahuje na svém rozhraní tlačítka pro interakci se sociální sítí Facebook, jako jsou „To se mi líbí“, „Sdílet“ či „Sledovat“.
Standardní kód pro implementaci sdílení na Facebooku se obvykle načítá synchronně, tedy společně s ostatními zdroji webové stránky.
Tento způsob načítání může prodloužit dobu načítání celého webu, což negativně ovlivňuje jeho SEO skóre. Nejde však pouze o SEO, tento postup rovněž zhoršuje celkový uživatelský dojem.
I když je tlačítko pro sdílení na Facebooku důležité, nemělo by být načítáno jako první. Mnoho webových stránek trpí dlouhou dobou načítání právě kvůli standardnímu kódu od Facebooku.
Použitím asynchronního načítání kódu Facebooku můžete dosáhnout zrychlení načítání vaší webové stránky o 0,5 až 1,5 sekundy. To je tedy zásadní pro rychlejší zobrazení tlačítek „To se mi líbí“, „Sdílet“ či „Sledovat“.
Níže uvádím kód, který byl získán od Facebook Developer, konkrétně pro tlačítka „To se mi líbí“ a „Sdílet“ na webu etechblog.cz.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>
Pro zrychlení načítání tlačítek stačí přidat jediný řádek do uvedeného kódu:
js.async=true;
Upravený kód tedy bude vypadat takto:
<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>
Je to opravdu tak jednoduché.
Aktualizace: Novější verze kódu od Facebooku již asynchronní skripty obsahují, jak je vidět níže:
<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>
Pokud používáte redakční systém WordPress, doporučujeme vám přečíst si tento článek, který popisuje optimalizaci výkonu bez použití pluginů. V případě, že hledáte plugin pro sociální média, který nezpomaluje načítání stránky, vřele doporučujeme Novashare.
Věříme, že vás potěší rychlejší načítání vašeho webu, a doufáme, že vám tento článek byl užitečný.
Líbil se vám tento článek? Pokud ano, neváhejte ho sdílet s ostatními!