Site-Geschwindigkeit und asynchrones Javascript

asynchron

Während ich viel entwickle, klassifiziere ich mich nicht als echten Entwickler. Ich kann Dinge auf einer Seite programmieren, verschieben und zum Laufen bringen. Ein echter Entwickler versteht es, den Code so zu entwickeln, dass er skaliert werden kann, nicht viele Ressourcen beansprucht, schnell geladen wird, später einfach geändert werden kann und trotzdem funktioniert.

Die schwierige Situation, in die Vermarkter geraten, besteht darin, dass beide eine haben sehr schnelle Website Integrieren Sie dennoch Integrationen und soziale Elemente, die Abhängigkeiten davon verursachen können, wie schnell Ihre Website geladen wird. Ein solches Beispiel ist soziale Schaltflächen. Auf Martech haben wir soziale Schaltflächen auf jeder einzelnen Seite der Website. Also ... wenn Facebook-Ressourcen eines Tages langsam geladen werden, verlangsamt dies unsere Website. Fügen Sie dann Twitter, Pinterest, Buffer usw. hinzu, und die Chancen Ihrer Website, schnell zu laden, werden auf praktisch nichts reduziert.

Das wird als synchrones Laden bezeichnet. Sie müssen das Laden eines Elements beenden Vor Sie laden das nächste Element. Wenn Sie Elemente asynchron laden können, können Sie Elemente ohne Abhängigkeit voneinander laden. Sie können die Geschwindigkeit Ihrer Site drastisch verbessern, indem Sie Elemente asynchron laden. Das Problem ist, dass die von diesen Unternehmen bereitgestellten Out-of-the-Box-Skripte fast nie für die asynchrone Ausführung optimiert sind.
asynchron

Sie können sehen, was sich auf Ihre Seitengeschwindigkeit auswirkt, indem Sie einen Test für Pingdom ausführen:
Laden der Pingdom-Seite

Asynchrones Javascript Ermöglicht das Schreiben von Code, der Elemente zum Laden auffordert nach Die Seite ist vollständig geladen. Keine Abhängigkeiten! Ihre Seite wird also geladen und sobald sie fertig ist, wird ein Skript gestartet, das die anderen Elemente lädt - in diesem Fall unsere sozialen Schaltflächen. Wenn Sie ein Entwickler sind, können Sie einen großartigen Artikel lesen, Lazy Loading asynchrones Javascript.

Hier ist ein Ausschnitt von Emil Stenström, wie man es richtig macht:

(function () {function async_load () {var s = document.createElement ('script'); s.type = 'text / javascript'; s.async = true; s.src = 'http://buttondomain.com /script.js '; var x = document.getElementsByTagName (' script ') [0]; x.parentNode.insertBefore (s, x);} if (window.attachEvent) window.attachEvent (' onload ', async_load); sonst window.addEventListener ('load', async_load, false);}) ();

Das Ergebnis ist, dass diese Integrationen von Drittanbietern nicht oder nur langsam angezeigt werden, wenn sie nicht oder nur langsam ausgeführt werden. Wenn Sie die Quelle unserer Seite anzeigen, werden Sie feststellen, dass ich alle zusätzlichen sozialen Skripte lade, die diese Technik verwenden. Der Prozess verbesserte die Geschwindigkeit Sekunden unserer Website - und erstickt beim Laden nicht. Wir haben nicht alle unsere externen Abhängigkeiten in konvertiert Asynchrones Javascript, aber wir werden.

Was denken Sie?

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.