Sie befinden sich hier: Typo3 / Tipps / Web-Performance-Optimierungen (WPO)
Deutsch
English
Sonntag, 24.06.2018

Einen Artikel über Web-Performance-Optimierungen (WPO) findet man in der c't 20/2011, S. 164-169.

Einige Aspekte:

  • Dateien zusammenfassen. Möglichste eine CSS-Datei und alles JavaScript in eine JS-Datei.
  • JavaScript nach den CSS-Dateien laden.
  • Eventuell Javascript ans Seitenende setzen. Vorteil: HTML wird bereits geladen, dann erst werden javascripts ausgeführt.
  • Wiederkehrende Bilder für den Seitenaufbau in einem CSS-Sprite laden und über background-position positionieren.
    Tools: CSS Sprite Generator zum Erstellen von Sprites, Spriteme analysiert eine bestehende HTML-Seite.
  • HTML-Komprimierung (Apache, .htaccess)
  • Caching
  • etc.
TypoScript
// ****** SUBMENU ******
lib.submenu = COA
lib.submenu.10 = COA
lib.submenu.10 {
        stdWrap.prefixComment = 2|Output of lib.submenu.10
        wrap = <ul id="submenu">|</ul>
        // Should begin with 20, so the user can add something here.
        20 = TEXT
        20.stdWrap.prefixComment = 2|Output of lib.submenu.10.20
        20.data = leveltitle:1
        20.ifEmpty.cObject = TEXT
        20.ifEmpty.cObject.value = YAML CSS-Framework
        20.wrap = <li id="title">|</li>

        30 = HMENU
        30 {
                stdWrap.prefixComment = 2|Output of lib.submenu.10.30
                wrap = |
                entryLevel = {$subMenuEntryLevel}
                1 = TMENU
                1 {
                        expAll = {$subMenuExpandToggle}
                        noBlur = 1
                        wrap = |
                        IProcFunc = user_IProc_dfn
                        NO = 1
                        NO.ATagTitle.field = abstract // description // subtitle
                        NO.allWrap = |<span class="hidden">.</span>
                        NO.wrapItemAndSub = <li class="first">|</li>|*|<li>|</li>|*|<li class="last">|</li>

                        # Zum Umschalten der Menudarstellung zwischen den Varianten
#                       NO.additionalParams = &M={$M}
#                       NO.additionalParams.insertData=1

                        NO.stdWrap.htmlSpecialChars = 1
                        NO.linkWrap = {$mainMenuLinkWrap}
                        NO.ATagBeforeWrap = 1
                        CUR < .NO
                        CUR = 1
                        CUR.allWrap = <strong>|</strong><span class="hidden">.</span>
                        CUR.wrapItemAndSub = <li class="first">|</li>|*|<li>|</li>|*|<li class="last">|</li>
                        CUR.doNotLinkIt = 1
                        CUR.stdWrap.htmlSpecialChars = 1
                        ACT < .NO
                        ACT = 1
                        ACT.allWrap = <strong>|</strong><span class="hidden">.</span>
                        ACT.wrapItemAndSub = <li class="active first">|</li>|*|<li class="active">|</li>|*|<li class="active last">|</li>
                        ACT.doNotLinkIt = 0
                        ACT.stdWrap.htmlSpecialChars = 0

                        SPC = 1
                        SPC {
                                before.dataWrap = <li class="spacer">&nbsp;</li>
                                doNotShowLink = 1
                        }

                        IFSUB = 1
                        IFSUB < .NO
                        IFSUB.linkWrap = {$mainMenuIfsubLinkWrap}
                }
                2 < .1
                2.wrap = <ul class="level2">|</ul>
                3 < .1
                3.wrap = <ul class="level3">|</ul>
                4 < .1
                4.wrap = <ul class="level4">|</ul>
        }
}
// Delete entire menu if user has set the appropriate option
[globalVar = LIT:1 = {$subMenuOff}]
lib.submenu.10 >
[global]
// Delete headline of menu if user has set the appropriate option
[globalVar = LIT:1 = {$menuHeadlineOff}]
lib.submenu.10.20 >
[global]