Hvordan implementere Facebook-knapper asynkront for forbedret sideytelse
Nesten alle blogger og nettsteder har en Facebook-knapp for å like, dele eller følge. Disse knappene er viktige for sosiale interaksjoner, men hvordan de lastes inn, kan ha stor innvirkning på ytelsen til nettsiden din.
Som du kanskje vet, laster standard Facebook-kode for deling synkront, noe som betyr at den blokkerer andre ressurser fra å lastes inn til Facebook-skriptet er ferdig. Dette kan forlenge lastetiden og dermed ha en negativ effekt på SEO-rangeringen din. Ikke bare det, men langsommere lastetider fører til en dårligere brukeropplevelse.
Selv om Facebooks sosiale deleknapper er verdifulle, er det viktig å sørge for at de ikke forsinker lastingen av selve hovedinnholdet på siden. Mange nettsteder opplever tregere lastetider nettopp på grunn av standard Facebook-kode.
Ved å laste inn Facebook-koden asynkront, kan du redusere lastetiden med 0,5 til 1,5 sekunder. Dette er en betydelig forbedring som kan gi en bedre brukeropplevelse og bidra til bedre SEO. Her er en guide til hvordan du laster inn Facebook-knapper raskere.
Følgende kode er hentet fra Facebook-utviklerdokumentasjon for å muliggjøre «liker» og delingsfunksjoner. Dette er standard Facebook-kode for nettstedet.
<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>
Det eneste du trenger å gjøre for å laste knappene raskere, er å legge til en enkel linje med kode.
js.async=true;
Med denne endringen, ser den oppdaterte koden slik ut:
<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>
Enkelt, ikke sant?
Oppdatering: Det er verdt å merke seg at de nyeste kodebitene fra Facebook inkluderer asynkron skriptlasting som standard. Du kan se dette i eksemplet 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>
Dersom du bruker WordPress, finnes det mange ressurser for optimalisering uten bruk av plugins. Hvis du derimot er på jakt etter et sosialt medie-plugin som ikke bremser ned nettstedet ditt, kan Novashare anbefales på det sterkeste.
Raskere nettsider er viktig for alle. Forhåpentligvis har denne artikkelen hjulpet deg med å forbedre ytelsen på ditt nettsted.
Likte du denne artikkelen? Del den gjerne med andre!