Hvordan indlæses Facebook-knappen asynkront?
Næsten hver blog har en hjemmeside Facebook like, del eller følg-knap.
Som du måske ved, indlæses standard Facebook social share-kode synkront sammen med dine websideressourcer.
Dette vil øge din hjemmesides indlæsningstid og skade SEO-score. Det er bare ikke SEO, men det ødelægger også brugeroplevelsen.
Jeg er sikker på, at Facebook sociale deleknap er vigtig, men ikke som din faktiske kode, der skal vises først. Der er mange blogs eller websteder med højere sideindlæsningstid på grund af standard Facebook-koden.
Brug af Facebook-kode asynkront vil hjælpe dig med at indlæse din webside 0,5 – 1,5 sekunder hurtigere. Dette er hvad du skal indlæse Facebook like, dele eller følg knappen hurtigere.
Her er koden jeg fik fra Facebook-udvikler for at like og dele til toadmin.dk.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>
Nu er alt, hvad jeg skal tilføje, at følge den enkelte linje i min kode, hvilket vil hjælpe med at indlæse knapper hurtigere.
js.async=true;
Så den ændrede kode ville være:
<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>
Er det ikke nemt?
Opdatering: de nye kodestykker, der tilbydes af Facebook, kræver ikke ovenstående, da de inkluderer scriptasynkronisering, som du allerede kan se nedenfor.
<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>
Bruger du WordPress? Tjek dette indlæg, som forklarer, hvordan du optimerer til ydeevne uden et plugin. Og hvis du leder efter et plugin til sociale medier, der ikke sænker farten, kan jeg varmt anbefale det Novashare.
Jeg er sikker på, at du kan lide, at din webside indlæses hurtigere, og jeg håber, at dette hjælper dig.
Nydt at læse artiklen? Hvad med at dele med verden?