Kritisches CSS auslagen?

[supervisior]

> Ein Request muss nicht immer ein HTML Request sein. Das kann auch mal json oder was auch immer sein.

Es handelt sich unabhängig von der angefragten Ressource und ob die Ajax Engine verwendet wird, immer um http requests mit unterschiedlichen Protokoll Versionen und Methoden.

HTTP ja, aber nicht immer um HTML. Er schreibt von HTML und nicht HTTP. HTTP ist bereits ein Protokoll. Von daher wüsste ich nicht, welches andere Protokoll Du meinst, wenn man immer das HTTP Protokoll braucht, um etwas im Browser anzeigen zu lassen?! HTML ist übrigens kein Protokoll, sondern eine Auszeichnungssprache (Markup Language).

[staticweb]

> HTTP ja, aber nicht immer um HTML. Er schreibt von HTML und nicht HTTP.

Genau, der "request" ist in diesem Kontext immer ein http request und kein html oder sonst-artiger request.

HTTP ist bereits ein Protokoll. Von daher wüsste ich nicht, welches andere Protokoll.

Ich schrieb nur, dass es unterschiedliche Versionen des http protocol gibt.

> Du meinst, wenn man immer das HTTP Protokoll braucht, um etwas im Browser anzeigen zu lassen?!

Nein es gibt browserabhängig auch Inhalte die man ohne http protocol oder web server anzeigen kann.

> HTML ist übrigens kein Protokoll, sondern eine Auszeichnungssprache (Markup Language).

Habe ich nie angezweifelt.

[supervisior]

Habe ich nie angezweifelt.

Davon bin ich auch nicht ausgegangen, allerdings zerfletterst Du grad den Context wo es bei dem Kollegen schon schwer genug ist überhaupt auf einem Minimal-Level zu bleiben. Eigentlich ist das ganze Thema hier schon wieder fürn A****

[supervisior]

Nein es gibt browserabhängig auch Inhalte die man ohne http protocol oder web server anzeigen kann.

Nichtsdestotrotz wüsste ich aber schon ganz gern, was Du damit meinst oder verstehe einfach nicht, was Du da meinst? FTP oder was?

[staticweb]

> Nichtsdestotrotz wüsste ich aber schon ganz gern, was Du damit meinst oder verstehe einfach nicht, was Du da meinst? FTP oder was?

Ich meinte nur den responseType vom ajax request. Dort kann ja folgendes zurückgeben:

arraybuffer
blob
document (html/xml)
json
text
ms-stream

[supervisior]

Dafür brauchst dann aber schon einen Webserver oder ergänze meine Unwissenheit, wie Du json, text usw. im Browser ohne Webserver anzeigen lassen willst?!

[staticweb]

> Dafür brauchst dann aber schon einen Webserver oder ergänze meine Unwissenheit, wie Du json, text usw. im Browser ohne Webserver anzeigen lassen willst?!

Ja, ich benötige einen server/service der auf die http Anfrage reagiert. Das muss kein voll ausgebauter web server sein, aber das ist nur eine Definitionssache.

[supervisior]

Na für GET|POST|HEAD|OPTION brauch ich einen Webserver, der naturgemäß HTTP verwendet. Ich wüsste nicht, was anders definiert das Gleiche macht, aber Deiner Defintionsvielfalt nach irgendwas anderes ist als ein Webserver. Lass mich nicht dumm sterben und verrate mir, was es da sonst noch (geheimnisvolles) gibt?

[staticweb]

Wie bereits "gesagt" ist es nur/auch eine Definitionsfrage.

Aber REST nutzt zum Beispiel das http protocol und ist kein klassischer web server.

[ingosteinke]

Ich möchte in diesem älteren Thread nochmal zur eigentlichen Fragestellung etwas beitragen.

Bei meiner Recherche zu Google's Core Web Vitals und passenden Optimierungstipps bin ich auch wieder auf das Thema critical CSS gestoßen. Das ist immer noch ein Ratschlag von Google Lighthouse, und es ist immer noch sehr schwer umzusetzen (wenn auch beim Bau von Hand einige der kritischen Angaben offensichtlich sind).

Wichtig wären im critical.css unter anderem Abmessungen von Elementen am Seitenanfang, beispielsweise eine Mindesthöhe für den Header, um unerwünschten Layout Shift zu verhindern.

Addy Osmani schlägt neben seinem eigenen Tool "Critical" mehrere andere Hilfsmittel zum automatischen extrahieren von kritischen Styles vor, das sind: CriticalCSS, Penthouse und das Webpack-Plugin Critters.

Weiterhin sollten die optionalen Styles, beispielsweise für seltenere Meldungen im Loginbereich, und alles was die Code-Coverage-Übersicht der Developer Tools als vermeintlich unbenutzt ("unusded") kennzeichnet, möglichst verzögert geladen werden. Dazu empiehlt er das Tool loadCSS.

Da ich als scheinbarer Newbie (ich meine, ich hätte vor zehn Jahren schon mal einen Abakus-Account gehabt, aber vermutlich über die damalige Firmenadresse) nichts verlinken darf, hier erstmal in Textform:

github.com/filamentgroup/loadCSS
github.com/addyosmani/critical
criticalcss.com/
github.com/pocketjoso/penthouse
github.com/GoogleChromeLabs/critters

[supervisior]

Preloade die CSS mit Server/PUSH, dann musst Du darauf nicht achten.

[ingosteinke]

Preloade die CSS mit Server/PUSH, dann musst Du darauf nicht achten.

Das ist jetzt sehr vereinfacht gesagt und dabei solltest du bedenken, dass Server Push wieder abgeschafft wird.
Was allerdings immer noch funktioniert und dem Browser mehr Kontrolle zurückgibt, ist eine serverseitige Preload-Anweisung, die der Browser umsetzen kann, sofern nötig, schon bevor das HTML-Dokument vollständig geparst wurde.

Syntax ist etwa die gleiche, bloß mit `rel="preload"` statt `rel="push"`.

Quelle: golem.de/news/quic-chrome-entfernt-server-push-fuer-http-verbindungen-2011-152064.html

[supervisior]

Das ist jetzt sehr vereinfacht gesagt und dabei solltest du bedenken, dass Server Push wieder abgeschafft wird.

Bislang gibt es nur eine Diskussion darüber und beschlossen ist hier noch gar nichts. Das verschweigt dieser Artikel von Golem. Du musst dann schon dem Ursprung dieser sog. Absichtserklärung nachgehen und der ist nicht bei Golem....

[ingosteinke]

Das ist jetzt sehr vereinfacht gesagt und dabei solltest du bedenken, dass Server Push wieder abgeschafft wird.

Bislang gibt es nur eine Diskussion darüber und beschlossen ist hier noch gar nichts. Das verschweigt dieser Artikel von Golem. Du musst dann schon dem Ursprung dieser sog. Absichtserklärung nachgehen und die ist nicht bei Golem....

Da hast du vollkommen Recht. Die Diskussion beim Chromium-Development ist tatsächlich weiterhin offen.

[nerd]

Bei meiner Recherche zu Google's Core Web Vitals und passenden Optimierungstipps bin ich auch wieder auf das Thema critical CSS gestoßen. Das ist immer noch ein Ratschlag von Google Lighthouse, und es ist immer noch sehr schwer umzusetzen (wenn auch beim Bau von Hand einige der kritischen Angaben offensichtlich sind).

Um welche seite geht es ueberhaupt? Ist es ein wordpress theme was auf bootstrap aufbaut, oder was einfaches?

Wenn du wirklich probleme mit pagespeed hast, dann kommt das in 99% alle faelle von externen scripts (social media, tracker, werbung, analytics) oder irgendwelchen unnuetzen spielereien die im hintergrund massig daten nachladen (slider mit 5+ high-res bildern, hintergrund videos, ...). Schau in firebug->network nach wo due groessen dateien sind, welche dateien alle nachgeladen werden usw.

Beim normalen bootstrap ist es nicht realistisch das css zu zerstueckeln, da du nie genau weiss welche teile oft benoetigt werden - erst recht nicht, wenn du ein responsive layout hast was sich seine css-regeln je nach viewport aus verschiedenen teilen zusammensucht. Am ende sist man den ganzen tag dran und macht man mehr kaputt als man gewinnt.

Ich hab auch sachen von filamentgroup genutzt und denke schon dass sie wissen was sie tun, aber von loadCSS.js wuerde ich (wie auch von allen anderen webseiteSchnellerMachen.js ideen) die finger lassen. Eine seite wird nicht schneller, indem man MEHR daten nachlaedt, javascript ausfuehrt oder versucht die ladereihenfolge irgendwelcher dateien umzuraeumen. Am ende hat man 3 solche scripts auf der seite die sich nur gegenseitig bekaempfen...