Anfang März find ich damit an, diese Seite von TYPO3 7.6 LTS auf TYPO3 8.7 LTS upzugraden. Warum ich mir sowas antat, wo die 7.6er Seite doch erst ein halbes Jahr alt war? Die eigene Seite eignet sich ja immer hervorragend zum Testen von Neuem und so bot es sich an, zuerst mal hier zu testen, wie gut 8.7 bereits benutzt werden kann.

Eigentlich wollte ich mit dem Upgrade bis zum offiziellen Release von TYPO3 8.7 Anfang April 2017 fertig sein, aber im Verlauf der Umstellung war doch noch einiges mehr zu tun, es mussten einige Bugs gefixed und neue Features eingebaut werden, daher hat das Ganze jetzt doch ein paar Wochen länger gedauert als geplant.

Bilder machen gut 2/3 der zu übertragenden Datenmenge einer durchschnittlichen Webseite aus. Zudem müssen Geräte in verschiedensten Grössen unterstützt werden. Generell wird durch die immer weiter zunehmende Nutzung von Smartphones auch die zu übertragende Datenmenge beim Aufruf einer Seite ein wichtiger Faktor. Daher werden heute im Allgemeinen responsive bzw. adaptive Techniken für Bilder eingesetzt - jedes Gerät soll ein für die jeweilige Auflösung optimiertes Bild laden können.

Die Standardlösung sind hierfür die neuen Attribute srcset und sizes der img und media Tags. Diese werden mittlerweile gut von den Browsern unterstützt und es gibt ausreichend polyfills (z.B. picturefill oder respImg), haben jedoch ein Problem: mit sizes kann nur eine Breite relativ zum Viewport bei einem bestimmten Breakpoint angegeben werden. Das erfordert viel Wissen beim Entwickler über den Kontext des Bildes, also: wie gross wird es wirklich angezeigt? Oft weiss man das, in vielen Fällen aber nicht (etwa bei vom editor gepflegten Inhalten) und muss hier dann Kompromisse machen, meist auf Kosten der Dateigrösse des Bilds, man läd also tendenziell eher zu große Bilder. 

Ich hatte hier auf der vorherigen Seite mit c1_fluid_styled_responsive_images bereits eine funktionierende Lösung, welche die Bildbreite innerhalb eines Bootstrap Grids dynamisch aus der Spaltenbreite berechnen konnte, jedoch war der Code relativ komplex und an ein Grid auf flux-Basis gebunden. Mit dem Wechsel auf gridelements als Grid-Framework funktionierte das aber nicht mehr. Also entweder Umschreiben oder etwas ganz Neues bauen.

Nach einiger Recherche stiess ich auf lazysizes.js. Das ist eigentlich ein Lazy Loader Script, hat aber ein Feature, das einige Probleme im Zusammenhang mit adaptive Images löst: Da die Bilder erst geladen werden, wenn die Seite bereits gerendert und dadurch die Grösse des Bildes bekannt ist, kann das sizes-Attribut pixelgenau durch JavaScript gesetzt werden. Ich habe daher dann einen neuen Image-Renderer geschrieben für die neue Seite, der sich das zunutze macht. Bis die Lösung zufriedenstellend lief war einiges zu tun, aber insgesamt bin ich recht zufrieden mit der Lösung. Voraussichtlich gibts demnächst noch einen Blogbeitrag, welche Probleme hier auftauchten und welche Lösungen gefunden werden.

Die neue TYPO3 8.7 LTS unterstützt nun zudem Art Direction durch verschiedene CropVarianten im Backend und damit die Anzeige unterschiedlicher Bildzuschnitte bei unterschiedlichen Grössen. Das wird von der neuen Lösung nun ebenfalls unterstützt. Ich plane die Extension in nächster Zeit zumindest auf github zu veröffentlichen und dann gibt es evtl. auch Blog Posts dazu.

Wo schon dabei, habe ich auch gleich einen SVG-Image-Renderer (der ist schon veröffentlicht, siehe c1_fluid_styled_svg) geschrieben, der SVGs besser rendert (inline oder als object und dann per javascript nach inline geladen).

Ein weiterer wichtiger Baustein für die Bildoptimierung wurde schliesslich noch die TYPO3-Extension image_optimizer, die Bilder automatisch (u.a. mit jpegoptim und optipng) ohne wahrnehmbaren Qualitätsverlust verkleinern kann.

Das neue Framework für Formulare (EXT:form) wurde ja im Vorfeld extrem gehyped ("noch nie gesehene Features, alles mega!") - evtl. war daher meine Enttäuschung zunächst mal gross. Im Nachhinein muss ich aber sagen, dass meine Frustration mit dem Form Framework wohl hauptsächlich von der kaum vorhandenen und dazu noch veralteten Doku herrührte - mehr als ein Git-Respository mit einigen Code-Beispielen gab es nicht. Das hat sich mittlerweile extrem verbessert, die Doku zu EXT:form ist mittlerweile sehr angewachsen und hilfreich.

Bisher hatte ich formhandler für Formulare eingesetzt. nachdem dessen Weiterentwicklung aber abgekündigt wurde und es auch keinen (ernsthaften) Nachfolger zu geben scheint habe ich die neue Seite nun auf die neue form-Extension umgestellt. Zwar sehe ich noch einiges, das ich an den Formularen verbessern kann, aber grundlegend funktionieren die erstmal. Ein Punkt der mich noch sehr ärgert ist, dass auf Seiten mit Formularen anscheinend komplett das Frontend-caching deaktiviert wird, eine Lösung habe ich dafür noch nicht. Auch Ajax-Submit/Validierung wäre noch so ein offener Punkt. Done - siehe Blog Post: Formular mit typoscript-rendering per Ajax verschicken.