registrieren registriertes Mitglied


Anzeige

Anzeige

HowTo: Gelöscht

Hier könnt Ihr Eure Fragen zu Google-Shopping, GOOGLE-Maps, Bilder- bzw. Video-Suche und sonstigen Suchmaschinen außer Google stellen.
staticweb
PostRank 9
PostRank 9
Beiträge: 2086
Registriert: 04.05.2016, 14:34

Beitrag staticweb » 30.08.2018, 08:44 HowTo: Gelöscht

> Cool wäre es, wenn das Base64-kodierte Bild eine niedrig aufgelöste Version des echten Bildes wäre. Kann sein, dass ModPagespeed sowas kann.

Die Datenmenge wäre zu groß um die Bilder mit Base64 zu kodieren.

> Und noch besser, um mehrere Event-Handler zu ermöglichen (falls schon jemand anderes auf onload wartet): window.addEventListener('load', function() { ... });

Ja, das wurde hier überhaupt nicht erwähnt!

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

Hanzo2012
Community-Manager
Community-Manager
Beiträge: 2000
Registriert: 26.09.2011, 23:31

Beitrag Hanzo2012 » 30.08.2018, 08:52 HowTo: Gelöscht

staticweb hat geschrieben:> Cool wäre es, wenn das Base64-kodierte Bild eine niedrig aufgelöste Version des echten Bildes wäre. Kann sein, dass ModPagespeed sowas kann.

Die Datenmenge wäre zu groß um die Bilder mit Base64 zu kodieren.
Darum habe ich ja auch gesagt: eine niedrig aufgelöste Version des echten Bildes. ;) (quasi ein Thumbnail)

supervisior
PostRank 9
PostRank 9
Beiträge: 2243
Registriert: 26.06.2006, 09:11

Beitrag supervisior » 30.08.2018, 09:11 HowTo: Gelöscht

Hanzo2012 hat geschrieben:
staticweb hat geschrieben:> Cool wäre es, wenn das Base64-kodierte Bild eine niedrig aufgelöste Version des echten Bildes wäre. Kann sein, dass ModPagespeed sowas kann.

Die Datenmenge wäre zu groß um die Bilder mit Base64 zu kodieren.
Darum habe ich ja auch gesagt: eine niedrig aufgelöste Version des echten Bildes. ;) (quasi ein Thumbnail)
Ich weiß grad nicht, was das bringen soll? Mit einem zusätzlichen Bild in niedriger Auflösung anstelle des Fake Bildes wird die zu ladende Datenmenge ja deutlich erhöht und erfüllt nicht den Zweck des hinten anstellen von zu ladenden Inhalten. Darum und nur darum geht es.

Und natürlich wird der mögliche Aspekt, dass womöglich mehrere Eventhandler im Einsatz sein können, nicht berücksichtig. Wie auch und ist auch nicht die absolute Regel, dass es generell so ist. Im Falle dessen packt man eben alles in 1 Funktion und gut ist. Deswegen wird der hier beschriebene Tipp nicht obsolet.

@staticweb

Du bist raus der Diskussion. Hast Dich doch eindeutig und unmissverständlich dafür nicht zur Verfügung gestellt.

staticweb
PostRank 9
PostRank 9
Beiträge: 2086
Registriert: 04.05.2016, 14:34

Beitrag staticweb » 30.08.2018, 09:14 HowTo: Gelöscht

> Darum habe ich ja auch gesagt: eine niedrig aufgelöste Version des echten Bildes. (quasi ein Thumbnail)

Ich fürchte auch das wird zu groß.

Probier es einfach mal aus. Nehme ein Bild, komprimiere und verkleinere es nach deinen Vorstellungen und kodiere es danach als base64. Dann schau mal wieviel Zeichen bzw. bit dafür benötigt werden.

Wenn du inklusive dem restlichen Dokument nicht über die 14KB Schwelle kommst, kannst du es machen.

Hanzo2012
Community-Manager
Community-Manager
Beiträge: 2000
Registriert: 26.09.2011, 23:31

Beitrag Hanzo2012 » 30.08.2018, 09:18 HowTo: Gelöscht

supervisior hat geschrieben:Ich weiß grad nicht, was das bringen soll? Mit einem zusätzlichen Bild in niedriger Auflösung anstelle des Fake Bildes wird die zu ladende Datenmenge ja deutlich erhöht und erfüllt nicht den Zweck des hinten anstellen von zu ladenden Inhalten. Darum und nur darum geht es.
Damit der Benutzer schonmal ein kleines Vorschaubild sieht, bevor das echte Bild geladen wird. Du musst bedenken, dass es relativ lange dauern könnte, bis das onload-Event aufgerufen wird. Wenn z. B. irgendeine externe Ressource (JS, Facebook-Button etc.) zu lange braucht, sieht der Benutzer möglicherweise für ziemlich lange Zeit nur schwarze Rechtecke statt Bilder. Da das Vorschaubild direkt im HTML integriert ist, werden keine neuen Verbindungen zum Server geöffnet. Alternativ könnte man auch eine kleine Lade-Animation als Platzhalter nutzen, damit der Benutzer weiß, dass da noch was kommt. Wenn du gzip-Komprimierung aktivierst, werden die wiederholten Base64-URLs sehr gut komprimiert.
supervisior hat geschrieben:Und natürlich wird der mögliche Aspekt, dass womöglich mehrere Eventhandler im Einsatz sein können, nicht berücksichtig. Wie auch und ist auch nicht die absolute Regel, dass es generell so ist. Im Falle dessen packt man eben alles in 1 Funktion und gut ist. Deswegen wird der hier beschriebene Tipp nicht obsolet.
Ich habe nicht gesagt, dass der Tipp "obsolet" ist. Sondern dass man window.onload = ... nicht nutzen sollte, weil das eben nur einer tun kann. Wie es besser geht, habe ich ja auch direkt gesagt, nämlich mit window.addEventListener. Damit kannst du so viele Event-Handler anhängen wie du lustig bist, ohne dass sie sich gegenseitig stören. Das war nur ein Verbesserungsvorschlag im Detail.

Anzeige von:

Content Marketing Strategie von ABAKUS Internet Marketing
Ihre Vorteile:
  • einzigartige Texte
  • suchmaschinenoptimierte Inhalte
  • eine sinnvolle Content-Strategie
  • Beratung und Umsetzung
Jetzt anfragen: 0511 / 300325-0

supervisior
PostRank 9
PostRank 9
Beiträge: 2243
Registriert: 26.06.2006, 09:11

Beitrag supervisior » 30.08.2018, 09:29 HowTo: Gelöscht

Hanzo2012 hat geschrieben: Damit der Benutzer schonmal ein kleines Vorschaubild sieht. Du musst bedenken, dass es relativ lange dauern könnte, bis das onload-Event aufgerufen wird. Da das Vorschaubild direkt im HTML integriert ist, werden keine neuen Verbindungen zum Server geöffnet.
Wir reden hier doch nicht über Minuten oder Stunden für das Laden von Seiten. Die onload Anweisung feuert unmittelbar nachdem der ganze HTML Kram nebst sonstigen Sourcen geladen ist, wobei das Rendern davon ausgenommen ist. Wenn dann auch noch das Laden von js Files nach der gleichen defered Methode geladen wird und zudem die Bilder vom Laden zunächst ausgeschlossen ist, reduziert sich die Ladezeit des verbleibenden enorm. Das Abarbeiten der onload Funktion fällt dann fast nicht mehr ins Gewicht.

Was Du offenbar komplett vergisst, ist der Pagespeed Gott. Wenn Du ein Thumbnail Bild anstelle des base64 Bildes verwendest, machst Du aus dem hier beschriebenen Tipp eine wirklich obsolete Funktion, die dann absolut keinen Sinn mehr macht, zumal die Datenmenge dann auch noch deutlich erhöht wird.

Probiert das doch einfach mal aus. Am besten am Handy mit schlechtem Empfang!

nerd
PostRank 10
PostRank 10
Beiträge: 4225
Registriert: 15.02.2005, 04:02

Beitrag nerd » 30.08.2018, 09:54 HowTo: Gelöscht

supervisior hat geschrieben: Beim Aufruf einer Internet Seite gibt es keine Priorität, was an den Inhalten wann geladen wird. Der Browser versucht einfach so viel wie möglich gleichzeitig zu laden, wobei es nicht nur um das Laden von Inhalten geht, sodern auch um das Rendern von css und js. [...] Beim Laden einer Seite blockiert im Grunde genommen das Eine das Andere
Doch, es gibt eine prioritaet: es wird in der reihenfolge geladen wie es im quelltext auftaucht. Deswegen wird ja auch empfolen die CSS dateien oben im header einzutragen, damit die styles moeglichst angewendet werden koennen sobald das dokument fertig geladen ist - ansonsten gibt es den effekt das sich elemente nochmal verschieben oder sich die groesse aendert wenn man styles laedt nachdem der dom schon fertig gerendert ist.

Bei dem meisten layouts kommen die bilder die oben auf der seite sind ja auch relativ weit oben im quelltext vor, also macht das schon sinn.

supervisior
PostRank 9
PostRank 9
Beiträge: 2243
Registriert: 26.06.2006, 09:11

Beitrag supervisior » 30.08.2018, 10:14 HowTo: Gelöscht

Natürlich hast damit recht, aber auch unrecht, weil zwischen Laden und fertig geladen immer noch ein Unterschied ist und ein Bild zu laden dauert naturgemäß länger.

Mit Deiner Empfehlung css Dateien im Header einzutragen, hast auch nicht ganz recht. Für gewöhnlich werden css Dateien includiert. Allein dieses Includieren und das Rendern von includierten css Dateien stellt eine Bremse dar (auch aus Sicht von Pagespeed). Würde man aber dieses Includieren auch hinten anstellen, käme es aber zu unschönen Seiteneffekten. Die Lösung und um den Pagespeed Gott ein weiteres Mal zu besänftigen, ist aber eine Lösung, die nur für einen Bruchteil in Frage kommt. Anstelle css Anweisungen in eine css Datei zu packen, definiert man zumindest den Bereich above the fold im Datei Header und lässt den Rest defered laden. Machbar und praktiziere ich auch und Du glaubst nicht wie sich der Pagespeed freut. Der findet gar nicht die Worte dafür wie sehr der mich loben will. :) :) :)

nerd
PostRank 10
PostRank 10
Beiträge: 4225
Registriert: 15.02.2005, 04:02

Beitrag nerd » 30.08.2018, 11:59 HowTo: Gelöscht

supervisior hat geschrieben:Anstelle css Anweisungen in eine css Datei zu packen, definiert man zumindest den Bereich above the fold im Datei Header und lässt den Rest defered laden. Machbar und praktiziere ich auch und Du glaubst nicht wie sich der Pagespeed freut.
Ist aber bei meinen seiten unpraktisch, da ich pro sitzung relativ viele impressions bekomme. Daher alles in einer einzigen css, die dann nur einmal geladen und im browser gecacht wird.

supervisior
PostRank 9
PostRank 9
Beiträge: 2243
Registriert: 26.06.2006, 09:11

Beitrag supervisior » 30.08.2018, 12:14 HowTo: Gelöscht

Auch das ließe sich rel. einfach lösen. Setze einfach einen Cookie beim ersten Laden und frag den einfach ab. Ist er da, wird die css Datei ganz normal geladen. Falls nicht, verfahre wie oben beschrieben. Allerdings ist das Ganze schon mit etwas Aufwand verbunden und lohnt nicht generell. Vor allem beim Ändern von CSS Anweisungen wird das ne ganze Ecke aufwendiger. Ich treib das aber so weit, dass ich dann noch zwischen Desktop, Smartphone und Tablet differenziere....

staticweb
PostRank 9
PostRank 9
Beiträge: 2086
Registriert: 04.05.2016, 14:34

Beitrag staticweb » 30.08.2018, 13:00 HowTo: Gelöscht

> Ist aber bei meinen seiten unpraktisch, da ich pro sitzung relativ viele impressions bekomme.

Ja, die above the fold Optimierung ist etwas aufwendig. Da muss man abwägen ob sich der Augwand lohnt.

> Daher alles in einer einzigen css, die dann nur einmal geladen und im browser gecacht wird.

Auch hier sollte die 14KB Schwelle eingehalten werden oder du nutzt HTTP/2. Auf alle Fälle sollte
das CSS fast ganz oben im <head> eingebunden werden.

supervisior
PostRank 9
PostRank 9
Beiträge: 2243
Registriert: 26.06.2006, 09:11

Beitrag supervisior » 29.01.2019, 13:27 HowTo: Gelöscht

staticweb hat geschrieben:> Ist aber bei meinen seiten unpraktisch, da ich pro sitzung relativ viele impressions bekomme.

Ja, die above the fold Optimierung ist etwas aufwendig. Da muss man abwägen ob sich der Augwand lohnt.

> Daher alles in einer einzigen css, die dann nur einmal geladen und im browser gecacht wird.

Auch hier sollte die 14KB Schwelle eingehalten werden oder du nutzt HTTP/2. Auf alle Fälle sollte
das CSS fast ganz oben im <head> eingebunden werden.
Nur zu Deiner Info HTTP/2 ist seit Jahren State of the art und wird seit mind. 5 Jahren von allen Browsern unterstützt, bzw. von Webservern zur Verfügung gestellt. Der einzige Browser, der kein HTTP/2 kann, ist der IE11 abwärts und auch nur in Kombination mit Windows 7 abwärts. Hinzukommem noch die Bots (Googlebot eingeschlossen) und die Crawler, die sich als User ausgeben. Die von Dir genannten Beschränkungen bzw. der max. Speichermenge im Header kann man inzwischen vernachlässigen.

staticweb
PostRank 9
PostRank 9
Beiträge: 2086
Registriert: 04.05.2016, 14:34

Beitrag staticweb » 29.01.2019, 13:38 HowTo: Gelöscht

Ich weiß jetzt nicht warum du den alten Beitrag herausgesucht hast, aber es ging hier nicht um Browser, sondern um die eingesetzten Webserver.

Ob alle Webhoster inzwischen auf HTTP/2 setzen möchte ich auch bezweifeln.

supervisior
PostRank 9
PostRank 9
Beiträge: 2243
Registriert: 26.06.2006, 09:11

Beitrag supervisior » 29.01.2019, 14:01 HowTo: Gelöscht

staticweb hat geschrieben:Ich weiß jetzt nicht warum du den alten Beitrag herausgesucht hast...
Wenn ich grad mal nix zu tun habe, suche ich nach Deinen Beiträgen und welchen Schmarrn Du wieder verzapfst.... ;)


staticweb hat geschrieben:...aber es ging hier nicht um Browser, sondern um die eingesetzten Webserver.
Falsch! Wie heißt der Titel dieses Threads?

staticweb
PostRank 9
PostRank 9
Beiträge: 2086
Registriert: 04.05.2016, 14:34

Beitrag staticweb » 29.01.2019, 16:55 HowTo: Gelöscht

> Falsch! Wie heißt der Titel dieses Threads?

Wahrscheinlich früher "Welche Browser sind HTTP/2 kompatibel" und wurde gerade geändert. :-)

>> Der einzige Browser, der kein HTTP/2 kann, ist der IE11 abwärts und auch nur in Kombination mit Windows 7 abwärts.

Du solltest dich übrigens mal besser belesen. IE11 erst ab Win 10 und außerdem wird HTTPS bei allen Browsern benötigt.

Antworten
  • Vergleichbare Themen
    Antworten
    Zugriffe
    Letzter Beitrag