Warum registrieren? Nur als registriertes Mitglied vom ABAKUS Forum hast Du vollen Zugriff auf alle Funktionen unserer Website.

HowTo III: Ladezeiten v. Javascript verbessern (jQuery)

Alles zum Thema Google Onebox, Knowledge Graph, Google-Shopping, Hotel- und Flugsuche, Maps, Youtube, News-Suche sowie aktuellen Suchtrends.
supervisior
PostRank 8
PostRank 8
Beiträge: 967
Registriert: 26.06.2006, 09:11

Beitrag von supervisior » 02.09.2018, 12:23

In enger Anlehnung an:

HowTo I:
https://www.abakus-internet-marketing.d ... 41455.html

und HowTo II:
https://www.abakus-internet-marketing.d ... 41642.html

kommt hier ein weiteres HowTo, das sich mit der Ladezeit von .js Dateien am Beispiel von jQuery beschäftigt. Grundsätzlich wiederholt sich hier das Ziel, wie auch schon bei den anderen HowTo's, die Ladezeit spürbar zu verbessern in dem für die Anzeige nachrangiges beim Ladevorgang hinten angestellt wird. Das merkt dann nicht nur der Nutzer, sondern der Pagespeed Gott dankt es Euch durch einen deutlich besseren Score.

Dieses HowTo beinhaltet jedoch ein paar Einschränkungen und gilt unabhängig vom Beispiel mit jQuery. Wenn in diesem Fall jQuery oder jedes andere Script unmittelbar beim Seitenaufruf eine Funktion ausführen soll oder weil man z.B. eine CSS Klasse beim Ladevorgang ansprechen will, ist dieses und jede andere Optimierung, die dazu dient das Rendern von Javascript zu verzogern, eher weniger geeignet. Eben weil es durch die Verzögerung womöglich unschöne Seiteneffekte gibt oder die jeweilige Funktion eben nicht ausgeführt wird.

Desweiteren ist es zwingend nötig, das ggf. zusätzliche Scripte (js Dateien), die auf eine vorher definierte Funktion in einer anderen js Datei zugreifen, zusammengefügt werden müssen. Gleichermaßen gilt das auch für Inline Scripte, die auf eine verzögert geladene js Datei zugreifen. Das klappt in diesem Fall nicht, weil dabei das Inline Script auf etwas zugreifen will, das zum Zeitpunkt des Ladens noch gar nicht gerendert ist. Wer das zwingend braucht, muss einen Timeout auf dieses Inline Script setzen.

Gänzlich ungeeignet ist dieses HowTo für diverse Plugins für z.B. Wordpress, die irgendeine Javascript Funktion haben und würde sogar so weit gehen, dass dieses HowTo für Wordpress u.ä. Anwendungen gänzlich ungeeignet ist, wenn man nicht in der Lage ist das Ladeverhalten von .js Dateien zu ändern/umzuprogrammieren. Das schränkt das Einsatzgebiet von diesem HowTo zwar deutlich ein, aber wer seine Seite wirklich spürbar verbessern will, der kommt um solche Maßnahmen nicht herum. Es gibt zwar eine Menge Plugins insbesondere für Wordpress, aber mir ist noch keines untergekommen, das nicht alles nur verschlimmbessert, was indirekt aber an der Architektur von Wordpress liegt.

Die nachfolgende Funktion ersetzt die ansonsten übliche Vorgehensweise zum Einbinden von .js Dateien. <script src=""></script> Deswegen diese vollständig entfernen. Anders als meist angewendet, sollte der nachfolgende Code im <head> Bereich, aber nach der CSS Includierung platziert werden, was sich nicht negativ auf das Ladeverhalten auswirkt.

Code: Alles auswählen

<script>
var cb = function &#40;&#41; &#123;
    var l = document.createElement&#40;"script"&#41;;
    l.src = "/Pfad_zum_Script/script.js";
    var h = document.getElementsByTagName&#40;"head"&#41;&#91;0&#93;;
    h.parentNode.insertBefore&#40;l, h&#41;;
&#125;;
var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
if &#40;raf&#41; &#123;
    raf&#40;cb&#41;;
&#125; else &#123;
    window.addEventListener&#40;"load", cb&#41;;
&#125;
</script>
Pfad_zum_Script/script.js gegen eigenen Pfad ersetzen

Dieses Script ist nicht das "One-And-Only" Script, wie man das machen kann. Es gibt verschiedene andere Wege, die das Gleiche machen. Dies nur für die notorischen Nörgler... ;)

Auch bei diesem HowTo gilt: Es ist nur ein Teil von einem Komplex an Maßnahmen. Gleichermaßen macht es aus einem lahmen Server keinen schnellen. Wer da tiefer in die Materie einsteigen will, bitte per PM bei mir melden.

top
PostRank 7
PostRank 7
Beiträge: 639
Registriert: 14.07.2005, 17:09

Beitrag von top » 03.09.2018, 11:49

Ich mache es mir einfacher:

Auf irgendwelche Inline-Scripte die auf andere JS-Dateien angewiesen sind verzichte ich möglichst.
Sämtliche JS-Dateien (incl. jQuery usw.) packe ich (minimiert) in eine einzige Datei und rufe sie im Head per <script async src="bla.js"></script> auf.

Fertig.

supervisior
PostRank 8
PostRank 8
Beiträge: 967
Registriert: 26.06.2006, 09:11

Beitrag von supervisior » 03.09.2018, 12:12

Du weißt aber schon, wo der Nachteil bei asynchronem Laden liegt? Mein HowTo ist nicht gleichzusetzen mit asynchronem Laden, was Du auch beim Pagespeed Test zu sehen bekommst. Mit dem "hinten dran gestellten" Laden bekommt der Pagespeed Test gar nicht mit, dass js geladen wird und das schlägt sich nicht nur im Score nieder, sondern kommt auch beim Nutzer an, weil der im Gegensatz zu asynchronem Laden nicht warten muss bis das Script gerendert ist.
Das async Attribut verwendet man eigentlich nur bei extern zu ladenden Scripten, die nicht auf dem gleichen Server liegen.

Hanzo2012
Community-Manager
Community-Manager
Beiträge: 1694
Registriert: 26.09.2011, 23:31

Beitrag von Hanzo2012 » 03.09.2018, 12:43

supervisior hat geschrieben:Das async Attribut verwendet man eigentlich nur bei extern zu ladenden Scripten, die nicht auf dem gleichen Server liegen.
Da muss ich widersprechen. Async benutzt man unabhängig davon, wo das Skript liegt, generell wenn es egal ist, ob das Skript genau in dem Moment ausgeführt wird, wo der Browser das Tag auffindet oder erst später. Wenn Skripte mit document.write ins Dokument schreiben, geht async z. B. nicht. Probleme kann es auch geben, wenn Skript B sich darauf verlässt, dass Skript A vorher schon ausgeführt wurde.
supervisior hat geschrieben:das schlägt sich nicht nur im Score nieder, sondern kommt auch beim Nutzer an, weil der im Gegensatz zu asynchronem Laden nicht warten muss bis das Script gerendert ist.
Was meinst du genau damit, dass der Benutzer länger warten muss? Ich denke, dass dein Tipp für den Benutzer zu keiner merklichen Veränderung führt (eher sogar zu mehr Wartezeit, da du paralleles Laden gewissermaßen verhinderst), sondern nur Google „verarscht“, indem vorgegaukelt wird, dass die Seite fertig geladen ist, obwohl sie es nicht ist.

supervisior
PostRank 8
PostRank 8
Beiträge: 967
Registriert: 26.06.2006, 09:11

Beitrag von supervisior » 03.09.2018, 12:55

Ich will da jetzt nicht schon wieder eine Diskussion entfachen, die zu nichts führt und beschränke mich darauf Euch zu empfehlen: Probiert es einfach aus und lasst Euch vom Ergebnis, bzw. dem Unterschied überzeugen.... ;)

Nur am Rande angemerkt ohne mich beweihräuchern zu wollen. Ich feiere diesen Monat 20-jähriges Jubiläum. Anlass: "Webseiten schneller machen" ;)

@Hanzo2012

"Einspruch" ;) async != defer

Hanzo2012
Community-Manager
Community-Manager
Beiträge: 1694
Registriert: 26.09.2011, 23:31

Beitrag von Hanzo2012 » 03.09.2018, 13:00

supervisior hat geschrieben:"Einspruch" ;) async != defer
Das weiß ich auch, ändert aber nichts ...
Aber gut, lassen wir's.

supervisior
PostRank 8
PostRank 8
Beiträge: 967
Registriert: 26.06.2006, 09:11

Beitrag von supervisior » 03.09.2018, 13:13

Nur der Vollständigkeit halber, weil das Hauptziel von diesem HowTo ansonsten aus dem Fokus gerät.

async blockiert im Gegensatz zu defer das Parsen und das wirkt sich negativ beim Pagespeed Test aus. Austesten! ;)

Unterschied beim Laden mit async und defer

async
Bild

defer
Bild

Hanzo2012
Community-Manager
Community-Manager
Beiträge: 1694
Registriert: 26.09.2011, 23:31

Beitrag von Hanzo2012 » 03.09.2018, 13:27

Ein Skript auszuführen dauert normalerweise viel kürzer als das Skript von irgendwo zu laden, von daher ist der Unterschied nicht so groß wie die Abbildung es suggeriert.
Mein Einspruch bezog sich hauptsächlich auf deine Aussage, dass man async nur für Skripte auf anderen Servern benutzt. Der Ort, wo die gespeichert sind, hat damit nichts zu tun.

supervisior
PostRank 8
PostRank 8
Beiträge: 967
Registriert: 26.06.2006, 09:11

Beitrag von supervisior » 03.09.2018, 13:31

Hanzo2012 hat geschrieben:Ein Skript auszuführen dauert normalerweise viel kürzer als das Skript von irgendwo zu laden, von daher ist der Unterschied nicht so groß wie die Abbildung es suggeriert.
Sorry, Einspruch! ;) Lädst Du Deine Scripte vom lokalen PC über externe USB ATA Festplatte mit ISDN? :)

Hanzo2012
Community-Manager
Community-Manager
Beiträge: 1694
Registriert: 26.09.2011, 23:31

Beitrag von Hanzo2012 » 03.09.2018, 13:33

Ich glaube du hast meine Aussage falsch verstanden, also nochmal anders: Die reine Ausführungszeit („execute script“) ist im Normalfall wesentlich kürzer als die Zeit, die zum Runterladen des Skripts benötigt wird („fetch script“). In deiner Grafik ist es andersherum.
Aber darum ging es mir eigentlich gar nicht.

top
PostRank 7
PostRank 7
Beiträge: 639
Registriert: 14.07.2005, 17:09

Beitrag von top » 03.09.2018, 16:21

Ich baue Kundenseiten möglichst so, dass auch ohne JS schon so aussehen, wie der Seitenbesucher sie sehen soll (und ganz ohne JS auch irgendwie bedienbar bleiben.)

PageSpeed Insights scheint durchaus auch mitzubekommen, dass im Anschluss das asynchron geladene JS ausgeführt wird. Jedenfalls sehe ich dort in dem Screenshot, dass die Navi in der Mobil-Ansicht eingeklappt wurde, welches ich hier beim Seitenaufruf per asynchron geladenem JS anstoße:

https://djura-kirschner.de

Und mehr als 100% geht ja nicht. :wink:

supervisior
PostRank 8
PostRank 8
Beiträge: 967
Registriert: 26.06.2006, 09:11

Beitrag von supervisior » 03.09.2018, 16:46

Könntest aber trotzdem noch deutlich zulegen. Nicht wegen Pagespeed, sondern wegen der Nutzer.

Das Video würde ich nicht schon beim ersten Aufruf laden lassen. Macht ja mehr als 50% der Gesamtspeichergröße aus. Ersetze das Video durch ein gefaktes Video Bild und lasse das Video onclick laden. Verwendest ja jquery und kannst das mit $.getScript nachladen.

Deine dk.js kommt (wegen async) viel zu früh und blockiert das Laden der zahlreichen Bilder. Wenn Du die Bilder wie hier beschrieben:

https://www.abakus-internet-marketing.d ... 41642.html

gehts noch ein Stück schneller mitm Laden.

Und wenn Du dann noch CSS geräteabhängig laden lässt, reduzierst Du den CSS Overhead um mind. 50%, was sich folglich unmittelbar auf den Seitenaufbau auswirkt.

Ist aber alles "nörgeln" auf hohem Niveau. ;)

nerd
PostRank 10
PostRank 10
Beiträge: 4037
Registriert: 15.02.2005, 04:02

Beitrag von nerd » 04.09.2018, 01:25

supervisior:

was mich bei diesen "loesungen" immer am meisten stoert ist die herrangehensweise, dass man das problem komplexitaet (= viel zu grosse und ueberladene seiten) mit noch mehr komplexitaet (per javascript irgendwelche ladevorgaenge umsortieren) zu loesen versucht.

Ich schaue mir lieber meine logs an um zu sehen welche features wirklich von den besuchern genutzt werden, alles andere ist spielerei und kommt weg.

Leider werden moderne seiten ja immer so gebaut dass sie nur dem grafiker und marketing department gefallen muessen, und dass heisst vor allem nervige slider auf jeder seite, videos mit einer neujahrsansprache des CEOs und scoll- und ueberblendeffekte sodass die seite bei jedem mausklick blinkt und hupt wie ein weihnachtsbaum auf LSD...

arnego2
PostRank 9
PostRank 9
Beiträge: 1460
Registriert: 23.02.2016, 13:55
Kontaktdaten:

Beitrag von arnego2 » 04.09.2018, 15:29

nerd hat geschrieben: Leider werden moderne seiten ja immer so gebaut dass sie nur dem grafiker und marketing department gefallen muessen, und dass heisst vor allem nervige slider auf jeder seite, videos mit einer neujahrsansprache des CEOs und scoll- und ueberblendeffekte sodass die seite bei jedem mausklick blinkt und hupt wie ein weihnachtsbaum auf LSD...
Mit Marketing haben diese leuchtenden Tannenbaum Seiten wenig zu tun.
Arnego2 <Web & Content>

Rem
PostRank 10
PostRank 10
Beiträge: 3809
Registriert: 08.12.2005, 18:45

Beitrag von Rem » 22.09.2018, 13:11

wenn Skripte mit document.write ins Dokument schreiben, geht async z. B. nicht.
Es gibt übrigens eine bessere Methode:
document.getElementById("test").innerHTML="<p>Test</p>";

Vorteil: wenn man 4 mal externe JS-Dateien am Ort des Schreibvorganges aufruft, kann man sich stattdessen auf eine externe JS-Datei beschränken, die dann das obige viermal durchführt. Dadurch spart man sich 3 Dateizugriffe.

Beispiel:
<div style="background-color:yellow; width: 100px; height: 100px;" id="test">
</div>
<script type="text/javascript">
document.getElementById("test").innerHTML="<p>Test<br>2. Linie</p>";
</script>
</body>
Ich war früher auch geil auf document.write. Dadurch habe ich jetzt ein wenig zusätzlichen Ärger.
Kostengünstige Fremdwährungstransfers und Umtausch (EUR, USD, GBP, CHF etc), eigene Konti in den USA, UK, AU und in UK. Ich empfehle Transferwise . Neu mit nahezu kostenloser Multiwährungs-Debit-Kreditkarte.

Antworten
  • Vergleichbare Themen
    Antworten
    Zugriffe
    Letzter Beitrag