[FRAGE] Asynchrones Laden - Fehler bei div. Situationen

[dertypdernixkan]

Ich wollte heut meinen PageSpeed weiter ausbauen, habe dazu Testweise den Data-Link zu Googles jQuery-API entfernt, die Seite war tatsächlich etwas schneller.

Dann habe ich ein Async-Attribut in JEDES Data-Link-Element eingebunden

<script async ....

Auch das hat ordentlich Zeitersparnis gebracht, etwas mehr als 200ms auf der Startseite, damit lag die durchschnittlich Ladezeit bei 993ms was mir wirklich gefallen hat.

Allerdings hat das dazu geführt, dass in der Chrome-Fehlerconsole entweder gemeldet wurde jQuery bzw $ oder gesetzte Variablen wären unbekannt oder die Verbindung zum Websocket wurde nicht aufgebaut oder oder oder.

Das Entfernen des Async-Attributes behob die Fehler, dafür auch die schöne kurze Ladezeit, die lag dann wieder bei etwa 1220ms.

Also habe ich es mit

async="async"

versucht. In Chrome war das okay, die Ladezeit lag durchschnittlich bei 1001ms, nur hat der Firefox damit ein Problem wenn er den Websocket laden sollte obwohl ich das Script für den Websocket gar nicht mit dem Async-Attribut versehen habe.

Gibt es dafür eine Erklärung bzw eine Möglichkeit Async so zu nutzen, dass es keine Probleme gibt? Oder muss ich dabei auf etwas besonderes achten was sich mir bis jetzt verborgen hat?

 

[tsseh]

Auch das hat ordentlich Zeitersparnis gebracht, etwas mehr als 200ms auf der Startseite, damit lag die durchschnittlich Ladezeit bei 993ms was mir wirklich gefallen hat.

200ms, na wenn du meinst das bemerkt jemand

Allerdings hat das dazu geführt, dass in der Chrome-Fehlerconsole entweder gemeldet wurde jQuery bzw $ oder gesetzte Variablen wären unbekannt oder die Verbindung zum Websocket wurde nicht aufgebaut oder oder oder.

dan hast du voneinander abhängige scripte asynchron geladen. das geht natürlich nicht

In Chrome war das okay

dann hat beim laden zufällig die reihenfolge gestimmt, wenn ein script ein anderes vorraussetzt, kannst du das was vorausgesetztwird nicht asynchron laden.

Oder muss ich dabei auf etwas besonderes achten was sich mir bis jetzt verborgen hat?

auf die ladereihenfolge. wenn du das unbedingt willst, nimm RequireJS

- - - Aktualisiert - - -

jQuery bzw $ oder gesetzte Variablen wären unbekannt

wo du jquery erwähnst, du musst neben der reihenfolge noch beachten, daß domcontentloaded also $.ready schon durch sein kann

 

[dertypdernixkan]

dan hast du voneinander abhängige scripte asynchron geladen. das geht natürlich nicht

dann hat beim laden zufällig die reihenfolge gestimmt, wenn ein script ein anderes vorraussetzt, kannst du das was vorausgesetztwird nicht asynchron laden.

wo du jquery erwähnst, du musst neben der reihenfolge noch beachten, daß domcontentloaded also $.ready schon durch sein kann

Danke für deine Antwort.
Dass ich unterschiedliche, aufeinander aufbauende Scripte nicht asynchron laden kann wusste ich gar nicht, danke für die Info!

200ms, na wenn du meinst das bemerkt jemand

Na ja, auf der Startseite wohl eher weniger. Aber es gibt Unterseiten die durchaus 1700ms brauchen, und der große Gott Google lässt wissen, dass er alles über 1500ms Loadtime möglicherweise schlechterem PR verpassen würde. Dem will ich so gut es geht natürlich entgegenwirken.

wo du jquery erwähnst, du musst neben der reihenfolge noch beachten, daß domcontentloaded also $.ready schon durch sein kann

Ah, okay. Deswegen die anderen Fehlermeldungen.

Jetzt mal noch eine Frage. Ist es besser die Javascripte später in eine Datei zu packen (Requests sparen) oder, weil einige wirklich recht groß sind und ich sie für mobile Endgeräte eigentlich kleiner halten wollte, in mehrere aufzuteilen? Letzteres lässt ein async ja nicht wirklich zu.