Autor: Kevin Lieser

Above-the-Fold CSS & JS mit TYPO3 richtig optimieren

Wer heutzutage eine neue Website erstellt und diese nach neusten Standards und Techniken optimieren möchte, kommt am Google Page Speed Tool nicht vorbei. Dabei fällt auf, dass das Tool des Platzhirsches relativ viel Wert darauf legt, CSS und JS Daten, die nicht im Sichtbereich beim Aufruf der Seite liegen, am Ende des Dokumentes zu laden. Das heißt, Daten die nicht benötigt werden, um den sofort sichtbaren Bereich darzustellen, sollen später nachgeladen werden. Dabei bedeutet später natürlich: Sofort nachdem das eigentliche HTML Dokument geladen wurde. Da es beim Nachladen durchaus zu einer kurzen sichtbaren Darstellung ohne geladene Stylesheets kommen kann, werden die Stylesheets, die für die Darstellung des sichtbaren Teils zuständig sind, weiterhin im <head>-Bereich geladen – allerdings nicht wie üblich als externe Datei, sondern direkt als Inline-CSS.

TYPO3 Extension Scriptmerger

Mit der Extension Scriptmerger lassen sich alle JavaScript und CSS Dateien zusammenfassen – und genau das möchten wir. Wichtig für uns: Durch folgende Konfigurationsparamter können wir die Extension anweisen, die erstellten und zusammengefassten Daten nicht wie üblich im Kopf, sondern ganz unten am Ende des Dokumentes einzubinden.

plugin.tx_scriptmerger {
	javascript {
		mergedHeadFilePosition = </body>
	}
	css {
		mergedFilePosition = </body>
	}
}

Above-the-Fold CSS in den <head> einbinden

Als erstes sollte erwähnt werden, dass alle via page.includeCss eingebundenen CSS Dateien nun durch Scriptmerger an das Ende des Dokumentes gepackt werden. Deshalb brauchen wir eine effektive Methode unser Above-the-Fold CSS Inline in den Header zu bekommen. Dafür eignet sich folgendes TypoScript:

page {
  headerData {
    # Inline CSS
    10 = TEMPLATE
    10 {
      stdWrap.wrap = <style type="text/css">|</style>
      template = FILE
      template.file = fileadmin/templates/css/abovethefold.css
    }
  }
  
  # CSS-Dateien
  includeCSS {
    mainCss = fileadmin/templates/css/main.css
	...
  }
}

Eine externe CSS Datei wird ausgelesen, in Style-Tags verpackt und in den Head eingebunden. Für uns ist das eine wunderbare Möglichkeit, denn wir haben unser CSS im Head wie wir es benötigen (Inline), um das Laden nicht zu blockieren und wir haben dennoch eine externe CSS Datei die für Ordnung sorgt.

Weiterlesen

TYPO3 mit WordPress: So spielen beide Systeme zusammen

Möchte man eine leistungsfähige Website mit dem Content-Management-System TYPO3 aufbauen aber nicht auf WordPress – dem Blog-System schlechthin – verzichten wollen, stellt man sich die Frage: Wie arbeiten beide System am besten zusammen? Ich habe genau das auf meiner neuen Webpräsenz gemacht und zeige euch nun, wie ich Navigation, Footer und Sidebar Elemente eingebunden habe.

WordPress parallel zu TYPO3 installieren

WordPress habe ich ganz normal im Root Verzeichnis unter dem Ordner „/blog/“ installiert. In TYPO3 habe ich eine leere Seite im Seitenbaum erstellt um im meinem TYPO3 Menü auch den Punkt „Blog“ einzubinden. Natürlich verweist der Menüpunkt via RealURL auf /blog/. Damit wird vom TYPO3 zu WordPress gesprungen.

WordPress vorbereiten

Kurz vorab: Ich bin kein WordPress-Profi und konzentriere mich mit meiner Arbeit (abgesehen von diesem Projekt) lediglich auf TYPO3.

Meine HTML Struktur der TYPO3 Seite habe eins zu eins in das WordPress Template eingebunden. Somit kann ich sämtliches CSS und JS auch für WordPress nutzen. Wie man ein WordPress Template anpasst liest man am besten extern nach. Sind wir damit fertig und haben auch die nötigen CSS / JS Dateien eingebunden sollten wir einen Blog haben, der so aussieht wie unsere normale Website. Sicherlich muss man an ein paar Stellen ein paar spezifische Anpassungen am HTML Konstrukt vornehmen und auch ein paar extra Stylesheets hinterlegen (diese extra Blog-Stylesheets habe ich in die style.css vom WordPress Theme verpackt).

Weiterlesen

Retina- & Resolution-Detection auf Serverseite (PHP)

Mobile Geräte mit Retina / HDPI Display sind heutzutage Standard. Ein Grund mehr auf einer neuen Website Bildmaterial zur verfügung zu stellen, welches diese Technik bedienen kann – macht man dies nicht, wirken Grafiken und Bilder unscharf. Aber wie zum Teufel soll man das vernünftig anstellen?

Es ist egal ob man ein CMS wie TYPO3 verwendet oder eine einfache statische HTML Seite hat, das Problem bleibt gleich. Die ausgelieferten Bilder sollten zugunsten der Ladegeschwindigkeit nur so groß sein, wie sie tatsächlich benötigt werden. Sind die Bilder größer verursacht das unnötige Datenübertragung, verlangsamt den Seitenaufbau / die Darstellung und wirkt sich ebenfalls negativ auf ein Google Page Speed Ranking aus.

CSS

Innerhalb CSS hat man diese Problematik nicht. Durch Media-Querys können wir ganz einfach zwischen normalem und Retina- / HDPI-Display unterscheiden und so andere Hintergrundgrafiken verwenden.

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
       only screen and (-o-min-device-pixel-ratio: 13/10),
       only screen and (min-resolution: 120dpi) {
          /* Retina / HDPI Background Images */ 
}

Doch wie sollte man normale Bilder (<img>) ausliefern?

Serverseitig mit PHP?

Aktuell gibt es keine richtige Möglichkeit um auf Serverseite herauszufinden ob es sich um ein hochauflösendes Gerät handelt. An dieser Stelle frage ich mich allerdings: Warum wird das nicht über den User-Agent oder einem anderen Parameter übermittelt? Der Stand der Technik würde genau diese Informationen (Auflösung in DPI, Screengröße in Pixel) dringend benötigen um sofort entscheiden zu können, welches Bild in welcher Größe ausgeliefert werden muss.

So ist es leider – derzeit gibt es keine Möglichkeit dazu. Auch wenn ich (wie viele andere sicher auch) lange darüber nachdenken wie man das Zustande bekommen könnte.

Weiterlesen

content_rating: Bewertungen mit Rich Snippets für TYPO3

Die Extension „content_rating“ integriert in TYPO3 eine so genannte „Sternchenbewertung“ mit Rich Snippets Support. Das Rating beziehungsweise Voting des Nutzers erfolgt per Klick. Die Darstellung übernimmt wahlweise ein Balken oder die bekannten „Sternchen“. Die kummulierten Nutzermeinungen können durch Rich Snippets von Suchmaschinen übernommen und in den Suchergebnissen dargestellt werden.

User-Interaktion findet immer häufiger auf Webseiten statt. Besucher möchten sich mitteilen und ihre Meinung abgeben. Das gilt für geschriebene Artikel, Fotos, Produkte oder vieles mehr. Kommentare stellen Meinungen dar und müssen zunächst gelesen werden. Sie sind nicht auf einen Blick zu erfassen. Ebenfalls fehlt bei Kommentar-Meinungen eine statistische Gesamtbewertung. Erfahren kann man nur durch das Lesen jedes einzelnen Kommentars, ob ein Besucher den Inhalt gut oder schlecht fand, ob er Ergänzungen zum Thema hat oder ob aus seiner Sicht falsche Angaben gemacht wurden. Eine Statistik, die direkt und zusammengefasst zeigt, was andere denken, gibt es nicht. Dafür empfiehlt sich eine grafisch anschauliche Bewertungs-Funktion.


Update: Extbase Version

Die Extension ist ab sofort unter dem Extension Key content_rating_extbase im TYPO3 Extension Repository als Extbase Version verfügbar.


Ratings leicht abgeben und Gesamtbewertungen verständlich anzeigen

Mit unserer TYPO3 Extension „content_rating“ ist es möglich, Websitebesuchern zusammengefasste Meinungen zu präsentieren. Zudem geben Nutzer mit nur einem Klick schnell und unkompliziert Bewertungen ab. Dabei bewertet der Besucher auf einer Skala von 1 – 5 den Inhalt der Seite, ein Foto, ein Produkt oder was auch immer. Er sieht seine Stimme zusammengefasst mit allen anderen Bewertungen der User, die wie auch er die Seite bewertet haben. Eindeutig erkennbar, ob gut, mittelmäßig oder schlecht.

Die unterschiedlichen Stile

style4 style5 style3 style2 style1

Suchmaschinen die Bewertungen per Rich Snippets zur Verfügung stellen

Die Erweiterung unterstützt außerdem Rich Snippets für Bewertungen. Diese nutzt Google, um das Rating bereits in den Suchergebnissen anzuzeigen. Eine durch Bewertungs-Rich-Snippets hervorgehobene Seite erhält meist eine hohe Klickrate. Es kommt sogar vor, dass Ergebnisse auf Platz 1 und 2 praktisch verblassen und ein Platz 3 oder 4 mit Rich-Snippet Bewertungen häufiger geklickt wird.

Um neben einer Bewertung die ausführliche Meinung der User zu erhalten, empfehle ich den Kommentar-Dienst DISQUS. Dieser kann mit unserer disqus_comments TYPO3 Extension leicht eingebunden werden.

Weiterlesen

TYPO3 mit XClass und Hooks erweitern

TYPO3 lässt sich vielfältig erweitern, als Bordmittel für Modifikationen stehen auf PHP-Ebene Hooks und die XClass Funktionalität bereit. Hooks erlauben Eingriffe in den Verarbeitungsablauf der Daten an definierten Punkten. Mit XClass können gleich ganze Klassen überschrieben werden. Wie fast immer haben beide Lösungen Ihre Vorzüge und Schwächen. Hooks gelten als das Standardmittel für Erweiterungen. Der Einsatz von XClass im Allgemeinen ist nur dann ratsam, wenn Hooks, Services, userFunc oder bei ExtBase Erweiterungen auch SignalSlots nicht als Lösung in Frage kommen.

Was sind Hooks?

Hooks sind ein weit verbreitetes Konzept, neben TYPO3 wird dies auch in der Shoplösung Magento und dem Blog-CMS WordPress genutzt. Es handelt sich dabei um Schnittstellen, die mit eigenen Extensions genutzt werden können, um Daten oder den Programmablauf in Fremd-Extensions oder Core-Dateien zu manipulieren. Der eigentliche TYPO3- oder Extension-Code muss dazu nicht verändert werden.

Weiterlesen

Pagespeed Optimierungen für TYPO3

Die Seitenladegeschwindigkeit und die Zeit, die ein Browser zum Rendern einer Website benötigt, beeinflusst maßgeblich die Usability einer Homepage. Das wissen auch die Suchmaschinen. Inbesondere Google hat die Seitenladegeschwindigkeit zum Ranking-Kriterium gemacht und gibt Webmastern mit den Pagespeed Tools Entwicklerwerkzeuge für Speed-Optimierungen an die Hand. Mit den folgenden Tipps und Tricks können Typo3 Webseiten meist einfach bessere Werte im Speedtest erzielen.

Optimieren der Serverkonfigurationen

Vielfach liegen die Schwächen gar nicht bei Typo3 selbst. Für gute Ergebnisse beim Pagespeed ist eine gute Serverkonfiguration nötig. Bei Apache Servern erfolgt dies in der Regel über die .htaccess-Datei. Die Kandidaten für die Optimierung sind die Aktivierung der GZIP Komprimierung per mod_deflate und das Senden der Headerdaten per mod_headers oder mod_expires.

GZIP Komprimierung aktivieren

Das Apache Modul mod_deflate komprimiert Daten vor dem Transfer. Ist ein solches aktives Modul in der Webserver-Software installiert, genügen zur Aktivierung der mod_deflate Komprimierung wenige Zeilen. Um HTML, XML, Javascript und CSS zu komprimieren, reichen die folgenden Zeilen in der mod_deflate-Sektion einer .htaccess-Datei:

AddOutputFilterByType DEFLATE text/plain 
AddOutputFilterByType DEFLATE text/html 
AddOutputFilterByType DEFLATE text/xml 
AddOutputFilterByType DEFLATE text/css 
AddOutputFilterByType DEFLATE application/xml 
AddOutputFilterByType DEFLATE application/xhtml+xml 
AddOutputFilterByType DEFLATE application/javascript 
AddOutputFilterByType DEFLATE application/x-javascript

Bekannte problematische Browser allgemein werden so ausgeschlossen:

BrowserMatch ^Mozilla/4 gzip-only-text/html 
BrowserMatch ^Mozilla/4\.0[678] no-gzip 
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

Für den passenden Umgang mit Proxys empfiehlt es sich, noch die folgene Zeile in der .htaccess zu ergänzen:

Header append Vary User-Agent env=!dont-vary

Weiterlesen

TYPO3 Zufriedenheits-Umfrage: Wie nutzt du TYPO3?

In den vergangenen Jahren haben wir einige sehr unterschiedliche TYPO3 Projekte entwickelt: Von klein, einfach und kostengünstig bis groß mit vielen individuellen Features (TYPO3 Extensions). Von einfaches Webseiten bis komplexen Anwendungen. Von kleinen Unternehmen bis großen Konzernen. Von Deutschland bis ganz Europa. Und in allen Fällen waren wir erfolgreich mit TYPO3 unterwegs.

TYPO3: Ein schnelles, extrem leistungsfähiges Content Management System.

Durch die vielen, unterschiedlichen Projekte, dem unterschiedlichen Nutzerverhalten, der Fertigkeiten möchten wir an dieser Stelle eine Umfrage starten: Wie gut kommst du – als Endnutzer – mit deinem TYPO3 CMS zurecht? Die Umfrage wird nun folgend via Google eingebunden (Extern: Umfrage zur Nutzung von TYPO3).

Weiterlesen

TYPO3 6.2 LTS Final release! So schnell ist die neue, finale Version…

Der letzte Beitrag ist schon etwas länger her – viel zu tun – wenig Zeit. Ein aktuelles Thema interessiert uns allerdings brennend: Wie schnell ist die gestern erschienene TYPO3 Version 6.2 LTS.

Im Benchmark zur 6.2 beta1 schnitt das neue System nicht so gut ab. Immerhin war das bis dahin nicht fertige CMS ca. 70% langsamer als die damals aktuelle LTS Version 4.5.

Der Vollständigkeit halber hier einmal unsere bisherigen Benchmarks

Benchmark TYPO3 6.2 LTS final

Version 6.2.0

Server Software:        Apache
Server Hostname:        PROJEKT 6.2
Server Port:            80
 
Document Path:          /
Document Length:        646 bytes
 
Concurrency Level:      50
Time taken for tests:   8.811 seconds
Complete requests:      1500
Failed requests:        0
Write errors:           0
Total transferred:      1231500 bytes
HTML transferred:       969000 bytes
Requests per second:    170.24 [#/sec] (mean)
Time per request:       293.703 [ms] (mean)
Time per request:       5.874 [ms] (mean, across all concurrent requests)
Transfer rate:          136.49 [Kbytes/sec] received
 
Connection Times (ms)
			  min  mean[+/-sd] median   max
Connect:        0    0   0.2      0       1
Processing:   137  292  25.2    291     380
Waiting:      137  292  25.1    291     380
Total:        137  292  25.2    291     380
 
Percentage of the requests served within a certain time (ms)
  50%    291
  66%    300
  75%    306
  80%    310
  90%    323
  95%    333
  98%    343
  99%    354
 100%    380 (longest request)

Weiterlesen