Verzögertes Laden von JavaScript

So laden Sie JavaScript verzögert

Echtes verzögertes Laden von JavaScript bedeutet: Laden oder Parsen von JavaScript erst, nachdem der Seiteninhalt vollständig geladen wurde (das bedeutet, dass JavaScript keinen Einfluss auf die Geschwindigkeit oder Kritikalität der Seite haben kann). Weg).

• Verwenden Sie das „onload“-Ereignis, um externe JavaScript-Ressourcen aufzurufen

• Externe JavaScript-Ressourcen können nicht geladen werden, bevor der Seiteninhalt geladen ist

• Externe JavaScript-Ressourcen werden ausgeführt und wirken sich auf die Seite aus, nachdem der Inhalt geladen wurde

Erklärung

Im Internet stehen oft Menschen im Mittelpunkt Bei der Suche nach verschiedenen Lösungen ist JavaScript Lazy Loading einer der Schwerpunkte.

Viele Leute sagen „verwenden Sie einfach die Verzögerung“, „verwenden Sie einfach asynchron“ oder „setzen Sie Ihr JavaScript einfach unten auf der Seite“, aber diese Probleme werden nicht gelöst. Problem – Lassen Sie die Seite vollständig laden und dann ( erst nach vollständigem Laden) das externe JS laden. Mit diesen Methoden können Sie auch die vom Google Page Speed ​​​​Tool erhaltene Warnung „JavaScript verzögert laden“ nicht passieren (der Übersetzer hat diesbezüglich einige Zweifel, da ich beim Testen festgestellt habe, dass die oben genannten drei Methoden diese Warnung entfernen können).

Diese Lösung wird antworten.

Ein Skript, das eine externe JavaScript-Datei aufruft

Dieser Code wird vor dem </body>-Tag des HTML-Dokuments platziert (am unteren Rand des HTML-Dokuments). Der Name des externen Skripts ist defer.js.

<script type="text/javascript">function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "defer.js";
    document.body.appendChild( element );}if ( window.addEventListener ) {
    window.addEventListener( "load", downloadJSAtOnload, false );} else if ( window.attachEvent ) {
    window.attachEvent( "onload", downloadJSAtOnload );} else { 
    window.onload = downloadJSAtOnload;}
</script>

Was macht dieses Skript?

Dieser Code besagt, dass man warten soll, bis das Dokument vollständig geladen ist, und dann die externe Datei „defer.js“ laden soll.

Detaillierte Anweisungen

• 1. Kopieren Sie den obigen Code

• 2. Fügen Sie den Code in Ihr HTML-Dokument ein </body> Tag

• 3. Ändern Sie defer.js in den Namen Ihrer externen Datei

• 4 ist richtig. Beispiel: Wenn Sie „defer.js“ verwenden, muss sich die Datei „defer.js“ im selben Ordner wie Ihre HTML-Datei befinden

Wofür können Sie sie verwenden (bzw Was nicht möglich ist)

Dieser Code lädt keine externen Linkdateien, bis Ihre Seite vollständig geladen ist. Sie sollten Ihr JavaScript in zwei Gruppen aufteilen, eine für das, was die Seite laden muss, und eine andere für Dinge, die nach dem Laden der Seite erledigt werden (z. B. nach Klickereignissen suchen oder andere Dinge). Jedes JavaScript, das warten kann, bis die Seite geladen wird, sollte aus einer externen Datei aufgerufen werden.

Beispielsweise habe ich auf dieser Seite das obige Skript verwendet, um Google-Statistiken, Viglink und den Google Plus-Avatar unten verzögert zu laden. Ich habe keinen Grund, diese Dateien am Anfang der Seite zu laden, da diese Dateien nichts mit dem oben erwähnten Inhalt zu tun haben und nicht geladen werden müssen. Vielleicht hätten Sie das Gleiche auf Ihrer Seite. Würden Sie den Benutzer warten lassen, bis diese Ressourcen geladen sind, bevor Sie ihm Ihren Benutzerinhalt zeigen?

Warum nicht auch anders?

Inlining, das Platzieren des Skripts unten, die Verwendung von defer oder async sind alles Methoden, die das Ziel, zuerst die Seite und dann das JS zu laden, nicht erreichen, und diese Methoden sind in der Tat nicht universell und funktionsübergreifend.

Warum ist das wichtig?

Das liegt daran, dass Google die Seitenladegeschwindigkeit als Ranking-Faktor nutzt und dass Nutzer möchten, dass Seiten schneller geladen werden. Das eignet sich auch hervorragend für Ihr Mobile SEO. Google misst Ihre Seitenladegeschwindigkeit vom Zeitpunkt des Aufrufs bis zum erstmaligen Laden der Seite. Das bedeutet auch, dass Sie das load-Ereignis der Seite so schnell wie möglich vervollständigen müssen. Google bewertet Ihre Seite anhand der Ladezeit der Startseite (und vergessen Sie nicht, dass Nutzer darauf warten, dass die Seite geladen wird).

Aktive Werbung und Empfehlung von GooglePriorisierung von „above thefold“-Inhalten (Bildschirminhalte haben Vorrang). Es lohnt sich also, alle Off-Screen-Ressourcen (JS, CSS, Bilder usw.) aus dem Haupt-Rendering-Pfad fernzuhalten. Wenn es Ihre Nutzer und Google glücklich macht, warum nicht?

Verwendungsbeispiel

Ich habe eine Seite erstellt, klicken Sie hier, Sie werden sehen, dass ich das obige Code-Snippet verwendet habe.

Beispieldatei testen

Nun, nur zur Veranschaulichung habe ich einige Testseiten für Sie zum Testen geschrieben. Jede Seite macht das Gleiche. Eine reine HTML-Seite verwendet ein Skript. Der Inhalt des Skripts besteht darin, zwei Sekunden lang auf die Ausgabe von „Hallo Welt“ zu warten. Sie können diese Seiten testen und feststellen, dass es nur eine Möglichkeit gibt, den Inhalt sofort anzuzeigen (in der Ladezeit der Seite sind die zwei Sekunden Wartezeit nicht enthalten).

• Inline-Skript – Zum Anzeigen klicken

• Verwenden Sie „Defer“, um externe Skripte zu laden – Klicken Sie zum Anzeigen

• Verwenden Sie den oben empfohlenen Code – Klicken Sie zum Anzeigen anzeigen

Kernpunkt

Der kritischste Punkt ist, den Inhalt dem Nutzer so schnell wie möglich zu präsentieren. Wir haben dies bei der Art und Weise, wie wir unser Javascript behandelt haben, nicht getan. Benutzer müssen ihren Inhalt sehen, da einige Skripte Dinge unterhalb des visuellen Inhalts tun. Ganz gleich, wie cool Ihr Seitenende ist: Wenn der Benutzer nie zum Ende der Seite scrollt, gibt es für Sie keinen Grund, das Skript zu laden, um das Ende der Seite cool zu machen.

Tool

Verwenden Sie das Javascript-Nutzungstool, um zu testen, wie JavaScript auf Ihren Seiten verwendet wird.

---

Ergänzende Erweiterungen

1. Aufschieben und asynchron

Beide Attribute können für Seitenoptimierungszwecke verwendet werden, aber was ist der Unterschied? Ein Bild kann antworten:

2. Below the Fold

Gemäß der Definition in wordstream:

Below the fold bedeutet, dass nur gescrollt wird im nur sichtbaren Bereich der Webseite.

Above the Fold bezieht sich auf den Inhaltsbereich, der sichtbar ist, ohne dass die Seite gescrollt werden muss.

Im Allgemeinen erhalten Inhalte, die ohne Scrollen auf dem Bildschirm angezeigt werden, mehr Aufmerksamkeit, während Inhalte, für deren Sichtbarkeit ein Scrollen erforderlich ist, weniger Aufmerksamkeit erhalten. foldDie Aufrufe kommen aus der Nachrichtenverlagsbranche.