Wissenswertes, Tricks und Performance Optimierungen für eure Webseite

**darki777** · 04.02.2013, 06:42

Hallo alle zusammen,
dieses Tutorial richtet sich an alle Neueinsteiger sowie erfahrenen User die ihren Code optimieren möchten um die Overall-Performance ihrer Webseite zu steigern. Hierbei werden einfache sowie auch komplexere Techniken verwendet. Ich werde im Laufe der Zeit versuchen immer mehr Tips in diese Übersicht / Tutorial aufzunehmen. Solltet ihr selber gute Tips oder Verbesserungen haben, so schreibt sie bitte einfach dazu und ich update sie, falls gewollt, in diesem Post.

1. GZIP, wer es noch nicht hat, sollte es schnell tun:
Durch Gzip können die meisten Dateien ungemein stark weiter komprimiert werden (ca. 80% kleiner). Um das zu erreichen müsst ihr euren Server hierfür entsprechend konfigurieren, dies findet ihr in einem meiner anderen Tutorials (nur bei einem eigenen Server möglich, d.h. VPS oder Dediziert): https://community.contao.org/de/show...e-installieren Es gibt noch eine alternative Variante mit der .htaccess wovon ich aber abrate, da der Server für jeden Request zusätzlich schuften muss (dies wird sogar offiziell von Apache abgeraten).

2. Markup Komprimierung
Um euren HTML Code schlank zu halten könnt ihr eine gewisse Funktion in Contao aktivieren. Geht im Backend zu "System->Einstellungen->Globale Einstellungen", und kreuzt das Kästchen "Markup komprimieren" an und fertig ist der Kuchen

3. Achtet immer darauf dass ihr JS Dateien nach allen anderen Sachen im Head Bereich ladet, z.B.:

Code:

<head>
<title>...</title>
<meta....>
<link rel="stylesheet" href="meine-css-01.css">
<link rel="stylesheet" href="meine-css-02.css">
<script type="text/javascript" src="meine-javascript-datei-01.js"></script>
<script type="text/javascript" src="meine-javascript-datei-02.js"></script>
</head>

Noch besser:

Code:

<body>
...
<script type="text/javascript" src="meine-javascript-datei-01.js"></script>
<script type="text/javascript" src="meine-javascript-datei-02.js"></script>
</body>

Nur alzu oft hab ich dies bei Seiten bemerkt bei denen es genau anders herum ist. Der Grund hierfür liegt einfach darin, dass Javascript das Downloaden von weiteren Dateien blockiert und somit das Rendern des gesamten HTML Dokumentes verlangsamt (neuere Browser sind schlau und machen's intelligenter, dennoch können diese die Performance-Einbuße nicht 100%ig abfangen). Wer allerdings noch einen Schritt weiter gehen möchte, der sollte seine JS Dateien sogar vor </body> einfügen (Siehe Beispiel 2). Und für die JS-Guru's gilt es Javascript Dateien asynchron zu laden. Am besten tut man dies mittels einer Library wie head.js oder YepnopeJS. Dies ermöglicht dem Browser noch mehr Dateien parallel zu laden. Achtet auch darauf dass eure JS Dateien immer als komprimierte Version zur Verfügung steht (meinedatei.min.js), da dies die Ladezeit ungemein verringert (falls ihr ein Komprimierungs-Tool braucht, hier ist eins: http://refresh-sf.com/yui/), als letztes gilt es diese als gzip Variante zu übermitteln (siehe Punkt 1.)

4. CSS Sprites verwenden
Wenn man viele kleine Bildchen und Icons besitzt, sollten diese nicht als 100 einzelne Dateien heruntergeladen werden, denn dies erfordert pro Datei einen HTTP Request und kann somit bei einer größeren Masse den Server ganz schön schlauchen. Benutzt CSS Sprites indem ihr z.B. mit PSD Sprite Grids arbeitet (bessere Möglichkeiten erwähne ich weiter unten), um solche zu erstellen. Dann habt ihr nur eine einzige Datei = nur einen einzigen HTTP Request. Erstellt euch für ein Icon z.B. ein <div>, <span> oder <li> Element und wählt das richtige Bild anhand der CSS-Anweisung "background-position" aus. Simples Beispiel:

Code:

<ul>
 <li class="icon icon-facebook"></li>
 <li class="icon icon-twitter"></li>
 <li class="icon icon-pinterest"></li>
</ul>

.icon { background-image:url("mysprite.png"); width:50px; height:50px; display:inline-block; background-repeat:no-repeat; }
.icon-facebook { background-position:0px 0px; }
.icon-twitter { background-position:-50px 0px; }
.icon-pinterest { background-position:-100px 0px; }

Falls ihr es etwas besser für SEO optimieren möchtet:

Code:

<li class="icon icon-facebook">
 <a href="http://facebook.com">
  <i></i> Facebook
 </a>
</li>

.icon,.icon i { width:50px; height:50px; overflow:hidden; display:inline-block; }
.icon i { background-image:url("mysprite.png"); background-repeat:no-repeat; }
.icon-facebook i { background-position:0px 0px; }

Da CSS-Sprites mittels PSD's & Co. manchmal doch recht mühselig sein können und man die einzelnen Background-Positionen per Hand herausfinden muss gibt es das Tool http://de.spritegen.website-performance.org/ Dieses generiert euch aus mehreren Bild-Dateien eine einzige Sprite Datei inkl. deren CSS Anweisungen. Eine Alternative wäre noch: http://spritepad.wearekiss.com/ oder ihr holt euch ein natives Tool für euer Betriebssystem (ich selber benutze hierfür QuickSprites da es auch HDPI Geräte wie z.B. Retina Displays unterstützt, wovon ich leider kaum Tools im Web gefunden habe und deswegen sehr glücklich bin).

5. Bilder für Retina Displays (HDPI Geräte)
Manche denken dass nur das iPad, iPhone und das neueste MacBook ein hochauflösendes Display haben und somit auch hochauflösende Bilddateien brauchen, um eine zweifache Pixel Density abzudecken, dies ist jedoch falsch, immer mehr Geräte (dazu gehören auch das Galaxy S3, Galaxy Nexus, und viele Weitere) reicht ein normales Bild nicht mehr aus und dadurch sehen Grafiken verschwommen aus.

Leider gibt es zum derzeitigen Informationsstand noch keine optimale Lösung für dieses Problem im Web wie ich recherchieren konnte. Alle Methoden haben das Problem dass sie nicht mal Ansatzweise alle Geräte abdecken, entweder werden Image Dateien doppelt geladen, Cookies können nicht rechtzeitig gesetzt werden (was oft bei Mobilen Geräten passiert wie ich selbst feststellen durfte) oder die Browser unterstützen die experimentellen W3C Specs noch nicht, auch das Contao "retina_image" Modul gehört mit auf diese Liste (da dieses die Bilddateien doppelt lädt). Allerdings konnte ich mit Hilfe des retina_image Moduls (ein Dank geht hier an den Entwickler lingo4u) und ein paar zusätzlichen Tricks einen Workaround hierfür schaffen der mit zwei zusätzlichen Fallbacks die aller meisten Situationen meistert. Das dazugehörige Tutorial werde ich noch schreiben, da es leider etwas umfangreicher wird und in Verbindung mit Adaptive Images steht.

Der einzige kürzere Weg wenn man keine extrem gut scharfen Bilder auf den HDPI Geräten braucht ist, dass man seine Bilder in der doppelten Auflösung speichert wie man sie auf seiner Webseite brauchen würde, allerdings mit einem sehr hohen Kompressionsfaktor von etwa "30", dadurch bleibt die Qualität auf einem normalen Display die Gleiche, bei HDPI Displays wird sie nur minimal wenig unschärfer als wenn man ein separates Bild für HDPI Geräte ausgibt, und die Dateigröße bleibt auch klein. D.h. euer Code bleibt der absolut Gleiche! Ganz einfach:

Code:

<img src="meineAufloesung-1000x1000.jpg" width="500" height="500" alt="">

Der einzige Nachteil ist dass man dies händisch im CMS so eingeben muss, da Contao sonst die Bilddatei tatsächlich auf nur 500x500 runterkomprimiert, was wir ja nicht wollen. Falls jemand hierfür bereits eine Erweiterung herausgebracht hat bei der man dies tun kann, dann bitte melden

Ansonsten müsste man hierfür alle Template-Dateien die Bilder ausgeben spezifisch anpassen.

Ein weiterer Tip, ersetzt Grafiken mit Verläufen oder Schatten durch CSS3 Anweisungen, da die meisten Browser dies unterstützen und solang es das visuelle Layout und die Estetik bei älteren Browsern nicht zu sehr zerstört (damit ist der IE6-8 gemeint) ist es legitim, meist kann das Verzichten auf z.B. einen leichten Schatten bei unseren Uralt-Browsern noch verkraftet werden, dafür werdet ihr mit einer kraftvollen Portion Performance belohnt und die HDPI Geräte danken es euch auch. Für spezielle Grafiken könnt ihr ebenso SVG's erstellen, diese sind endlos skalierbar und können ziemlich gut komprimiert werden. Für Icons wie für Facebook, Twitter & Co. eignen sich dabei am besten Web Fonts / Icon Fonts, diese sind ebenfalls endlos skalierbar. Eine beliebte Icon-Font findet ihr z.B. hier: Font-Awesome Bedenkt dass sich Icon-Fonts meist nur dann rentieren wenn ihr tatsächlich mehrere Icons auf eurer Seite verwendet oder es euch einfacher machen möchtet als die umständlichere Pflege von CSS-Sprites, ansonsten sind CSS-Sprites zu bevorzugen, da diese bei wenigen Icons eine kleinere Dateigröße aufweisen.

6. CDN's (Content Distribution Network)
Sicher habt ihr schon mal bemerkt dass auf manchen Webseiten Image-Dateien von anderen Domains geladen werden, dies hat den einfachen Grund dass ein Browser nur eine gewisse Anzahl an Dateien gleichzeitig laden kann, womit der Browser bei vielen Dateien ins Wanken gerät und sich die Ladezeit hinzieht, um dies zu umgehen kann man z.B. die Dateien auf einem anderen Server auslagern um die Performance seiner Seite zu beschleunigen (da dadurch ein höherer Paralleldownload möglich ist). Eine gute Erweiterung dazu ist: https://contao.org/de/extension-list/view/s3.de.html Auf gar keinen Fall dürfen CSS Dateien auf CDN's ausgelagert werden!! (Ansonsten gibts ne hohe Performance Einbuße), hauptsächlich ist das nur für Media-Content angedacht, also Bilder, Videos, Musik, etc.. Ebenfalls gibt es die Möglichkeit seine Bilder auf seiner Subdomain zur Verfügung zu stellen, dies rate ich allerdings jedem ab der wesentlich mehr Content zur Verfügung hat. Falls ihr es doch so machen wollt, dann achtet darauf dass ihr bei einer sehr hohen Anzahl an Dateien diese auf mehrere Subdomains aufteilt, da ihr hierbei sonst mit einem DNS-Lookup Problem zu kämpfen haben könntet, z.B. wenn ihr einige Dateien beim Ladevorgang zur Verfügung stellt reicht eine Subdomain, sind es aber auf einen Schlag gleich 50 dann wäre es sinnvoller hierfür sogar 2 Subdomains zu verwenden.

7. Prefetching / Vorladen
Falls ihr 3th-Party Sachen auf eurer Seite benutzt die von einer anderen Domain geladen werden, dann könnt ihr versuchen einen früheren DNS-Lookup zu erreichen, um das korrekte Laden / den Aufbau eurer Webseite zu verbessern. Simpel erklärt, es wird ein Lookup zu einer Domain aufgebaut bevor es eines eurer Scripte braucht, dieses Verhalten gibt eurem Script einen winzigen Startvorsprung bei der Initialisierung. Der einfachste Weg hierfür ist folgendes Beispiel:

Code:

<link rel="dns-prefetch" href="//fonts.googleapis.com">

Selbiges ist mit lokalen Bildern, Fonts oder Ähnlichem möglich, allerdings auf eine andere Art und Weise, nämlich wenn ihr eine Datei vollständig vorladen möchtet. z.B. Ihr möchtet ein Script oder ein Bild vorladen (prefetch) bevor das HTML Dokument mit seinem Inhalt sichtbar wird, da ja sonst nur ein Platzhalter oder gar nichts vom Bild auf eurem Browser sichtbar wäre. Hierfür reicht folgender einfacher Code im Head Bereich:

Code:

<link rel="prefetch" href="sprite.png">

Bedenkt dass diese Methode, das vollständige Vorladen einer Datei, nicht von allen Browsern unterstützt wird. Ein Workaround dazu falls ihr es tatsächlich in jedem Browser brauchen solltet wäre die folgende Methode ganz oben im <body> in euer Dokument einzufügen:

Code:

<body>
<div style="visibility:hidden;overflow:hidden;height:0;><img src="sprite.png" alt=""></div>
...
</body>

8. Adaptive Images
Angenommen man hat auf seiner Webseite ein Bild das eine Größe von 1000x400 Pixel hat, wäre es nicht dann eine reine Verschwendung diese Auflösung einem Smartphone mit einer Auflösung von 320x480 auszugeben? Natürlich, 1. Weil dadurch Bandbreite verschenkt wird, und 2. weil einige Smartphones bei mehreren großen Bildern ungemein ruckeln. Das Gerät bräuchte ja eigentlich nur eine Bildbreite von max. 480px (da man das Smartphone drehen kann), für HDPI Displays wären es dann 960px. Genau für diesen Einsatzzweck gibt es adaptive Bilder die sich dynamisch an die Auflösung des Monitors anpassen können

(das Verfahren arbeitet aus Performance-Gründen natürlich auch mit einem Caching-Verfahren). Werft hierfür einen Blick auf http://adaptive-images.com/ Dort wird genau erklärt wie das Ganze funktioniert und wie man es einbinden kann.

9. Bild-Optimierungen
Viele Bilddateien im Web sind oft nicht optimiert (z.B. exportierte Bilder per Photoshop), so dass die Bilddateigröße viel größer ist als benötigt. Vor allem im Einsatzbereich von PNG's und Gif's kann man äußerst viel einsparen (z.B. Konvertierung von PNG24 nach PNG8 mit äußerst guter Alpha-Transparenz und ohne Qualitätsverlust, sowie bei der Entfernung von unnötigen Meta-Informationen und nicht benutzten Farbpaletten). Hier gibt es 2 Tools die großarbeitige Arbeit leisten: http://imageoptim.com/ (für Mac) und http://pnggauntlet.com/ (für Windows). ImageOptim hat dabei ein paar mehr Einstellungsmöglichkeiten, da es mehrere komplexe PNG-Komprimierungsalgorythmen als Kombination einsetzt. Selbst bei der Konvertierung von Gif nach PNG können bereits großartige Ergebnisse bei der Einsparung der Dateigröße erreicht werden. Ich selber erreiche dabei im Durschnitt Optimierungen von über 30% (je nach Dateityp) und spare somit viele viele KB ein ohne an Qualität zu verlieren, probiert es ruhig aus

Mit diesem ersten Part verabschiede ich mich erst einmal. Auch wenn es sich ein wenig hingezogen hat, hoffe ich dass es dem ein oder anderen etwas weiterhelfen kann

Gute Nacht und ein fröhliches Coden
darki