Schlanke Websites: Ladezeiten verkürzen, Code/Content Verhältnis verbessern

Grundsätzlich sollte man immer versuchen Webseiten so "schlank" wie nur möglich zu halten. Das bedeutet, dass der reine Code (HTML, JavaScript und CSS) auf ein Minimum reduziert werden muss. Abgesehen davon, dass diese Maßnahme die Ladezeiten zum Teil deutlich verinngern kann hat es noch weitere Vorteile. Zum einen verringert sich dadurch die Serverauslastung - je mehr Traffic eine Seite hat, desto deutlicher wird man diesen Effekt merken. Und zum anderen verbessert sich das Verhältnis zwischen Code und Content - das sog. Code/Content Verhältnis. Das spielt vor allem aus SEO-Sicht eine nicht zu unterschätzende Wirkung. Durch weniger Code gewinnt der Website-Content an Bedeutung (und die darin enthaltenen Keywords auch ;)). Und mal ehrlich... wie würdet Ihr, aus der Sicht einer Suchmaschine, eine Seite beurteilen die jede menge Code aber kaum Text enthält? Eben! Kurz: Schlanke Seiten wirken sich positiv auf die Nutzererfahrung bzw. Usability und das Ranking in Suchmaschinen aus. Worauf also noch warten?

Damit will ich eine Beitragsreihe ins Leben rufen die in mehreren Schritten zeigt wie man dem oben gestecktem Ziel näher kommen kann. Da ich bis jetzt noch nicht genau weiß, was mir dazu alles einfällt bzw. was ich mit aufnehme, gibt es an dieser Stelle zunächst mal keine Übersicht ;). Ich beginne einfach mit dem ersten Thema und wir sehen mal was noch so alles kommt...

Schlanke Seiten Tipp 1: JavaScript und CSS auslagern
Die Ausgabe von TYPO3 beinhaltet zum Teil sehr viel JavaScript und CSS Code. Das hängt vor allem mit den installierten Extensions zusammen. Mit wenigen Zeilen TypoScript Code kann man dieses unschöne Verhalten jedoch abstellen.

# remove JavaScript to external files
config.removeDefaultJS = external

# remove CSS to external files
config.inlineStyle2TempFile = 1

Diese Zeilen können hier raus kopiert und direkt in das Haupt-TypoScript-Template der Website eingebunden werden.

Darüber hinaus ist es sinnvoll "_CSS_DEFAULT_STYLE" sämtlicher Plugins - sofern man die standard CSS Ausgabe nicht braucht - zu löschen. Normalerweise übernehm ich alles was ich brauche in ein eigenes CSS und deaktivier danach die Standardausgabe. Das hält die Dateien schlanker und verhindert, dass irgendeine Einstellung "im Hintergrund" zu Fehlern führt.
Immer dran denken: Aufräumen heißt die Devise - also weg mit allem was man nicht unbedingt braucht!

Um die Standardausgabe zu unterbinden folgende Zeilen in das Haupt-TypoScript-Template einfügen:

# clear default CSS styles - only if using plugin css_styled_content plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE >

# clear default CSS styles of Plugin tx_veguestbook_pi1 plugin.tx_veguestbook_pi1._CSS_DEFAULT_STYLE >

Die erste Zeile benötigt man beim Einsatz von CSS Styled Content. Die zweite zeigt wie man für ein anderes Plugin (hier tx_veguestbook_pi1 - Plugin für Kommentare) die Standard CSS Ausgabe unterbindet.

Dann könnte man noch den TYPO3 Header entfernen der standardmäßig im bereich mit ausgegeben wird... davon halte ich jedoch nichts! Immerhin kann man TYPO3 kostenlos nutzen - da sollte man das auch sehen können. Das ist meine persönliche Meinung und deshalb gibt den Tipp auch nicht ;).

Das soll's fürs Erste mal gewesen sein...

Noch eine Anmerkung an dieser Stelle: Eine Auswirkung meiner früheren Tätigkeit als Programmieren ist, dass ich besonders auf sauberen Code achte (meistens zumindest ;)). Dazu gehört auch, dass man deutsch/englische Programmierung vermeidet. Nachdem TYPO3 und sämtliche Dokumentationen in englischer Sprache sind, sind auch meine Code Beispiele hier im Blog englisch. Früher oder später muss man sich ja im Umgang mit TYPO3 sowieso an das Englisch gewöhnen ;).

TYPO3 + 1und1 = "500 Internal Server Error" im Frontend?

Auf einem "1&1 Homepage Business" Webhosting-Paket von 1und1 hab ich TYPO3 in der Version 4.1.6 am laufen - inzwischen ;). Bei der Installation gab es soweit keine Probleme und auch das Backend lief ohne Probleme... doch sobald ich in das Frontend wechselte: 500 - Internal Server Error. Woran könnte das wohl liegen?
Zunächst hab ich mal die Standards überprüft - das ist immer sinnvoll:

• Schreibrechte der verschiedenen Ordner (über TYPO3 Install Tool - Basic Configuration oder 'nen FTP-Client): Alles ok.
• max. Laufzeit der PHP Skripte (max_execution_time ebenfalls TYPO3 Install Tool): 50000 Sek. - passt.
• Memory Limit (memory_limit ebenfalls TYPO3 Install Tool): 40 MB - passt auch.

Alles in Ordnung. Woran könnte es dann liegen? Ehrlich gesagt hatte ich keine Ahnung. Also, schnell mal gegoogelt - das Problem hatten andere sicher auch schon. Gefunden hab ich allerdings nur Ansätze die ich schon überprüft hatte. Nach langem Suchen hab ich mich durchgerungen und bei 1und1 angerufen. Der nette Mitarbeiter gab mir den Tipp, dass viele CMS seit kurzem auf PHP Version 5 umgestellt haben und dass man bei den 1und1 Webhosting-Paketen die PHP Version 5 per .htaccess erzwingen muss... Da hat's bei mir geklingelt ;). Ich hab alles Erdenkliche überprüft, nicht jedoch das Naheliegendste - nämlich die PHP Version... immerhin hat das Backend ja funktioniert - sag ich jetzt mal noch schnell zu meiner Verteidigung :D!
So kann's gehen... und damit Ihr nicht so lange suchen müsst hier die Anleitung wie es geht:
Folgende 2 Zeilen am Anfang der .htaccess Datei des Root-Verzeichnis (also dort wo auch die index.php liegt) einfügen:

AddType x-mapp-php5 .php
AddHandler x-mapp-php5 .php

Das ganze findet man auch im 1und1 Hilfe-Center unter : http://hilfe-center.1und1.de/hosting/scripte_datenbanken/php/18.html

Der TYPO3 Installation liegt bereits eine .htaccess Datei bei. Die heißt allerdings noch "_.htaccess" und enthält jede menge Einstellungen vor allem für den Einsatz von RealURL (dazu werd ich bei Gelegenheit mal was schreiben) und einige Einstellungen rund um PHP und den Server im Allgemeinen. Sofern man RealURL nicht einsetzt und sich mit den .htaccess Einstellungen nicht wirklich auskennt, rate ich von der "_.htaccess" Datei die Finger zu lassen und stattdessen eine neue .htaccess Datei mit den 2 Zeilen Code von oben zu erstellen.
Na dann... viel Spaß mit TYPO3!

Was gibt's hier zu lesen?

Gut, wie der Name unschwer erkennen lässt geht es hier um TYPO3 - allem voran um Tipps im Umgang damit. Und wie kommt's? TYPO3 war lange Zeit der Schwerpunkt meiner Arbeit. Inzwischen trifft das nicht mehr ganz zu... Meine Schwerpunkte sind jetzt vor allem Suchmaschinenoptimierung und Web-Usability. Dennoch verwende ich TYPO3 vor allem für eigene Projekte immer wieder gerne. Denn, wer sich erst einmal in das System "reingebissen" hat - der Einstieg ist nicht gerade leicht, da sehr umfangreich - wird schnell feststellen, dass es sich um ein geniales Content Management System handelt, mit dem man nahezu alles treiben kann was einem so einfällt! Mit etwas Erfahrung kann man damit sehr schnell neue Seiten hochziehen. Zudem hat man mit der Zeit immer mehr Vorlagen und Code-Schnippsel gesammelt die einem das erstellen neuer Seiten zusätzlich erleichtern.
Wie ich schon geschrieben hab, arbeite ich inzwischen nicht mehr so häufig mit TYPO3 was dazu führt, dass so manche Kniffe die ich mir (mehr oder weniger hart) erarbeitet hab, in einem nicht mehr zugänglichen Bereich meines Hirns verschwinden. Wird ein neues Auto eingeparkt, muss eben ein altes raus... Deshalb werde zukünftig sämtliche Kniffe die auf dem besten Weg sind ausgeparkt zu werden, hier zwischenparken ;). Und ich hoffe - naja, eigentlich bin ich mir sicher - dass das Eine oder Andere für Euch ebenfalls von Nutzen sein wird!
Na, dann... kann's ja losgehen!
Auf gute Tipps, Maddin