noscript-Support für CSS ergänzt

[danspringer]

Noscript für CSS ergänzt für render-blocking-assets, media="all" als default gestrichen, wegen best-practice. https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources?hl=de

man kann nun wie folgt css einbinden:

$assets->setCss('plyr', '/assets/addons/plyr/vendor/plyr/dist/plyr.css','', ['rel' => 'preload', 'as' => 'style'], true);

daraus wird dann:

<link rel="preload" as="style" href="/assets/addons/plyr/vendor/plyr/dist/plyr.css" type="text/css" onload="this.onload=null;this.rel='stylesheet'" /><noscript><link rel="stylesheet" href="/assets/addons/plyr/vendor/plyr/dist/plyr.css"></noscript>

[DanielWeitenauer]

Hi, da hatte ich tatsächlich vorher noch nichts von gelesen. Generell finde ich solch eine Ergänzung interessant.

Allerdings finde ich die Anpassung so noch nicht ideal:

• es gibt einen, wenn auch kleinen BC break, wenn das media-Attribute nun anders vorbelegt wird.
• ich bin kein großer Fan von langen Parameter-Ketten, besonders wenn es sich nur um Flags handelt, die Zahl der Parameter ist sowieso schon sehr hoch.
• ich denke, dass solche Spezialfälle nicht bis in den Trait durchschlagen sollten

Soweit ich mir das auf die Schnelle anlesen konnte, gibt es ein Best-Practise-Setting, mit dem man das Thema dann standardisiert angehen kann. Daher folgende Vorschläge für eine Anpassung:

1. eine neue Methode einführen, z.B. setCssAsync, die die alle Best-Practise-Parameter vorbelegt hat
2. oder - und das ist momentan mein Favorit - eine pluggable Erweiterung ähnlich theme_minify anlegen, die sich in die Extension Points einhängt und alle link-Tags anpasst, ohne dass man vorhandenen Code groß ändern muss. Sie könnte, wie theme_minify zusätzlich pro Instanz über ein setAction-Setting gesteuert werden. Das würde den Basicode weiter schlank halten und sich leicht in vorhandene Setups einfügen lassen.