Bringt das Auslagern der Mediendateien wirklich Vorteile

  • Hallo zusammen,

    ich lese immer wieder etwas davon, das eine Auslagerung von Mediendateien z.B. Bilder Geschwindigkeitsvorteile bringt.
    Da hier die Request reduziert werden.

    Stimmt das wirklich so extrem?

    Und wie handhabt Ihr das?

    Desweiteren habe ich gelesen, das es schon reicht die Mediathek auf eine eigene Subdomain auszulagern.
    Quelle: http://blog.kulturbanause.de/2012/05/wordpr…-warum-und-wie/

    Wie seht Ihr das?

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Hallo Segelfreund!

    Eine pauschale Aussage ist hier nicht möglich, da eine langsame Seite eine vielzahl von Ursachen haben kann.
    Eine qualifizierte Aussage kann nur getroffen werden, wenn die Ursache ermittelt wurde. Dann können auch gezielte Maßnahmen getroffen werden.
    Was dort beschrieben wird, ist EINE Ursache (von vielen).
    Natürlich KANN eine Verlagerung der Mediathek ein Geschwindigkeitsvorteil bringen, wenn mehr Requests gleichzeitig abgearbeitet werden können - ABER...
    ...dazu müssen natürlich auch entsprechende Dateien in der Mediathek drin sein, die sehr hohe Datenströme produzieren - zum Beispiel Filme, MP3-Dateien oder unkomprimierte Bilder.
    Hier kann man zum Beispiel auch schon viel erreichen, wenn man MP3-Dateien und Bilder komprimiert. Auch ein entsprechendes Cache-Plugin für Wordpress ist empfehlenswert.

    Eine langsame Seite kann viele Ursachen haben.

    Das geht los von einem Billigpaket von einem Billighoster bei dem man sich mit mehreren Kunden den Webserver teilen muss, und wo die Ursache an der schlechten Hardwareperformance des Servers liegt.
    Abhilfe würde hier z.B. schaffen ein besseres (teureres) Paket kaufen, bei dem man mehr Leistung bekommt.

    Das geht weiter bei vielleicht einer schlechten Leitung zu demjenigen, der sich deine Homepage anschauen will - wenn der z.B. eine langsame ISDN-Leitung hat, oder schlechte Wlan-Verbindung. Oder einfach nur ein veraltetes DSL-Modem mit maximal 52 Mbit/s.

    Das kann natürlich auch an zu großen Dateien in der Mediathek liegen, die sehr viel Traffic (Datenströme) verursachen. Bevor ich aber solch einen Weg (wie in dem Link beschrieben) gehen würde, würde ich schauen, wo kann ich selber was optimieren?

    Wenn du das Gefühl hast, deine Homepage ist zu langsam, dann würde ich sie mal an deiner Stelle testen.
    Es gibt ein paar ganz gute Analyseseiten, die gute Hinweise auf eine Optimierung geben.

    Ich habe im laufe der Zeit solche Tipps aus dem Forum für mich mal gesammelt, und konnte auch das meiste umsetzen, hier mal ein paar Testseiten.

    Bei "WebPagetest" und "Pingdom Website speed test" gibt es sogenannte Waterfall Grafiken, bei denen man ganz genau sehen kann, welche Programme, Bilder etc. wieviel Zeit brauchen. Es gibt aber auch andere hilfreiche Hinweise. So konnte ich über die Testseite "Seitenreport" Fehler in meiner Styles.css herausfinden, und teilweise beseitigen.

    Seitenreport

    WebPagetest
    Der Test dauert oftmals lange, weil man in einer Warteschlange hängt - ich finde, es lohnt sich aber.

    Page Speed Insights (von Google)

    GTmetrix

    Pingdom Website speed test

    Ein paar Worte zu Optimierung von Bildern.
    Eine Homepage mit Blog-Karakter kommt bestimmt mit Bildern aus, die jeweils weniger als 100 Kilobyte groß sind. Aber eine Homepage wie meine (Fotografielastig), dem wird solch eine Qualität nicht zufrieden stellen. Dazu kommt noch die Frage, wie man die Bilder vor einem Klau schützen kann?
    Mein Kompromiss war, dass die Bilder nicht größer als 220 Kilobyte sind. - Für das Auge noch eine gute Qualität, aber für eine digitale Weiterverarbeitung zu schlecht.
    ich nehme dafür in Kauf, dass bei einer Slideshow mit 20 Bildern der Start ein paar Sekunden dauern kann, bis alle Bilder geladen wurden.
    Bei Bildern, die aus Screenshots von graphischen Benutzeroberflächen bestehen und nicht aus 16 Mio Farben bestehen, sind meistens Bilder im GIF-Format kleiner als das selbe Pondon als JPG.
    Weiterhin reichen für eine Darstellung auf einem Montor 72 dpi durchaus aus. 300 dpi benötigt man nur für Ausdrucke - auf dem Monitor sind 300 dpi nicht zu erkennen.

    Optimierung von MP3
    Die meisten MP3-Lieder werden mit einer Bandbreite von 44 Kiloherz aufgenommen.
    Das menschliche Ohr hört aber bei ca. 20 Kiloherz auf. Also reicht es, ein Stück auf 22 Kiloherz Bandbreite zu reduzieren.
    Ich persönlich biete Predigten zum hören auf meiner Homepage an. - Eine Reduzierung auf Mono (anstelle Stereo) bringt noch einmal eine Reduzierung der Dateigröße. Da Stereo bei einer Predigt (Vortrag) sowieso keine Rolle spielen.
    Weiterhin verwende ich eine variable (und keine feste) Samplingrate, die noch einmal die Dateigröße reduziert.

    Optimierung von Video
    Es ist z.B. mittlerer Schwachsinn ein Full HD-Video 1920 x 1080 auf eine Homepage zu stellen, um es dann in dem Videofenster in 640 x 360 zu quetschen. Intelligenter ist es, das Video vor dem hochladen auf die Homepage gleich in das Zielformat zu konvertieren was enorm die Dateigröße schrumpfen lässt. - Und ergo - je kleiner eine Datei, desto schneller ist die Datenübertragung. - Oder man bedient sich eines Streaming-Dienstes wie z.B. Youtube oder vimeo. - dafür gibt es auch Plugins für Wordpress.

    Ich hoffe, ich konnte dir genug Anregungen geben.

    Gruß Frank

  • HI Frank,

    danke für die ausführliche Beschreibung.

    Mit gtMetrix und GooglePageSpeed bin ich schon am arbeiten.
    Und hier kam halt die Info bei gtMetrix das die Bilder reduziert werden sollten.

    Auf der einen Seite richtig, auf der anderen muss ich halt auch den Kompromiss zwischen Schnelligkeit und Qualität hinbekommen.
    Deshalb die Frage der Auslagerung.

    Das mit dem Tarif ist auch klar, bloss leider kann ich über den Tarif nicht allein entscheiden.
    Da es sich um eine Vereinsseite handelt, sollte diese natürlich auch sagen wir so günstig wie möglich sein. Denn jeder Verein versucht sein Geld beisammen zu halten. Ich persönlich würde auch lieber auf den nächst höheren Tarif gehen.

    Das mit dem Seitenreport ist allerdings schon heftig, er zeigt mir glatte 1258 css Fehler an.

    Aber wenn ich das eigentliche betrachte also die Ladezeit der Webseite, sehe ich halt das dass laden der Bilder am längsten dauert. Gerade Slider und Co.

    Und das bringt mich halt zu der Überlegung.

  • Hi, an deiner Stelle würde ich erstmal dieses Problem hier angehen:

    [TABLE="class: styled-table rules"]
    [TR="class: odd"]
    [TD="class: rules-name"]Serve scaled images[/TD]
    [TD="class: rules-grade"]F (0)[/TD]
    [TD="class: rules-average"]87%[/TD]
    [TD="class: rules-type"]Images[/TD]
    [TD="class: rules-weight"]High -> erster Punkt bei GTmetrix[/TD]
    [/TR]

    [tr]


    [TD="colspan: 5"][/TD]

    [/tr]


    [/TABLE]

    Das mit dem CDN kann man immer noch machen, wenn alles andere nicht Hilft.
    Oder den Provider wechseln.

    Aber wie gesagt würde ich erstmal die anderen Probleme angehen, das mit den 1258-CSS Fehlern bestärkt mich auch wieder in meiner Meinung gegenüber Cyberchimps (wenn die Fehler nicht von Plugins stammen)....
    Das wirkt sich sicher auch nicht positiv auf die Geschwindigkeit aus.

    MfG

    Einmal editiert, zuletzt von g3h (10. Oktober 2013 um 10:32)

  • Ja so langsam frage ich mich ob ich den richtigen Provider gewählt habe. Denn seitens des Providers wurden jetzt auch Überschreitungen der CPU Zeit ermittelt. Was unter anderem auch am Tarif liegt.

  • Naja die Schuld würde ich jetzt noch nicht so schnell auf den Provider schieben, erstmal würde ich versuchen mal über die 70% bei GTmetrix zu kommen (monetan sinds 51% 22 Sekunden PageLoad...) im PageLoad und mich wegen den 1258 Fehlern mal schlau machen. Wenn die alle von deinem Pro Theme kommen würde ich dort mal nachfragen beim Autor.

    MfG

  • Also laut meinem Provider, hatte ich Abbrüche in der CPU-Laufzeit bei der Erstellung von Beiträgen.
    Klar dies hat erstmal nichts mit den Messungen von gtMetrix zu tun. Hier werde ich mich ranmachen und das mit den Bildern heute Abend umsetzen.

    Laut dem Plug-In S3, verursacht allein das SEO von Yoast 40% Auslastung.

  • Ja um so weniger Plugins um so besser.
    Nochmal zurück zu der eigentlichen Frage mit der Subdomain, wenn ich mir dort die Kommentare so durchlese, würde ich es nicht machen. Einer schreibt sogar es wäre ein Griff in die Kloschüssel (von 740ms auf 2,7s) und bei vielen scheint der Upload der Bilder nicht mehr zu gehen. Dann lieber einen CDN irgendwann.

    Einmal editiert, zuletzt von g3h (10. Oktober 2013 um 13:40)

  • Das mit den Plug-Ins ist schon klar.

    Nur leider kann ich auf die verwendeten nicht wirklich verzichten.
    Zum Teil zum Schutz der Webseite, Komfort für die User und mich. Und auch die SEO Optimierung ist eigentlich wichtig.

    Aber egal darum geht es hier nicht.

    Ich werde dann mal die Bilder bearbeiten, vor allem die auf der Startseite und verkleinern und optimieren.
    Letzendlich muss es wirklich nicht sein, das für die kleinen Thumbnails das große Foto als Basis genommen wird.

  • Wenn Yoast schon 40% Last generiert, ist der Webspace arg schwach.

    Ein oder mehrere CDN's - als einfache Subdomain angelegt - können das Ganze schon deutlich verbessern. Hier werden ganz einfach die statischen Inhalte ausgelagert und das Caching im Browser dafür aktiviert. Technisch kann man das Thema noch deutlich weiter ausreizen, was für einen Blog aber weniger relevant ist.

    Für die anderen Optimierungsbaustellen gibt es dann genug Infos bei Google und Co. - das brauch man hier nicht immer wieder durchzukauen.

    Viele machen bspw. den Fehler, Bildmaterial unbearbeitet einfach Hochzuladen. Und ein 4000 Pixel großes, 4,5 MB schwangeres JPEG hat halt eben Ladezeit... ;) Tipps an der Stelle: 1000 Pixel breite/höhe sind ausreichend und die Dateigröße sollte dabei nicht über 250KB pro Bild liegen. Dann werden auch die im Rahmen des Themes generierten kleineren Dimensionen auch "passend". :)

    Viel Erfolg.

  • Zumindest hast du jetzt erst mal Ansatzpunkte.
    Mach erst mal das, was dir gerade ins Auge springt, was du kannst und was kein Geld kostet.
    Wenn die Homepage danach immer noch langsam ist, dann kannst du dich schwierigeren Dingen zuwenden.
    So habe ich es auch gemacht.
    Ich persönlich würde dir vielleicht auch erstmal ein Cache-Programm als Plugin für Wordpress empfehlen.
    Das bewirkt, dass eine Seite die aufgerufen wird in den Cache gelegt wird, und somit beim zweiten Aufruf schneller geladen wird. So kann man eine Beschleunigung der Seite zumindest schon mal beim zweiten Aufruf feststellen.
    Es gibt einige diesbezügliche Programme für Wordpress. - Welches das Beste ist, kann ich zwar nicht sagen, aber als Laie hat mich persönlich Hyper Cache deswegen überzeugt, weil man dort kein Crack sein muss, und nur ein paar Voreinstellungen vornehmen muss, damit es funktioniert.
    Auch habe ich einen Codeschnipsel diesbezüglich in der htaccess eingebunden, der auch zu funktionieren scheint. Wenn ich heute abend mal dazu komme, suche ich ihn heraus und poste ihn hier. Momentan geht das gerade nicht.

    Zur Optimierung von JPEG-Bildern benutze ich Adobe Photoshop Elements.
    Da mein Slider ein Bild nicht löschen kann, bevor das nächste angezeigt wird, und ich Hochformat- und Querformatbilder durcheinander benutzen wollte, habe ich meine Bilder alle in ein Quadraht von 610 x 610 Pixeln bei 72 dpi eingefügt. Und wie gesagt, wenn ein Bild 220 Kilobyte überschreitet, dann reduziere ich die Bildqualität durch Erhöhung der Komprimierung. Die Komprimierungsstufen werden in Photoshop in 12 Stufen angezeigt. Meine Bilder bewegen sich da zwischen Stufe 10 und 12 (wobei 1 starkste Komprimierung, und 12 keine / oder schwächste Komprimierung bedeuten).
    Hier habe ich gemerkt, dass ich nicht mehr als 20 Bilder in einer Slideshow haben sollte.
    Hier mal ein Beispiel mit knapp über 50 Bildern Zoograffiti
    Und hier mal ein Beispiel mit 11 Bildern Tierisch gut, damit du mal ein Vergleich hast.

    Gruß Frank

    Einmal editiert, zuletzt von Frank9652 (10. Oktober 2013 um 16:25)

  • So 70 Punkte habe ich zwar noch nicht ganz geschafft, aber fast.
    Jetzt sind es 68 Punkte, also das mit der Bearbeitung der Bilder hat etwas gebracht.

    Wenn ich mir jedoch die Timeline anschaue, braucht er extrem lange um die paar Bilder zu laden.
    Da er auch immer nur ein paar, lädt verzögert sich das ganze dann entsprechend.

    Außerdem muss ich mal schauen wie ich den Punkt "Specify image dimensions" hin bekomme.

  • Sieht schon besser aus, die Seite ist jetzt weniger als halb so groß. Komischerweise hat sich das kaum auf die Ladezeit ausgewirkt.
    Hast du schon folgendes in der .htacess ?

    Code
    <IfModule mod_headers.c>
    Header set Connection keep-alive
    </IfModule>

    (Das ganze aber erst nach den Einträgen von Wordpress, also hinter #END WordPress)

    Ist für den Punkt Keep-Alive, der scheint mir erstmal wichtiger als die Dimensionen der Bilder immer anzugegben.

    MfG

  • Bezüglich Header steht folgendes drin

    # BEGIN Cache-Control Headers
    <FilesMatch "\.(ico|jpeg|jpg|png|gif|swf|css)$">
    Header set Cache-Control "max-age=5184000, public"
    </FilesMatch>
    <FilesMatch "\.(js)$">
    Header set Cache-Control "max-age=5184000, private"
    </FilesMatch>
    <FilesMatch "\.(xhtml|html|htm|php)$">
    Header set Cache-Control "max-age=5184000, private, must-revalidate"
    </FilesMatch>
    # END Cache-Control Headers

    Habe es mal reingenommen.
    Und was soll ich sagen?
    Wahnsinn 92 Punkte!8-)

    Einmal editiert, zuletzt von segelfreund (10. Oktober 2013 um 20:10)

  • Hey das ist doch erfreulich, nur leider ist der PageLoad immer noch auf 22s (laut GTmetrix jedenfalls). Irgendwas scheint da wirklich beim Laden der Bilder faul zu sein, die hauen ja immer voll rein, obwohl die teilweise nicht größer sind als andere Dateien. Entweder es liegt an einem Plugin oder es liegt am Provider. Vielleicht hier mal nachfragen. Mir fällt dazu nichts mehr ein.

    Eventuell zeigt GTmetrix hier aber auch einfach falsche Werte. Was mich aber wundern würde.

    MfG

    Einmal editiert, zuletzt von g3h (10. Oktober 2013 um 20:48)

  • Also irgendetwas stimmt bei dem laden der Bilder nicht.
    Ich habe jetzt mal testweise einige Bilder auf meinen testblog geladen und darüber verlinkt.
    Hier ist die Ladezeit der Bilder wesentlich langsamer.

    Kann das evtl. auch an der DB liegen?

  • Also Sie vermuten das es ein Plug-In sei.
    Kann man die Plug-Ins gefahrlos deaktivieren und wieder aktivieren?

    Komisch trotz deaktiviertem Plug-In cachify und autooptimize, ist die Ladezeit der Seite jetzt schneller.

    Ist doch merkwürdig, oder?

    Einmal editiert, zuletzt von segelfreund (11. Oktober 2013 um 15:05)

  • So, ich reiche jetzt mal den Codeschnipsel nach den ich mal im Web gefunden hatte.
    Den habe ich in die htaccess eingefügt, direkt unter
    # END Wordpress

    Wo ich ihn herhabe, kann ich aber nicht mehr sagen...

    # -------------------------------------------------------------

    # Optimierung der Homepagegeschwindigkeit on

    <ifModule mod_headers.c>
    Header set Connection keep-alive
    </ifModule>

    <IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom_xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/x-shockwave-flash
    </IfModule>

    <IfModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
    </IfModule>

    <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType text/javascript "access plus 1 week"
    ExpiresByType text/html "access plus 1 week"
    ExpiresByType application/javascript "access plus 1 week"
    ExpiresByType application/x-javascript "access plus 1 week"
    ExpiresByType application/xhtml-xml "access plus 600 seconds"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 month"
    </IfModule>

    <ifmodule mod_headers.c>
    <filesmatch "\\.(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "max-age=2592000, public"
    </filesmatch>
    <filesmatch "\\.(css)$">
    Header set Cache-Control "max-age=604800, public"
    </filesmatch>
    <filesmatch "\\.(js)$">
    Header set Cache-Control "max-age=604800, private"
    </filesmatch>
    <filesmatch "\\.(x?html?|php)$">
    Header set Cache-Control "max-age=600, private, must-revalidate"
    </filesmatch>
    </ifmodule>

    <IfModule mod_headers.c>
    Header append Vary Accept-Encoding
    </IfModule>

    # Optimierung der Homepagegeschwindigkeit off

    # -------------------------------------------------------------


    Gruß Frank

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!