Schlagwort: Javascript

3D-Carousel, CoverFlow

Mir gefallen viele CoverFlow-Elemente auf Websites. Ich habe ein paar Javascript-Scripte gesammelt. Oft ein Javascript-Framework, z.B. jQuery, mootools, eingesetzt. Folgende Scripte kamen in meine engere Auswahl:

Die Alternativen unterscheiden sich u.a. in der Darstellung und der Lizenzierung. Ich habe mich für Cloud Carousel entscheiden, einem jQuery-Plugin. Letzte Woche aber ich das Plugin für die Gemeindebriefe eingebaut. Screenshot:

Auf der Webseite kann man – mit aktivierten Javascript – die Animation begutachten. Interessant finde ich, dass viele Browser das HTML5-Canvas-Element (Spiegelung der Elemente) darstellen können. Im Vergleich zu ähnlichen Flash-Elementen ist die Animation noch nicht ganz so „rund“. Das Cloud Carousel ist in eine TYPO3-Extension integriert und lässt sich per Typoscript konfigurieren. So konnte ich bereits die Darstellung für das iPhone anpassen.

Performance-Optimierung einer TYPO3-Seite – ein Zwischenstand

Ich bin wieder einen Schritt weiter in der Performance-Optimierung einer TYPO3-Seite.

Am meisten genutzt hat dabei die Aktivierung von Expires-Header, die den Browser anleiten bestimmte Elemente (Bilder, Javascript, usw.) zu Cachen. Falls nicht bereits für den Webserver global aktiviert kann man die Einstellungen in der .htaccess-Datei vornehmen. Ein Beispiel gibt es auf snipplr.com.

Weiterhin gilt es unnötigen Code zu entfernen. Das gilt für CSS, Javascript, aber auch nicht benötigte TYPO3-Extension sollte man deaktivieren.

Die Website sollte möglichst aus Cache-baren Elementen bestehen, wenn möglich sollte man in TYPO3 auf USER_INT, COA_INT usw. verzichten.

Für Cache-bare Resourcen wie Bilder kann man eine „statische“ Subdomain einrichten, etwa static.meinedomain.com. Für diese Anfragen werden keine Cookie-Daten mitgesendet.

Durch diese Punkte hat sich das Ergebnis in YSlow, einer Firefox-Erweiterung, von Note D oder E auf B verbessert.

Nun habe ich die TYPO3-Extension scriptmerger aktiviert. Je nach Konfiguration muss vor der Aktivierung die .htaccess-Datei erneut erweitert werden (siehe Doku). scriptmerger kann jeweils alle Javascript und alle CSS-Dateien verkleinern, zusammenfassen und komprimieren. Unter Umständen muss man einige Funktionen deaktivieren, wenn diese nicht vom Server unterstützt werden oder den Code anpassen. Mehr zu scriptmerger gibt es z.B. auf typo3blogger.de.
Die Ergänzung verbessert die YSlow-Note auf A. Die Methode musste aber auf vereinzelten größeren Seiten abgeschwächt werden, da sonst die PHP-Speichergrenze erreicht wird (PHP-Fehler, Script-Abbruch).

Dies muss jedoch nicht das Ende der Performance-Verbesserung sein. Hier mal ein paar mögliche weitere Schritte:

  • Quelltext-Optimierung
  • Sprites einsetzen: mehrere Hintergrund-Grafiken zusammenfassen
  • Auslieferung von statischen Webseiten
  • CDN verwenden
  • MySQL-/Datenbank-Optimierung

Blogs plus in AJAX

Ich kann nicht auf jedem Computer einen Feedreader benutzen, der sich automatisch meldet, wenn ein Blogger einen neuen Eintrag verfasst hat. Deshalb hatte ich mir ein Skript geschrieben, welches den neuesten Eintrag von Blogs, die ich lese, anzeigt. Darüber hatte ich auch im Juli schonmal geschrieben. Mittlerweile habe ich die Cache-Zeit von 30 Minuten auf 3 Stunden erhöht. Zur Not kann man ja den Cache „abstellen“.

Was mich jedoch gestört hat war, dass während die Blogs eingelesen werden die Seite und die Domain „gesperrt“ war, also keine weiteren Anfragen beantwortet hat. Ich musste also immer warten, bis die Tabelle vollständig war, konnte mir erst dann die neuesten Einträge heraus suchen und lesen.

Heute Abend habe ich das noch etwas verbessert: Nun werden die Einträge über AJAX geladen. Die letzten Einträge werden somit erst dann angezeigt, wenn sie gelesen wurden. Allerdings wird die Webseite gleich zu Beginn komplett geladen. Es gibt nicht mehr diese „lange Blockade“. 😉

Einziges Manko der neueren Version: Das Aktualisieren ist nicht möglich, wenn Javascript im Browser deaktiviert ist.

Update 2012: neue Adresse