Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

So machst du deine Website schneller

Die Website Performance trägt enorm zum ersten Eindruck beim Aufrufen einer Website bei, da Besucher in den ersten Sekunden entscheiden, ob sie länger bleiben oder nicht. In einem Artikel bei Webdesigner Depot haben wir praktische Tipps gefunden, die helfen mit einfachen Mitteln wie Bild- und Codeoptimierung die Ladezeit einer Website zu verbessern. Wir stellen euch den Artikel mit ein paar Ergänzungen kurz vor.

Website Performance: Code minimieren und strukturieren

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.

Website Performance: Bilder optimieren mit ImageOptim

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: Caching mit MemCached

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

Lazy Load Plugin für jQuery

 

Bildnachweis für die Newsübersicht: aka whole wheat toast / flickr.com, Lizenz: CC-BY

Bitte beachte unsere Community-Richtlinien

20 Reaktionen
Hartmut

Was für ein schöner Beitrag!

Antworten
Tobias

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.

Antworten
davidschubert

Testbeitrag :-)

Antworten
Vincent

Gute Tricks die ich bereits alle einsetze :)

Antworten
Sebastian

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

Antworten
Timo Heinrich

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

Antworten
webmaid

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).

Antworten
badtwin

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.

Antworten
Fabian

Hier finden sich auch noch einige interessante Punkte:
https://developers.google.com/speed/

Antworten
Norvik

Kann da die Seite http://gtmetrix.com/ empfehlen. Sie zeigt ausführlich was man noch optimieren kann und welche Prioritäten die Änderungen haben.

Antworten
Thomas

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.

Antworten
Patrick

Oder beim CSS gleich auf SASS/SCSS/Compass umsteigen und sich nur eine einzelne minimierte CSS Datei ausspucken lassen.

Antworten
schneller machen

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.

Antworten
Simon Sprankel

Als CSS Kompressor würde ich den CSS Minifier empfehlen - alle anderen Kompressoren zerhauen einem die schönen CSS3 Media Queries...

Antworten
psren

Die minimierung der Anzahl an HTTP-Requests wäre auch noch sehr praktisch.

Antworten
Eric

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

Antworten
Monika Steinberg

@Cujo Vielen Dank für den Link! Eine schöne Artikel-Reihe mit vielen Details zum Thema!

Antworten
Cujo

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 :)

Antworten
Monika Steinberg

@Dennis Ideen und Vorschläge für mehr sind immer willkommen!

Antworten
Dennis

die Tricks sind ja ziemlich ausgeklügelt! Ich hatte wirklich auf ein bisschen mehr gehofft...

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.