Wie man das laden von Javascript aufschieben kann
So verschieben Sie das Laden von Javascript
Wenn Sie Javascript wirklich verschieben, beginnt das Laden oder Parsen dieses Javascript erst, nachdem der Seiteninhalt geladen wurde (was bedeutet, dass es keinen Einfluss auf die Seitengeschwindigkeit oder den kritischen Renderpfad hat).
- Mit dem "onload" -Ereignis rufen wir ein externes Javascript auf
- Das externe Javascript wird nicht geladen, bevor der Seiteninhalt geladen wird
- Externes Javascript wird dann ausgeführt und die Seite beeinflusst
Erläuterung
Das Aufschieben von Javascript ist eines der Probleme im Web, die Sie dazu bringen können, sich die Haare auszureißen und nach einer Lösung zu suchen.
Viele Leute sagen "benutze einfach die Verzögerung" oder "benutze einfach die Asynchronität" oder andere sagen "setze einfach dein Javascript unten auf die Seite", aber keiner von ihnen löst das Problem, dass eine Webseite vollständig geladen und dann (und nur dann) geladen werden kann externe JS. Sie werden Sie auch nicht über die Warnung "Laden von Javascript verzögern" hinausbringen, die Sie vom Google-Tool für die Seitengeschwindigkeit erhalten. Diese Lösung wird.
Skript zum Aufrufen einer externen Javascript-Datei
Dieser Code sollte in Ihrem HTML-Code direkt vor dem -Tag (am unteren Rand Ihrer HTML-Datei) platziert werden. Ich habe den Namen der externen JS-Datei hervorgehoben.
<script type = "text / javascript">
Funktion downloadJSAtOnload () {
var element = document.createElement ("script");
element.src = " defer.js ";
document.body.appendChild (Element);
}
if (window.addEventListener)
window.addEventListener ("load", downloadJSAtOnload, false);
sonst if (window.attachEvent)
window.attachEvent ("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</ script>
Was macht das?
Dieser Code besagt, warten Sie, bis das gesamte Dokument geladen ist, und laden Sie dann die externe Datei "defer.js".
Spezifische Anweisungen
1. Kopieren Sie den obigen Code.
2. Fügen Sie Code in Ihren HTML-Code direkt vor dem -Tag ein (am unteren Rand Ihrer HTML-Datei).
3. Ändern Sie die Datei "defer.js" in den Namen Ihrer externen JS-Datei.
4. Stellen Sie sicher, dass der Pfad zu Ihrer Datei korrekt ist. Beispiel: Wenn Sie nur "defer.js" einfügen, muss sich die Datei "defer.js" im selben Ordner wie Ihre HTML-Datei befinden.
Wofür können Sie diesen Code verwenden (und wofür können Sie nicht)
Dieser Code lädt die von Ihnen angegebene externe Datei erst, nachdem das Dokument geladen wurde. Aus diesem Grund sollten Sie dort kein Javascript einstellen, das für das ordnungsgemäße Laden der Seite erforderlich ist. Sie sollten Ihr Javascript in zwei Gruppen aufteilen. Eine Gruppe ist das Javascript, das die Seite laden muss, und die zweite Gruppe ist das Javascript, das nach dem Laden der Seite Dinge ausführt (wie das Suchen nach Klickereignissen oder Ähnlichem). Das Javascript, das warten kann, bis die Seite geladen ist, sollte in die eine externe Datei gestellt werden, die Sie oben aufrufen.
Zum Beispiel benutze ich auf dieser Seite die obige Datei, um - Google Analytics, Viglink (wie ich Geld verdiene) und das Google Plus-Abzeichen, das in meiner Fußzeile (meinen sozialen Medien) angezeigt wird , aufzuschieben . Es gibt für mich keine Gründe, diese Dateien für das Laden der ersten Seite zu laden, da keine von ihnen erforderlich ist, um die über dem Falz liegenden Inhalte zu laden. Sie haben wahrscheinlich die gleiche Art von Sachen auf Ihren Seiten. Lassen Sie Ihre Benutzer warten, bis diese geladen sind, bevor Sie ihnen Ihre Inhalte zeigen?
Warum funktionieren die anderen Methoden nicht?
Die Methoden zum Inlinen, Platzieren von Skripten am unteren Rand, Verwenden von "defer" oder "async" erreichen nicht das Ziel, dass die Seite zuerst geladen und dann JS geladen wird, und funktionieren mit Sicherheit nicht universell und browserübergreifend.
Warum spielt es eine Rolle?
Dies ist wichtig, weil Google die Seitengeschwindigkeit als Ranking-Faktor einschätzt und die Nutzer schnell Seiten laden möchten. Es ist auch sehr wichtig für Ihr Handy-SEO . Google misst die Geschwindigkeit Ihrer Seite von dem Zeitpunkt an, zu dem sie aufgerufen wurde, als die Seite zum ersten Mal geladen wurde . Dies bedeutet, dass Sie so schnell wie möglich zum Ereignis zum Laden der Seite gelangen möchten. Anhand dieser ersten Ladezeit für die Seite beurteilt Google Ihre Webseite (und vergessen wir nicht, dass Ihre Nutzer darauf warten, dass sie geladen wird). Google wirbt aktiv dafür und empfiehlt, Prioritäten vor dem Falz-Inhalt zu setzen , um Ressourcen (js, css, Bilder usw.) aus dem kritischen Rendering-Pfad zu entfernenist die Mühe wert. Wenn es Ihre Nutzer glücklich macht und Google glücklich macht, sollten Sie es wahrscheinlich tun.
Kernpunkt
Die überwältigende Priorität sollte darauf gelegt werden, den Inhalt so schnell wie möglich an den Benutzer zu liefern. Wir haben das nicht so gemacht, wie wir mit unserem Javascript umgegangen sind. Ein Benutzer sollte nicht warten müssen, um seinen Inhalt zu sehen, da ein Skript wahrscheinlich etwas unter dem Falz-Inhalt tut. Egal wie cool Ihre Fußzeile ist, es gibt wirklich keinen Grund für einen Benutzer, der möglicherweise nie zu Ihrer Fußzeile gescrollt hat, das Javascript zu laden, das Ihre Fußzeile cool macht.
Werkzeuge
Verwenden Sie das JavaScript-Verwendungstool, um zu überprüfen, wie JavaScript auf einer Seite verwendet wird.