Verfasst: 28.02.2017, 00:24
Hi Chris,
vielen Dank!
Freut mich, dass jemand an der Aufgabe mitfiebert und sich nicht mit der zweitbesten Lösung zufrieden geben wird.
Ich habe wieder ein paar Tests durchgeführt (u.a. die Background-Anweisung in das externe CSS, welches auch die Schriften beinhaltet, geschrieben und die zweite JS-Funktion rausgenommen: Gleicher PageSpeed).
Weiterhin habe ich jetzt mal Testseiten eingerichtet, damit das besser nachvollziehbar wird:
Testseite 1
Bei dieser Testseite sind die Bilddaten im ATFCSS. Der Optimierungsvorschlag von Google erhält also direkt die Roundtrips, falls es an diesen liegt (in dem Test sind mehr als vier erforderlich). Mein Clipboard hat wohl einen Teil der Daten abgeschnitten, also nicht wundern, dass das Hintergrundbild nur zur Hälfte angezeigt wird.
Ergebnis: 95/100 Desktop, 85/100 Mobil
Testseite 2
Hier habe ich das Hintergrundbild "tiny" werden lassen (100px jpg-width), das Ergebnis ist schlechter als vorher, da nun das Bild noch optimiert werden sollte. Ansonsten keine Änderung, es scheint also nicht an der Größe selbst zu liegen, sondern an dem erforderlichen Roundtrip trotz JavaScript-Pipe.
Ergebnis: 95/100 Desktop, 100/100 Mobil
Die Header sind jetzt nun auch im Sinne des Mozilla Observatory angepasst, bis auf CSP. CSP ist in der .htaccess bereits vorbereitet, kommt allerdings noch nicht zum Einsatz, denn aktuell liegt noch JavaScript inline. Sobald dies externalisiert ist, werde ich den CSP Header auch setzen.
Mozilla Observatory (aktuell): 75/100, nach der Änderung dann wahrscheinlich 100/100.
Mich hat jedoch gewundert, dass die HSTS-Preload Header Zeit vom Mozilla Observatory länger angegeben wird, als von der HSTS-Preload-List. In der HSTS-Preload-List ist die Seite bereits angemeldet, Status: pending.
Ich bin sehr gespannt, ob wir für die Herausforderung eine Lösung finden werden. Den Roundtrip der externen Ressource zu eliminieren, ohne die Ressource selbst an alle Geräte auszuliefern, wird nicht gerade einfach (bzw. die externe Ressource so laden zu lassen, dass es zu keinem FOUC kommt und der PageSpeed gut bewertet wird). Dies scheint wohl auch für meine Schriftarten zu gelten (extern im CSS, nicht im ATF CSS) - ich dachte bisher, dies hätte ich durch die JavaScript-Funktion umgehen können. Nehme ich eine andere und/oder deutlich langsamere Funktion, kommt es zu einem FOUT bzw. FOUC bei Chrome.
HTTP/2 war auch meine Idee, im Hinblick auf mehrere Ressourcen aber nicht sehr praktikabel und ohne Unterscheidung zwischen Mobil und Desktop leider zu großer Overhead.
Insbesondere, sobald mehrere Bilder ins Spiel kommen. Die Lösung für das Hintergrundbild setzt ja nur den Grundstein zur Erweiterung.
@Cin Media:
Vielen Dank für die Hinweise. Die Webseite ist, bezogen auf Content & Design, noch weit davon entfernt, vollständig zu sein. Bilder als auch Videos sind in Planung und werden selbstredend demnächst hinzugefügt.
Vielleicht kurz zum Hintergrund: Ich habe mir ein Framework geschrieben um Webseiten auf technisch höchsten Niveau ausliefern zu können. Die Bezeichnung "CMS" würde ich dafür nicht verwenden wollen, denn CMS bedeutet mittlerweile eher klicky-klacky-alles-bunt als eine technisch korrekte und performante Umsetzung. Das Framework soll auch in anderen Projekten eingesetzt werden, die Arbeit fließt also nicht nur in eine Seite.
Die doppelten Bindestriche sind Delimiter und persönliche Geschmackssache.
@Can:
Klar, kann man so machen. Werde ich jedoch nicht, siehe erster Post (Datentransfer Mobilgeräte).
Mit besten Grüßen
Sebastian Höhne
Admody RAe AG: Gewerblicher Rechtsschutz, Handels- & Gesellschaftsrecht als auch IT-Recht
vielen Dank!
Freut mich, dass jemand an der Aufgabe mitfiebert und sich nicht mit der zweitbesten Lösung zufrieden geben wird.
Ich habe wieder ein paar Tests durchgeführt (u.a. die Background-Anweisung in das externe CSS, welches auch die Schriften beinhaltet, geschrieben und die zweite JS-Funktion rausgenommen: Gleicher PageSpeed).
Weiterhin habe ich jetzt mal Testseiten eingerichtet, damit das besser nachvollziehbar wird:
Testseite 1
Bei dieser Testseite sind die Bilddaten im ATFCSS. Der Optimierungsvorschlag von Google erhält also direkt die Roundtrips, falls es an diesen liegt (in dem Test sind mehr als vier erforderlich). Mein Clipboard hat wohl einen Teil der Daten abgeschnitten, also nicht wundern, dass das Hintergrundbild nur zur Hälfte angezeigt wird.
Ergebnis: 95/100 Desktop, 85/100 Mobil
Testseite 2
Hier habe ich das Hintergrundbild "tiny" werden lassen (100px jpg-width), das Ergebnis ist schlechter als vorher, da nun das Bild noch optimiert werden sollte. Ansonsten keine Änderung, es scheint also nicht an der Größe selbst zu liegen, sondern an dem erforderlichen Roundtrip trotz JavaScript-Pipe.
Ergebnis: 95/100 Desktop, 100/100 Mobil
Die Header sind jetzt nun auch im Sinne des Mozilla Observatory angepasst, bis auf CSP. CSP ist in der .htaccess bereits vorbereitet, kommt allerdings noch nicht zum Einsatz, denn aktuell liegt noch JavaScript inline. Sobald dies externalisiert ist, werde ich den CSP Header auch setzen.
Mozilla Observatory (aktuell): 75/100, nach der Änderung dann wahrscheinlich 100/100.
Mich hat jedoch gewundert, dass die HSTS-Preload Header Zeit vom Mozilla Observatory länger angegeben wird, als von der HSTS-Preload-List. In der HSTS-Preload-List ist die Seite bereits angemeldet, Status: pending.
Ich bin sehr gespannt, ob wir für die Herausforderung eine Lösung finden werden. Den Roundtrip der externen Ressource zu eliminieren, ohne die Ressource selbst an alle Geräte auszuliefern, wird nicht gerade einfach (bzw. die externe Ressource so laden zu lassen, dass es zu keinem FOUC kommt und der PageSpeed gut bewertet wird). Dies scheint wohl auch für meine Schriftarten zu gelten (extern im CSS, nicht im ATF CSS) - ich dachte bisher, dies hätte ich durch die JavaScript-Funktion umgehen können. Nehme ich eine andere und/oder deutlich langsamere Funktion, kommt es zu einem FOUT bzw. FOUC bei Chrome.
HTTP/2 war auch meine Idee, im Hinblick auf mehrere Ressourcen aber nicht sehr praktikabel und ohne Unterscheidung zwischen Mobil und Desktop leider zu großer Overhead.
Insbesondere, sobald mehrere Bilder ins Spiel kommen. Die Lösung für das Hintergrundbild setzt ja nur den Grundstein zur Erweiterung.
@Cin Media:
Vielen Dank für die Hinweise. Die Webseite ist, bezogen auf Content & Design, noch weit davon entfernt, vollständig zu sein. Bilder als auch Videos sind in Planung und werden selbstredend demnächst hinzugefügt.
Vielleicht kurz zum Hintergrund: Ich habe mir ein Framework geschrieben um Webseiten auf technisch höchsten Niveau ausliefern zu können. Die Bezeichnung "CMS" würde ich dafür nicht verwenden wollen, denn CMS bedeutet mittlerweile eher klicky-klacky-alles-bunt als eine technisch korrekte und performante Umsetzung. Das Framework soll auch in anderen Projekten eingesetzt werden, die Arbeit fließt also nicht nur in eine Seite.
Die doppelten Bindestriche sind Delimiter und persönliche Geschmackssache.
@Can:
Klar, kann man so machen. Werde ich jedoch nicht, siehe erster Post (Datentransfer Mobilgeräte).
Mit besten Grüßen
Sebastian Höhne
Admody RAe AG: Gewerblicher Rechtsschutz, Handels- & Gesellschaftsrecht als auch IT-Recht
