Die Anzahl der HTTP Request beim Laden einer Seite ist einer von vielen Faktoren der Performance Optimierung. Wie CSS und JavaScript Dateien unter TYPO3 zusammengefügt und minimiert werden kann, zeigt folgender Artikel. Weiters lesen Sie wie man die Größe des HTML-Quellcodes verkleinert.

Scriptmerger

Die TYPO3-Extension Scriptmerger bietet die Möglichkeit, extern eingebundene JavaScript und CSS Dateien zu komprimieren und diese anschließend zu einer Datei zusammenzufügen. Nach der Installation, die im Extension-Manual ausführlich erklärt wird, werden die Dateien je nach Einstellung zu einer oder mehrere Dateien zusammengefügt.

Probleme können beim Einsatz von UTF-8 in Verbindung mit gzip auftreten. Helfen kann dabei folgendes: Entweder man deaktiviert die gzip-Komprimierung da diese bereits vorher vom Server durchgeführt wurde oder man schreibt, wenn ein Kodierungs-Problem bei der CSS-Datei auftritt, folgendes Attribut in das link-Tag das für die Integration der CSS-Datei zuständig ist: charset="utf-8"

Leider werden die eigene CSS-Datei und das von TYPO3 integrierte CSS_Styled_Content-Stylesheet nicht zu einer Datei zusammengefügt.

Das Zusammenfügen und Minimieren der JavaScript-Files funktioniert im Prinzip problemlos und bedarf daher keiner weiteren Erklärung.

HTML Minify

Da Scriptmerger keine Minimierung des HTML-Quellcodes mit sich bringt, ist zur Entschlackung und Verkleinerung des HTML-Quellcodes die Extension SourceOptimization notwendig. Diese Erweiterungen macht nicht anderes, als unnötige Leerzeichen, Tabulatoren, Whitespaces, Kommentare, etc. aus dem Quelltext zu entfernen. Dadurch verkleinert sich die Größe der HTML-Datei. Wieviel vom Quellcode entfernt und minimiert werden soll kann mittels TypoScript eingestellt werden.

Dateien mit dem Namen .htaccess werden gerne genutzt, um gewisse Einstellungen am Server vornehmen zu können, ohne das ein Root-Zugriff auf das Server-System vorhanden sein muss. Ein weiter Vorteil beim Einsatz von .htaccess ist, dass der Server nach Änderungen nicht neu gestartet werden muss.

Performance-Bremse .htaccess

Die einfache Handhabung von .htaccess hat jedoch einen entscheidenden Nachteil: Die Performance  verringert sich, da der Server bei jedem Seitenaufruf nachschaut, ob im Verzeichnis der aktuell aufgerufenen Datei eine .htaccess-Datei vorhanden ist. Ist dies der Fall, wird der Inhalt der Datei natürlich noch gelesen und verarbeitet. All diese kostet Zeit und Performance!

Performanter geht es, indem man die gesamten Einstellungen in der vHost-Konfiguration zentral verwaltet.  Wichtig dabei ist, dass in der Apache-Konfiguration folgende Direktive gesetzt ist: AllowOverride None (damit suche Apache nicht nach .htaccess Dateien)

Wenn man nun Änderungen vornimmt, muss Apache neu gestartet werden, damit die Änderungen übernommen werden. Das ganze ist natürlich nur möglich, wenn man einen virtuellen Server oder gar einen Root-Server im Einsatz hat. Bei unseren Magento Projekten ist das aber sowieso Grundvoraussetzung für einen erfolgreichen Betrieb.

Eine Funktion, mit der sich Magento von seiner Open-Source-Konkurrenz abhebt, ist das Multishop-Konzept, dass jedoch auf den ersten Blick nicht ganz klar zu verstehen ist und somit hier erklärt werden soll.

Die Multishop-Funktionalität dient dazu, um innerhalb einer Magento-Installation mehrere Online-Shops betreiben oder verschiedenen Zielgruppen ansprechen zu können. So könnten etwa für Firmenkunden Nettopreise und für Privatkunden Bruttopreise getrennt angezeigt oder verschiedene Layouts für unterschiedliche Zielpersonen verwendet werden.

Magento bietet drei Geltungsbereiche: Website, Store und StoreView für die es allesamt Einstellungsmöglichkeiten gibt. Website ist die oberste Ebene, Store die 2. Ebene und StoreView die in der Hierachie niedrigste Ebene. Einstellungen vererben sich stets auf darunterligende Ebenen, außer man definiert für eine Ebene etwas anderes. Im folgenden werden die drei Geltungsbereiche näher erklärt.

Website

Die Website ist das übergeordnete Element in einer Magento-Installation. Alle Stores und StoreViews, die einer Website zugeordnet sind, verwenden den gleichen Warenkorb. Es können somit mehrere Shops erstellt werden, die jedoch die gleichen Kundendaten und einen gemeinsamen Warenkorb verwenden.

Store

Ein Store dient unter anderem dazu, um innerhalb von Magento verschiedene Kategoriebäume verwenden zu können. Weiters können sich Shopbetreiber die Verkaufsdaten auf Store-Ebene anzeigen lassen. Viel mehr Funktion bietet Store aber nicht mehr.

StoreView

Der Hauptgrund bei der Verwendung mehrerer Store-Views ist die Internationalisierung, also die Umsetzung mehrsprachiger Web-Shops. In jeder StoreView können die einzelnen Bezeichnungen von Menüpunkten, Buttons, etc. individuell geändert werden.

Theoretisch können also beim Anlegen von mehreren Geltungsbereichen des Typs "Website" verschiedenste Online-Shops betrieben werden können, die alle unter eigenen Domains erreichbar sind. Wobei man sich natürlich die Fragen stellen muss, ob es sinnvoll ist, viele Shops in einer Installation zu betreiben, da natürlich der Webserver demenstprechend mehr unter Belastung steht und somit die Performance aller Online-Shops sinkt.

Ein interessantes Features veröffentliche Google heute in 7 Ländern: Beim Eintippen eines Suchbegriffs werden direkt darunter die Ergebnisse live angezeigt und aktualisiert, ohne das extra auf den Suchen-Button geklickt werden muss. Somit lassen sich schneller passende Resultate bei der Eingabe ermitteln bzw. kann durch die weitere Eingabe von Zeichen dynamisch das Resultat gefiltert werden.

Google erwartet sich von der neuen Funktion eine Verkürzung des Such-Prozesses. Durchschnittlich benötigen Benutzer für die Eingabe einer Suchanfrage 15 Sekunden - dieser Wert soll sich durch Google Instant verringern. Die Funktion ist momentan für alle Nutzer von google.com (in Englisch) und google.ru verfügbar sowie für angemeldete Benutzer in Deutschland, Großbritannien, Frankreich, Spanien und Italien.

Meiner Meinung ein interessanter Schritt Richtung Echzeit-Suche. Profitioneren werden vor allem die Benutzer, da sich damit die Suche schneller erledigen und eingrenzen lässt.

Das folgende Video soll die Verwendung von Google Instant kurz demonstrieren.

Heute früh wurde der neu entwickelte Internet-Auftritt der Dr. Otto Urbanek Technologie Management GmbH online gestellt. Das noch junge Unternehmen rund um Geschäftsführer Dr. Otto Urbanek bietet Beratung in den Bereichen Unternehmensentwicklung, Technologie und Management.

Die Website wurde mit TYPO3 realisiert. Besonderheiten sind ein passwort-geschützter Bereich für Projektdokumentationen, die Verwendung von Cufon zur Einbindung der gewünschten Schriftart in den Fließtext sowie die Einbindung des TYPO3-Plugins "tan3_glider" für die Umsetzung eines klickbaren JavaScript-Sliders (siehe Seite Referenzen).

Für Grafik und Design zeichnete sich die Linzer Werbeagentur Haslinger, Keck verantwortlich. Hiermit nochmals ein Dankeschön an Herrn Reinhart Haslinger für die gute und problemlose Zusammenarbeit!

Mit folgenden Code wird ein DIV-Container mit einer Breite von 800px und einer Höhe von 500px horizontal und vertikal im Browser-Fenster zentriert. Mit dem zusätzlichen Container "valign_hlp" wird das Problem gelöst, dass der obere Bereiche des Containers abgeschnitten wird, sobald sich das Browser-Fenster zu sehr verkleinert - was in Zeiten von Netbooks und Smartphones gar nicht mal so selten vorkommt.

Das HTML-Gerüst und der CSS-Code sehen wie folgt aus:

<div id="valign_hlp">
  <div id="container"><!-- Der eigentliche Inhalt der Site --></div>
</div>

#valign_hlp, #container {
	margin: 0;
	padding: 0;
	position: absolute;
}
#valign_hlp {
	width: 100%;
	height: 100%;
	min-height: 500px;
	min-width: 800px;
}
#container {
	top: 50%;
	left: 50%;
	margin: -250px 0 0 -400px;
	width: 800px;
	height: 500px;
	min-height: 500px;
}

In der aktuellen Ausgabe des Abakus Newsletters wird in einem ausführlichen Artikel beschrieben, wie Sie Linkquellen finden, die noch nicht oder kaum von Ihren Mitbewerben verwendet werden. Mit Links von derartigen Websites, können Sie sich einen Vorteil gegenüber Ihren schärfsten Konkurrenten schaffen.

Der Artikel zeigt, wie qualitativ hochwertige Domains bzw. so genannte "Autority Sites" mittels der Google-Suche recherchiert werden können. Der Autor Alan Webb vermittelt den Blick über den Tellerrand um so weitere und kreative Suchbegriffe die zur Ihren Themenumfeld passen, für die Link-Recherche verwenden können.

Lesen Sie hier den gesamten Artikel bei Abakus

Standardmäßig bietet die TYPO3-Blog-Extension "T3Blog" keine elegante Möglichkeit, um für die einzelnen Beiträge in der Listenansicht automatisch Teaser zu erstellen. In einem Beitrag im Forum von typo3.net wurde folgende einfache Möglichkeit erwähnt, die sehr gut funktioniert:

[globalVar = GP:tx_t3blog_pi1|blogList|showUid<1]
tt_content.text.20.stdWrap.crop = 750 | &nbsp;... | 1
[global]

Mit dieser Anweisung wird der Text nach 750 Zeichen abgeschnitten und danach mit 3 Punkten ergänzt. Allerdings funktioniert das nur mit Text. Wenn aber, wie in diesem Blog, mit Plugins Inhalt ausgegeben wird, so wird dieser einfach nach den 750 Zeichen weiterhin angezeigt. Da ich bis dato noch keine Lösung gefunden habe, dieses Problem zu umgehen, habe ich das oben genannte TypoScript wieder deaktiviert. Ich freue mich aber über jeden Lösungsvorschlag, der in den Kommentaren hinterlassen werden kann.

Die andere Variante, die ich aber aus Sicht eines Redakteures nicht sehr benutzerfreundlich finde, funktioniert so, indem man an einer Stelle im Text einen Marker mit dem Inhalt MORE schreibt.

Dieser Marker setzt einen Link, der zum eigentlichen Artikel inkl. den Kommentaren führt. Um den Titel des Links zu ändern ist folgendes TypoScript notwendig:

plugin.tx_t3blog_pi1 {
   blogList {
     _LOCAL_LANG.de {
       moreText = Weiterlesen
     }
   }
}

Für unseren langjährigen Kunden, das MDI Management Development Institute, führen wir derzeit den Relaunch der Website durch. Der neue Internet-Auftritt wird in 7 Sprachen verfügbar sein. Ziel ist die Modernisierung, Internationalisierung und die Integration neuartiger Web 2.0 Services sowie die Optimierung der Struktur und Inhalte für Suchmaschinen.

Als Content Management System wird weiterhin TYPO3 zum Einsatz kommen. Die Website soll ca. Mitte Oktober online gehen.

Achtung: Unter TYPO3 4.5 ergeben sich kleinere Änderungen bei der Verwendung von Fancybox unter TYPO3! Hier das Update für Version 4.5 in einem separaten Artikel.

Auf einer Vielzahl von Websites ist die allseits bekannte Lightbox in Verwendung. Eine Lightbox ist eine Art Pop-Up. Dabei wir die Website abgedunkelt und meist ein Foto legt sich über die Seite. Aber nicht nur Fotos, sondern alle Arten von Inhalten bis hin zu gesamten Websites können in einer Lightbox dargestellt werden.

Mittlerweile gibt es verschiedenste Lightbox-Skripte. Wir bei KEYNET setzen in letzter Zeit bei unseren Lösungen zumeist das jQuery-Plugin Fancybox ein, da damit die Darstellung von verschiedenen Inhaltstypen untestützt wird. Aus diesem Grund zeigen wir hier kurz, wie die Fancybox ohne Verwendung einer Extension in TYPO3 integriert werden kann. Es gibt auch eine Fancybox-Extensions, allerdings ist es angenehmer, die volle Kontrolle über die Steuerung des Skripts zu haben.

Zuerst fügen wir folgendes TypoScript in unser Template ein:

tt_content.image.20.1 {
  # Standard imageLinkWrap entfernen & eigenes Linkwrapping starten
  imageLinkWrap >
  imageLinkWrap = 1
  imageLinkWrap {

    # Linkwrap bei Klickvergrößerung oder gesetzten Link
    enable.field = image_zoom
    enable.ifEmpty.typolink.parameter.field = image_link
    enable.ifEmpty.typolink.parameter.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
    enable.ifEmpty.typolink.returnLast = url

    # Der neue Code für das Wrapping
    typolink {
      target = {$styles.content.links.target}
      extTarget = {$styles.content.links.extTarget}

      # Link mit Pfad und Name zum Originalbild oder
      # Pfad und Name des umgerechneten Lightbox Bild
      parameter.cObject = IMG_RESOURCE
      parameter.cObject.file.import.data = TSFE:lastImageInfo|origFile

      # Ausnahme: wenn das linkfield nicht leer ist
      parameter.override.field = image_link
      parameter.override.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
      parameter.override.if.isTrue.field = image_link

      # rel-Attribut hinzufügen, für Galerie-Funktion
      ATagParams = rel="gallery" title="{field:header}" class="lightbox"
      ATagParams.override = rel="gallery{field:uid}" title="{field:header}" class="lightbox"
      ATagParams.insertData = 1
      ATagParams.if.isTrue.field = image_zoom
    }
  }
}

Damit es nun funktioniert, fehlt noch folgender JavaScript-Code (beinhaltet zudem die Anweisung für die Darstellung von anderen Websites per iFrame):

// Image
$("a.lightbox").fancybox({
  'zoomSpeedIn': 300,
  'zoomSpeedOut': 300,
  'overlayShow': true
 });

// iFrame Content
$("a.lightbox-page").fancybox({
  'zoomSpeedIn': 300,
  'zoomSpeedOut': 300,
  'overlayShow': true,
  'width': 650,
  'height': 280,
  'titleShow': false,
  'autoScale' : true,
  'type': 'iframe'
 });

Nun kann man über den Inhaltstyp "Text mit Bild" oder "Bild" die Fancybox durch Verwendung von "Klick-Vergrößern" verwenden. Weiters ist es möglich sich im RichTextEditor von TYPO3 verschiedene CSS-Klassen zu definieren, die man danach Links zuweisen kann. Klickt man danach auf einen dieser Links, wie das Linkziel in der Fancybox angezeigt.