Bug #20625

Optimize CSS

Added by Michiel Roos over 12 years ago. Updated almost 6 years ago.

Status:
Closed
Priority:
Should have
Category:
TypoScript
Target version:
Start date:
2009-06-17
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
4.5
PHP Version:
Tags:
Complexity:
Is Regression:
No
Sprint Focus:

Description

I was pointed to this great extension for firefox called 'page speed'.

It checks other things than YSLOW does and does more 'in depth' checking.

http://code.google.com/speed/page-speed/

It comes with some recommendations about the CSS fo css styled content:

Very inefficient rules (good to fix on any page):

  • div.csc-textpic-border div.csc-textpic-imagewrap .csc-textpic-image img Tag key with 3 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
  • div.csc-textpic div.csc-textpic-imagewrap ul Tag key with 2 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
  • div.csc-textpic div.csc-textpic-imagewrap ul li Tag key with 3 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
  • div.csc-textpic div.csc-textpic-imagewrap dl.csc-textpic-image dt Tag key with 3 descendant selectors and Class overly qualified with tag and Class overly qualified with tag and Class overly qualified with tag
  • div.csc-textpic div.csc-textpic-imagewrap dl.csc-textpic-image dd Tag key with 3 descendant selectors and Class overly qualified with tag and Class overly qualified with tag and Class overly qualified with tag
  • div.csc-textpic div.csc-textpic-imagewrap dl.csc-textpic-image dd img Tag key with 4 descendant selectors and Class overly qualified with tag and Class overly qualified with tag and Class overly qualified with tag
  • div.csc-textpic div.csc-textpic-imagewrap .csc-textpic-image img Tag key with 3 descendant selectors and Class overly qualified with tag and Class overly qualified with tag

Inefficient rules (good to fix on interactive pages):

  • div.csc-textpic img Tag key with descendant selector and Class overly qualified with tag
  • dl.csc-textpic-image dt Tag key with descendant selector and Class overly qualified with tag
  • dl.csc-textpic-image dd Tag key with descendant selector and Class overly qualified with tag

(issue imported from #M11349)


Related issues

Related to TYPO3 Core - Task #61842: Refactor CSS-Styled-Content + Content ElementsClosed2011-02-212014-08-08

Actions
#1

Updated by JMTiepo3 over 8 years ago

  • Target version deleted (0)

I would like to "bump" this bug since it seems to be very old, but it didn't get fix yet.
Actually I can't really ask for a "fix" since it's not a bug, but I would love to get 100% result on my page speed tests.

Anyways, 4 years later (2013), the issue still exists. Below the rules it nags about:

Very inefficient rules (good to fix on any page):

DIV.csc-textpic .csc-textpic-imagewrap table    Tag key with 2 descendant selectors and Class overly qualified with tag
DIV.csc-textpic .csc-textpic-imagewrap table tr td Tag key with 4 descendant selectors and Class overly qualified with tag
DIV.csc-textpic .csc-textpic-imagewrap FIGURE Tag key with 2 descendant selectors and Class overly qualified with tag
DIV.csc-textpic-border DIV.csc-textpic-imagewrap IMG Tag key with 2 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
DIV.csc-textpic .csc-textpic-imagewrap IMG Tag key with 2 descendant selectors and Class overly qualified with tag

Inefficient rules (good to fix on interactive pages):

UL.csc-uploads LI    Tag key with descendant selector and Class overly qualified with tag
UL.csc-uploads LI Tag key with descendant selector and Class overly qualified with tag
UL.csc-uploads IMG Tag key with descendant selector and Class overly qualified with tag
UL.csc-uploads SPAN Tag key with descendant selector and Class overly qualified with tag

I've come up with a solution though. I don't know if this is possible to make with the current setup, but here it goes:

Instead of using those selectors, just use the class tag like this:

<ul class="csc-uploads">
<li class="csc-uploads-li"></li>
<img class="csc-uploads-img" />
<span class="csc-uploads-span"></span>
</ul>

And use the following CSS code:

ul.csc-uploads
li.csc-uploads-li
img.csc-uploads-img
span.csc-uploads-span

The above example should fix all errors in the "inefficient rules" section.
The same can be applied, of course, to the "very inefficient rules" section.

I hope you will pay some attention to this, as I am told that inefficient rules can slow the website down with (sometimes) as much as 20ms a tag!!
Also, I think uppercase HTML is a bit oldskool.. Perhaps it's better to use small case HTML/CSS (DIV.csc-textpic => div.csc-textpic) but that's just a suggestion.

#2

Updated by Mathias Schreiber over 6 years ago

  • Description updated (diff)
  • Category set to TypoScript
  • Target version set to 7.2 (Frontend)
  • TYPO3 Version set to 4.5
  • Is Regression set to No
#3

Updated by Benjamin Kott over 6 years ago

  • Assignee set to Patrick Broens

Hey Patrick, can you have a look at this issue please while refactoring the Content Elements?

#4

Updated by Benni Mack over 6 years ago

  • Target version changed from 7.2 (Frontend) to 7.4 (Backend)
#5

Updated by Susanne Moog about 6 years ago

  • Target version changed from 7.4 (Backend) to 7.5
#6

Updated by Benni Mack almost 6 years ago

  • Status changed from New to Closed

We now have fluid_styled_conten which comes with a lot of cleaner and less CSS code. Thus, we can close this one. If not, please let me know.

Also available in: Atom PDF