Site-Geschwindigkeit und asynchrones Javascript

asynchron

Obwohl ich viel entwickle, klassifiziere ich mich nicht als echter Entwickler. Ich kann Dinge auf einer Seite programmieren und verschieben und sie zum Laufen bringen. Ein echter Entwickler versteht es, den Code so zu entwickeln, dass er skalierbar ist, nicht viele Ressourcen beansprucht, schnell geladen wird, später leicht modifiziert 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 auf jeder einzelnen Seite der Website Social-Buttons. Also… wenn Facebook-Ressourcen eines Tages langsam geladen werden, verlangsamt es unsere Website. Fügen Sie dann Twitter, Pinterest, Buffer usw. hinzu und die Chancen Ihrer Site, schnell zu laden, werden praktisch auf null reduziert.

Dies 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 vorkonfigurierten Skripte, die Ihnen diese Unternehmen zur Verfügung stellen, 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 auf Pingdom durchfü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 Social Buttons. Wenn Sie ein Entwickler sind, können Sie einen großartigen Artikel lesen, Lazy Loading asynchrones Javascript.

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

(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, wenn diese Drittanbieter-Integrationen ausgefallen sind oder langsam ausgeführt werden, dies keine Auswirkungen auf das Erscheinen Ihres Kernseiteninhalts hat. Wenn Sie sich den Quellcode unserer Seite ansehen, werden Sie feststellen, dass ich alle zusätzlichen sozialen Skripte mit dieser Technik lade. Der Prozess Die Geschwindigkeit unserer Website wurde verbessert Sekunden – und verschluckt sich beim Laden nicht. Wir haben nicht alle unsere externen Abhängigkeiten in . umgewandelt Asynchrones Javascript, aber wir werden.

Was denken Sie?

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