Hi,
leider ist der von TYPO3 erzeugte HTML SourceCode nicht immer der Beste und mitunter relativ aufgebläht. Beispielsweise lassen sich gewisse Javascripts einfach nicht in externe Files auslagern, obwohl entsprechende Einstellungen gemacht wurden (z.B. die SpamProtection oder der JS-Source Code von GMENU) oder es werden verschiedenste Stylesheet Klassen, zusätzliche Paragraphs, etc. eingefügt.
Ich möchte hier kurz einmal meine derzeit eingesetzten Maßnahmen zur Verbesserung des Source-Codes von TYPO3 V4 präsentieren, mit dem Ziel, daß vielleicht noch weitere mir unbekannte Optimierungsmaßnahmen im Zuge der Diskussion gefunden werden.
#Einstellen des DocType auf XHTML Transitional
config.doctype = xhtml_trans
#XHTML Cleaning aktivieren
config.xhtml_cleaning = all
#Default Javascripts in externes File auslagern
config.removeDefaultJS = 1
config.removeDefaultJS = external
#<?xml... ?> Prolog deaktivieren
config.xmlprologue = none
#CSS Datei in externes File auslagern
config.inlineStyle2TempFile = 1
config.disablePrefixComment = 1
#RTE Tuning
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.remapTag >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.DIV.class >
#Angabe von Tags, die nicht mit einem zusätzlichen wrap umgeben werden dürfen
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList = cite, div, p, pre, h1, h2, h3, h4, h5, h6
#Entfernt die zusätzlichen CSS-Klassen
lib.stdheader.3 = LOAD_REGISTER
lib.stdheader.3.headerClass =
lib.stdheader.3.headerClass.noTrimWrap = |
lib.stdheader.stdWrap.dataWrap = |
#Standard-Headings aufräumen
lib.stdheader.stdWrap.dataWrap =
lib.stdheader.10.1.fontTag = <h1>|</h1>
lib.stdheader.10.2.fontTag = <h2>|</h2>
lib.stdheader.10.3.fontTag = <h3>|</h3>
lib.stdheader.10.4.fontTag = <h4>|</h4>
lib.stdheader.10.5.fontTag = <h5>|</h5>
#Content Elemente aufräumen und Kommentare entfernen
tt_content.stdWrap.dataWrap >
tt_content.stdWrap.prefixComment >
tt_content.header.20.dataWrap >
tt_content.header.20.prefixComment >
tt_content.default.prefixComment >
tt_content.text.stdWrap.prefixComment >
tt_content.text.20.prefixComment >
tt_content.textpic.20.stdWrap.prefixComment >
tt_content.table.20.stdWrap.prefixComment >
tt_content.mailform.20.stdWrap.wrap >
tt_content.menu.20.stdWrap.prefixComment >
tt_content.image.20.stdWrap.prefixComment >
tt_content.list.20.stdWrap.prefixComment >
Vielleicht kennt ja der eine oder andere von euch noch weitere Maßnahmen (z.B. Tuning-Maßnahmen für den RTE), die er in diesem Thread der Allgemeinheit zur Verfügung stellen möchte.
Über eine rege Diskussion würde ich mich sehr freuen!
Sares
Hallo Sares,
thx für die Zusammenfassung und Kommentierung
georg
Interessantes Thema. Die normalen config.* Einstellungen z.B. für XHTML etc. habe bereits immer in den Templates drinnen. Das Entfernen von Kommentaren (für den laufenden Betrieb) ist natürlich auch sinnvoll. Vielen Dank für diese Zusammenstellung!
Betrifft das Prefix Comment Flag (config.disablePrefixComment) auch die Kommentare, die z.B. von automaketemplate in den HTML Source eingefügt werden?
Soweit ich in einer Typo3 Mailing Liste gelesen habe: ja.
Ich habe jetzt testweise im zentralen Template TS disablePrefixComment auf 1 gesetzt. Dann Cache gelöscht. Seite neu geladen. Kommentare vom Automake wie <!--###LayerContent### begin --> sind aber immer noch im Source. (Typo3 4.0)
Marcus
zudem gibt es noch die extension "sourceopt", die ich im einsatz habe. damit lässt sich der quelltext auf fast die hälfte drücken. es sind keine änderungen in typoscript erforderlich.
Super Tips! Danke. Allerdings, was das XHMTL Cleaning angeht vertrau ich qcom_htmlcleaner. Ich bemüh mich, mich langsam aber sicher an XHTML Strict zu halten. Erstaunlich, wie seltener die Abweichungen von IE/Firefox dadurch werden.
slashwalker schrieb
Allerdings, was das XHMTL Cleaning angeht vertrau ich qcom_htmlcleaner.
Der ist seit Typo3 Version 4 allerdings überflüssig geworden ;-) .
(und zu 100% vertrauen konnte man ihm sowieso nie ...)
jenses schrieb
slashwalker schrieb
Allerdings, was das XHMTL Cleaning angeht vertrau ich qcom_htmlcleaner.
Der ist seit Typo3 Version 4 allerdings überflüssig geworden ;-) .
(und zu 100% vertrauen konnte man ihm sowieso nie ...)
Wieso überflüssig? Ohne den Cleaner gab es bei mir Probleme mit XHTML Strict, trotz Typo3 eigenem Cleaning!
Das könnte auch der Grund sein, weshalb deine Seite "nur" Transitional ist. Gelle 😉
Wo genau muss der TS von Sares innerhalb des Templates eingebaut werden? Vor/Nach/Im Page-Object? Falls "Im", vor/nach welchen Anweisungen (z.B. relativ zum Einbinden der HTML-Vorlage, der Style Sheets etc.)?
kriwi
kriwi schrieb
Wo genau muss der TS von Sares innerhalb des Templates eingebaut werden? Vor/Nach/Im Page-Object? Falls "Im", vor/nach welchen Anweisungen (z.B. relativ zum Einbinden der HTML-Vorlage, der Style Sheets etc.)?
kriwi
Zum Beispiel Setup ganz oben
Vor Initialisierung des Page-Objectes? Habe ich versucht ... statt der Seite kam bei der Anzeige dann eine Fehlermeldung, dass der Page-Type falsch wäre.
krwi
#angry# O.k., jetzt ging's. Der Code ist nun auch um einiges bereinigt. Allerdings bleiben das Laden des (unerwünschten) zweiten Stylesheets:
<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_e99aac0be0.css" />
und ein paar Spacer um/nach Überschriften:
<h1>Überschrift</h1><br /><img src="clear.gif" width="1" height="5" border="0" class="spacer-gif" alt="" title="" /><br />
Wie bekomme ich die noch raus?
plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE >
habe ich schon probiert - bringt nichts. Oder muss dies an anderer Stelle stehen? (Ich hab's einfach zu den anderen Tuning-Befehlen gepackt.)
kriwi
O.k. Fragen nun auch gelöst.
kriwi
Hallo Kriwi,
lässt du uns auch an deinen Erkenntnissen teilhaben?
Gruß
Andrea
O.k., also im TS des Haupttemplates steht
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/template/main/cleancode.t3d">
# DIV um jedes Inhaltselement
tt_content.stdWrap.wrap = <div class="ce">|</div>
# Default-Sprache Deutsch
page.config.sys_language_uid = 1
page.config.language = de
page.config.locale_all = de_DE
# Ziele für Links setzen
page.config.intTarget = _top
page.config.extTarget = _blank
# Default PAGE object
page = PAGE
[... Deklarationen für Inhalt der Seiten ...]
# unerwünschtes zweites Stylesheet elimenieren
plugin.tx_cssstyledcontent >
plugin.tx_veguestbook_pi1._CSS_DEFAULT_STYLE >
und cleancode.t3d sieht wie folgt aus:
#Einstellen des DocType auf XHTML Transitional
config.doctype = xhtml_trans
#XHTML Cleaning aktivieren
config.xhtml_cleaning = all
#Default Javascripts in externes File auslagern
config.removeDefaultJS = 1
config.removeDefaultJS = external
#<?xml... ?> Prolog deaktivieren
config.xmlprologue = none
#CSS Datei in externes File auslagern
config.inlineStyle2TempFile = 1
config.disablePrefixComment = 1
#RTE Tuning
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.remapTag >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.DIV.class >
#Angabe von Tags, die nicht mit einem zusätzlichen wrap umgeben werden dürfen
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList = cite, div, p, pre, h1, h2, h3, h4, h5, h6
#Entfernt die zusätzlichen CSS-Klassen
lib.stdheader.3 = LOAD_REGISTER
lib.stdheader.3.headerClass =
lib.stdheader.3.headerClass.noTrimWrap = |
lib.stdheader.stdWrap.dataWrap = |
#Standard-Headings aufräumen
lib.stdheader.stdWrap.dataWrap = |
lib.stdheader.10.1.fontTag = <h1>|</h1>
lib.stdheader.10.2.fontTag = <h2>|</h2>
lib.stdheader.10.3.fontTag = <h3>|</h3>
lib.stdheader.10.4.fontTag = <h4>|</h4>
lib.stdheader.10.5.fontTag = <h5>|</h5>
# Unterdrückt den Umbruch mit <BR>
lib.stdheader.10.stdWrap.wrap = |
# Wirft das CLEAR.GIF raus
tt_content.textpic.20.spaceBelowAbove = 0
tt_content.image.20.spaceBelowAbove = 0
tt_content.header.stdWrap.space = 0|0
tt_content.stdWrap.space = 0|0
tt_content.stdWrap.spaceBefore = 0
tt_content.stdWrap.spaceAfter = 0
lib.stdheader.stdWrap.space = 0|0
#Content Elemente aufräumen und Kommentare entfernen
tt_content.stdWrap.dataWrap >
tt_content.stdWrap.prefixComment >
tt_content.header.20.dataWrap >
tt_content.header.20.prefixComment >
tt_content.default.prefixComment >
tt_content.text.stdWrap.prefixComment >
tt_content.text.20.prefixComment >
tt_content.textpic.20.stdWrap.prefixComment >
tt_content.table.20.stdWrap.prefixComment >
tt_content.mailform.20.stdWrap.wrap >
tt_content.menu.20.stdWrap.prefixComment >
tt_content.image.20.stdWrap.prefixComment >
tt_content.list.20.stdWrap.prefixComment >
# entfernt 1-pixel CLEAR.GIF über jedem Bild mit Text
tt_content.textpic.20.noStretchAndMarginCells = 1
# entfernt 1-pixel CLEAR.GIF über jedem Bild
tt_content.image.20.noStretchAndMarginCells = 1
# Entfernen des clear.gif bzw. der Abstände nach Seitenelementen
content.headerSpace = 0|0
content.space = 0|0
# entfernt automatische Abstände
styles.content.imgtext.colSpace = 0
styles.content.imgtext.rowSpace = 0
styles.content.imgtext.textMargin = 10
# Noch ein paar <br> entfernen
styles.content.imgtext.caption.1.wrap = |
styles.content.imgtext.caption.1.spaceBefore = 0
styles.content.imgtext.caption.1.br = 0
# Rahmen bei Checkbox "Rahmen setzen" veraendern
styles.content.imgtext.borderThick = 1
styles.content.imgtext.borderColor = #000000
styles.content.imgtext.borderSelector = DIV.imgtext
Wie geschrieben, alles nicht von mir, sondern hier im Forum zusammengesucht.
kriwi
Ich benutze zusätzlich HTML-Tidy und steuere es per Typoscript mit der Extension "tstidy".
TS Tidy:
http://typo3.org/extensions/repository/view/tstidy/1.0.0/
HTML Tidy:
http://tidy.sourceforge.net/
HTML Tidy Dokumentation:
http://tidy.sourceforge.net/docs/quickref.html
Das dient aber quasi nur der Verschönerung des Codes (Zeilenumbrüche, etc.), denn die Ausgaben habe ich bereits vorher bearbeitet 😉
@kriwi:
bei mir funktioniert das leider überhaupt nicht. habe den 2. teil vom typoscript in mein template setup kopiert, aber es steht immer noch tonnenweise müll im code.
wär mir ja eigentlich egal, aber ich will dass zwischen header und inhalt eines content elements keine leerzeile ist, sondern einfach nur ein umbruch.
und das schaut im moment immer noch so aus:
<div style="margin-left:301px;"><div class="csc-textpic-text"><div class="csc-textpicHeader csc-textpicHeader-26"><h1><a href="http://www.google.ch" target="_top">WIRTSCHAFT</a></h1></div><p>Im Bereich Wirtschaft...
...
Hallo Sares,
danke für diesen Beitrag!
Viele Grüße!
Patrick
Hallo, könnte mir einer die folgenden Codezeilen näher erläutern und mir sagen was da im einzelnen passiert und warum die zeilen nötig sind?
#Entfernt die zusätzlichen CSS-Klassen
lib.stdheader.3 = LOAD_REGISTER
lib.stdheader.3.headerClass =
lib.stdheader.3.headerClass.noTrimWrap = |
lib.stdheader.stdWrap.dataWrap =
Vielen Dank im Voraus,
Alfons