registrieren registriertes Mitglied


Anzeige

Anzeige

PageSpeed Insights & Background-Cover-Image

Alles über Google diskutieren wir hier.
Sebastian_
PostRank 1
PostRank 1
Beiträge: 9
Registriert: 26.02.2017, 17:17

Beitrag Sebastian_ » 28.02.2017, 00:24 PageSpeed Insights & Background-Cover-Image

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

Anzeige von:

Personal Branding mit ABAKUS:
  • Höhere Glaubwürdigkeit
  • Hervorhebung Ihrer Kompetenz
  • Stärkung Ihrer Alleinstellungsmerkmale
  • Abhebung von Namensvettern
Profitieren Sie von unserer Erfahrung!
0511 / 300325-0

Sebastian_
PostRank 1
PostRank 1
Beiträge: 9
Registriert: 26.02.2017, 17:17

Beitrag Sebastian_ » 01.03.2017, 02:56 PageSpeed Insights & Background-Cover-Image

Hi,

so, da ist nun meine Lösung: Keine Datenauslieferung des Hintergrundbildes an Mobilgeräte, kein Cloaking oder andere Verschleierungstaktiken.

https://www.admody.com

PageSpeed Insights: 100/100 Mobil, 100/100 Desktop
https://developers.google.com/speed/pag ... ab=desktop

Mozilla Observatory: 100/100 (A+, eigentlich 100/135)
https://observatory.mozilla.org/analyze ... admody.com

HTML-Fehler: 0
https://validator.w3.org/nu/?doc=https% ... ody.com%2F

CSS-Fehler: 0
https://jigsaw.w3.org/css-validator/val ... g=&lang=de

GTMetrix PageSpeed: 100/100
https://gtmetrix.com/reports/www.admody.com/EINc3MYg


Einziger Wermutstropfen: FOUC/FOUT aktuell bei mir im Chrome, ggf. muss ich die JavaScript-Funktion anders ausführen oder das Rendering um ein paar ms verzögern lassen.

Beste Grüße

Sebastian Höhne
Admody RAe AG: Gewerblicher Rechtsschutz, Handels- & Gesellschaftsrecht als auch IT-Recht

Can
PostRank 9
PostRank 9
Beiträge: 1035
Registriert: 30.10.2010, 13:47

Beitrag Can » 01.03.2017, 08:56 PageSpeed Insights & Background-Cover-Image

Ja der fout ist übel, vor allem da er auch immer beim Navigieren auftritt. Würde testweise die fontface Anweisungen mit ins inline CSS packen, oder meckert dann der Test?

ole1210
PostRank 10
PostRank 10
Beiträge: 7476
Registriert: 12.08.2005, 11:40
Wohnort: Olpe

Beitrag ole1210 » 01.03.2017, 09:50 PageSpeed Insights & Background-Cover-Image

Servus Sebastian,

hast du mal über ein generell neues Layout nachgedacht? Du greifst die selbe Farbgestaltung wie irgendwelche warez&co Seiten auf.

Ich würde alles deutlich heller, seriöser & vertrauenserweckender gestalten. Damit hältst du die Kunden länger auf der Seite, generierst mehr Seitenaufrufe, etc. Das wiederum ist deutlich relevanter als ein Pagespeed von 97 oder 100 Punkten.

Nebenbei sprichst du mit einem seriösen Auftritt auch mehr Mandanten an!

chris21
PostRank 9
PostRank 9
Beiträge: 2763
Registriert: 10.04.2005, 19:17

Beitrag chris21 » 01.03.2017, 13:50 PageSpeed Insights & Background-Cover-Image

@Sebastian:

Dann war der Lösungsansatz von hier https://www.abakus-internet-marketing.d ... ml#1002196 :
Eventuell sogar mit einem eigenen externen CSS und dort als data URI, die mit rel="stylesheet" und media="screen and (min-width:769px)" geladen wird (eventuell async).
ja recht passend (zusammen mit dem nachladen des externen css über die media-Anweisung im JS). Danke, werde ich gleich mal bei einem Projekt testen.

PS: Im noscript-Bereich scheinen die media Angaben für die beiden CSS vertauscht zu sein (bzgl. min-width und max-width).

Anzeige von: