Skip to main content

Achim schrieb dazu am 05.03.2012 | #permlink

Bei manchen Themen bietet es sich an, auf ältere Mail zu antworten ... immerhin habe ich nicht die von 2009 gewählt: http://schnellze.it...

Linkschleuder: Sammlung von nützlichen Links zur Geschwindigkeitsoptimierung für Websites hier http://www.webmonkey.com... (Users Expect Websites to Load in the Blink of an Eye), u.a. auc mit einem Link zu WordPress und dem PageSpeed API: http://www.webmonkey.com... und eine weitere Diskussion dazu hier: http://somerandomdude.com...

Berthold schrieb dazu am 06.03.2012 | #permlink

Ich habe mich mit dem Thema intensiv auseinandergesetzt (und unter anderem das Referenzwerk gelesen: High Performance Websites - http://tinyurl.com... ) und entsprechend eine dezidierte Meinung:

1) Schnelle Ladezeiten sind äußerst wichtig und - wie in allen von dir verlinkten Artikeln postuliert - auch auf Teufel komm raus anzustreben.
2) Die Zeitangaben sind nicht besonders realistisch, wenn die Site einigermaßen umfangreich ist und kein sechsstelliges Budget hinter der Site steckt. Das hängt zusammen mit folgenden Punkten:
---- Ein CDN (Content Delivery Network) kann man sich nur leisten, wenn man Kohle und Manpower hat, das umzusetzen. Braucht man aber, um wirklich konkurrenzfähige Speeds erzeugen zu können.
---- Die Einbindung von Fremdskripten hat massive Auswirkungen auf die Ladezeiten: Google Analytics, Adsense, Plus-Button, DFP; Facebook Likebox, Like-Button, Login; Twitterstream etc. - das sind extreme Performance-Killer, nicht nur weil sie ihre Zeit brauchen und Request erzeugen, sondern auch weil sie gegen elementare Regeln verstoßen (z.B. Bilder nur mit Spezifikation der Dimensionen auszuliefern - macht die Facebook-Likebox nicht; damit hast du gleich mal 3 oder 6 Gesichtsbildchen + Miniaturbild, deren Größe im Browser berechnet werden muss). Ich verweise hierauf: http://schnellze.it...
Natürlich müssen auch große Player solchen Kram einbinden; sie können aber wesentlich sparsamer damit umgehen, evtl. Sonderdeals schließen (ist jetzt nur eine Vermutung) - und haben natürlich ganz andere Partner aus der Oberliga. Adsense wird man auf den Top-10-Sites kaum finden, auch keine 08-15-Skript-Adserver usw.

Die Beispiele sind nicht wirklich realistisch, weil viel zu minimalistisch. Nielsens http://www.useit.com... lädt natürlich schnell, auch die von dir zitierte Some Random Dude ( http://somerandomdude.com... ). Letztere lädt wirklich atemberaubend schnell, hat aber auch fast keine Bilder. Er hat sich auch irrsinnig ins Zeug gelegt, was die Frontendoptimierung betrifft (Pagespeed-/YSlow-Report zu Some Random Dude bei GTmetrix: http://gtmetrix.com... ). Übrigens: Je kleiner die Site, desto einfacher (und billiger - siehe oben) die Optimierung.

Das Tool der Wahl ist - ich erwähnte es schon - GTmetrix: http://gtmetrix.com... - hat auch ein geiles Bookmarklet, da klickst du drauf und er analysiert die aktuelle Seite.

Wir schneiden übrigens - immerhin völlig unoptimiert - nicht so gut ab ( http://gtmetrix.com... ):
/uploads/2012/03/PastedGraphic-413310683820dup.serendipityThumb.png

Achim schrieb dazu am 08.03.2012 | #permlink

Zur Info aus einem dmainfactory-Interview von 03/2011:
QUOTE:
Keep-Alive ist im Shared Hosting nicht sinnvoll einsetzbar. Das wurde erst erneut vor einigen Tagen geprüft.
http://www.df.eu...

Bei dezidierten Servern jedoch wohl schon.
/uploads/2012/03/PastedGraphic-113311958630dup.serendipityThumb.png

Achim schrieb dazu am 08.03.2012 | #permlink

Statt zu versuchen, bestehende Websites mühsam zu optimieren, versuche ich gerade einen Neuaufbau unter Berücksichtigung der Ladezeiten-Performance. Dafür habe ich eine leere Seite erstellt, die auf einem von mir gerne verwendeten, selbst zusammengestellten HTML/CSS-Reset basiert, jQuery bereits einbindet und (als Versuch) mit modernizr, um auch alte IEs bedienen zu können.

Am Ende steht bei einer im body leeren HTML-Seite dann folgendes gtmetrix-Ergebnis:
[attach: 1]


Die 13%, die bei Page Speed fehlen, liegen am fehlenden "Keep-Alive" (bei shared hosting nicht einsetzbar), am verwendeten CSS-Reset, welches hier einfach alles enthält, was vorkommen könnte -- bei Bedarf leicht zu bereinigen -- sowie daran, dass modernizr und jquery bereits im head laden.
Bei YSlow sind es nur die 2% wegen des früher bereits erwähnten, wenig sinnvollen CDN bei meinem Test hier.

Nun suche ich noch eine Lösung, die mir das HTML, CSS und JS serverseitig minified (mit Caching). Das hatte ich hier online bzw. von hand gemacht.
Bisher fand ich nur Google Minify interessant, aber das wird nicht mehr gepflegt??

Hier ist ein ganz guter Online-Minifier: http://www.willpeavy.com... -- allerdings nicht für Kommentare.
Mit BBEdit's "Compact" sind die Online-Tools nicht ganz zufrieden, aber in der Praxis sollte das ausreichen.

Nun wird es spannend, wie sehr sich der Aufbau der Website stückweise auf diese Werte auswirken wird und ob "B" und "A" zu halten bleiben bzw. zu welchem Preis.
/uploads/2012/03/PastedGraphic-213312004690dup.serendipityThumb.png

Berthold schrieb dazu am 08.03.2012 | #permlink

> Keep-Alive ist im Shared Hosting nicht sinnvoll einsetzbar.

Aus Sicht der Hoster!
Ein Vertreter von Alfahosting sagt das explizit so ( https://forum.alfahosting.de... ):

QUOTE:
Ein Server kann nur eine bestimmte Anzahl an Abfragen verarbeiten. Diese Anzahl ist sehr hoch. Wenn nun das Projekt erfolgreich wird, wovon bei Ihnen und anderen unserer Kunden auszugehen ist, wird der Server mit aktivierter Option KeepAlive überdurchschnittlich belastet und die Performance sinkt spürbar für jeden Kunden auf dem betroffenen Server.


Das interpretiere ich so: Wenn wir dir keep-alive gönnen, können wir weniger Kunden auf einen Server stopfen. Und natürlich geht die Bandweite runter, wenn 1000e offene Verbindungen rumhängen.

Wenn du in deine (aschlemmer.net) Header schaust, siehst du, dass dein Server die Verbindung nach jedem Objekt schließt (Connection: close).

Nils Dornblut schreibt in dem df-Blogbeitrag: "Außerdem bringt es [keep-alive] nur minimale Verbesserungen in bestimmten Anwendungsfällen." Ich habe keinen Zweifel, dass er sich wesentlich besser in der Materie auskennt als ich. Aber ich weiß auch, dass keep-alive höchst wichtig ist, weil es den Overhead massiv reduziert. Wenn die Verbindung nach jedem geholten Objekt geschlossen wird, musst du sie für jedes Objekt neu aufbauen, und das kostet jedes Mal einen HTTP-Request + Antwort. Nicht umsonst ist DER zentrale Punkt der Frontendoptimierung die Reduzierung der HTTP-Anfragen.

Ich finde, abseits aller Details, dass es grundsätzlich einmal wichtig ist zu kapieren, dass Frontendoptimierung in vielen (den allermeisten?) Fällen wichtiger ist als Serverpower. Schau gleich aus dem ersten Kommentar zu deinem df-Interview-Link:

QUOTE:
Opcode-Cache für PHP, eine optimierte MYSQL-Config mit Querycache und mehreren GB Arbeitsspeicher und INNODB-Storageengine sowie eine Apache-Konfiguration mit Keep-Alive und Mod_deflate/Mod_gzip sind die Leistungsmerkmale


Die Frontend-Dimension wird als "sowie" erwähnt.

Was DEINEN LADEZEITENTEST angeht: Ich finde ihn sehr interessant. Meine Anmerkungen dazu:

Schick mir gerne mal die Site, dann lade ich sie hoch und schicke dir den Link, dann kannst du vergleichen. (Oder ich gebe dir die FTP-Zugangsdaten, dann kannst du da selber immer die aktuelle hochladen). Dann siehst du genau, wie sehr die Performance von der Hardware/Anbindung abhängt.

Ich minifye CSS und JS mit einem Expressionengine-Plugin. Das kombiniert übrigens gleich noch mehrere JS und CSS zu jeweils einem. HTML minifye ich aus diversen Gründen nicht, das halte ich aber auch für eher zweitrangig. Vielleicht gibt's für dein CMS ein Plugin? Wordpress z.B. "WP Minify" ( http://www.manuel-evers.de... ), keine Ahnung, ob das was taugt. Dann gibt's noch einen Trick mit Plugin-Code, den man an das WP-Template hängt: http://www.intert3chmedia.net...

Es gibt auch Apps ( http://smallerapp.com... sieht gut aus, aber kostenpflichtig ) und online-Tools wie das von dir erwähnte.

Ich würde das nicht zu hoch hängen. Sehr sinnvoll ist es sicher, aus mehreren JS/CSS-Dateien jeweils eine zu machen (Anzahl HTTP-Requests minimieren). Die Kommentare … nun ja. Du überträgst dann halt 20 Bytes zu viel. Die kannst du lieber durch ein um eine Stufe mehr komprimiertes Headerbild rauspressen.

Sobald du Objekte in deine Seite einbaust, wird PageSpeed aber rumheulen, denn dann entstehen neue, vermeidbare HTTP-Requests. Was einen richtigen Wums bringt, ist eine ordentliche htaccess-Konfiguration. Die relevanten Passagen bei meiner aktuell:

CODE:
(IfModule mod_expires.c) (FilesMatch "\.(ico|gif|jpg|jpeg|png|css|js)$") ExpiresDefault "access plus 6 weeks" (/FilesMatch) (/IfModule) # gzip compression. (ifModule mod_deflate.c)   AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript (/ifModule) # BEGIN Expire headers (ifModule mod_expires.c)   ExpiresActive On   ExpiresDefault "access plus 200 seconds"   ExpiresByType image/x-icon "access plus 2592000 seconds"   ExpiresByType image/jpeg "access plus 2592000 seconds"   ExpiresByType image/png "access plus 2592000 seconds"   ExpiresByType image/gif "access plus 2592000 seconds"   ExpiresByType text/css "access plus 604800 seconds"   ExpiresByType text/javascript "access plus 216000 seconds"   ExpiresByType application/javascript "access plus 216000 seconds"   ExpiresByType application/x-javascript "access plus 216000 seconds"   ExpiresByType text/html "access"   ExpiresByType application/rss+xml "access plus 2000 seconds" (/ifModule) # END Expire headers # BEGIN Cache-Control Headers (ifModule mod_headers.c)   (filesMatch "\.(ico|jpe?g|png|gif|swf)$")     Header set Cache-Control "public"   (/filesMatch)   (filesMatch "\.(css)$")     Header set Cache-Control "public"   (/filesMatch)   (filesMatch "\.(js)$")     Header set Cache-Control "private"   (/filesMatch)   (filesMatch "\.(x?html?|php)$")     Header set Cache-Control "private, must-revalidate"   (/filesMatch) (/ifModule) # END Cache-Control Headers # BEGIN Turn ETags Off FileETag None # END Turn ETags Off

Berthold schrieb dazu am 08.03.2012 | #permlink

Hab mal das Datum adjustiert, dass dieser aktuelle Thread oben ist.
Code-Tags funktionieren noch nicht so gut, Zusendung des htaccess-Codes kann jeder gerne bei mir beantragen :)

cronjob