Effizientes Laden von Drittanbieter-JavaScript

Milica Mihajlija

Wenn die Leistung durch Drittanbieter-Skripts verlangsamt wird beim Laden der Seite haben Sie zwei Möglichkeiten, die Leistung zu verbessern:

• Entfernen Sie sie, wenn sie Ihrer Website keinen eindeutigen Mehrwert bietet.
• Den Ladevorgang optimieren

In diesem Beitrag wird erläutert, wie Sie den Ladeprozess von Drittanbieter-Skripts optimieren können. mithilfe der folgenden Methoden:

• Attribut async oder defer für <script>-Tags verwenden
• Frühe Verbindungen zu erforderlichen Ursprüngen herstellen
• Lazy Loading
• Bereitstellung von Drittanbieterskripts optimieren

Verwenden Sie async oder defer.

Da synchrone Skripts das DOM verzögern, sollten Sie immer Drittanbieter-Skripts asynchron, es sei denn, das Skript muss ausgeführt werden, bevor die Seite gerendert werden kann.

Die Attribute async und defer teilen dem Browser mit, dass er mit dem Parsen fortfahren kann. den HTML-Code einfügen, während das Skript im Hintergrund geladen wird, und führen Sie dann das Skript aus. nachdem sie geladen wurde. Auf diese Weise blockieren Skriptdownloads nicht die DOM-Konstruktion oder Seite. Rendering, sodass der Nutzer die Seite sehen kann, bevor alle Scripts abgeschlossen sind wird geladen.

<script async src="script.js">

<script defer src="script.js">

Der Unterschied zwischen den Attributen async und defer besteht darin, dass der Browser die Skripts ausführt.

async

Skripts mit dem Attribut async werden bei der ersten Gelegenheit, nachdem sie bevor der Download abgeschlossen ist, load-Ereignis. Das bedeutet, ist es möglich (und wahrscheinlich), dass async-Skripts nicht in der Reihenfolge ausgeführt werden, in der werden sie im HTML-Code angezeigt. Es bedeutet auch, dass sie die DOM-Erstellung unterbrechen können, um den Download abzuschließen, während der Parser noch aktiv ist.

<ph type="x-smartling-placeholder">

</ph>

Scripts mit async können HTML-Parsing.

defer

Skripts mit dem Attribut defer werden ausgeführt, nachdem das HTML-Parsing vollständig abgeschlossen ist fertig sind, aber bevor DOMContentLoaded . defer sorgt dafür, dass Skripts in der Reihenfolge ausgeführt werden, in der sie im HTML-Code erscheinen und blockieren Sie den Parser nicht.

<ph type="x-smartling-placeholder">

</ph>

Scripts mit defer warten bis zur Ausführung hat der Browser den HTML-Code geparst.

• Verwenden Sie async, wenn es wichtig ist, dass das Skript früher beim Laden ausgeführt wird. .
• Verwende defer für weniger wichtige Ressourcen wie einen Videoplayer, der unten Falten.

Die Verwendung dieser Attribute kann den Seitenaufbau erheblich beschleunigen. Beispiel: Telegraph hat alle Skripts verschoben, einschließlich Anzeigen und Analysen, und verbesserte die Anzeigenladezeit um durchschnittlich vier Sekunden.

Hinweis :Analytics-Skripts werden in der Regel frühzeitig geladen, damit Ihnen keine wertvollen Analytics-Daten. Zum Glück gibt es Muster zum verzögerten Initialisieren von Analysen und gleichzeitig Daten für den frühen Seitenaufbau beibehalten.

Frühzeitige Verbindungen zu erforderlichen Ursprüngen herstellen

Sie können 100 bis 500 ms sparen, frühzeitige Verbindungen herstellen, wichtigen Drittanbieterquellen.

Zwei <link>-Typen, preconnect und dns-prefetch können Ihnen dabei helfen:

preconnect

<link rel="preconnect"> teilt dem Browser mit, dass Ihre Seite ein Verbindung zu einem anderen Ursprung haben und der Prozess gleich beginnen soll wie möglich. Wenn der Browser eine Ressource vom vorab verbundenen Ursprung anfordert, wird der Download sofort gestartet.

<link rel="preconnect" href="https://cdn.example.com">

Achtung: Die Seite wird bald nur mit kritischen Domains vorab verbunden, da die trennt der Browser alle nicht verwendeten Verbindungen innerhalb von 10 Sekunden. Unnötig Durch Vorverbindung können andere wichtige Ressourcen verzögert werden. Daher sollten Sie die Anzahl der vorab verbundenen Domains und testen Sie die Auswirkungen der Vorverbindung.

dns-prefetch

<link rel="dns-prefetch> verarbeitet einen kleinen Teil dessen, <link rel="preconnect"> Aliasse. Beim Herstellen einer Verbindung muss das DNS und TCP-Handshake und für sichere Ursprünge TLS-Verhandlungen. dns-prefetch weist den Browser an, nur das DNS einer bestimmten Domain aufzulösen, bevor dieser explizit aufgerufen wurde.

Der preconnect-Hinweis wird am besten nur für die wichtigsten Verbindungen verwendet. Für von weniger wichtigen Drittanbieterdomains verwenden, verwenden Sie <link rel=dns-prefetch>.

<link rel="dns-prefetch" href="http://example.com">

Browserunterstützung für dns-prefetch unterscheidet sich geringfügig vom preconnect-Support, damit dns-prefetch als Fallback für Browser dienen kann, die den preconnect Verwenden Sie separate Link-Tags, um dies sicher zu implementieren:

<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">

Lazy Loading von Drittanbieterressourcen

Eingebettete Ressourcen von Drittanbietern können den Seitenaufbau erheblich verlangsamen, wenn sie sind schlecht aufgebaut. Wenn sie nicht kritisch sind oder „below the fold“ (mit Scrollen sichtbar) sind Wenn Nutzer scrollen müssen, um sie zu sehen, ist Lazy Loading eine gute Möglichkeit, um die Geschwindigkeit und die Darstellung zu verbessern. So sehen die Nutzenden den Inhalt der Hauptseite. schneller und nutzerfreundlicher.

<ph type="x-smartling-placeholder">

</ph>

Lazy Loading für Inhalte „below the fold“ (mit Scrollen sichtbar)

Ein effektiver Ansatz besteht darin, Drittanbieterinhalte per Lazy Loading nach der Hauptseite zu laden. wird der Inhalt geladen. Anzeigen eignen sich gut für diesen Ansatz.

Anzeigen sind für viele Websites eine wichtige Einnahmequelle. Nutzer kommen jedoch wegen der Inhalte. Durch Lazy Loading von Anzeigen und schnelleres Bereitstellen der Hauptinhalte den Gesamtprozentsatz der Sichtbarkeit einer Anzeige erhöhen. Beispiel: MediaVine auf Lazy-Loading-Anzeigen umgestellt und die Seitenladezeit um 200% verbessert. In Google Ad Manager finden Sie Informationen zum Lazy Loading von Anzeigen

Sie können auch festlegen, dass Inhalte von Drittanbietern nur geladen werden, wenn Nutzer zuerst zu Abschnitt der Seite.

Überschneidungsbeobachter ist eine Browser-API, die effizient erkennt, wenn ein Element den in den Darstellungsbereich des Browsers ein. Sie können damit diese Technik implementieren. lazysizes ist eine beliebte JavaScript-Bibliothek. für Lazy Loading von Bildern und iframes. YouTube-Einbettungen und Widgets Es bietet auch optionalen Support. für Intersection Observer.

Achtung :Seien Sie vorsichtig, wenn Sie Lazy Loading für Ressourcen mit JavaScript verwenden. Wenn JavaScript nicht geladen wird. Möglicherweise werden die Ressourcen aufgrund instabiler Netzwerkbedingungen gar nicht geladen werden.

Das Attribut loading für Lazy Loading von Bildern und iFrames verwenden ist eine hervorragende Alternative zu JavaScript-Techniken. Seit Kurzem ist es in Chrome 76 verfügbar.

Bereitstellung von Drittanbieterskripts optimieren

Im Folgenden finden Sie einige empfohlene Strategien zur Optimierung der Drittanbieter-Skripts.

CDN-Hosting von Drittanbietern

Drittanbieter geben häufig URLs für JavaScript-Dateien an, , der normalerweise in einem Content Delivery Network (CDN) gehostet wird. Dieser Ansatz hat den Vorteil, dass Sie schnell loslegen können, kopieren Sie die URL und fügen Sie sie ein. Es entsteht kein Wartungsaufwand. Die die Serverkonfiguration und Skriptaktualisierungen.

Da sie jedoch nicht denselben Ursprung haben wie die übrigen Ressourcen, Das Laden von Dateien aus einem öffentlichen CDN ist mit Netzwerkkosten verbunden. Der Browser muss eine DNS-Suche durchführen, eine neue HTTP-Verbindung herstellen und bei sicheren Ursprüngen einen SSL-Handshake mit dem Server des Anbieters.

Wenn Sie Dateien von Servern von Drittanbietern verwenden, haben Sie selten Kontrolle über Caching. Die Nutzung der Caching-Strategie kann dazu führen, dass Skripts die Daten unnötig oft wieder aus dem Netzwerk abgerufen werden.

Skripts von Drittanbietern selbst hosten

Mit der Option, Skripts von Drittanbietern selbst zu hosten, haben Sie mehr Kontrolle über des Skripts geladen. Durch das Selbsthosting haben Sie folgende Möglichkeiten:

• Reduzieren Sie die DNS-Lookup- und Roundtrip-Zeiten.
• Verbessern Sie das HTTP-Caching von Headern.
• Nutzen Sie HTTP/2 oder das neuere HTTP/3.

Casper gelang es beispielsweise, 1,7 Sekunden zu schneiden. ein A/B-Testskript selbst hosten, um Ladezeiten zu reduzieren.

Selbsthosting hat jedoch einen großen Nachteil: Die Skripte können veralten und erhalten keine automatischen Updates bei API-Änderungen oder Sicherheitsupdates.

Achtung :Das manuelle Aktualisieren von Skripts kann den Entwicklungsaufwand erheblich erhöhen. und verpassen wichtige Updates. Wenn Sie kein CDN verwenden all Ihre Drittanbieter-Ressourcen bereitstellen, entgehen Ihnen ebenfalls Edge-Caching und die Serverkomprimierung optimieren.

Mit Service Workern Skripts von Drittanbieterservern im Cache speichern

Sie können Service Worker verwenden, um Skripts von Drittanbieterservern im Cache zu speichern. als Alternative zum Selbst-Hosting. Dadurch haben Sie mehr Kontrolle über das Caching, ohne die Vorteile von Drittanbieter-CDNs zu nutzen.

Sie können steuern, wie oft Skripts noch einmal aus dem Netzwerk abgerufen werden eine Ladestrategie erstellen, die Anfragen für nicht wesentliche, bis ein Nutzer zu einer wichtigen Interaktion auf der Seite gelangt. Mit preconnect können Sie frühzeitig Kontakte knüpfen und die Netzwerkkosten zu mindern.