Catcat in Minecraft

Der Eingang zum Nether

Derzeit werkle ich in Minecraft rum.

Für die, die das noch nicht kennen: Da werden Klötzchen gestapelt und das Game besticht durch die Abwesenheit von spektakulärer Grafik oder gar Handlung.

Downloadlink: https://minecraft.net/ Kostet knapp 20 Tacken.

Das Spielprinzip relativ simpel: Man generiert sich eine Welt und da kann man “minen” und “craften”. Also Rohstoffe abbauen und verarbeiten. Verarbeiten zu Baumaterial, Werkzeugen oder Waffen.

Und dann kann man sich bauen, wie man lustig ist: Eine Hütte, ein Haus, das Taj Mahal…

Man kann auch elektrische Schaltungen bauen, mit denen man einiges anstellen kann: Man kann Vorgänge automatisieren, eine elektrische Uhr bauen, Fallen aufstellen, einen Computer bauen. Die Möglichkeiten sind nahezu unbegrenzt.

Die Welt ist übrigends auch nahezu unbegrenzt groß und keiner kann behaupten, er hätte sie ganz erkundet:

Die Minecraft-Welt im Single-Player-Modus ist groß. Also richtig groß.

Die Welt besteht aus Klötzchen, die immer 1x1x1m Kantenlänge haben. 1 Kubikmeter. Die Welt ist 60.000.000 Klötzchen lang, 60.000.000 Klötzchen breit, 128 Klötzchen tief (ab Meereshöhe) und 256 Klötzchen hoch.

Also rechnen wir mal: 60Mio x 60Mio Meter = 60.000 x 60.000 Quadratkilometer. 3.6 Milliarden Quadratkilometer. Die gesamte Erdoberfläche (mit Wasserflächen) beträgt 510.000.000 Quadratkilometer.

Die Minecraft-Welt ist also rd. 7 x größer als die gesamte Erdoberfläche^^ – Da muß man also doch recht lange rumlatschen, um alles erkunden zu wollen.

Und dann gibt es noch Höhlensysteme, die den Untergrund durchziehen.

Dann gibt es noch eine kleinere “Welt”: Den Nether. Das ist die Unterwelt. Die Hölle sozusagen.

———-

So. Ich habe die letzten Wochen immer wieder mal rumgebastelt und dabei auch Screenshots gemacht.

Seitenleisten ändern in osCommerce 2.2

Standardmässig weist ein osCommerce 2.2 eine linke und eine rechte Seitenleiste auf, die ständig denselben Inhalt auf jeder Seite anzeigen.

Nun benötigt der Besucher aber nicht überall im Shop ständig dieselben Informationen:

  • Auf der Startseite genügen Navigation, evtl. Neuheiten, eine Suche und einige andere nützliche Dinge.
  • Auf der Artikelseite will der Besucher aber Informationen zu genau diesem Artikel sehen. Es wäre kontraproduktiv, den Kunden durch eine “Neuheiten”-Box abzulenken.
  • Im Checkoutprozess benötigt der Kunde keine Kategorienavigation oder die Box “Andere Kunden kauften…”: Ihn interessieren eher Dinge wie Lieferzeiten und Zahlungsmöglichkeiten.

 

Leider gibt es von Haus aus keine Möglichkeit dies bei einem osCommerce zu ändern, ausser man baut sich ein Modul ein. Manche funktionieren sogar… meist.

 

Es geht aber auch einfacher und ganz ohne sich ein Modul einzubauen.

Das erkläre ich heute hier:

  • Wo und wie wird die Seitenleiste zusammengebaut?
  • Wie erstelle ich eigene Boxen?
  • Wie erstelle ich eine eigene Seitenleiste?
  • Wie zeige ich meine Seitenleiste nur auf bestimmten Seiten an?

 

Als Beispiel verwende ich meinen eigenen Shop, der ein osCommerce 2.2 RC2 ist und mittlerweile seit 7 Jahren im Einsatz ist. Die Zeilenzahlen und einige CSS-Klassen werden also von Deinem Shop abweichen.

Hier erstmal meine Startseite. In beiden Seitenleisten sind die üblichen Boxen, sowie links und rechts je eine neue Box eingebaut:

Startseite mit geänderten Seitenleisten

Startseite mit geänderten Seitenleisten

Wer sich das ansehen will, hier der Link: http://www.seiden-handel.de/catalog/

Wie man sieht, wurden von mir einige Boxen entfernt (specials.php und andere), die Box information.php ist bei mir rechts, der Warenkorb ist nicht sichtbar, da er leer ist (wie das geht steht HIER) und unten wurde je eine neue Box hinzugefügt.

 

Zum Vergleich nun eine Artikelseite:

Artikelseite mit neuer rechter Seitenleiste

Artikelseite mit neuer rechter Seitenleiste

(zur vergrösserten Ansicht bitte anklicken, da das Bild über 1300px lang ist)

Da bei meinen Artikeln etwas Erklärungsaufwand zur Attributauswahl erforderlich ist, habe ich hier die rechte Seitenleiste durch einen Text ersetzt, der dem Kunden hilft.

 

So. Genug mit Beispielen und bunten Bildchen. Kommen wir zur Sache.

 

Wo und wie wird die Seitenleiste zusammengebaut?

 

Im Ornder /includes finden wir die beiden Dateien column_right.php und column_left.php.

Dort werden die Boxen und deren Reihenfolge in der jeweiligen Seitenleiste festgelegt.

Bei mir sieht das so aus:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
/*
$Id: column_left.php 1739 2007-12-20 00:52:16Z hpdl $

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

Copyright (c) 2003 osCommerce

Released under the GNU General Public License
*/

if ((USE_CACHE == 'true') && empty($SID)) {
echo tep_cache_categories_box();
} else {
include(DIR_WS_BOXES . 'all_categories.php');
}

//require(DIR_WS_BOXES . 'whats_new.php');
//require(DIR_WS_BOXES . 'search.php');
//require(DIR_WS_BOXES . 'faq.php');
//require(DIR_WS_BOXES . 'information.php');
include(DIR_WS_BOXES . 'werbung_2.php');
?>

Sichtbar sind demnach nur die Boxen “Categories” und “werbung_2″ die ich selbst eingebaut habe.

Die jeweiligen Dateien, in der die Boxen zusammengebaut werden, findet man, indem man den Pfad zurückverfolgt: DIR_WS_BOXES. Sie liegen also im Ordner includes/boxes/.

 

 

Wie erstelle ich eigene Boxen?

 

Die Datei  werbung_2.php im Ordner /includes/boxes/ sieht bei mir so aus:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- werbung_2_anfang //-->
<tr>
<td>
<?php
$info_box_contents = array();
$info_box_contents[] = array('text' => BOX_HEADING_WERBUNG_2);

new infoBoxHeading($info_box_contents, false, false);

$info_box_contents = array();
$info_box_contents[] = array('text' => BOX_WERBUNG_2_LINK1 .
BOX_WERBUNG_2_LINK2 .
BOX_WERBUNG_2_LINK3 .
BOX_WERBUNG_2_LINK4 .
BOX_WERBUNG_2_LINK5);
new infoBox($info_box_contents);
?>
</td>
</tr>
<!-- werbung_2_eof //-->

Das habe ich mir natürlich nicht aus den Fingern gesaugt und ich bin auch kein PHP-Freak: Klickt mal die einzelnen Dateien im Ordner includes/boxes/ durch und ihr werdet feststellen, das sich bestimmte Elemente immer wiederholen.

Select Code
1
2
3
4
5
6
7
8
9
10
<?php
$info_box_contents = array(); //ein Array wird gebildet
$info_box_contents[] = array('text' => BOX_HEADING_ÜBERSCHRIFT); //das Array vom Typ Text mit der Überschrift gefüllt

new infoBoxHeading($info_box_contents, false, false); //das Array wird ausgegeben

$info_box_contents = array(); //ein Array wird gebildet
$info_box_contents[] = array('text' => DER INHALT DER BOX); //das Array vom Typ Text mit dem Content gefüllt
new infoBox($info_box_contents); //das Array wird ausgegeben
?>

Das ist der Grundaufbau einer Box.

Du kannst entweder eine deiner Boxen duplizieren und mit einem neuen Dateinamen versehen oder Du kannst einfach obigen Inhalt abkopieren und in eine neue PHP-Datei einfügen.

Nun müssen wir nachsehen, wo Überschrift und Content definiert werden.

Ich lege meine Texte immer da ab, wo auch alle anderen deutschen Texte liegen: in /includes/languages/german/german.php und mache dort den Eintrag für die Überschrift und den Content:

Select Code
1
2
3
4
5
6
7
// neue box text in includes/boxes/werbung_2.php
define('BOX_HEADING_WERBUNG_2', 'Kaufempfehlungen');
define('BOX_WERBUNG_2_LINK1', '<a href="http://www.seiden-handel.de/catalog/neue-farben-seidenjersey-meterware-c-184_185.html" target="_self" title="Seidenjersey">Seidenjersey, 100% Seide<br /><img src="http://images.seiden-handel.de/sidebars/seidenjersey-110cm.jpg" width="170px" height="113px" alt="Seidenjersey" border="0" /></a><br /><br />');
define('BOX_WERBUNG_2_LINK2', '<a href="http://www.seiden-handel.de/catalog/neue-farben-chiffon-meterware-c-184_186.html" target="_self" title="Meterware Chiffon">Meterware Chiffon<br /><img src="http://images.seiden-handel.de/sidebars/chiffon-emerald.jpg" width="170px" height="113px" alt="Meterware Seidenchiffon" border="0" /></a><br /><br />');
define('BOX_WERBUNG_2_LINK3', '<a href="http://www.seiden-handel.de/catalog/neue-farben-seidenjersey-meterware-c-184_185.html" target="_self" title="Meterware">Seidenjersey coloriert<br /><img src="http://images.seiden-handel.de/sidebars/seidenjersey-108.jpg" width="170px" height="113px" alt="Seidenjersey" border="0" /></a><br /><br />');
define('BOX_WERBUNG_2_LINK4', '<a href="http://www.seiden-handel.de/catalog/stoffe-unicolor-crepe-satin-c-23_53_153.html" target="_self" title="Seidensatin">Crepe Satin, 100% Seide<br /><img src="http://images.seiden-handel.de/sidebars/seide_satin_18403_bernstein.jpg" width="170px" height="113px" alt="Seidensatin" border="0" /></a><br /><br />');
define('BOX_WERBUNG_2_LINK5', '<a href="http://www.seiden-handel.de/catalog/stoffe-unicolor-ponge-c-23_53_58.html" target="_self" title="Meterware Ponge">Seidenstoff Ponge<br /><img src="http://images.seiden-handel.de/sidebars/seide_meterware_ponge05_17139_limone.jpg" width="170px" height="113px" alt="Seidenstoff Ponge" border="0" /></a><br /><br />');

Selbstverständlich kann man Links auch direkt in der Datei werbung_2.php bestimmen und auch die Bilder einfügen, aber ich war faul.

(Wer sich grade fragt, weshalb ich nicht einfach die Artikelfotos direkt aus dem /images – Ordner geholt habe, da die doch schon vorhanden sind:

Die sind zwar da… aber da sie größer sind als meine Seitenleiste breit ist, würden sie somit herunterskaliert werden. Ausserdem sind die Artikelbilder 40-80KB groß und die verkleinerten Bilder die ich eingefügt habe nur 4-9KB. Das spart bei 11 Bildern in den Seitenleisten einiges an unnötigen KB ein.

Nun haben wir also gelernt, wo die Seitenleisten zusammengebaut werden: /includes/column_right.php und column_left.php.
Wir haben auch eine Vorlage einer Box mit Überschrift und Content.
Und wir wissen, wo wir Überschrift und Content in unserer jeweiligen Sprache definieren: /includes/languages/german/german.php

 

 

Wie erstelle ich eine eigene Seitenleiste?

 

Die besten Freunde jedes Amateurfricklers sind Copy & Paste. (Fürs Mahnwesen kommen treten dann Smith & Wesson an deren Stelle)

Wir duplizieren erstmal eine vorhandene Seitenleiste. Ich nehme mal die rechte, also /includes/column_right.php.

Da ich nur eine Währung, eine Sprache habe, keine Reviews habe, keine Bestseller, Produktnachrichten, Specials oder Tell-a-friend-Dinge habe, sind die bei mir auch nicht vorhanden.

Die /includes/column_right.php, die so auf der Startseite benutzt wird und die wir nun duplizieren:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
/*
$Id: column_right.php 1739 2007-12-20 00:52:16Z hpdl $

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

Copyright (c) 2003 osCommerce

Released under the GNU General Public License
*/
require(DIR_WS_BOXES . 'search.php');
if ($cart->count_contents() >0) include(DIR_WS_BOXES . 'shopping_cart.php');//hack um warenkorb nicht zu zeigen, wenn er leer ist
if (isset($HTTP_GET_VARS['products_id'])) include(DIR_WS_BOXES . 'manufacturer_info.php');
require(DIR_WS_BOXES . 'ust.php');
if (tep_session_is_registered('customer_id')) include(DIR_WS_BOXES . 'order_history.php');
require(DIR_WS_BOXES . 'faq.php');
require(DIR_WS_BOXES . 'information.php');
include(DIR_WS_BOXES . 'werbung_1.php');
?>

 

Diese Datei duplizieren wir und benennen sie um in column_right2.php.

Nun bestimmen wir noch, auf welchen Seiten wir diese neue Seitenleiste anzeigen möchten.

Ich möchte sie auf den Artikelseiten sehen: Also suchen wir uns die Datei product_info.php in der root heraus, denn dort werden die Artikelseiten zusammengebaut.

Ziemlich am Ende der Datei finden wir folgende Zeile

Select Code
1
<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>

die wir in

Select Code
1
<?php require(DIR_WS_INCLUDES . 'column_right2.php'); ?>

abändern.

 

Meine neue Seitenleiste colum_right2.php sieht so aus:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
/*
$Id: column_right.php 1739 2007-12-20 00:52:16Z hpdl $

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

Copyright (c) 2003 osCommerce

Released under the GNU General Public License
*/
require(DIR_WS_BOXES . 'search.php');
if ($cart->count_contents() >0) include(DIR_WS_BOXES . 'shopping_cart.php');//hack um warenkorb nicht zu zeigen, wenn er leer ist
if (tep_session_is_registered('customer_id')) include(DIR_WS_BOXES . 'order_history.php');
require(DIR_WS_BOXES . 'infoblock_rechts.php');
require(DIR_WS_BOXES . 'infoblock_rechts_farbauswahl.php');

?>

Die selbstgebastelten Boxen includes/boxes/infoblock_rechts.php

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- Infoblock rechte Seitenleiste in Artikelansicht BOF //-->
<tr>
<td>
<?php
$info_box_contents = array();
$info_box_contents[] = array('text' => PRODUCT_CUSTOM_BLOCK);

new infoBoxHeading($info_box_contents, false, false);

$info_box_contents = array();
$info_box_contents[] = array('text' => CUSTOM_PRODUCT_BLOCK_CONTENT);
new infoBox($info_box_contents);
?>
</td>
</tr>
<!-- Infoblock rechte Seitenleiste in Artikelansicht EOF //-->

 

und includes/boxes/infoblock_rechts_farbauswahl.php

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- Infoblock rechte Seitenleiste in Artikelansicht BOF //-->
<tr>
<td>
<?php
$info_box_contents = array();
$info_box_contents[] = array('text' => FARBAUSWAHL_BLOCK);

new infoBoxHeading($info_box_contents, false, false);

$info_box_contents = array();
$info_box_contents[] = array('text' => FARBAUSWAHL_CONTENT);
new infoBox($info_box_contents);
?>
</td>
</tr>
<!-- Infoblock rechte Seitenleiste in Artikelansicht EOF //-->

Die Definition der Texte erfolgt bei mir immer in der Datei /includes/languages/german/german.php wo ich es nach folgenden Schema eintrage

Select Code
1
2
3
/*rechte Seitenleiste auf Artikelseite - Farbauswahl*/
define('FARBAUSWAHL_BLOCK', 'Die Überschrift der Box');
define('FARBAUSWAHL_CONTENT', '&lt;p&gt;Hier kommt der Content der Box. Formatiert werden kann in normalem HTML.');

 

 

Wie zeige ich meine Seitenleiste nur auf bestimmten Seiten an?

 

Du benötigst eine bestimmte Hinweisbox z.B. im Warenkorb und sonst gar nichts?

 

Erstelle eine neue Box info_warenkorb.php. (includes/boxes/info_warenkorb.php)

Definiere Überschrift und Text in /includes/languages/german/german.php.

Erstelle eine neue Seitenleiste column_right_warenkorb.php (includes/column_right_warenkorb.php)

Select Code
1
2
3
<?php
include(DIR_WS_BOXES . 'info_warenkorb.php');
?>

und includiere die Box info_warenkorb.php.

 

Schau nach, wo der Warenkorb angezeigt wird: In der Seite shopping_cart.php

Ändere in der Datei shopping_cart.php den Eintrag (ziemlich am Ende)

Select Code
1
<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>

in

Select Code
1
<?php require(DIR_WS_INCLUDES . 'column_right_warenkorb.php'); ?>

um.

 

Nach demselben Schema können wir nun beliebig viele colums_rightX.php und column_leftX.php anlegen, sie mit selbstgebastelten Boxen bestücken (die wir nach obiger Vorlage machen und deren Content wir in /includes/languages/german/german.php definieren und diese Seitenleisten auf jeder beliebigen Seite im Shop anzeigen. Man kann auch Boxen und Seitenleisten nur eingeloggten Besuchern anzeigen. Oder eben nicht.

osCommerce 2.2 schneller machen

Mein 7 Jahre alter osCommerce 2.2RC wurde von mir damals (als ich noch nicht wirklich Ahnung von Ladezeiten und so esoterischem Zeugs hatte) mit zig Modulen verschlimmbessert.

Aber er läuft und läuft und läuft… Und er läuft schneller als jeder Magento, den ich bis heute aufgesetzt habe.

Da sowieso ein Facelifting anstand (ich hatte wirklich 7 Jahre nichts am Shop geändert, ausser gelegentlich Artikel oder Preis geändert), wollte ich mich auch um das Thema Ladezeiten und Geschwindigkeit kümmern.

Nicht nur google, sondern auch Besucher mögen schnelle Websites.

Verwendete Werkzeuge: Firefox-Browser, die Add-ons WebDeveloper und Firebug für FF.

Um das Add-on von Webdeveloper zu benutzen klicke einfach mit rechtem Mausklick in die zu untersuchende Webseite und wähle “Element untersuchen” aus. Dort klicke auf den Reiter “Netzwerkanalyse” und lade die Seite neu. Es geht auch schneller mittels STRG+UMSCHALT+Q.

Das Addon Firebug zu benutzen klicke einfach mit rechtem Mausklick in die zu untersuchende Webseite und wähle “Element mit Firebug untersuchen”. Dort klicke auf den Reiter “Netzwerk” und lade die Seite neu.

Um die tatsächlichen Werte zu erhalten, solltest Du auch den Browsercache deaktivieren. So wird die Seite geladen, als ob Du ein neuer Besucher wärst.

Ursprünglich lud die Startseite gut 580KB bei einer Ladezeit von 2.8s (onload) und benötigte 47 Abfragen. Das ist natürlich nicht eben toll, aber da ich nie auf die Startseite klickte, fiel mir das auch nie auf.

Derzeit sieht es so aus:

osC 2.2RC derzeitiger Stand

Mein osC 2.2RC derzeitiger Stand

27 Anfragen, 208.3KB Traffic, 0.883s onload

 

Für die, die sowas noch nicht kennen: Das sieht nur kompliziert aus.

Ganz links sieht man die Dateinamen, dann (nach rechts), den Status der Datei (ist alles OK? Fehlt sie? Ist sie kaputt?), den Host (woher kommt die Datei?), den Dateityp (Grafik, HTML, CSS, JS?) und die Dateigröße in KB.
Rechts sieht man die Anzeige, ob und wie schnell die Datei geladen wurde, welche Datei auf welche andere warten mußte etc.

 

Zum Vergleich hier einer der Shops, die bei osCommerce als Referenz angegeben werden:

Referenzshop Teil 1

Referenzshop Teil 1

schnipp schnapp. Die Liste der Dateien war so lang, das ich keinen screenshot mehr machen konnte :(

Referenzshop Teil 2

Referenzshop Teil 2

68 Anfragen, 763.9KB Traffic, 3.71s onload

 

 

Woher stammen diese Unterschiede?

 

(Wenn ihr das nachprüft, stellt ihr wahrscheinlich Unterschiede zu meinen Werten fest. Da ihr evtl. ein anderes OS, einen anderen Browser, andere DNS-Server ansprecht, eine andere Internetverbindung habt, wird es abweichen)

  • Der Referenzshop liefert viel mehr Dateien aus, die euer Browser gleichzeitig herunterladen und verarbeiten kann. Mein Shop: 27 Dateien – der Referenzshop 68.
  • Der Referenzshop liefert 12 JavaScript-Dateien und 11 CSS-Dateien aus. Mein Shop 1 JS-Datei (von google Analytics) und 1 CSS-Datei.
  • Der Referenzshop lädt JS und CSS kunterbunt durcheinander und verwendet keine CDN-(Sub-)Domains. Auch werden JS- und CSS-Dateien ausgeliefert, die für die Anzeige der Startseite gar nicht benötigt werden.
  • Die Grafiken sind nicht optimiert.

 

Ob jetzt der eine oder andere Shop hübscher aussieht ist Geschmackssache. Hier geht es in erster Linie um Geschwindigkeit und mein Shop kann sicher auch noch optimiert werden. Ich habe auf Anhieb kein besseres Beispiel gefunden, wollte keinen fremden Webshop “auseinanderpflücken” und habe auch keinen Zugriff auf dessen PHP-Dateien.

 

 

Was kann man relativ einfach verbessern an einem osC 2.2?

 

  1. Zuerst einmal wirft man alles von den Seite, das sich bewegt, blinkt, scrollt und umherhüpft. Das braucht kein Mensch, macht die Seite langsamer und lenkt den potentiellen Kunden sowieso nur ab.
  2. Extern eingebundene Dateien, wie z.B. Prüfsiegel, Counter,  PR-Anzeigen, Drittwerbung, Links zu Websites deren Banner per Hotlink eingebunden sind, etc.  verlangsamen den Seitenaufbau extrem: Also weg damit.
  3. Fasse viele kleine CSS-Dateien zu einer großen zusammen
  4. Mache Dir Subdomains und verwende sie als CDN (Content Delivery Network)
  5. Optimiere deine Grafiken
  6. Fasse Gestaltungselemente zu einer CSS-Sprite-Datei zusammen oder erzeuge sie gleich per CSS
  7. Lege die Reihenfolge der Dateiaufrufe sinnvoll fest (CSS oben, JS unten)
  8. Verwende Standardfonts (Schriften) die jeder auf seinem Rechner installiert hat
  9. Wenn Du “Social” bist, dann binde nur die Buttons (Like, Follow, g+, Pinterest usw.) asynchron ein. Verwende kein Modul, das Deinen Stream lädt und mitsamt vieler bunter Bildchen live anzeigt

 

 

Wie setzt man das nun um?

 

Die Punkte 1 und 2 sind schnell erledigt. Je nach deiner Kundengruppe solltest Du wissen, was deine Kunden benötigen. Wenn Du dich mit technischen Spielereien von deinen Mitbewerbern abheben willst, vergiss es: Biete deinen Kunden richtige Mehrwerte wie bessere Artikel, besseren Service, schnellere Lieferzeiten.

 

 

Punkt 3: CSS-Dateien. Wenn Du Module hast, die eigene CSS-Dateien haben, dann kopiere dir deren Inhalt in deine stylesheet.css (die osCommerce Standard-CSS). Du mußt daher alle Dateien dieses Modules ansehen und nach evtl. eingebundenen CSS-Dateien suchen; diese ersetzt Du dann mit dem Pfad zu Deiner stylesheet.css. Der Sinn der Sache ist: Dein Server kann 1 grosse Datei schneller ausliefern als viele kleine Dateien.

 

 

Punkt 4: CDN per Subdomain. Der Hintergrund ist recht simpel: Ein moderner Browser kann max. 6-10 (je nach OS und Browsereinstellung) Dateien gleichzeitig von einer Domain empfangen. Ältere Browser sogar nur 2-4. Gehen wir von der theoretischen Annahme aus, daß mein Shop 27 Anfragen benötigt, jede Anfrage eine gleichgroße Datei ausliefert und jede Datei 0.3s vom Server zu Dir auf den Browser benötigt; dein Browser dröselt erstmal die DNS auf, dann lädt er die ersten 6 Dateien in 0.3s; dann Datei 7-13, 14 bis 20, 21 bis 27. Das wären dann 1.2s. Bestenfalls! Theoretisch bestenfalls… Bei 68 Dateien wären es dann aber schon 3.6s.

Einen wissenswerten Punkt gibt es noch:

Ein Browser kann nur gleichzeitig mehrere Dateien von derselben Domain empfangen, wenn sie vom gleichen Dateityp sind!

Deshalb ist es unter anderem Wichtig, die Aufrufe so anzuordnen, das stehts die maximale Anzahl von gleichartigen Dateitypen aufgerufen werden kann. Lädt der Browser eine JS-Datei und die nächstfolgende Datei ist vom Typ CSS, dann wird diese nicht parallel zur JS-Datei heruntergeladen… der Browser wartet bis das JS angekommen ist und erst dann beginnt er mit der CSS-Datei. Ordnet man also die Aufrufe der Dateitypen ungünstig an und sie befinden sich alle auf derselben Domain(!) (JS, CSS, Grafik, CSS, JS…) kann der Browser immer nur eine Datei gleichzeitig empfangen.

Was liegt nun näher, als diese Beschränkung “Ein moderner Browser kann max. 6-10 Dateien gleichzeitig von einer Domain empfangen” zu umgehen, indem man mehrere Domain verwendet? Eine Subdomain wird als eigenständige Domain angesehen. Normalerweise kostet es keinen Cent, wenn man einige Subdomains anlegt. Also machen wir doch einfach eine Subdomain für Grafiken, für JS und eine für CSS. Oder 2. Oder 3.

Bei meiner Domain z.B. liegt das gesamte CSS auf der Subdomain css.seiden-handel.de. Das JS auf der Subdomain js.seiden-handel.de, Gestaltungselemente und viele Grafiken auf der Subdomain images.seiden-handel.de.

Seht euch nochmal die Grafik von weiter oben meiner Domain an:

osC 2.2RC derzeitiger Stand

osC 2.2RC derzeitiger Stand

Schaut euch die Hosts an: Woher kommen die Dateien? Es kommen immer max. 5 oder 6 Dateien von derselben (Sub)Domain nacheinander. So können sie sich nicht blockieren und es geht einfach schneller.

 

 

Punkt 5: Grafiken optimieren ist relativ einfach. Ich verwende Photoshop und JPEGmini für JPEG. Für PNG verwende ich TiniPNG. Bei Grafiken gilt: Weniger ist mehr! Zumindest in bezug auf Schnelligkeit. Ihr könnt immer noch riesige, zig-MB-große Photos nachladen, wenn der User mit dem Mauszeiger auf das für Ladezeit optimierte Bild draufgeht oder sie anklickt. Du hast tolle Produktfotos in 1200 x 900px und würdest sie gerne in der Seitenleiste zeigen? – Mach das. Aber dann mache das Bild nur so groß, wie es auch tatsächlich in der Seitenleiste angezeigt wird. Du kannst es ja verlinken zur Artikelseite, wo das Bild dann auch in 1200 x 900px angezeigt wird.

 

 

Punkt 6: Kleine Gestaltungselemente in eine CSS-Sprite zusammenfassen? Kein Ding. Der Sinn dieser Sache ist, das Du kleine Gestaltungselemente wie Pfeile, Buttons, Linien nicht mehr normal einbindest mit dem IMG-Tag, sondern sie über CSS einbindest. Dazu verwende ich gerne dieses Tool hier: CSS-Sprite-Generator. Ersetze nur 10 Minigestaltungselemente – die der User wahrscheinlich nicht mal wahrnimmt – und spare dir 10 Abfragen… denn die sind in der stylesheet.css enthalten.

Oder erzeuge Gestaltungselemente wie Hintergründe, Linien, Farbverläufe, Buttons, Listenpunkte gleich auschließlich per CSS. Oder lasse sie einfach weg… vieles muß nicht da sein, auch wenn sich ein Webdesigner das so ausgedacht hat und sich selbst verwirklichen wollte.

 

 

Punkt 7: CSS oben und JS unten aufrufen. CSS-Dateien sollte man sehr weit oben im Quelltext aufrufen: Im header. JS sollte man möglichst weit unten aufrufen. Entweder da, wo sie im body gebraucht werden oder kurz vor dem Ende des body-Tags. Und sogar da falls möglich nur mit dem Zusatz “defer”.

Wie das geht? Ganz einfach: Ich will z.B. eine JS-Datei einbinden. Wenn ich die ganz oben einbinden würde, müßte dein Browser warten, bis er die DNS dazu gefunden hat, die Datei eingebunden hat… und erst dann geht es mit dem laden und dem Aufbau der Website weiter. So lange wartest Du geduldig vor deinem weissen, nichtssagenden Browserfenster…

Also beseitigt man solche “Blockierer” indem man sie kurz vor das schließende </body> setzt und ihnen noch ein “defer” mitgibt.

Das macht man einfach indem an das so macht:

Select Code
1
<script src="http://js.seiden-handel.de/functions.js" defer type="text/javascript"></script>

Viele JS-Scripte sind allerdings essentiell für den Betrieb und die Anzeige von Shops. Wenn man bemerkt, das die Mitgabe eines DEFER-Attributes den Shop lahmlegt, dann sollte man darauf verzichten oder auf die Quelle verzichten.

Das “defer” bewirkt, das damit ausgezeichnete scripte ZULETZT geladen werden. Also nach allen anderen Dateien. Wenn dies allerdings ein JavaScript ist, das wichtig für den Aufbau der Site ist, wie z.B. JS-Prototype oder diverse bootstrap-Scripte, dann sollte man das besser nicht mit “defer” auszeichnen. Da hilft dann nur Trial & Error.

 
Punkt 8: Standardschriftarten verwenden. Man kann sehr einfach Schriftarten (Fonts) einbetten. Entweder über die google-api oder man legt die Font-Dateien auf dem eigenen Server ab. Man muß aber im Blick behalten, das diese Dateien mehrere MB groß sein können. Und bevor der Besucher deines Shops deine tolle Schrift bewundern kann, müssen die MB auf seinen Rechner gelangen.

Wenn die Fonts über die google-api aufgerufen werden, wird zusätzlich noch ein DNS-LookUp fällig.

Es gibt genügend ansprechende Fonts, die so ziemlich jeder Besucher auf seinem PC installiert hat oder – vom Besuch einer anderen Seite – im Cache hat.

 

 

Punkt 9: Facebook, Pinterest, g+ – Buttons werden gerne falsch eingebunden. Verwende zumindest einen asynchronen Aufruf ganz am Seitenende. Verzichte möglichst darauf, z.B. die ersten Einträge Deiner Timeline mit Userbildchen anzuzeigen. Das verzögert den Seitenaufbau extrem.  Wenn es irgendwie geht, dann binde nur die Buttons asynchron ein. Schau selbst nach und staune, wie sehr Deine Seite verlangsamt wird, wie viel Zeugs diese Socialdingens laden und vor Allem: Ständig nachladen. Und das bei jedem Seitenaufruf.

 

Wie das nun alles im Detail gemacht wird, erkläre ich nicht. Die obigen Punkte sind eher für Leute gedacht, die ihr Shopsystem, ihren Editor und Server kennen und gerne frickeln. Aber bevor man etwas besserbasteln kann, muß man erstmal wissen, wo man ansetzen kann und was man relativ einfach an einem osCommerce-Shop ändern kann.