Schnellere TYPO3-Webseiten mit dem „cache“-Befehl

Screenshot vom Firebug-Modul "Netzwerk"
Mit den richtigen Einstellungen für das Caching werden Webseiten schneller ausgeliefert

Seit der TYPO3 Version 4.7 hat der stdWrap den Befehl „cache“. Nicht jedem mögen diese Neuerung und vor allem der sinnvolle Einsatz bereits bekannt sein – daher möchte ich Ihnen die Möglichkeiten an einem Beispiel zeigen:

Größere Webseiten benutzen zum Teil sogenannte Mega-Menüs. Diese zeigen nicht immer nur normale Seiten, sondern auch zusätzliche Inhalte. Wenn diese zusätzlichen Inhalte relativ viel Zeit benötigen, bis sie generiert sind, wäre es sinnvoll, dies nur ein Mal zu machen. Wären die generierten Inhalte mehrsprachig, dann müsste pro Sprache ein HTML-Abschnitt generiert werden. Sind die Inhalte in jeder Sprache gleich, könnte sogar ein einmaliges Generieren für alle Seiten ausreichen. Und genau hier kann der cache-Befehl eingesetzt werden. Sie haben mit diesem Befehl die Möglichkeit, selbst zu definieren, welche Parameter (Sprache, Seiten-ID etc.) für die Generierung des Cache-Schlüssels dienen sollen. Nehmen wir an, Sie wollten in dem Mega-Menü einen Menüpunkt Kontakt haben. Wenn der Besucher der Webseite die Kontaktseite anklickt, dann wird aus einer Extension je nach gewähltem Land eine Navigation mit den für das Land zuständigen Zentralen, Vertriebsbüros, Support-Telefonnummern usw. direkt in der Navigation angezeigt. Somit müsste pro Land eine neue Version des Kontaktmenüs generiert werden.

So könnte dies im TypoScript gelöst werden:

Typoscript

Lib.MegaNavigation.t3s

TypoScript
  1. /**
  2.  * Beispiel für den cache-Befehl ab TYPO3 4.7. Verwendet Bootstrap-CSS-Klassen
  3.  
  4.  * @author Oliver Thiele
  5.  * @see http://docs.typo3.org/typo3cms/TyposcriptReference/Functions/Cache/Index.html
  6.  */
  7. lib.megaNavigation = COA
  8. lib.megaNavigation {
  9. wrap = <ul class="nav navbar-nav">|</ul>
  10.  
  11. /**
  12. * Reiner HTML-Code benötigt nicht so viel Zeit,
  13. * bleibt daher ohne zusätzliches Caching; wäre aber auch möglich,
  14. * wenn dieser Bereich statisch wäre (z. B. nur externe Links).
  15. */
  16. 10 = TEXT
  17. 10.value (
  18. <li class="dropdown">
  19. <a data-toggle="dropdown" href="#">Links</a>
  20. <ul class="dropdown-menu">
  21. <li><a href="http://extern.example.com">Externer Link</a></li>
  22. </ul>
  23. </li>
  24. )
  25.  
  26. /**
  27. * Es könnten auch Seiten mit dem normalen HMENU ausgegeben werden.
  28. * Diese sollten nicht für alle Seiten gecached werden, da sonst die aktive Seite
  29. * nicht hervorgehoben werden könnte.
  30. */
  31. 20 = HMENU
  32. 20 {
  33. // ... Normale Menügenerierung
  34. special = directory
  35. special.value = 1
  36.  
  37. 1 = TMENU
  38. 1 {
  39. NO.wrapItemAndSub = <li>|<li>
  40. # …
  41. }
  42. }
  43.  
  44. /**
  45. * Die Extension benötigt hier vielleicht schon fünf Sekunden für die Generierung
  46. * der Kontaktinformationen, es soll daher das komplette COA gecached werden.
  47. */
  48. 30 = COA
  49. 30 {
  50. // Hier beginnt der spannende Teil:
  51. /**
  52. * Hier wird die aktuelle Sprache benutzt, um einen Inhalt pro Sprache
  53. * für alle Seiten zu cachen.
  54. */
  55. key = meganavigation_contact_{TSFE:sys_language_uid}
  56. key.insertData = 1
  57.  
  58. // Mit den selbstgewählten Tags kann der Cache später gezielt geleert werden.
  59. tags = main_navigation, ext_slowextension
  60.  
  61. /**
  62. * Wenn eine neue Seite generiert wird, ist das Kontaktmenü max. eine Stunde alt.
  63. * Wenn die Seite alle 24 Stunden neu generiert wird, könnte das Kontaktmenü
  64. * also auch über einen Tag alt sein!
  65. */
  66. lifetime = 3600
  67. }
  68. }
  69.  
  70. /**
  71. * 10 und 30 im COA sorgen nur für das nötige HTML für das Layout.
  72. * Die zu vermeidende Last wird hauptsächlich in der Extension auftreten.
  73. */
  74. 10 = TEXT
  75. 10.value (
  76. <li class="dropdown">
  77. <a data-toggle="dropdown" href="#">Dropdown trigger</a>
  78. <ul class="dropdown-menu">
  79. <li>
  80. )
  81.  
  82. # Hier könnte theoretisch jede Extension eingetragen werden.
  83. 20 < plugin.tx_slowextension_pi1
  84.  
  85. /**
  86. * Die Uhrzeit dient nur zum Testen.
  87. * Mit funktionierendem Caching sollte auf jeder Seite die gleiche Zeit stehen,
  88. * sofern die Sprache nicht gewechselt wird.
  89. */
  90. 30 = TEXT
  91. 30 {
  92. data = date: d.m.y H:i:s
  93. wrap = <li>|</li>
  94. }
  95.  
  96. 40 = TEXT
  97. 40.value (
  98. </li>
  99. </ul>
  100. </li>
  101. )
  102. }
  103. }
  104.  
  105. // Mit dieser Zeile könnte diese Navigation schnell zum Testen in eine Webseite eingefügt werden.
  106. page.2 < lib.megaNavigation

Falls Sie den Proxy-Server Varnish kennen sollten: Diese Funktionalität entspricht bei einem Varnish Server in etwa den ESI (Edge Side Include)-Bereichen.

Bitte stellen Sie auch sicher, dass Sie das Caching-Framework nutzen, da TYPO3 ansonsten diesen Bereich bei jedem Aufruf neu generiert.
Sie können die Funktionalität einfach testen, indem Sie den Quelltext von der Webseite docs.typo3.org/typo3cms/TyposcriptReference/Functions/Cache/Index.html ausprobieren:

CacheTest.t3s

TypoScript
  1. page {
  2. 5 = TEXT
  3. 5 {
  4. stdWrap.cache.key = mycurrenttimestamp
  5. stdWrap.cache.tags = tag_a,tag_b,tag_c
  6. stdWrap.cache.lifetime = 3600
  7. stdWrap.strftime = %H:%M:%S
  8. }
  9. }

Sie müssten nun bei funktionierendem Caching auf allen Seiten dieselbe Uhrzeit ausgegeben bekommen. Da hier nichts Dynamisches als Key verwendet wird, wird auf allen Seiten in allen Sprachen immer die gleiche Uhrzeit ausgegeben.