Pagespeed durch Auslagerung von Bildern und Grafiken

[Der-Siegfried]

Bei Überlegungen wie ich meine Website und die Auffindbarkeit verbessern kann, beschäftigt mich zur Zeit das Thema Auslagerung, insbesondere von Bildern und Grafiken.

Nachdem was ich gelesen habe, sind die Requests pro Domain limitiert, was sich auf die Geschwindigkeit beim Aufbau einer Website auswirkt.

Entsprechend erscheint es mir sinnvoll alle Bilder und Grafiken auf eine Subdomain (z.B. img.meinewebsite.de ) auszulagern und vor dort zu laden.

Frage 1 an Euch: Gebt Ihr mir da recht oder liege ich hier falsch?

Hierzu stelle ich mir auch die Frage in welchem Umfang so eine Auslagerung sinnvoll ist und wann Quatsch anfängt.

Frage 2 an Euch: Wenn die Auslagerung sinnvoll ist, wäre es dann noch besser die Inhalt auf verschiedene Subdomains zu verteilen? z.B. Icons auf icon.meinedomain.de, Fotos auf foto.meinedomain.de, CSS auf css.meinedomain.de, etc.

Besonders hinsichtlich des Bildmaterials kommt natürlich noch eine weitere Überlegung hinzu: Wenn die Bilder zukünftig woanders liegen, müssen für die URLs auch Umleitungen angelegt werden.
Da bei meinem Projekt mit ca. 150 Seiten doch ein paar Bilder zusammen kommen, wird die Liste der Umleitungen in der .htaccess sehr lang.

Frage 3 an Euch: Würden die Vorteile der Auslagerung hinsichtlich der Aufbaugeschwindigkeit die Nachteile der großen .htaccess-Datei (die ja auch verarbeitet werden muss) überwiegen oder ist es vielleicht dadurch eher kontraproduktiv?

Vielen Dank für antworten im Voraus!

[ichhustedichan]

https://developers.google.com/speed/pagespeed/insights/
hier kriegst du jeden punkt nach der auswertung eigentlich nochmal erklärt.

zu deinen fragen halte ich mich erstmal zurück, da das nur gefährliches halbwissen wäre..

bei blogs mit wordpress verwende ich für sowas eigentlich immer w3 total cache und bin so weit auch recht zufrieden damit.

[chris21]

Subdomains zur Auslagerung sind insb. auch hinsichtlich der cookieless Requests interessant.

Daher zu 1) Ja, gute Idee, insb. wenn Du mögliche Cookies so konfigurierst, dass sie über www.example.com laufen und nicht über .example.com, damit dann bei jedem Grafik/CSS/etc. Request der Browser nicht immer Cookies mitschicken muss.

Zu 2) Muss man überlegen, liegt auch daran, wieviele Dateien pro Unterseite ausgelagert werden (1 CSS Datei oder zig? Wenige Bilder oder viele?). Ich nutze beide Varianten (bei verschiedenen Projekten) und fahre sowohl mit einer statischen Subdomain für alles als auch mit getrennten Subdomains für Bilder vs. CSS vs sonstiges gut.

Zu der Geschichte der Umleitungen: Wenn Du bisher ein Verzeichnis hattest, wo die Bilder liegen, kannst Du einfach dieses Verzeichnis per mod_rewrite umleiten und musst nicht jedes Bild einzeln umleiten.


Insgesamt solltest Du noch bedenken: Falls Du schon eine Verschlüsselung nutzt oder den Einsatz planst, müssen bekanntlich alle Inhalte verschlüsselt werden; demnach also auch alle eingesetzten Subdomains. Dafür müsste man dann bei vielen Subdomains entweder Zertifikate mit entsprechenden SANs nutzen oder Wildcardzertifikate. Dies sollte bei der Planung berücksichtigt werden, falls HTTPS wünschenswert ist.

[nerd]

Nachdem was ich gelesen habe, sind die Requests pro Domain limitiert, was sich auf die Geschwindigkeit beim Aufbau einer Website auswirkt.

Entsprechend erscheint es mir sinnvoll alle Bilder und Grafiken auf eine Subdomain (z.B. img.meinewebsite.de ) auszulagern und vor dort zu laden.

Frage 1 an Euch: Gebt Ihr mir da recht oder liege ich hier falsch?

Kommt ganz darauf an wie deine webseite aussieht und wo die besucher gerkommen. die meisten browser erlauben wohl derzeit 8 gleichzeitige verbindungen pro domain. Wieviele requests pro seitenaufruf kommen bei dir auf "bilder"? Bei den meisten seiten welche ich umbauen soll, sind werbung und tracker fuer ~50% der ladezeit verantwortlich. Einmal weil die marketing abteilung meint das ein tracker/analytics script nicht genug ist, oder weil die technische umsetzung dieser scripte einfach nur scheisse ist (javascript was die seite blockt, oder der tracker server ist in den USA und braucht mindestens .5s zum antworten). Bilder kommen meistens erst an zweiter stelle.

Frage 2 an Euch: Wenn die Auslagerung sinnvoll ist, wäre es dann noch besser die Inhalt auf verschiedene Subdomains zu verteilen? z.B. Icons auf icon.meinedomain.de, Fotos auf foto.meinedomain.de, CSS auf css.meinedomain.de, etc.

Nein - CSS solltest ja ohnehin nur eine datei haben, und css files werden wie JS und Fonts ja sowieso vom browser gecached und daher nur bei ersten seitenaufruf geladen.
Wenn du jQuery, Bootstrap, AngularJS oder irgend ein anderes gramework verwendest, dann setzte den link auf deiner seite zum google CDN: <script src="https://ajax.googleapis.com/ajax/libs/j ... "></script> anstatt es selbst auf deinem eigenen server zu hosten.

Besonders hinsichtlich des Bildmaterials kommt natürlich noch eine weitere Überlegung hinzu: Wenn die Bilder zukünftig woanders liegen, müssen für die URLs auch Umleitungen angelegt werden.
Da bei meinem Projekt mit ca. 150 Seiten doch ein paar Bilder zusammen kommen, wird die Liste der Umleitungen in der .htaccess sehr lang.

Verstehe ich nicht - wieso sollte deine htaccess bilder umleiten? Mache es richtig und aendere die <img> tags selbst mit den korrekten "src" angaben sodass der browser weiss wo er die bilder herbekommt, und belaestige deinen server nicht mit unnoetigen umleitungen.
Wenn du viele besucher aus uebersee bekommst, kann es sich lohnen die bilder auf ein CDN (Amazon? Akamai?) auszulagern. Das kostet nicht die welt.

[Der-Siegfried]

https://developers.google.com/speed/pagespeed/insights/
hier kriegst du jeden punkt nach der auswertung eigentlich nochmal erklärt.

zu deinen fragen halte ich mich erstmal zurück, da das nur gefährliches halbwissen wäre..

bei blogs mit wordpress verwende ich für sowas eigentlich immer w3 total cache und bin so weit auch recht zufrieden damit.

Danke für den Hinweis. Hinsichtlich Google ist bei mir alles im grünen Bereich, ich versuche es nur noch etwas besser zu machen.

Kommt ganz darauf an wie deine webseite aussieht und wo die besucher gerkommen. die meisten browser erlauben wohl derzeit 8 gleichzeitige verbindungen pro domain. Wieviele requests pro seitenaufruf kommen bei dir auf "bilder"? Bei den meisten seiten welche ich umbauen soll, sind werbung und tracker fuer ~50% der ladezeit verantwortlich. Einmal weil die marketing abteilung meint das ein tracker/analytics script nicht genug ist, oder weil die technische umsetzung dieser scripte einfach nur scheisse ist (javascript was die seite blockt, oder der tracker server ist in den USA und braucht mindestens .5s zum antworten). Bilder kommen meistens erst an zweiter stelle.

- Google Analytics nutze ich auch, aber das war es dann auch.
- Scripte kommen bei mir nur auf einzelnen Unterseiten zum Einsatz und hier dann auch direkt im Quelltext (sind immer nur kleine Funktionen).
- jQuery ist ebenfalls nur auf einer Unterseite und hier bereits Google CDN.
- der Quellcode ist auch ohne überflüssigen Schnickschnack so schmal wie möglich gehalten. Kein Spagetti-Code und eigentlich auch keine verzichtbaren Elemente und Verschachtelungen.

Mit Bildern und Grafiken bin ich eigentlich auch eher sparsam. Allerdings durch ein etwas umfangreicheres Portfolio und ergänzende Symbolik sind dort auf einigen Seiten schon etwas mehr Bilder (bis zu 20 schätze ich mal).

Nein - CSS solltest ja ohnehin nur eine datei haben, und css files werden wie JS und Fonts ja sowieso vom browser gecached und daher nur bei ersten seitenaufruf geladen.
Wenn du jQuery, Bootstrap, AngularJS oder irgend ein anderes gramework verwendest, dann setzte den link auf deiner seite zum google CDN: <script src="https://ajax.googleapis.com/ajax/libs/j ... "></script> anstatt es selbst auf deinem eigenen server zu hosten.

CSS habe ich überwiegend nur eine Datei. An einigen Stellen sind es 2 (z.B. bei Seiten mit Formularen), um die Haupt-CSS etwas kleiner zu halten.

Es geht mir auch darum das alles vielleicht noch etwas besser zu machen. Von daher wäre hier meine Frage, ob die Auslagerung der CSS-Dateien vielleicht einen geringfügigen Vorteil bringt.
Auch hinsichtlich der Fonts, was aber bei mir auch nur zwei verschiedene sind.

Verstehe ich nicht - wieso sollte deine htaccess bilder umleiten? Mache es richtig und aendere die <img> tags selbst mit den korrekten "src" angaben sodass der browser weiss wo er die bilder herbekommt, und belaestige deinen server nicht mit unnoetigen umleitungen.
Wenn du viele besucher aus uebersee bekommst, kann es sich lohnen die bilder auf ein CDN (Amazon? Akamai?) auszulagern. Das kostet nicht die welt.

An die htaccess hatte ich eigentlich gedacht wegen der Bilder-Suche von Google. Damit es hier keine toten Links gibt und keine Besucher verloren gehen...
Das ich meine img-Tags ändere ist eigentlich selbstverständlich.

Liege ich da falsch?

[mogli]

Gerade bei CSS wäre ich damit sehr vorsichtig und würde vorab lieber testen: https://www.jonathanklein.net/2014/02/r ... omain.html