http/2 best practices / css und js

**conter** · 12.10.2020, 17:08

Hallo zusammen,

http/2 ist nun ja wirklich nicht mehr neu, aber es fehlt mir noch an best practice ressources für das Einbinden von js und css in contao.
Wie verteile ich die (s)css-Datei(n) und javascript am cleversten? Gar nicht mehr über Layout Haken setzen, assets, etc. sondern lieber alles einzeln in head und footer reinschreiben, z. T. mit preload?
Wäre für Lese- oder Videolernstoff dankbar

Viele Grüße,
conter

**conter** · 23.10.2020, 10:02

Hallo zusammen,

bin hier noch nicht wirklich weiter gekommen.

Gibt es Ideen wie man

Code:

    <?= $this->framework ?>
    <?= $this->stylesheets ?>
    <?= $this->mooScripts ?>

aus fe_page.html5 auseinandernehmen und manches der Einzeldateien davon im Head und manches erst unten im Body aufrufen kann.

Einfach das über obengenanntes php generierte html aus dem Quelltext kopieren, einbinden wie gewünscht und dann <?= $this->framework ?> etc. rausschmeißen?
Oder gibt es was eleganteres?

Viele Grüße,
conter

**Spooky** · 23.10.2020, 10:04

Zitat von conter

Wie verteile ich die (s)css-Datei(n) und javascript am cleversten?

Das lässt sich nicht pauschal sagen und kommt immer auf die jeweilige Web Applikation an.

**conter** · 23.10.2020, 12:42

Es handelt sich um ein "normales" contao ohne Besonderheiten, ein paar Erweiterungen und ein j_accordion und j_colorbox.

Es geht mir eher darum, ob es okay ist die diese <?= $this->framework ?> etc. zu umgehen, bzw. was die Nachteile sein könnten.

**Spooky** · 23.10.2020, 12:46

Zitat von conter

Es handelt sich um ein "normales" contao ohne Besonderheiten, ein paar Erweiterungen und ein j_accordion und j_colorbox.

Dann lass einfach alles so wie es ist

Zitat von conter

Mit http/2 werden jetzt ja einzelne .css und .js Dateien eingebunden, aber eben immer gesamt dort, wo <?= $this->framework ?> <?= $this->stylesheets ?> und <?= $this->mooScripts ?> stehen.

Wie meinst du das? Ob CSS und JavaScript Dateien zusammengefasst werden oder nicht stellst du im Seitenlayout ein.

Trotz HTTP/2 kann es aber dennoch besser sein, wenn du die Dateien zusammenfassen lässt. HTTP/2 beschleunigt ja nur den Transfer von separaten Dateien - aber ein einzelne Datei ist immer noch schneller übertragen als die selbe Menge in mehren Dateien aufgeteilt.

Siehe auch https://www.youtube.com/watch?v=FrSCPiJnbI4

**conter** · 23.10.2020, 12:48

ah, okay, also ist best practice weiterhin scripte zusammenfassen anzuhaken ? Jedenfalls für Standard-Installationen

**Spooky** · 23.10.2020, 12:53

Zitat von conter

ah, okay, also ist best practice weiterhin scripte zusammenfassen anzuhaken ? Jedenfalls für Standard-Installationen

Das kommt darauf an. Siehe https://www.youtube.com/watch?v=FrSCPiJnbI4

**Patric** · 19.01.2021, 09:30

Hallo,

ich würde mich hier gerne mit dranhängen, weil ich auch nach Lösungen suche, wie ich die Vorteile von http/2 besser einbinden kann.
Konkret würde ich gerne die von Contao erzeugten css- und js-Dateien per preload einbinden.
Im Seitentemplate steht ja die Zeile <?= $this->stylesheets ?> - wie kann ich diese denn nun modifizieren, damit im Quellcode daraus folgendes in der Art wird:

HTML-Code:

<link rel="preload" href="assets/css/xyz-d8513a02.css" as="style">

Und analog dazu dann natürlich auch das zusammengefasste JS im Stil von <link rel="preload" href="xyz-generierterAnhang.js" as="script">

Und noch eine Frage an die Pagespeed-Experten. Ich habe momentan nur eine zusammengefasste css (später möchte ich dann zwei daraus machen - eine mit den kritischen Anforderungen, die sofort verfügbar sein sollen und eine, die ich erst am Seitenende laden will) - soll ich diese dann gleich im Header laden oder tatsächlich erst am Seitenende. Oder wäre das mit preload und http/2 eher irrelevant?

Vielen Dank schon mal im Voraus.

**Spooky** · 19.01.2021, 09:43

Wenn du das so definieren würdest, dann würden deine CSS Styles gar nicht angewandt werden. "preload" macht genau nur das, es lädt Ressourcen im Voraus, aber du musst immer noch selbst sagen, wann die Ressourcen angewandt werden sollen.

**Patric** · 19.01.2021, 10:07

Danke für die hyperschnelle Antwort. Ich kann dir aber leider nicht ganz folgen.
Mir geht es darum, dass aus der jetzigen Ausgabe

HTML-Code:

<link rel="stylesheet" href="assets/css/xyz-d8513a02.css">
<script src="assets/js/xyz-253e9feb.js"></script>

diese hier wird:

HTML-Code:

<link rel="preload" href="assets/css/xyz-d8513a02.css" as="style">
<link rel="preload" href="assets/js/xyz-253e9feb.js" as="script">

Da ich diese generierten css- und js-Dateinamen ja nicht statisch in den Template-Code schreiben kann, weil diese ja nach Caches löschen usw. neu generiert werden, müsste ich wissen, wie ich das im Template modifiziere. Gibt es dafür evtl. insert-tags, die den generierten Namen assets/css/xyz-d8513a02.css ausgeben?
Ich denke, hier wird so etwas in der Art beschrieben: https://docs.contao.org/dev/framewor...s-in-templates - jedoch weiß ich nicht genau, wie ich das konkret anwende.

Ich gehe davon aus, dass die CSS dann ja trotzdem geladen wird, nur halt mit dem Verhalten preload. Oder gibt es eine andere Empfehlung, wie ich hier Server Push aktivieren kann und somit die blockierende Wirkung der Ladevorgänge von CSS und JS mindere? Ich bin hier eher Laie und versuche ein paar letzte Optimierungen durchzuführen - und diese Funktion würde mir jetzt noch zu meinem Glück fehlen ;-)

**Spooky** · 19.01.2021, 11:05

Vielleicht verstehe ich zu wenig davon, aber soweit ich weiß kannst du mit dem rel="preload" Attribut nur dem Browser sagen, dass die angegebene Ressource im Vorhinein geladen werden soll, bevor sie dann tatsächlich benutzt wird. Wenn du einfach nur

PHP-Code:


<link rel="preload" href="assets/css/xyz-d8513a02.css" as="style">

schreibst und sonst nichts wird meines Erachtens dieses CSS nicht angewandt (habe es jetzt aber nicht selbst getestet). Du müsstest insgesamt folgendes schreiben:

PHP-Code:


<link rel="preload" href="assets/css/xyz-d8513a02.css" as="style">

<link rel="stylesheet" href="assets/css/xyz-d8513a02.css">

Oder alternativ

PHP-Code:


<link rel="preload" href="assets/css/xyz-d8513a02.css" as="style" onload="this.rel = 'stylesheet'">

Siehe dazu https://developer.mozilla.org/en-US/...oading_content oder https://www.digitalocean.com/communi...eload-prefetch

Aber mir erschließt sich der Sinn davon nicht. Die Angabe

PHP-Code:


<link rel="stylesheet" href="assets/css/xyz-d8513a02.css">

im <head> ist ja ohnehin Render-blocking, welchen Vorteil hätte das preload?

**Patric** · 19.01.2021, 13:19

Danke für die Aufklärung. Das war mir nicht bewusst, dass dieser Befehl die Datei nur vorhält. Ich dachte halt, dass man damit irgendwas beschleunigen könnte - so wie bei den Schriftarten, die ich auch per "preload" vorlade. Aber auch hier erfolgt die Einbindung dann erst über font-face/css ... im Nachhinein ist das dann natürlich etwas klarer. Wieder was dazugelernt - um weiter zu optimieren muss ich mich dann tatsächlich an die Reduktion der CSS und JS machen.

**stefan der zweite** · 11.03.2021, 14:56

Hi, gleiche Frage ist bei mir auch grade aufgekommen.

Zitat von Spooky

Aber mir erschließt sich der Sinn davon nicht. Die Angabe[php]<link rel="stylesheet" href="assets/css/xyz-d8513a02.css">/php]im <head> ist ja ohnehin Render-blocking, welchen Vorteil hätte das preload?

Ich denke nicht, dass im `<head>` automatisch alles "blocking" ist. Das von Dir angeführte

PHP-Code:


<link rel="preload" href="assets/css/xyz-d8513a02.css" as="style" onload="this.rel = 'stylesheet'">

sorgt ja grade dafür, dass dem nicht so ist. Deshalb bleibt die Frage: Wie kann man die Ausgabe des "link" Tag anpassen?

gibt es irgendwo einen HOOK oder so, mit dem man auf den String kommt, um z.B. sowas zu machen?

PHP-Code:


str_replace('rel="stylesheet"', 'rel="preload" onload="this.rel=\'stylesheet\'"', $linkTag);

Weil ich es nicht besser weiß, habe ich es aus Verlegenheit über die fe_page gelöst.

Code:

<?php
$css = new Combiner();
$css->add('…');
$css->add('…');
?>
<link href="<?=$css->getCombinedFile()?>" rel="preload" as="style" onload="this.rel = 'stylesheet'">

Was ganz wunderbar funktioniert und die "Eliminate render-blocking resources" Empfehlung eleminiert. Aber bei mir nicht das Gefühl hinterlässt, dass das auch "gut" ist.

Schönen Tag noch.
ciao, Stefan