Jquery später laden

[BeaB]

Hallo liebe Community,

über das Seitenlayout binde ich jQuery ein. Das blockiert leider das Rendering der Seite.

https://developers.google.com/speed/...hts/BlockingJS

Überprüfen Sie, ob Sie solchen JavaScript-Code nach dem Laden der Seite laden und ausführen lassen können.

Nun meine Frage: Wie stellt man das in Contao ein, dass jQuery nachgeladen wird?

Danke euch im voraus für euren Rat und sende einen lieben Gruß
Bea

[Andreas]

Das ist vom Core so nicht vorgesehen. Wenn du jQuery nicht mehr anhakst, kannst du die Templates nicht mehr auswählen und müsstest diese auf andere Weise ins FE bringen.

Zeige doch bitte mal einen Link zur Seite. Eigentlich müsste es ausreichend sein, wenn du jQuery ganz normal im Layout anhakst. Mache es aber nicht über CDN sondern lokal.

[Spooky]

Man könnte das fe_page Template ändern und

<?= $this->head ?>

an das Ende des Body geben (vor <?= $this->mootools ?>). Kann aber ungewünschte Nebenwirkungen haben.

[Exzentrik]

Ich habe gerade vor ein paar Tagen vor dem Selben Problem gesessen.

Das Problem lässt sich nicht dadurch lösen, dass die Scripte ans Ende der Seite platziert werden.
Was Google da gerne hätte, wäre das asynchrone laden der Scripte ODER reine Inlinescripte da es sich hauptsächlich über den zusätzlichen Netzwerkaufruf mitten im Renderprozess aufregt.

Du könntest jetzt also deine Bibliotheken per Hand einbinden.
Einfach im Layout den Haken für jQuery raus, und dann im fe_page Template per Hand eine jQuery-Datei eintragen... aber dann halt mit dem async-Tag.

Gerade bei jQuery ist das aber problematisch. Weil die Scripte, die jQuery nutzen, in der Regel ausgeführt werden sollen, sobald das rendern durch ist.
Deshalb soll der Verweis auf die jQuery-Datei ja auch immer als erstes in den Header, damit das definitiv geladen ist, bevor das Rendern abgeschlossen wurde und die Scripte zünden.
Hat dein Server/Webspace jetzt aber gerade höhrere Antwortzeiten könnte es sein, dass die Seite zwar gerendert, die jQuery-Datei aber noch nicht geladen ist.
Dann würden alle Scripte, die jQuery brauchen, Fehler in der Konsole ausgeben. Du müsstest die selbst eingebundenen jQuery-Dateien UND alle Scriptdateien, die die Bibliothek benutzen, also am besten mit async und defer Tag ausstatten, damit sie erst zünden, wenn alles fertig geladen UND gerendert ist.
Selbst dann kann es aber passieren, dass Besucher für einen kurzen Zeitraum dinge sehen, die durch das Script hätten geändert werden sollen.

Die einzig wirklich brauchbare Lösung wäre wirklich auf jQuery zu verzichten...

*EDIT*
Ich möchte bei der Gelegenheit darauf hinweisen:
Selbst, wenn Du das jQuery-Problem gelöst bekommst. Googles PageSpeed Insights gibt genauso Punktabzug, wegen der CSS-Inhalte die von Contao über das assets-Verzeichnis geholt werden.
Das ist genauso ein Netzwerkaufruf, der das Rendern blockiert. Ich würde an Deiner Stelle aber nicht soooo viel Wert auf dieses Tool legen.
Das regt sich auch auf, wenn dein Server mehr als 200ms zum Antworten braucht. Was einen menschlichen Besucher wohl kaum abschrecken wird, nur weil er 400 statt 20 Millisekunden warten musste...

[BeaB]

Vielen Dank für eure Antworten, vor allem an Exzentrik für den ausführlichen Rat!

Ja, ich werde das jetzt einfach ignorieren, was Googles PageSpeed Insights bezüglich dieser Punkte anmeckert.

P.S. Löst sich das Problem denn nicht bald quasi von selbst durch die Geschwindigkeit von http2?