Druckbare Version
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
Hallo zusammen,
bin hier noch nicht wirklich weiter gekommen.
Gibt es Ideen wie man
aus fe_page.html5 auseinandernehmen und manches der Einzeldateien davon im Head und manches erst unten im Body aufrufen kann.Code:<?= $this->framework ?>
<?= $this->stylesheets ?>
<?= $this->mooScripts ?>
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
Das lässt sich nicht pauschal sagen und kommt immer auf die jeweilige Web Applikation an.Zitat:
Zitat von conter
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.
Dann lass einfach alles so wie es ist ;)Zitat:
Zitat von conter
Wie meinst du das? Ob CSS und JavaScript Dateien zusammengefasst werden oder nicht stellst du im Seitenlayout ein.Zitat:
Zitat von conter
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
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=FrSCPiJnbI4Zitat:
Zitat von conter
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:
Und analog dazu dann natürlich auch das zusammengefasste JS im Stil von <link rel="preload" href="xyz-generierterAnhang.js" as="script">HTML-Code:<link rel="preload" href="assets/css/xyz-d8513a02.css" as="style">
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.
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.
Danke für die hyperschnelle Antwort. Ich kann dir aber leider nicht ganz folgen.
Mir geht es darum, dass aus der jetzigen Ausgabe
diese hier wird:HTML-Code:<link rel="stylesheet" href="assets/css/xyz-d8513a02.css">
<script src="assets/js/xyz-253e9feb.js"></script>
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 ;-)
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 nurschreibst 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">
Oder alternativPHP-Code:<link rel="preload" href="assets/css/xyz-d8513a02.css" as="style">
<link rel="stylesheet" href="assets/css/xyz-d8513a02.css">
Siehe dazu https://developer.mozilla.org/en-US/...oading_content oder https://www.digitalocean.com/communi...eload-prefetchPHP-Code:<link rel="preload" href="assets/css/xyz-d8513a02.css" as="style" onload="this.rel = 'stylesheet'">
Aber mir erschließt sich der Sinn davon nicht. Die Angabeim <head> ist ja ohnehin Render-blocking, welchen Vorteil hätte das preload?PHP-Code:<link rel="stylesheet" href="assets/css/xyz-d8513a02.css">
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.
Hi, gleiche Frage ist bei mir auch grade aufgekommen.
Ich denke nicht, dass im `<head>` automatisch alles "blocking" ist. Das von Dir angeführteZitat:
Zitat von Spooky
sorgt ja grade dafür, dass dem nicht so ist. Deshalb bleibt die Frage: Wie kann man die Ausgabe des "link" Tag anpassen?PHP-Code:<link rel="preload" href="assets/css/xyz-d8513a02.css" as="style" onload="this.rel = 'stylesheet'">
gibt es irgendwo einen HOOK oder so, mit dem man auf den String kommt, um z.B. sowas zu machen?
Weil ich es nicht besser weiß, habe ich es aus Verlegenheit über die fe_page gelöst.PHP-Code:str_replace('rel="stylesheet"', 'rel="preload" onload="this.rel=\'stylesheet\'"', $linkTag);
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.Code:<?php
$css = new Combiner();
$css->add('…');
$css->add('…');
?>
<link href="<?=$css->getCombinedFile()?>" rel="preload" as="style" onload="this.rel = 'stylesheet'">
Schönen Tag noch.
ciao, Stefan
Ganz vergessen, ich wollte noch anmerken, dass Firefox da offenbar ein Problem hatte und erst jetzt mit der 85 (also der vorletzten Version) wurde das scheinbar final umgesetzt (per default aktiviert)
Siehe: https://developer.mozilla.org/en-US/..._compatibility
Erster Versuch: https://bugzilla.mozilla.org/show_bug.cgi?id=1405761
Zweiter Versuch: https://bugzilla.mozilla.org/show_bug.cgi?id=1626997
Siehe auch: https://stackoverflow.com/questions/...and-safari-mac