You are currently browsing the archives for the “JavaScript” category.

Typo3 Performance Tuning Tips

11. Juni 2009 // Posted in CSS, HTML, JavaScript, apache (Tags: , , , , , , , , ) |  4 Comments

Ich hab hier mal ein paar Tips für die Performance Optimierung von Typo3 zusammen geschrieben. Einige Tips können ohne Probleme auch anderen Content-Management-Systemen bzw normale PHP-Seiten beschleunigen.

  1. CSS und JavaScript unbedingt in externe Dateien auslagern. Bei Typo3 funktioniert das mit den folgenden Befehlen:
    config.inlineStyle2TempFile = 1
    config.removeDefaultJS = external
    das hat den Vorteil, das der Browser diese Dateien nur einmal runterladen muß und bei weiteren Seiten der selben Webseite diese aus dem lokalen Browser-Cache holt, was natürlich wesentlich schneller geht
  2. php-eacclerator
    hierbei handelt es sich um einen PHP-Cache auf dem Webserver. PHP-Scripte werden normalerweise immer zur Laufzeit (d.h. bei jedem Aufruf) vom PHP-Interpreter “kompiliert” und an den Webserver übergeben. php-eacclerator speichert bereits kompilierten PHP-Scripte zwischen und gibt diese bei erneutem abrufen direkt aus ohne das das PHP-Script nochmal neu kompiliert werden muß. Je nach Webseite und Hardware des Webservers kann man mit php-eacclerator die Antwortzeiten (mit yslow gemessen) mindestens halbieren.
  3. JavaScript-/CSS-Dateien und HTML-Templates in Typo3 optimieren
    so komisch sich das anhört, aber wenn man für die Syntax unwichtigen Leerzeichen aus den oben genannten Dateien entfernt spart man wieder Platz und damit Bandbreite. Kommentare haben in CSS und JavaScript-Dateien nichts verloren. Kommentare sind nur für die Entwicklung und nicht für den Produktiv-Betrieb. Außerdem muß man aufpassen, CSS-Klassen möglichst effektiv einzusetzen. Ich persöhnlich bin kein Freund von Browser-Hacks. Meiner Meinung nach ist es effektiver (für die Webseite, nicht für mich), wenn ich eine Standard-CSS-Datei für alle Browser vorhalte und bei Browser, welche immer wieder Probleme bereiten (wie z.B. der IE) eine Extra-CSS-Datei anzulegen und anzupassen. In Typo3 kann man dann mit [useragent = *MSIE*] den Internet-Explorer erkennen und die entsprechend geänderte CSS-Datei ausliefern.
  4. Typo3-Plugin sourceopt installieren und einrichten
    Sourceopt entfernt je nach Einstellung Leerzeichen und Kommentare aus der HTML-Ausgabe. Wenn sourceopt alle Leerzeichen und Kommentare entfernt, kann es zu Problemen mit eingebetteten JavaScript kommen (z.B. bei GMENU-/TMENU-Layer-Menüs)
  5. htaccess-Dateien vermeiden und die Direktiven direkt in die Apache-Konfiguration schreiben
    Am besten ,man entfernt die Direktive AccessFileName aus der Apache-Konfiguration. So praktisch sie sein mag, sie kostet Zeit. Bei jedem Aufruf einer Webseite bzw. bei jedem Abruf einer Datei (auch bei CSS, JavaScript und Grafiken) schaut der Apache jedesmal erst nach ob diese Datei vorhanden ist. Effektiver ist es, die Konfiguration gleich in die Apache-Konfigurations-Dateien zu schreiben. Dies geht natürlich nur, wenn man einen root-Server zur Verfügung hat.
  6. AddOutputFilter für css und JavaScript-Dateien in den Apache-Konfigurationen bzw compressionLevel in Typo3 setzen(in der localconf.php)
    AddOutputFilter kompimiert die angegebenen Dateien und schreibt dies auch in den Header der Datei. Der Browser erkennt dies und kann die Datei wieder dekomprimieren. Hierdurch kann man Bandbreite sparen. Genug CPU-Leistung muß aber vorhanden sein, da die Kompression hier Leistung erwartet. Auf alten kleineren PC’s/Servern ist dies nicht zu empfehlen. HTML-Dateien muß man nicht per AddOutputFilter-Direktive komprimieren. Das kann Typo3 intern mit compressionLevel machen. mit compressionDebugInfo kann man sich die erziehlte Kompression im HTML-Quellcode anzeigen lassen.
  7. Typo3-Core ändern um auch noch übrig gebliebenen JavaScript-Code auszulagern
    Dieser Tip ist nur für Leute, die sich mit PHP auskennen. Ich habe bei meiner Typo3-Installation den Code so verändert das alle JavaScript und CSS-Elemente extern in eine Datei ausgelagert wurden. Der eizigste Nachteil ist, das für die TMENU_LAYER-Menüs für jede Seite JavaScript-Dateien angelegt werden. Nach einer paar Wochen (je nach Auslastung der Webseite) sumiert sich das ganz schön.
  8. JavaScript an das Ende der HTML-Datei/Ausgabe verlagern
    das Laden von JavaScript blockiert im Browser das weiteren Laden von Seiteninhalten. Erst wenn der JavaScript-Code verarbeitet wurde ruft der Browser weitere Seiteninhalte ab. Daher ist es sinnvoller den JavaScript-Code erst am Ende der HTML-Datei zu laden. Je nach Script kann es hier aber zu Problemen kommen
  9. Grafische Menüs(GMENU/GMENU_LAYER) vermeiden und statt dessen Text-basierte Menüs (TMENU/TMENU_LAYER) verwenden
    Bei grafischen Menüs müssen für jeden Button ein oder mehrere Grafiken nachgeladen werden. Bei einem umfangreichen Layermenü und Grafiken von 1-2kB summiert sich das schnell zu einer beträchtlichen Größe zusammen. Effektiver sind hier Text-basierte Menüs da hier nur der text-Inhalt des Buttons und der HTML-Code geladen werden muß. Text-basierte Menüs haben außerdem den großen Vorteil, das Suchmaschinen wie google und Co. diesen Text auch lesen können. Mit Grafiken kann google nichts anfangen.
  10. falls große Grafiken unbedingt notwendig sind, diese per JavaScript nachladen.

"Must have"-Tools und Webseiten für Webmaster

1. Juni 2009 // Posted in Allgemein, CSS, HTML, JavaScript, programmieren (Tags: , , , , , , , , ) |  No Comments

Eine Webseite mit einem ASCII-Editor zu schreiben ist zwar möglich. Mit der Hilfe entsprechender Programme kann man sich aber mehr auf das Design und den Inhalt konzentrieren. Außerdem finden Programme schneller Fehler im Quellcode. Bei größeren Webseiten (mehr als 50 Seiten) ist es nahezu unmöglich eine fehlerfreie Webseite nur mit einem ASCII-Editor zu schreiben, da man zu schnell die Übersicht verliert. Folgende Programme kann ich daher jedem Webmaster/Webdesigner empfehlen:

  • Browser: Firefox – OpenSource-Browser mit der Möglichkeit zur Erweiterung durch Plugins
  • Firefox-Plugins:
    • Yslow – misst die Zeit, welche zum abrufen einer Webseite benötigt wird und gibt Optimierungstips
    • Firebug – logt alle Aktionen beim aufrufen einer Webseite mit und bietet detailierte Quellcodeanalyse
    • Web Developer Tools – hilft dem Entwickler beim Design/anordnen aller Seitenelemente
    • HTML Validator – findet Fehler im HTML-Code
    • FireFTP – FTP-CLient zum hochladen der Dateien auf einen Webserver mit FTP-Zugang
  • Notepad++ – guter erweiterbare Editor für fast jeden Datei-Typ, als HTML-Editor meiner Meinung nach aber wenig geeignet
  • WinSCP – zum Hochladen der Dateien, nur notwendig falls man einen SSH-Zugang zum Webserver hat (z.B. Root-Servern)
  • Putty – zum administrieren eines Linux-Servers, nur notwendig falls man einen SSH-Zugang zum Webserver hat (z.B. Root-Servern/man sollte sich unbedingt mit dem Betriebssystem des Server auskennen)
  • Gimp 2 – gutes, mit Photoshop vergleichbares Open-Source Grafik-Programm
  • Vmware-Player / VMX Builder – Virtueller PC, ideal um mehrere Browser unabhängig von einander zu testen
  • Adobe Dreamweaver – ist leider nicht kostenlos, eignet sich aber sehr gut um HTML oder PHP-Seiten zu programmieren

Folgende Webseiten helfen bei der Optimierung der Webseite:

Man muß seine Webseite nicht bei jeder Suchmaschine anmelden. Normalerweise sollte es reichen, wenn man seine Webseite bei ein paar Suchmaschinen anmeldet und für möglichst viele Backlinks sorgt.[ad#Google Adsense banner]