Monat: Dezember 2015

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