it-swarm.com.de

Social Media-Schaltflächen verlangsamen die Ladezeit der Website

Ich erstelle eine einfache und schnelle Website und versuche, die Website so gut ich kann zu optimieren. Mir ist aufgefallen, dass Social-Media-Buttons die Website erheblich verlangsamen. Ich füge den Like-Button von Facebook, den Twitter-Button und den Google+ Button hinzu. __ Ich habe ein paar Tests durchgeführt:

Website ohne Social Media-Buttons, Ladezeit 0.24s:

enter image description here

Website mit Social Media-Buttons, Ladezeit 1.38s:

enter image description here

Hier ist mein Code:

<div id="social">
    <!-- FB -->
    <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_EN/all.js#xfbml=1&status=0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-like" data-href="http://facebook.com/textsearcher" data-width="150" data-layout="button_count" data-show-faces="false" data-send="false"></div>
    <!-- Twitter -->
    <a href="https://Twitter.com/share" class="Twitter-share-button" data-url="http://www.textsearcher.com/" data-hashtags="TextSearcher">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.Twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'Twitter-wjs');</script>
    <!-- G+ -->
    <div class="g-plusone" data-size="medium" data-href="http://www.textsearcher.com/"></div>
    <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>
</div>

Ich habe also ein paar Dinge versucht, um diese sozialen Schaltflächen zu laden, ohne die Ladezeit der Website zu verlangsamen.

Laden von Schaltflächen nach einer Sekunde Verzögerung über JavaScript:

setInterval(function(){
    $("#social").html("<!-- FB --><div id="fb-root"></div>.....");
},1000);

Das hat nicht geholfen, Tasten ließen sich nicht richtig laden und sie störten.

Laden von Schaltflächen, nachdem das Dokument fertig ist:

$(document).ready(function() {
    $("#social").html("<!-- FB --><div id="fb-root"></div>.....");
});

Das hat auch nicht geholfen. Die Tasten waren gut geladen, aber die Ladezeit der Website betrug immer noch> 1,00 Sekunden.

Mir gehen die Ideen aus. Irgendeine Möglichkeit, sie zu laden, ohne die Website zu verlangsamen?

PS. Verwendete Seitenladezeit Plugin für Chrome in diesen Tests


LÖSUNG:

Dank CodeMonkey für seine Antwort habe ich dieses Problem schließlich gelöst, indem soziale Schaltflächen geladen wurden, nachdem die gesamte - Seite geladen wurde. Ich habe den notwendigen JavaScript-Code (für Social Media-Buttons) in eine separate Datei verschoben, um mein HTML/Markup etwas sauberer zu machen.

JS (in einer separaten Datei, social.js):

/* Facebook*/
(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_EN/all.js#xfbml=1&status=0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
/* Twitter */
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.Twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'Twitter-wjs');
/* G+ */
(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); 

HTML:

<script>
    $(window).bind("load", function() {
       $.getScript('js/social.js', function() {});
    });
</script>
<!-- FB -->
<div id="fb-root"></div>
<div class="fb-like" data-href="http://facebook.com/textsearcher" data-width="150" data-layout="button_count" data-show-faces="false" data-send="false"></div>
<!-- Twitter -->
<a href="https://Twitter.com/share" class="Twitter-share-button" data-url="http://www.textsearcher.com/" data-hashtags="TextSearcher">Tweet</a>
<!-- G+ -->
<div class="g-plusone" data-size="medium" data-href="http://www.textsearcher.com/"></div>

Nach diesem Ladezustand waren also wieder normale 0,24s:

Load timings

57
user2824854

Du könntest es versuchen 

$(window).load(function() {

anstatt 

$(document).ready(function() {

es wird also warten, bis Ihre Bilder geladen sind und alles geladen ist. 

Wenn das nicht hilft, würde ich vorschlagen, dass sie nur im Schwebeflug erscheinen. Verfügen Sie über eine Reihe statischer Bilder/CSS-Sprites, die ersetzt werden, wenn der Benutzer über sie schwebt.

Wenn Sie diesen zusätzlichen Schritt nicht wünschen und über Serverzugriff verfügen, um Module zu installieren, können Sie versuchen, das Javascript für Sie durch das Mod Seitenpeed von Google zu verschieben https://developers.google.com/speed/pagespeed/module/filter-js-defer

Wenn Sie keinen Serverzugriff haben, können Sie die CDN-Route ausprobieren. Der Raketenlader von Cloudflare ist sehr interessant. Ich teste ihn zur Zeit aus ähnlichen Gründen und sehe ~ 33% Geschwindigkeitserhöhung http: //www.cloudflare. de/features-optimizer

Wenn dies nicht hilft, können Sie den alten Favoriten ausprobieren, indem Sie die Schaltflächen unten auf der Seite anbringen und mit CSS neu positionieren, damit sie höher angezeigt werden. Auf diese Weise können Sie sie dort haben, wo Sie sie haben möchten, aber sie scheinen die Ladezeit der Seite nicht zu beeinträchtigen.

Sie könnten einfachere Oldschool-Alternativen wie hier versuchen http://zurb.com/article/883/small-painful-buttons-why-social-media-bu

oder sehen Sie nach, ob ein Dienst wie http://www.addthis.com/ oder http://www.sharethis.com/ schneller für Sie arbeitet

Natürlich ist der Elefant im Raum an diesem Punkt, dass es die 3 wichtigsten Social-Media-Buttons auf der Seite gibt, und dass es Sie nur eine Sekunde kostet - leider recht gut! Es sind täuschend komplizierte Tasten, die nicht gut optimiert zu sein scheinen - google pagespeed Einsichten findet bei allen iirc etwas zu beanstanden.

Da Sie einen Geschwindigkeitstreffer von mindestens 100% erreichen, würde ich einige A/B-Tests vorschlagen, um zu sehen, ob Sie sie wirklich brauchen. Bringt der Share-Button mehr Traffic, um ihre Anwesenheit zu garantieren?

38
CodeMonkey

Während diese Frage alt ist und der Fragende meine Antwort wahrscheinlich nicht sieht, ist hier eine Alternative für alle, die das gleiche Problem haben - solange Sie nichts dagegen haben, die Anzahl der Likes/Shares/etc anzuzeigen.

Sie können einfach Links hinzufügen, die den Besucher an das soziale Netzwerk weiterleiten, und ein Freigabefenster mit vorgefüllter URL und Beschreibung öffnen.

Der Code ist sehr einfach und Sie können jedes beliebige Bild oder Text verwenden, so dass Sie die Schaltflächen besser an das Design Ihrer Website anpassen können.

<a href="https://www.facebook.com/sharer/sharer.php?u=URL" target="_blank">Share on Facebook</a>
<a href="https://Twitter.com/intent/tweet?url=URL&text=TEXT&via=YOURTWITTERACCOUNTNAME" target="_blank">Tweet</a>
<a href="https://plus.google.com/share?url=URL" target="_blank">Share on Google+</a>

Ersetzen Sie einfach URL durch die URL Ihrer Website und TEXT durch eine kurze Beschreibung.

Diese Lösung erfordert kein JavaScript und ist daher extrem leicht. Sie können Logos, Symbolschriftarten und einfachen Text verwenden ("Auf Facebook teilen").

Ich habe auch einen Blog-Beitrag geschrieben, der viele andere soziale Netzwerke abdeckt .

3
Stefan

Die Social-Widgets sollten die Ladezeit nicht zu sehr verlangsamen, es sei denn, sie blockieren wichtigere Skripts, die auf das Laden der Seite warten. Der von Ihnen verwendete Code ist asynchron. Dies ist hilfreich, aber in den meisten Browsern wird das Ereignis window.onload trotzdem blockiert. Siehe Stoyans Beitrag hier für Informationen darüber, wie Sie das JS SDK mit iframes nicht blockierend laden können.

Wenn dies zu viel ist und Sie das Herunterladen oder Ausführen des SDK verzögern möchten (und es beschleunigen, sobald es ausgeführt wird), ist hier meine Empfehlung:

Verwenden Sie zunächst eine Bibliothek wie jQuery, mit der Sie sich plattformübergreifend in das DOM einbinden können. Hier ist eine Implementierung . Sobald Sie Ihren "DOM ready handler" haben, sollten Sie eine der beiden folgenden Aktionen ausführen:

  1. Verschieben Sie den JS SDK-Ladecode in Ihren DOM-Ready-Handler.

  2. Nehmen Sie xfbml: true aus FB.init (...), wenn Sie es haben (in diesem Fall nicht) und nehmen Sie xfbml = 1 aus der SDK-URL. Dies verhindert, dass Social Widgets sofort analysiert und initialisiert werden. Dann rufen Sie FB.XFBML.parse () in Ihrem DOM-Ready-Handler auf. Siehe die Dokumentation hier für diese Methode . Das Beste, was Sie für die Leistung tun können, wäre, FB.XFBML.parse(document.getElementById('')) spezifisch aufzurufen, damit das SDK keine Zeit verschwendet, die über das gesamte DOM geht.

3
AndrewF

Die Ladezeiten des Plugins (Social Media-Button) hängen von einer Reihe von Faktoren ab, einschließlich (jedoch nicht beschränkt auf):

  • Antwortzeit Ihres Servers (Plugins werden erst geladen, wenn Sie von Ihrem Code dazu aufgefordert werden.)
  • Die Internetgeschwindigkeit des Benutzers (in diesem Fall Ihre)
  • Die Entfernung zum Server der Social Media-Website (beispielsweise könnte sich der Server von Facebook auf der anderen Seite des Kontinents befinden, wodurch Latenz entsteht).
  • Die Ladezeit der Social-Media-Website insgesamt

Das bedeutet, dass Sie nicht viel tun können und Ihren Code so optimiert wie möglich machen.

Es ist außerdem empfehlenswert, die Javascript-Plugins auszuführen, wenn das Dokument fertig ist, sofern in der Plugin-Dokumentation nichts anderes angegeben ist. Der setInterval ist kein guter Ansatz, da er nicht weiß, ob die gesamte Seite zur Bearbeitung bereit ist oder nicht. Stellen Sie daher sicher, dass Sie den $(document).ready()-Ansatz verwenden, um alles zu tun, was den Seiteninhalt verändert.

2
Luke111

Fügen Sie in den Skripts, die die sozialen Medien laden, "verzögern" hinzu.

<script defer src="http://api.facebook.com/....."></script>
1
Kernel James

Verwenden Sie asynchrones Laden für Social-Init-Skripts:

<script async="async">...</script>
1
paka

Setzen Sie Ihren Like-Button in einen wiederverwendbaren Iframe und geben Sie die URL an Like weiter.

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fphys.org" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px;" allowTransparency="true"></iframe> 
0
boateng

Die meisten großen Social-Media-Buttons bieten eine asynchrone Version ihres JavaScript an. Sie müssen nur ein wenig weiter auf den offiziellen Dokumentationsseiten nach unten scrollen.

0
Muskie

Wenn Sie hierher gekommen sind, um eine Lösung zu finden, wie Sie Facebook Social Plugins schneller laden können, z. wie sie gerendert werden, BEVOR das window.onload () -Ereignis auftritt (wegen eines langsamen Netzwerks im WLAN/großen Bildes auf Seite/...), können Sie meine Lösung ausprobieren:

window.fbAsyncInit = function () {
    dispatchEvent(new Event('load'));
}

fbAsyncInit wird aufgerufen, sobald die facebook sdk js-Datei geladen wird (z. B. schnell), und Sie können soziale Schaltflächen fälschen, um sie früher zu rendern (bevor andere Ressourcen wie Bilder geladen werden), indem Sie benutzerdefinierte Lastereignis-Dispatching verwenden. Beachten Sie die Konsequenzen, wenn Sie das onload () -Ereignis früher auslösen, je nach Ihrem anderen JavaScript-Code/den anderen Bibliotheken.

Eine andere Lösung besteht darin, Ihr soziales Plugin mit dem Laden von sdk in iframe einzubinden. Die FB-API wartet nicht auf window.onload des übergeordneten Fensters und rendert Social Plugins früher.

0
lukyer