1. Home
  2. Blog
  3. Showcase
  4. Contact
Blogitems
26Jan

TYPO3: Page output optimization

Posted on January 26th 2010 at 23:02 inside Extensions with 5 comments

In my opinion, TYPO3 does not generate very pretty HTML output by default. But with some tweaking we can still make something nice out of it! Follow the steps to make your TYPO3 website(s) output clean code.

Getting started

First of all I start of with cleaning the HTML output as it is. I prefer not to have the default css styled content tags in every headers etc. Just like all content wrappers and comments. To filter out some of these things, we can use the following lines of TypoScript.

Clearing basic wrappers, class and other stuff with TypoScript 

  1. # Disable the prefix comments for each CE
  2. page.config.disablePrefixComment = 1
  3.  
  4. # Clear out the "bodytext" class from all paragraphs (<p></p>)
  5. lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
  6.  
  7. # Remove the classes in all headers (H1, H2, H3 etc)
  8. lib.stdheader.stdWrap.dataWrap >
  9. lib.stdheader.3.headerClass >
  10. tt_content.stdWrap.dataWrap >
  11. tt_content.stdWrap.innerWrap.cObject.default {
  12.   10 >
  13.   15 >
  14.   20 >
  15.   30.value = |
  16. }
  17.  
  18. # Disable the baseWrap
  19. config.disableBaseWrap = 1
# Disable the prefix comments for each CE
page.config.disablePrefixComment = 1

# Clear out the "bodytext" class from all paragraphs (<p></p>)
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >

# Remove the classes in all headers (H1, H2, H3 etc)
lib.stdheader.stdWrap.dataWrap >
lib.stdheader.3.headerClass >
tt_content.stdWrap.dataWrap >
tt_content.stdWrap.innerWrap.cObject.default {
  10 >
  15 >
  20 >
  30.value = |
}

# Disable the baseWrap
config.disableBaseWrap = 1

Removing unused CSS and JavaScripts

Some extensions supply nice CSS styles, which allow you to quickly set them up. If you however want to restyle everything with your own CSS, don't forget to take it out. Another option is to just merge it with your own stylesheet. If you would remove all these styles, the CSS file that is generated in typo3temp is no longer needed, which saves you 1 HTTP request on each page load. CSS styles have to be unset for each extension that uses them. You can do so by using the following TypoScript code.

Removing unused CSS styles set by extensions 

  1. plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE >
  2. plugin.tx_indexedsearch._CSS_DEFAULT_STYLE >
  3. plugin.tx_whateverthenameofyourextensionis._CSS_DEFAULT_STYLE >
plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE >
plugin.tx_indexedsearch._CSS_DEFAULT_STYLE >
plugin.tx_whateverthenameofyourextensionis._CSS_DEFAULT_STYLE >

Additionally we can unset the default CSS and JavaScript with the following:

Remove TYPO3's default JavaScript and CSS 

  1. config.removeDefaultJS = 1
  2. config.removeDefaultCSS = 1
config.removeDefaultJS = 1
config.removeDefaultCSS = 1

By default you are able to spam-protect e-mail addresses. Perhaps this will reduce the amount of spam to your address, however I'm not that certain the it has such a big influence on really protecting your address. So if you want to remove this and save some HTML, go ahead and use the following TypoScript in your setup.

Disable the JavaScript spam protection 

  1. config.spamProtectEmailAddresses = 0
config.spamProtectEmailAddresses = 0

The next thing you probably want to get rid of is the noBlur script, you can disable this in your TMENUs but it never seems to go away completely. Read a little more down this article to see how we handle this baby :-)

Making it all tidy!

Ok so we cleaned up the HTML code that is outputted, but it still looks a little messy in the sourcecode. We can fix this by the using the sourceopt extension. It cleans the final HTML output by removing empty newlines, comments excessive tabs etc. It just creates a nice smoot HTML output. It also gives you the ability to remove the (bloody) noBlur script.

Beware to set an additional constant setting if you are using RSS output or something like powermail. Since by default sourceopt will try to reformat all output. Which my result into broken XML or JavaScript (powermail). To work around this problem, simple add this to your constants in your root template:

Disable sourceopt for anything other than a normal page 

  1. [globalVar = GP:type > 0]
  2.     sourceopt.enabled = 0
  3. [global]
[globalVar = GP:type > 0]
    sourceopt.enabled = 0
[global]

The TYPO3 header comment

Some people my find it neccesary to remove this from the top of their sourcecode, I think this is simply stupid. You are using an open-source CMS, you have to pay no license of what so ever to use it... So why remove it? You should be proud to use TYPO3 for your website ;-)

Support TYPO3! Leave the header comment!

Tags

typo3 clean html output sourceopt optimized noblur

Comments (5)

Gravatar: HenjoHenjo2010-06-23 11:11

HI Sebastiaan,



nice walkthrough of the steps to take :-)

Why not use Tidy instead of the sourceopt ext ? Tidy can be set up in the install tool.



Henjo

Gravatar: PaulPaul2010-07-13 14:10

Hmmm, tidy works great as long as you don't use powermail. Tidy breaks the javascript validation since it's trying to "htmltidy" a javascript file.



I saw at forge.typo3.org that this is a known issue for over a year now... :/

Gravatar: Sebastiaan de JongeSebastiaan de Jonge2010-07-14 10:14

This was the reason I used this extension. It also has some extras that make it easier to clean up the output, plus configuration through TypoScript.



Cheers,

Sebastiaan

Gravatar: AlexanderAlexander2011-02-25 01:43

Remove typo3temp css

Hello!
Do you have some advice for removing typo3temp css from the HTML?

Gravatar: Sebastiaan de JongeSebastiaan de Jonge2011-02-25 10:56

RE: Remove typo3temp css

Hi Alexander,
 
It depends a little on what you mean by that. Do you mean to move the CSS physically from the HTML (so to an external file)? Or remove it in general?
 
Cheers,
Sebastiaan

Your comment