HowTo Gelöscht

[supervisior]

Gelöscht

[top]

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]

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]

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.

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]

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]

"Einspruch" async != defer

Das weiß ich auch, ändert aber nichts ...
Aber gut, lassen wir's.

[supervisior]

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


defer

[Hanzo2012]

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]

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]

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]

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.

[supervisior]

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]

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]

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.

[Rem]

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.