Seitengeschwindigkeit optimieren

[jeff1980]

Hallo zusammen,

seit einigen Tagen ist unser größtes Projekt (www.festtagsgedichte.de) im neuen Design online. Das Alte war mittlerweile einfach zu angestaubt und in vielen Punkten alles andere als optimal.

Bei diesem Design habe ich von Anfang an auch darauf geachtet, dass sie etwas schneller geladen wird. Es ist mir größtenteils auch gelungen (komprimiertes CSS, relativ wenig, kleine Bilder etc.).
Dennoch könnte ich einige Dinge optimieren.

Was mich nun speziell interessieren würde, ist das Laden von Bildern und Scripten über eine SubDomain (z.B. images.festtagsegdichte.de und scripts.festtagsgedichte.de). Ich habe es testweise mal ausprobiert, indem ich diese SubDomain einfach auf den normalen Root-Pfad der Homepage gelegt habe. Das hat sogar noch 3-5 Punkte gebracht (je nach Seite).
Dabei habe ich aber natürlich Angst, dass Google Probleme macht wegen doppeltem Content. Wie kann man so etwas am besten angehen? Die SubDomain direkt auf die jeweiligen Unterordner verweisen (uploads/images etc.)? Oder ist es ok, die SubDomain direkt auf Hauptverzeichnis zu legen?

Jan

PS: Noch mal ein riesiges Danke für Eure Hilfe. Ohne die wäre der RSS-Feed sowie die mehrsprachigen Texte (viele sinds leider noch nicht) nicht möglich gewesen. Ganz abgesehen vom Rest (CMSms....) 

[uniqu3]

Die Seite ist dir gelungen, einfach und übersichtlich, deutlich besser als zuvor.
Eventuell könntest Du noch die Hintergrundbilder mit sprites erstellen, es bringt nix in der größe/menge aber es bringt was bei server anfragen.

Die buttons zu socialen Netzwerken könntest Du ebenfalls mit CSS und unordered list gestalten, so könntest Du die icons ebenfalls auf sprite basis erstellen statt einzelne icons per tag einzubinden.

Ein nettes tool zu Sprite Erstellung findest Du hier http://spriteme.org/

Schau Dir auch noch das ScriptDeploy modul, dort hast Du noch die Möglichkeit die CSS und JS Dateien zu gruppieren (wieder weniger anfragen) und zu minimieren.

Die subdomain geschichte habe ich persönlich auf unterordner geleitet, sprich img.meinedomain auf uploads/meintemplate und scripts.meinedomain auf uploads/scripts.

[cyberman]

Den Tuning-Thread hast du ja vermutlich schon durch, oder?!

Werf einfach mal PageSpeed an - da gibts noch mehr als genug zu optimieren (will ich jetzt nicht alles aufzählen ).

Zum Thema subdomains gab es vor längerem einen interessanten Thread

http://forum.cmsmadesimple.org/index.ph ... 686.0.html

PageSpeed empfiehlt ja auch die Nutzung von CDNs - daher könnte auch das interessant sein

http://playground.ebiene.de/2351/google ... e-als-cdn/

[jeff1980]

Hi,

danke für die Hinweise. Sprites kannte ich bis jetzt noch nicht (unter diesem Namen) - obwohl ich es selbst unbewusst schon für Menüs eingesetzt habe. Aber stimmt, für die Hintergründe, die Social-Buttons und auch für die Flaggen bei mehrsprachigen Seiten macht es echt Sinn. Werde ich mich nachher mal dransetzen.

Page-Speed habe ich schon drauf angesetzt - stimmt, da ist noch einiges mehr, worum ich mich auch kümmern will. Merkwürdig finde ich allerdings u.a. die Hinweise bei der Bildoptimierung. Ich habe die Bilder aus Photoshop heraus als PNG-24 gespeichert ("Für Web und Geräte speichern"). Dort kann man ja keine weitere Kompression angeben - wie geht das also, dass Page-Speed das schafft? Ich dachte immer, Photoshop wäre perfekt .

Das mit den Subdomains habe ich mir schon gedacht, dass es sinniger ist, sie direkt auf den jeweiligen Ordner umzuleiten. Da werde ich mir auch den von Cyberman genannten Thread mal genauer ansehen.

Was die Skripte angeht teste ich mal beide Varianten (ScriptDeploy und CDN). Habe die Skripte prinzipiell lieber bei mir. Mal sehen, wie groß der Unterschied ist.

Melde mich nachher mal mit Ergebnissen.

Jan

[uniqu3]

Ja das mit PNG ist so das Du in Photoshop auch die Option hast mit PNG-8 zu speichern was aber zu Qualitätsverlust führt, wird aber auch vom IE6 unterstütz (also ohne grauen rahmen), Problem ist dabei nur das halbtransparenz, wie dein Hintergrund voll transparent dargestellt wird. . Ausserdem in sachen PNG's ist Fireworks besser, ich selber bevorzuge auch Photoshop, ist wohl Gewohnheit, aber Fireworks ist in Sachen Webdesign besser und pixelgenauer. 

[jeff1980]

So, da bin ich wieder.
Einige Dinge konnte ich gut umsetzen - u.a. sind die Social-Buttons jetzt "gespritet" und die PNGs optimiert abgespeichert. Zudem habe ich die Tabs-Skripte nun direkt von der Googleapi-Seite eingebunden.
Alles in allem ist die Seite bei Page-Speed von ca. 78-80 auf 85 gestiegen.

Wo ich noch nicht wirklich etwas mit anfangen kann, ist "Leverage browser caching". Das scheint mit am meisten Zeit zu kosten. So wie ich es verstanden habe, muss ich in den MetaTags eintragen, wann die Seite "abläuft" - aber irgendwie greift das nicht wirklich.

Zudem habe ich Probleme mit der Kompression der Inhalte (insbesondere der CSS-Dateien). Minimiert habe ich diese schon, aber wenn ich jetzt in der config.php die Kompression aktiviere, funktioniert die Druckfunktion der Seite nicht mehr.

Das ScriptDeploy-Modul hat leider nicht wirklich etwas bewirkt, aber das hätte glaube ich eh nur etwas bei dem Tab-Skripten etwas gebracht, die ich ja nun eh von extern eingebunden habe.

Insgesamt bin ich aber schon recht zufrieden - Page-Speed gibt im Schnitt um die 2 Sekunden Ladezeit an und die Menüs sind ja - je nach Seite - auch nicht gerade die kürzesten...

Jan

[uniqu3]

Das mit "leverage browser caching" wird für deine bilder, skripte und css ein expires datum angelegt und wird durch .htaccess kontrolliert.
Siehe: http://www.askapache.com/htaccess/apach ... ntrol.html

Mit ScriptDeploy könntest Du deine CSS dateien denn Du verwendest jetzt 2, kombinieren und minimieren. Eventuell kommt es zu Druckfunktion problemen beim SD modul nicht.
Ebenso hast Du zum beispiel beim SD modul option dein HTML code neu zu ordnen  für quelltext Schnüffler ist es ja schön zum ansehen.

[jeff1980]

Ja, ich stehe auf ordentlichen Quelltext - habs trotzdem mal in ScriptDeploy umgestellt. Kann ja nicht schaden.

Aus diesen ganzen Expire/Cache-Sachen werde ich irgendwie noch nicht so richtig schlau.
Ich habe von der o.g. Seite mal diesen Code in meine htaccess übernommen (sowohl im Root-Verzeichnis als auch im Bilderverzeichnis, wo ja die img-Subdomain draufzeigt):

Code: Select all

Header unset Pragma
FileETag None
Header unset ETag
 
# 1 YEAR
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4)$">
Header set Cache-Control "public"
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
Header unset Last-Modified
</FilesMatch>
 
# 2 HOURS
<FilesMatch "\.(html|htm|xml|txt|xsl)$">
Header set Cache-Control "max-age=7200, must-revalidate"
</FilesMatch>
 
# CACHED FOREVER
# MOD_REWRITE TO RENAME EVERY CHANGE
<FilesMatch "\.(js|css)$">
Header set Cache-Control "public"
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
Header unset Last-Modified
</FilesMatch>

Man achte auf das Datum (April 2010). So bekommt z.B. die Startseite zum Teil 89 Punkte im Speedtest und die "Leverage"-Meldung bezieht sich nicht mehr auf meine Bilder sondern nur noch externe Ressourcen.
Sobald ich das Datum aber auf April 2011 ändere, habe ich wieder das alte Problem. Hab ich evtl. einen Denkfehler? Denn so, wie ich es eingebunden habe, sind die Dateien ja eigentlich schon abgelaufen.

Stehe da echt auf dem Schlauch, obwohl jetzt etliche Seiten zu diesem Thema gelesen habe (und auch versucht, sie zu verstehen). Aber das scheint mir zu viel Apache zu sein...

Jan

[jeff1980]

Hi nochmal  ,

habe noch ein paar Dinge herausgefunden, die Interessant sein könnten.
Zum einen habe ich per ScriptDeploy den Quellcode minimieren lassen - klappt im Prinzip prima, dadurch, dass er aber alles in eine einzige Zeile schreibt, ist bei umfangreichen Seiten (z.B. unsere Sitemap) irgendwann Schluss und die Seite wird nich komplett angezeigt. Schade eigentlich, denn ansonsten ist es echt toll.

Dann noch eine Sache zu den PNGs. Ich habe dieses Tool gefunden: http://psydk.org/PngOptimizer.php
Das macht sogar die über PageSpeed komprimierten Bilder teilweise noch mal 50% kleiner.
Es ist kostenlos und muss nicht mal installiert werden.

Wollte es nur für zukünftige Forensuchen noch mal loswerden 

Jan

[dc2]

Es geht noch (viel) kleiner!

Wenn man einfache Grafiken hat (wenige Farben), die aber wegen des Alpha-Kanals als PNG-24 speichert, verschenkt man massig Optimierungspotential.
Die meisten Programme können das zwar nicht speichern, PNG-8 unterstützt aber auch einen Alpha-Kanal!

Um jetzt Grafiken vom PNG-24 ins PNG-8 Format zu konvertieren braucht man PNGQuant (Fe) oder Fireworks.
Damit kann man die Dateigröße meistens noch einmal mehr als halbieren - wie gesagt geht das aber nur gut bei Bildern mit wenigen Farben.
Je mehr vorkommen, desto mehr Details gehen bei der Konvertierung verloren, ansonsten ist PNG-8 aber das beste Format das es derzeit so gibt!

[jeff1980]

Cool, das PNG-8 auch Alpha kann wußte ich noch gar nicht. Das passt bei dieser Seite glaube ich ganz gut. Die Grafiken sind eigentlich nur transparent weiß mit einem Schatten - keine Farben. Werds mal antesten.

Jan