Bildformate, CSS und JavaScript optimieren
Wenn man Content-Management-Systeme wie WordPress oder TYPO3 für die eigene Website verwendet, gibt es meist schon mitgelieferte Funktionalitäten für Caching oder sonstige Erweiterungen, die sich um zügigeres Ausliefern der Websiteinhalte z.B. als statische Kopie kümmern. Auch um leistungsstarke Hardware für Server und weitere Applikationskomponenten wie die Datenbank kommt man natürlich nicht drumherum, wenn man eine wirklich gute Website Performance mit merkbar schnellerem Seitenaufbau auch bei vielen gleichzeitigen Zugriffen erreichen will.
Unabhängig davon, ob man es mit statischen Webinhalten oder dynamisch generierten Seiten zu tun hat, gibt es aber einige Regeln, die man in Bezug auf Website Performance beim Einbinden von Bildern oder beim Coden mit HTML, JavaScript und CSS beachten sollte. Ein Artikel bei Webdesigner Depot hat ein paar erste Tipps dazu zusammengestellt.
Richtige Bildgröße mit passendem Dateiformat
Angefangen beim Dateiformat sollte man GIF-Bilder verwenden, wenn sie nur wenige Farben beinhalten wie z.B. Logos. JPEG ist gut geeignet für detailreiche Bilder mit vielen Farben wie Fotos. Für hochqualitative, transparente Bilder ist PNG das Format der Wahl. Das Skalieren von Bildern im Browser über die Attribute für Höhe und Breite sollte man wenn möglich vermeiden und sie vorher in einem Bildbearbeitungsprogramm oder mit Bildoptimierungstools wie ImageOptim für Mac oder Riot für Windows auf die tatsächliche Ausgabegröße bringen.
Auch wenn das Skalieren eines Bildes clientseitig im Browser und nicht serverseitig geschieht, kann man ein bisschen Zeit sparen, indem man eingebundene Bilder in ihrer tatsächlichen Ausgabegröße mit passenden Attributen für Breite und Höhe (width, heigth) in der CSS-Datei einbindet. Der Browser ist so weniger mit erneutem Layoutaufbau beschäftigt, wenn das Bild heruntergeladen ist. Wenn man flexible Bildgrößen nach den Regeln des responsive Webdesign benötigt, kann man sich als Alternative zur Bildskalierung mit der CSS overflow Eigenschaft helfen und so Bilder (oder Texte) dynamisch zuschneiden, wenn sich die Viewport-Größe ändert. Eine andere Möglichkeit ist das Bereitstellen verschiedener Bildversionen in unterschiedlichen Größen, die dann dynamisch je nach aufrufendem Endgerät mit vordefinierter Breite und Höhe geladen werden.
JavaScript und CSS optimieren
Beim Coden ist besonders zu beachten, dass man alles was mit CSS geht, auch mit CSS machen sollte. CSS3 und Mediaqueries bieten hier interessante neue Möglichkeiten. Auch wenn wir über Millisekunden bei der Performance sprechen, kann minimierter Code die Ladezeit einer Website ebenso verbessern. Auch dafür gibt es Tools wie Code Minifier für Mac, Minify für Windows oder JSCompressor und CSSCompressor. Bei JavaScript-Bibliotheken werden manchmal schon minimierte Versionen als Alternative zum Download angeboten, um die Website Perfomance zu verbessern.
In-line CSS und JavaScript sollte man stets vermeiden und den Code von Anfang an in eigene Dateien auslagern. Wenn es unumgänglich ist, JavaScript-Code mit in die HTML-Seite zu schreiben, dann sollte er zumindest ganz am Ende eingebunden werden, um nicht das Laden der Website zu blockieren. Auch das Suchen nach DOM-Elementen in einem Dokument mit z.B. jQuery sollte so weit wie möglich reduziert werden, um die Website Performance zu steigern.
Allgemeines, Cookies und Caching
An allgemeinen Tipps für bessere Website Performance erwähnt der Artikel bei Webdesign Depot noch das Anfügen eines Slashes am Ende eines Links, damit der Server diesen nicht ergänzen muß. Weil Browser immer nach einer favicion.ico Datei im Root-Verzeichnis des Webservers suchen, sollte man das Favicion auch immer gleich mitliefern.
Weitere Einzelheiten und Tipps zum Verringern der Cookie-Größe und zeitsparende Caching-Mechanismen für dynamische Inhalte findet ihr im Originalartikel bei Webdesigner Depot.
Website Performance Optimization (WPO) ist ein Thema für sich und die Tipps hier sind nur ein winziger Teil, mit dem man sich dem etwas nähern kann. Ohne vernünftige serverseitige Hardware wird auch das Optimieren von Bildern oder Code kaum warnehmbare Geschwindigkeitsverbesserung für den Websitebesucher bringen. Wer tiefer in die Performance-Optimierung seines Website-Quellcodes einstiegen will, sollte sich unter anderem beim Programmieren mit Design Pattern wie „Lazy Loading“ befassen, um z.B. nur Elemente zu laden, die wirklich gebraucht werden und parallele Verarbeitung von Skripten, Stylesheets oder Bildern zu ermöglichen.
Das Verbessern der Website Performance ist nicht nur für die Besucher der Seite wichtig, sondern auch für das Suchmaschinenranking, da die Websitegeschwindigkeit z.B. bei Google als ein Faktor im Rankingalgorithmus berücksichtigt wird.
Habt ihr noch weitere wichtige Tipps, um die Website Performance zu verbessern?
Weiterführende Links:
How to speed up your website – Webdesigner Depot
Performance – t3n
CSS3 – t3n
Bildnachweis für die Newsübersicht: aka whole wheat toast / flickr.com, Lizenz: CC-BY
Schau dir doch unsere Neusten Artikel und News an.
![Der Fluch des Content Marketings [Kolumne]](http://t3n.de/uploads/t3n-news-post-458746_content_medium.jpg)
von Dennis 09.05.2012 (15:38Uhr) 1.
die Tricks sind ja ziemlich ausgeklügelt! Ich hatte wirklich auf ein bisschen mehr gehofft...
von Monika Steinberg 09.05.2012 (15:50Uhr) 2.
@Dennis Ideen und Vorschläge für mehr sind immer willkommen!
von Cujo 09.05.2012 (15:58Uhr) 3.
Ich habe vor einiger Zeit eine 5-teilige Artikelreihe darüber geschrieben, wie man Webseiten beschleunigen kann: Webseiten beschleunigen
Darin gehe ich z. B. auf die richtige Anwendung von Expires Header, parallele Downloads und die gzip-Komprimierung ein.
Den Tipp mit dem Slash am Linkende kannte ich noch nicht. Das werde ich bei Gelegenheit mal ausprobieren :)
von Monika Steinberg 09.05.2012 (16:02Uhr) 4.
@Cujo Vielen Dank für den Link! Eine schöne Artikel-Reihe mit vielen Details zum Thema!
von Eric 09.05.2012 (16:25Uhr) 5.
Sehr schöner Artikel! Man könnte noch anmerken, dass viele dieser Mittelchen bei kraken.io aus einer Hand geliefert werden, und zwar alles online. Schaut her! http://it-republik.de/php/news/Bilder-und-Code-optimieren-an-einem-Ort-Kraken-Web-Optimizer-ist-die-Geek-Site-of-the-Week-062815.html
von psren 09.05.2012 (16:30Uhr) 6.
Die minimierung der Anzahl an HTTP-Requests wäre auch noch sehr praktisch.
von Simon Sprankel 09.05.2012 (17:14Uhr) 7.
Als CSS Kompressor würde ich den CSS Minifier empfehlen - alle anderen Kompressoren zerhauen einem die schönen CSS3 Media Queries...
von schneller machen 09.05.2012 (21:07Uhr) 8.
Das mit dem Slash liegt wohl daran, das
http://www.t3n.de / foobar
der Server einen Redirect auf
http://www.t3n.de / foobar/
liefert . Soweit ich mich erinnern kann . Schade das es kein Wiki o.ä. dafür gibt. Dmoz ist wohl leider nicht mehr der Burner :-( seit es (und davor auch schon) von google gekauft wurde :-(
Ein Checker-Tool als Browser-Plugin mit Hinweisen auf Verbesserungen und offizielle Specs wäre auch nett. Ebenso client-side-Rewriter-Plugins für z.B. Proxomitron oder Squid o.ä. um am Laptop so wenig Traffic wie möglich zu verprassen.
Das Problem ist leider, das es keinen interessiert. Pixelgenaues Screendesign ist den meisten Kunden wichtiger.
Am Handy ist man handicapped. Jetzt kommen in die Betriebssysteme die (schon seit Lotus Notes) "dicken" Icons für Touchbedienung anstelle der bisherigen ("kleinen") Icons für Mausbedienung. Bis dahin hat einfache Bedienung aka Barrierefreiheit auch keinen interessiert. Die meisten Programmierer und Manager benutzen ihre eigene Software wohl eher selten. So kommt es mir als Betroffener zumindest vor. Leider ist die Konkurrenz auch nicht besser.
Das Thema hat mich vor 10 Jahren schon interessiert. Lame-Admins sind der Feind des Programmierers. Von daher wären korrekte expires-Anleitungen (auch für .htaccess u.ä.) ganz nett.
Schaut mal bei IVW. Wie viele Sites sind relevant für solche Optimierungen ? Handwerker-Willi hat nur ein paar Besucher pro Woche.
Von der Startseite mal abgesehen sollte man bei simplen Schlampereien anfangen. Viele Apps laden alles ständig neu. Auf Phones wäre GSM mit 56k der Standard (weil die Tape-Flat am Monatsende aufgebraucht ist) für Programmierung. Und nicht Wifi10000000000.
Was auch fehlt sind Apache-Plugins oder moderne reverse-Proxies. Die würden merken wie gut die Gegenseite angebunden ist und ggf. den Content so gut wie geht komprimieren. Wollt Ihr Hans Maulwurf vor Euch an der Kasse seine Wochen-Einkäufe machen lassen ? Ein 56k-Modem-Anschluss ist 17mal langsamer als DSL-1000 d.h. ein Server ohne Reverse-Proxy muss 17mal so lange auf die Übertragung oder den nächsten Request warten wie bei DSL-1000. Bei Zillionen Mobil- und ISDN-Anschlüssen wäre es für die Server besser, den Content zu komprimieren. Für fette Anbindungen hingegen ist das unnötig wenn nicht eh schon .gz-Dateien herumliegen. Kompression meint ja oft nur ein rewriting auf kürzere Bezeichner und Whitespace/Kommentar-Entfernung statt gzip, zip o.ä. . Im Browser könnte man auch speziellere Kompressionen nutzen wenn .gz unterboten werden kann. Die Linux-Kernel-Sourcen in .bz2 und .gz sind nicht so wirklich unterschiedlich groß. Logfiles hingegen sind mit .bz2 5% der Originalgröße und mit .gz 10% der Originalgröße. Da lohnt .bz2 ist aber wohl kein Teil vom http-Standard. Auch .zip oder .tar-Files für wiederkehrenden Content-Mengen (css, zig javascripte am "besten" von diversen Servern wie man mit NoScript schnell merkt) werden stattdessen mit SPDY gemacht. Das beste sind noch diese Multi-Picture-Gifs (Sprites ?). (Fehlte der Hinweis ? Google macht das wohl)
Ein Killerargument wäre, wenn Google auf Smartphones und bei mobilen Zugängen und Smartphone-Browsern den Speed und die Größe deutlich mehr begünstigen würde. Bei DSL1000000000000-Anschlüssen am Desktop-Browser ignoriert man es hingegen mehr oder liefert extragroße Retina-Seiten als erste Suchergebnisse.
Listet Google am Smartphone eigentlich z.B. m.gmx.de vor http://www.gmx.de ? Am Smartphone für die ebay-Startseite 1 Mbyte zu laden ist auch nicht grade schnell. Da sind die 500 MB von der Tape-Flat schnell verbraucht. Bei Seiten mit identischem Content ( m. site.de statt http://www.site.de oder site.de/m ) müsste man also die mobile Version auf Wunsch bevorzugen können. Auch im Browser per metadaten oder robots.txt-Infos. Am Laptop in der Eisenbahn will man auch nicht unbedingt Gigabytes runterladen.
Die Video-Streamer sind besser organisiert, verschiedene Bandbreiten zu bedienen. Schon traurig das mobile Surfer bisher ignoriert werden. In jedem Restaurant gibts Kinderportionen und in jeder Eisenbahn und Linienbussen ermäßigte Tarife.
von Patrick 09.05.2012 (21:46Uhr) 9.
Oder beim CSS gleich auf SASS/SCSS/Compass umsteigen und sich nur eine einzelne minimierte CSS Datei ausspucken lassen.
von Thomas 10.05.2012 (07:45Uhr) 10.
Es wundert mich etwas das PNG-8 keine Erwähnung findet. Gibt es hier Nachteile gegenüber GIF? Ist meiner Ansicht nach doch ebenso gut geeignet für Grafiken mit geringem Farbspektrum.
von Florian Held via facebook 10.05.2012 (08:24Uhr) 11.
Könnt Ihr Gedanken lesen? Mit dem Thema beschäftige ich mich gerade !! :)
von Sanjo Elstak via facebook 10.05.2012 (08:28Uhr) 12.
man könnte auch noch dienste wie cloudfare dazu schalten.
von Norvik 10.05.2012 (08:45Uhr) 13.
Kann da die Seite http://gtmetrix.com/ empfehlen. Sie zeigt ausführlich was man noch optimieren kann und welche Prioritäten die Änderungen haben.
von Marcel Neiber via facebook 10.05.2012 (08:47Uhr) 14.
Daily Business :-)
von Christian Franke via facebook 10.05.2012 (08:48Uhr) 15.
Und kein Wort vom Zusammenschluss von JS-Files um den Http-Overhead zu vermeiden?
von Anton Meier via facebook 10.05.2012 (09:06Uhr) 16.
Fall jemand Contao einsetzt, gibt es hier eine tolle Anleitung für die Google Page Speed Optimierung. http://www.contao.org/de/news/contao-fuer-google-page-speed-optimieren.html
von Fabian 10.05.2012 (09:18Uhr) 17.
Hier finden sich auch noch einige interessante Punkte:
https://developers.google.com/speed/
von Dominique Görsch via facebook 10.05.2012 (09:46Uhr) 18.
Dafür bieten doch die meisten Frameworks inzwischen Pipelines, oder?
von badtwin 10.05.2012 (09:52Uhr) 19.
Was auch noch was bringt (Da es die Anzahl der Requests vermindert): Grafiken in Sprites zusammenfassen.
Tools wie YSlow und webpagetest bringen zudem auch immer gute Optimierungsvorschläge.
von webmaid 10.05.2012 (10:43Uhr) 20.
Ich kann da jedem nur die Artikel von Yahoo ans Herzen legen. Sind zwar auf Englisch, aber dafür sehr umfassend und im Bereich PHP gibt es minify (http://www.webmaid.de/2010/03/eine-schnellere-webseite-minify-your-site/), welche die Vorschläge von Yahoo gleich in ein Framework verpackt.
Nutzt man FF kann man sich gleich noch FireBug herunterladen und Google PageSpeed als Addon (https://developers.google.com/speed/pagespeed/?hl=de-DE). Unter Netzwerk kann man da sehr gut sehen, was wieviel Zeit braucht und das google addon zeigt gleich noch weitere spezielle Hinweise für die Seite. Alternativ kann es auch YSlow sein (Add-Ons für Firefox).
von Timo Heinrich 10.05.2012 (12:03Uhr) 21.
Auf http://www.panda-opfer.de habe ich viele Tipps zur Optimierung zusammengetragen und deren Auswirkungen dokumentiert. Darunter befinden sich auch Tipps zur Komprimierung des Datenstroms oder das auslagern der Daten auf Subdomains, um so mehr parallele Zugriffe zu ermöglichen.
Viele Grüße
Timo
von Sebastian 10.05.2012 (12:17Uhr) 22.
Zum CSS / JS minifien ist YUI Compressor von Yahoo optimal!
Beim aufspielen neuerer Versionen lassen wir einmal alle .js und .css Files durchlaufen.
#!/bin/bash
##================================================================
##
## Doc
## - https://github.com/yui/yuicompressor/blob/master/doc/README
##
## Yui Compressor
## - https://github.com/yui/yuicompressor/tree/master/build
##
## NOTES
## - the YUI Compressor requires Java version >= 1.5.
## - if no input file is specified, it defaults to STDIN
##
##================================================================
### path to yui
YUICOMPRESSOR="/path/to/yuicompressor-x.y.z.jar"
JAVA=`which java`
### files to compress
FILES=( "/path/to/file1.css"
"/path/to/file2.js"
"/path/to/file3.js"
"/path/to/file4.css"
)
### loop for each file
for e in ${FILES[@]}
do
DIR="${e%/*}"
FILE="${e##*/}"
echo -e "$JAVA -jar $YUICOMPRESSOR -o $DIR/min.$FILE $e"
done
von Vincent 10.05.2012 (13:01Uhr) 23.
Gute Tricks die ich bereits alle einsetze :)
von davidschubert 11.05.2012 (18:38Uhr) 24.
Testbeitrag :-)
von Tobias 12.05.2012 (18:09Uhr) 25.
Hallo Zusammen,
gerade um das Thema, was sich für die Geschwindigkeit von TYPO3 auf der Serverseite optimieren lässt, habe ich vor kurem eine kleine private Webseite ins Leben gerufen.
Da freue ich mich natürlich immer über Anregungen und jegliches Feedback.
von Notes (weekly) « lieblinks 13.05.2012 (18:35Uhr) 26.
[...] Quellcodeoptimierung: so machst du deine Website schneller! [...]
von Hartmut 11.07.2012 (15:29Uhr) 27.
Was für ein schöner Beitrag!