TYPO3 Performancespritze für 90+ in Google Pagespeed

Im Rahmen eines Updateprojektes eines unserer Kundenprojekte von TYPO3 6.2 auf 7.6 wurden wir von unserem Kunden zusätzlich mit einem Performancetuning der Seite beauftragt.

 

Die ursprüngliche Seite war soweit eigentlich gut gebaut und es gab seitens der gefühlten Ladezeit keine Probleme, trotz dass großflächige Bilder in einem Hintergrundslider verwendet wurden. Dass der hierbei auftretende Traffic für Smartphones in Deutschlands eng geschnürten Mobilfunktarifen noch Optimierungsmöglichkeiten offen ließ, war soweit klar. Allerdings setzten wir in der ersten Version noch auf mit externen Komponenten extrem komprimierte Bilder, Lazyloading und Größenanpassung via CSS.

 

Googles Pagespeed Analyse kennt keine Freunde

Googles Pagespeed Analyse ist nun jedoch gnadenlos. Mobil erreichte die Seite nur 52 von 100 Punkten, die Desktop-Version schaffte 63 von 100 Punkten (Screenshots siehe PDF). Bevor Sie jetzt die Augen verdrehen, empfehle ich Ihnen einmal die Analyse Ihrer eigenen Seite hiermit: https://developers.google.com/speed/pagespeed/insights/

 

Was wurde gemacht: Background-Slider

Als größte Herausforderung konnte sofort der Slider identifiziert werden. Ursprünglich hatten wir uns für Maximage2 als Sliderscript entschieden, da dies eingebundenes Bildermarkup selbsttätig in CSS Background-Images wandelte und damit bekanntermaßen eine optimale und harmonische Hintergrundskalierung via background-size: cover; möglich ist. Nun lassen sich hier schlecht via media-queries unterschiedlich Ressourcen abfragen, wenn der Kunde gleichzeitig in den Seiteneigenschaften jeder Seite selbst Bilder hochladen und konfigurieren kann. IMG Tag mit srcset aus unterschiedlich gerenderten Bildressourcen ging wegen des bevorzugten Einsatzes als CSS Hintergrundbildes ebenso nicht. Das Sliderscript selbst sollte auch nur noch angenehm sliden, klein sein und nicht wie Maximage2 nur im Head, sondern auch am Ende der Seite platziert werden können, was ein zusätzliches Performanceplus darstellt.

 

Nach einiger Tüftelei haben wir die Problematik mithilfe des Asset-Style-Viewhelpers der VHS Extension lösen können! Nachfolgend der Code des Partials, was im Template einfach aufgerufen werden kann und dessen Container per CSS nur noch absolut in den Hintergrund der Seite gepackt werden muss. Die Bilder stammen aus den Seiteneigenschaften der jeweiligen Seite. Sind keine Bilder vorhanden, kommen die Bilder der nächst höheren Ebene zum Einsatz:

<f:section name="bgimage">
  <v:asset.style name="bgimage">
    <v:page.resources.fal table="pages" field="media" uid="{page.uid}" as="images" slide="-1" >
      <f:for each="{images}" as="image">
        .bg-{image.uid} {background-image: url('{v:uri.image(src: '{image.url}', width: 1900, quality: 85)}'); }
        @media (max-width: 1600px) {
          .bg-{image.uid} {background-image: url('{v:uri.image(src: '{image.url}', width: 1550, quality: 90)}'); }
        }
        @media (max-width: 1300px) {
          .bg-{image.uid} {background-image: url('{v:uri.image(src: '{image.url}', width: 1250, quality: 90)}'); }
        }
        @media (max-width: 914px) {
          .bg-{image.uid} {background-image: url('{v:uri.image(src: '{image.url}', width: 900, quality: 95)}'); }
        }
        @media (max-width: 500px) {
          .bg-{image.uid} {background-image: url('{v:uri.image(src: '{image.url}', width: 650, quality: 95)}'); }
        }
        
      </f:for>
    </v:page.resources.fal>
  </v:asset.style>
  <div id="bg-slider">
    <v:page.resources.fal table="pages" field="media" uid="{page.uid}" as="images" slide="-1" >
      <f:for each="{images}" as="image">
        <div class="bg-image-slider bg-{image.uid}">
        </div>
      </f:for>
    </v:page.resources.fal>
  </div>
  <i class="bgslide-preload fa fa-refresh fa-spin"></i>
</f:section>
<f:section name="bgimage">
  <v:asset.style name="bgimage">
    <v:page.resources.fal table="pages" field="media" uid="{page.uid}" as="images" slide="-1" >
      <f:for each="{images}" as="image">
        .bg-{image.uid} {background-image: url('<v:uri.image src="{image.url}" width="1900" quality="85" />'); }
        @media (max-width: 1600px) {
          .bg-{image.uid} {background-image: url('<v:uri.image src="{image.url}" width="1550" quality="90" />'); }
        }
        @media (max-width: 1300px) {
          .bg-{image.uid} {background-image: url('<v:uri.image src="{image.url}" width="1250" quality="90" />'); }
        }
        @media (max-width: 914px) {
          .bg-{image.uid} {background-image: url('<v:uri.image src="{image.url}" width="900" quality="95" />'); }
        }
        @media (max-width: 500px) {
          .bg-{image.uid} {background-image: url('<v:uri.image src="{image.url}" width="650" quality="95" />'); }
        }
        
      </f:for>
    </v:page.resources.fal>
  </v:asset.style>
  <div id="bg-slider">
    <v:page.resources.fal table="pages" field="media" uid="{page.uid}" as="images" slide="-1" >
      <f:for each="{images}" as="image">
        <div class="bg-image-slider bg-{image.uid}">
        </div>
      </f:for>
    </v:page.resources.fal>
  </div>
  <i class="bgslide-preload fa fa-refresh fa-spin"></i>
</f:section>

(Code aktualisiert am 9. Juni 2017)

 

Der Asset-Style-Viewhelper erzeugt ein eigenes CSS-File welches automatisch auch ausgegeben wird. Da VHS als Extension schon im Einsatz war, haben wir auch statt des Standard Fluid Imageviewhelpers den von VHS genommen, da hier der Kompressionsfaktor des Bildes zusätzlich zur Verfügung steht und die Ressourcen durch Austesten eines optimalen Setups noch sehr viel stärker geschrumpft werden konnten.

 

Als Sliderscript kommt nun "Slick Slider" zum Einsatz, schlank und macht was es soll.


Was wurde noch gemacht

Zusätzlich haben wir den ganzen Javascript-Zoo aufgeräumt, inklusive den von TYPO3 selbst erzeugten Code, zum Beispiel zur Verschlüsselung von E-Mailadressen. Via Typoscript-Anweisung wird alles nun noch hübsch zusammen- und in ein gzip-File geschrieben:

config {
compressJs = 1
compressCss = 1
concatenateJs = 1
concatenateCss = 1

}

Im Ergebnis konnten wir eine deutliche Steigerung in der Google Pagespeed Analyse verzeichnen: Mobil 91 von 100 und für die Desktopversion 97 von 100. Das wird kaum steigerbar sein, da ein fehlendes Browsercaching für eine Komponente angemeckert wird, die nicht von uns sondern von Google Analytics stammt und ansonsten nur noch die verbliebene CSS in den Fuß weichen soll, um mit ein paar Ersatz-Inline-Styles im Head keine einzige blockierende Ressource mehr aufzurufen. Das halten wir für eine Seite, die von einem CMS gerendert wird, für wirklich schwierig in der Praxis, deshalb verzichten wir darauf.


Wenn auch Sie Ihrer TYPO3-Website einen Turbolader aufsetzen wollen, sprechen Sie uns an, wir helfen Ihnen gern weiter.

config {
  compressJs = 1
  compressCss = 1
  concatenateJs = 1
  concatenateCss = 1
}